fix: translate type/frequency in deposit page recap via entityLabel+FREQUENCY_LABEL
Values were stored as stable Swedish IDs ('Bolag', 'Engångs') but rendered raw.
Now resolved through entityLabel()/FREQUENCY_LABEL + t() at render time so
the recap panel respects the active locale on every re-render.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,10 @@ import { useEffect, useState } from "react";
|
||||
import { OrderStepper } from "@/components/order-stepper";
|
||||
import { useT } from "@/components/locale-provider";
|
||||
import { useReveal } from "@/hooks/use-reveal";
|
||||
import { formatSEK, computeEstimate, type Estimate } from "@/lib/data";
|
||||
import {
|
||||
formatSEK, computeEstimate, entityLabel, FREQUENCY_LABEL,
|
||||
type Estimate, type EntityType, type Frequency,
|
||||
} from "@/lib/data";
|
||||
|
||||
const FALLBACK: Estimate = computeEstimate({
|
||||
markets: ["SE", "NO", "DK", "FI"],
|
||||
@@ -50,7 +53,9 @@ const RECAP_LABELS: Record<string, { en: string; sv: string }> = {
|
||||
export default function DepositPage() {
|
||||
const t = useT();
|
||||
const [est, setEst] = useState<Estimate>(FALLBACK);
|
||||
const [recap, setRecap] = useState<Record<string, string>>({});
|
||||
const [recap, setRecap] = useState<{ markets: string; type: EntityType; volume: string; frequency: Frequency }>({
|
||||
markets: "SE · NO · DK · FI", type: "Bolag", volume: "5 000", frequency: "Engångs",
|
||||
});
|
||||
const [orderId, setOrderId] = useState<string | null>(null);
|
||||
const [paying, setPaying] = useState(false);
|
||||
const reveal = useReveal<HTMLDivElement>();
|
||||
@@ -64,9 +69,9 @@ export default function DepositPage() {
|
||||
if (o.est) setEst(o.est);
|
||||
setRecap({
|
||||
markets: (o.markets || []).join(" · "),
|
||||
type: o.type,
|
||||
type: (o.type as EntityType) || "Bolag",
|
||||
volume: new Intl.NumberFormat("sv-SE").format(o.volume || 0),
|
||||
frequency: o.frequency,
|
||||
frequency: (o.frequency as Frequency) || "Engångs",
|
||||
});
|
||||
}
|
||||
} catch {}
|
||||
@@ -86,9 +91,9 @@ export default function DepositPage() {
|
||||
const c = o.config || {};
|
||||
setRecap({
|
||||
markets: (c.markets || []).join(" · "),
|
||||
type: c.type,
|
||||
type: (c.type as EntityType) || "Bolag",
|
||||
volume: new Intl.NumberFormat("sv-SE").format(c.volume || 0),
|
||||
frequency: c.frequency,
|
||||
frequency: (c.frequency as Frequency) || "Engångs",
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
@@ -234,16 +239,22 @@ export default function DepositPage() {
|
||||
{t({ en: "Your order", sv: "Din beställning" })}
|
||||
</p>
|
||||
<dl className="divide-y divide-border">
|
||||
{Object.entries(recap).map(([k, v]) => (
|
||||
<div key={k} className="flex items-center justify-between px-4 py-3">
|
||||
<dt className="font-mono text-[10.5px] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{RECAP_LABELS[k] ? t(RECAP_LABELS[k]) : k}
|
||||
</dt>
|
||||
<dd className="max-w-[60%] truncate text-right font-mono text-xs tracking-[-0.01em]">
|
||||
{v || "—"}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<dt className="font-mono text-[10.5px] uppercase tracking-[0.1em] text-muted-foreground">{t(RECAP_LABELS.markets)}</dt>
|
||||
<dd className="max-w-[60%] truncate text-right font-mono text-xs tracking-[-0.01em]">{recap.markets || "—"}</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<dt className="font-mono text-[10.5px] uppercase tracking-[0.1em] text-muted-foreground">{t(RECAP_LABELS.type)}</dt>
|
||||
<dd className="max-w-[60%] truncate text-right font-mono text-xs tracking-[-0.01em]">{t(entityLabel(recap.type))}</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<dt className="font-mono text-[10.5px] uppercase tracking-[0.1em] text-muted-foreground">{t(RECAP_LABELS.volume)}</dt>
|
||||
<dd className="max-w-[60%] truncate text-right font-mono text-xs tracking-[-0.01em]">{recap.volume || "—"}</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<dt className="font-mono text-[10.5px] uppercase tracking-[0.1em] text-muted-foreground">{t(RECAP_LABELS.frequency)}</dt>
|
||||
<dd className="max-w-[60%] truncate text-right font-mono text-xs tracking-[-0.01em]">{t(FREQUENCY_LABEL[recap.frequency] ?? { en: recap.frequency, sv: recap.frequency })}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="border-t border-border p-4">
|
||||
|
||||
Reference in New Issue
Block a user