feat(goals/stepper+chart): Step 2 derived projection + JS i18n + Intl.NumberFormat

B — Step 2 of the create stepper used to echo Step 1 fields back at
the user in three labelled rows (Funding accounts: 2 · $123,456 balance;
Suggested monthly: $1,003/mo over 12 months). Replaces those rows with
a single derived sentence:

  "Save $1,003/mo across 2 accounts to hit it on time."

If no target date is set: "Set a target date to project a finish line."
The previous "Suggested monthly" + "Funding accounts" rows are dropped;
review block shows only Name, "$12,000 by May 11 2027", and the
derived insight sentence.

L — All hard-coded English templates + currency symbols in the JS
controllers go through Stimulus values now:

- goal_stepper_controller: new {currency, summaryWithDate, summaryNoDate,
  accountCountOne, accountCountOther, suggestedWithDate, suggestedNoDate}
  values. Money formatted via Intl.NumberFormat(undefined, { style:
  "currency", currency: this.currencyValue, maximumFractionDigits: 0 }).
- goal_projection_chart_controller: _fmtMoney upgraded to Intl.NumberFormat
  (was $/€/£ ternary fallback that lost JPY/INR/CHF/...).

Locale: new goals.form_stepper.step2.review.{summary_*,account_count,
suggested_*}. Old funding_accounts / suggested_monthly keys retained
(unused by the new ERB) so any translator paths in flight don't break.

Verified live via Playwright: step-2 review reads "Save $1,003/mo
across 2 accounts to hit it on time." for a $12,000 / 12-month / 2-
account goal.
This commit is contained in:
Guillem Arias
2026-05-11 20:42:13 +02:00
parent e03204bb96
commit 3fa762289a
4 changed files with 63 additions and 36 deletions

View File

@@ -399,8 +399,16 @@ export default class extends Controller {
}
_fmtMoney(amount, currency) {
const symbol = currency === "EUR" ? "€" : currency === "GBP" ? "£" : "$";
return `${symbol}${Math.round(amount).toLocaleString()}`;
try {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency: currency || "USD",
maximumFractionDigits: 0,
}).format(amount);
} catch {
const symbol = currency === "EUR" ? "€" : currency === "GBP" ? "£" : "$";
return `${symbol}${Math.round(amount).toLocaleString()}`;
}
}
_fmtMoneyShort(amount, currency) {