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:
2026-06-25 19:38:22 +02:00
co-authored by Claude Sonnet 4.6
parent 240a42b2b7
commit 10146c62c3
+27 -16
View File
@@ -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">