@jjlmoya/utils-finance 1.34.0 → 1.36.0

package/src/tool/inflationPurchasingPower/logic.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { calculateInflationTimeline, getMilestoneYears } from './logic';
+
+describe('calculateInflationTimeline', () => {
+  it('compounds the cost equivalent and discounts unchanged cash', () => {
+    const result = calculateInflationTimeline({ startingAmount: 1000, annualInflationRate: 5, years: 10, annualCashFlow: 0, cashFlowMode: 'none' });
+    expect(result?.priceFactor).toBe(1.63);
+    expect(result?.points.at(-1)?.costEquivalent).toBe(1628.89);
+    expect(result?.points.at(-1)?.unchangedRealValue).toBe(613.91);
+    expect(result?.purchasingPowerLossPercent).toBe(38.61);
+  });
+
+  it('adds annual contributions to the nominal balance and discounts the result', () => {
+    const result = calculateInflationTimeline({ startingAmount: 1000, annualInflationRate: 2, years: 5, annualCashFlow: 200, cashFlowMode: 'contribution' });
+    expect(result?.points.at(-1)?.nominalBalance).toBe(2000);
+    expect(result?.points.at(-1)?.realBalance).toBe(1811.46);
+  });
+
+  it('stops a withdrawal scenario at zero and reports depletion', () => {
+    const result = calculateInflationTimeline({ startingAmount: 500, annualInflationRate: 2, years: 5, annualCashFlow: 200, cashFlowMode: 'withdrawal' });
+    expect(result?.points.at(-1)?.nominalBalance).toBe(0);
+    expect(result?.depletionYear).toBe(3);
+  });
+
+  it('deduplicates milestone years for short timelines', () => {
+    expect(getMilestoneYears(1)).toEqual([0, 1]);
+    expect(getMilestoneYears(4)).toEqual([0, 1, 2, 3, 4]);
+  });
+
+  it('rejects invalid rates, periods and amounts', () => {
+    expect(calculateInflationTimeline({ startingAmount: 0, annualInflationRate: 2, years: 5, annualCashFlow: 0, cashFlowMode: 'none' })).toBeNull();
+    expect(calculateInflationTimeline({ startingAmount: 1000, annualInflationRate: -100, years: 5, annualCashFlow: 0, cashFlowMode: 'none' })).toBeNull();
+    expect(calculateInflationTimeline({ startingAmount: 1000, annualInflationRate: 2, years: 5.5, annualCashFlow: 0, cashFlowMode: 'none' })).toBeNull();
+  });
+});

package/src/tool/inflationPurchasingPower/logic.ts

@@ -0,0 +1,92 @@
+export type CashFlowMode = 'none' | 'contribution' | 'withdrawal';
+
+export interface InflationPurchasingPowerInput {
+  startingAmount: number;
+  annualInflationRate: number;
+  years: number;
+  annualCashFlow: number;
+  cashFlowMode: CashFlowMode;
+}
+
+export interface InflationTimelinePoint {
+  year: number;
+  costEquivalent: number;
+  unchangedRealValue: number;
+  nominalBalance: number;
+  realBalance: number;
+}
+
+export interface InflationPurchasingPowerResult {
+  input: InflationPurchasingPowerInput;
+  priceFactor: number;
+  purchasingPowerLossPercent: number;
+  points: InflationTimelinePoint[];
+  milestones: InflationTimelinePoint[];
+  depletionYear: number | null;
+}
+
+const round = (value: number): number => Number(value.toFixed(2));
+
+function hasFiniteValues(input: InflationPurchasingPowerInput): boolean {
+  return [input.startingAmount, input.annualInflationRate, input.years, input.annualCashFlow].every(Number.isFinite);
+}
+
+function hasValidRanges(input: InflationPurchasingPowerInput): boolean {
+  return input.startingAmount > 0
+    && input.annualInflationRate > -100
+    && input.annualInflationRate <= 100
+    && Number.isInteger(input.years)
+    && input.years >= 1
+    && input.years <= 80
+    && input.annualCashFlow >= 0;
+}
+
+function hasValidCashFlowMode(input: InflationPurchasingPowerInput): boolean {
+  return ['none', 'contribution', 'withdrawal'].includes(input.cashFlowMode);
+}
+
+function isValidInput(input: InflationPurchasingPowerInput): boolean {
+  return hasFiniteValues(input) && hasValidRanges(input) && hasValidCashFlowMode(input);
+}
+
+function getNominalBalance(input: InflationPurchasingPowerInput, year: number): number {
+  const flow = input.cashFlowMode === 'contribution' ? input.annualCashFlow : -input.annualCashFlow;
+  if (input.cashFlowMode === 'none') return input.startingAmount;
+  return Math.max(0, input.startingAmount + flow * year);
+}
+
+function createPoint(input: InflationPurchasingPowerInput, year: number): InflationTimelinePoint {
+  const priceFactor = (1 + input.annualInflationRate / 100) ** year;
+  const nominalBalance = getNominalBalance(input, year);
+  return {
+    year,
+    costEquivalent: round(input.startingAmount * priceFactor),
+    unchangedRealValue: round(input.startingAmount / priceFactor),
+    nominalBalance: round(nominalBalance),
+    realBalance: round(nominalBalance / priceFactor),
+  };
+}
+
+export function getMilestoneYears(years: number): number[] {
+  return [...new Set([0, Math.round(years * 0.25), Math.round(years * 0.5), Math.round(years * 0.75), years])];
+}
+
+export function calculateInflationTimeline(input: InflationPurchasingPowerInput): InflationPurchasingPowerResult | null {
+  if (!isValidInput(input)) return null;
+  const points = Array.from({ length: input.years + 1 }, (_, year) => createPoint(input, year));
+  const milestones = getMilestoneYears(input.years)
+    .map((year) => points[year])
+    .filter((point): point is InflationTimelinePoint => point !== undefined);
+  const depletionYear = input.cashFlowMode === 'withdrawal' && input.annualCashFlow > 0
+    ? points.find((point) => point.nominalBalance === 0 && point.year > 0)?.year ?? null
+    : null;
+  const priceFactor = (1 + input.annualInflationRate / 100) ** input.years;
+  return {
+    input,
+    priceFactor: round(priceFactor),
+    purchasingPowerLossPercent: round((1 - 1 / priceFactor) * 100),
+    points,
+    milestones,
+    depletionYear,
+  };
+}

package/src/tool/inflationPurchasingPower/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { inflationPurchasingPower } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await inflationPurchasingPower.i18n[locale]?.();
+---
+
+{content?.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/inflationPurchasingPower/storage.ts

@@ -0,0 +1,29 @@
+import type { InflationPurchasingPowerInput } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-finance-inflation-purchasing-power';
+
+function isStoredState(value: Partial<InflationPurchasingPowerInput>): boolean {
+  return typeof value.startingAmount === 'number'
+    && typeof value.annualInflationRate === 'number'
+    && typeof value.years === 'number'
+    && typeof value.annualCashFlow === 'number';
+}
+
+export function loadInflationPurchasingPowerState(fallback: InflationPurchasingPowerInput): InflationPurchasingPowerInput {
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (!stored) return fallback;
+    const parsed = JSON.parse(stored) as Partial<InflationPurchasingPowerInput>;
+    if (!isStoredState(parsed)) return fallback;
+    const cashFlowMode = parsed.cashFlowMode === 'contribution' || parsed.cashFlowMode === 'withdrawal' ? parsed.cashFlowMode : 'none';
+    return { ...fallback, ...parsed, cashFlowMode };
+  } catch {
+    return fallback;
+  }
+}
+
+export function saveInflationPurchasingPowerState(state: InflationPurchasingPowerInput): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {}
+}

package/src/tool/inflationPurchasingPower/ui.ts

@@ -0,0 +1,42 @@
+export interface InflationPurchasingPowerUI extends Record<string, string> {
+  amountLabel: string;
+  amountHelp: string;
+  inflationLabel: string;
+  inflationHelp: string;
+  yearsLabel: string;
+  yearsHelp: string;
+  cashFlowLabel: string;
+  cashFlowHelp: string;
+  cashFlowModeLabel: string;
+  noCashFlowOption: string;
+  contributionOption: string;
+  withdrawalOption: string;
+  costEquivalentLabel: string;
+  realValueLabel: string;
+  nominalBalanceLabel: string;
+  purchasingPowerLossLabel: string;
+  todayLabel: string;
+  endLabel: string;
+  costLineLabel: string;
+  realLineLabel: string;
+  balanceLineLabel: string;
+  chartDescription: string;
+  chartNote: string;
+  milestoneTitle: string;
+  yearHeader: string;
+  costHeader: string;
+  realHeader: string;
+  balanceHeader: string;
+  methodTitle: string;
+  methodText: string;
+  limitationText: string;
+  emptyMessage: string;
+  contributionSummary: string;
+  withdrawalSummary: string;
+  noCashFlowSummary: string;
+  depletionWarning: string;
+  scenarioNote: string;
+  currencyHint: string;
+  yearsSuffix: string;
+  amountSuffix: string;
+}

package/src/tool/mortgageExtraPaymentPlanner/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { mortgageExtraPaymentPlanner } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await mortgageExtraPaymentPlanner.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/mortgageExtraPaymentPlanner/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Banco de España, Simulador de préstamo hipotecario o personal con amortización anticipada',
+    url: 'https://clientebancario.bde.es/pcb/es/menu-horizontal/podemosayudarte/simuladores/simulador_amortizacion_anticipada_prestamo.html',
+  },
+  {
+    name: 'Consumer Financial Protection Bureau, How does paying down a mortgage work?',
+    url: 'https://www.consumerfinance.gov/ask-cfpb/how-does-paying-down-a-mortgage-work-en-1943/',
+  },
+];

package/src/tool/mortgageExtraPaymentPlanner/component.astro

@@ -0,0 +1,138 @@
+---
+import type { KnownLocale } from '../../types';
+import { calculateMortgage, getDefaultCurrency, type MortgageInputs } from './logic';
+import type { MortgageExtraPaymentPlannerUI } from './ui';
+import './mortgage-amortization-extra-payment-planner.css';
+
+interface Props {
+  ui: MortgageExtraPaymentPlannerUI;
+  locale?: KnownLocale;
+}
+
+const { ui, locale = 'en' } = Astro.props;
+const initialCurrency = getDefaultCurrency(locale);
+const initial: MortgageInputs = {
+  principal: 250000,
+  annualRate: 3.5,
+  termYears: 25,
+  frequency: 'monthly',
+  recurringExtra: 150,
+  oneOffExtra: 5000,
+  oneOffPeriod: 12,
+  startDate: '2026-09-01',
+  currency: initialCurrency,
+};
+const initialResult = calculateMortgage(initial);
+const config = JSON.stringify({ ui, initial, locale });
+const currencyOptions = Object.entries(ui.currencyOptions) as [string, string][];
+const frequencyOptions = Object.entries(ui.frequencyOptions) as [string, string][];
+---
+
+<div class="mortgage-planner" data-mortgage-planner>
+  <form class="mortgage-controls" aria-label="Mortgage amortization inputs">
+    <div class="mortgage-currency-bar">
+      <div>
+        <span class="mortgage-eyebrow">{ui.currencyLabel}</span>
+        <p class="mortgage-currency-help">{ui.currencyHelp}</p>
+      </div>
+      <div class="mortgage-field mortgage-currency-control">
+        <label>{ui.currencyLabel}</label>
+        <div class="mortgage-select" data-mortgage-select="currency" data-value={initial.currency}>
+          <button type="button" class="mortgage-select-trigger" data-mortgage-trigger aria-haspopup="listbox" aria-expanded="false">{ui.currencyOptions[initial.currency]}</button>
+          <div class="mortgage-select-menu" data-mortgage-menu role="listbox" hidden>
+            {currencyOptions.map(([value, label]) => <button type="button" data-mortgage-option data-value={value} role="option" aria-selected={value === initial.currency}>{label}</button>)}
+          </div>
+        </div>
+      </div>
+      <strong class="mortgage-status" data-mortgage-status>{initialResult ? `0 ${ui.periodsSavedLabel}` : ui.invalidInputMessage}</strong>
+    </div>
+
+    <div class="mortgage-input-grid">
+      <div class="mortgage-field mortgage-field-major">
+        <label for="mortgage-principal">{ui.principalLabel}</label>
+        <input id="mortgage-principal" data-mortgage-input="principal" type="number" min="0.01" step="0.01" value={initial.principal} inputmode="decimal" />
+        <span>{ui.principalHelp}</span>
+      </div>
+      <div class="mortgage-field">
+        <label for="mortgage-rate">{ui.annualRateLabel}</label>
+        <input id="mortgage-rate" data-mortgage-input="annualRate" type="number" min="0" max="100" step="0.01" value={initial.annualRate} inputmode="decimal" />
+        <span>{ui.annualRateHelp}</span>
+      </div>
+      <div class="mortgage-field">
+        <label for="mortgage-term">{ui.termLabel}</label>
+        <input id="mortgage-term" data-mortgage-input="termYears" type="number" min="0.25" max="100" step="0.25" value={initial.termYears} inputmode="decimal" />
+        <span>{ui.termHelp}</span>
+      </div>
+      <div class="mortgage-field">
+        <label>{ui.frequencyLabel}</label>
+        <div class="mortgage-select" data-mortgage-select="frequency" data-value={initial.frequency}>
+          <button type="button" class="mortgage-select-trigger" data-mortgage-trigger aria-haspopup="listbox" aria-expanded="false">{ui.frequencyOptions[initial.frequency]}</button>
+          <div class="mortgage-select-menu" data-mortgage-menu role="listbox" hidden>
+            {frequencyOptions.map(([value, label]) => <button type="button" data-mortgage-option data-value={value} role="option" aria-selected={value === initial.frequency}>{label}</button>)}
+          </div>
+        </div>
+      </div>
+      <div class="mortgage-field">
+        <label for="mortgage-date">{ui.startDateLabel}</label>
+        <input id="mortgage-date" data-mortgage-input="startDate" type="date" value={initial.startDate} />
+        <span>{ui.startDateHelp}</span>
+      </div>
+    </div>
+
+    <details class="mortgage-extra-details">
+      <summary>{ui.extraSectionTitle}</summary>
+      <div class="mortgage-extra-grid">
+        <div class="mortgage-field">
+          <label for="mortgage-recurring-extra">{ui.recurringExtraLabel}</label>
+          <input id="mortgage-recurring-extra" data-mortgage-input="recurringExtra" type="number" min="0" step="0.01" value={initial.recurringExtra} inputmode="decimal" />
+          <span>{ui.recurringExtraHelp}</span>
+        </div>
+        <div class="mortgage-field">
+          <label for="mortgage-one-off-extra">{ui.oneOffExtraLabel}</label>
+          <input id="mortgage-one-off-extra" data-mortgage-input="oneOffExtra" type="number" min="0" step="0.01" value={initial.oneOffExtra} inputmode="decimal" />
+          <span>{ui.oneOffExtraHelp}</span>
+        </div>
+        <div class="mortgage-field">
+          <label for="mortgage-one-off-period">{ui.oneOffPeriodLabel}</label>
+          <input id="mortgage-one-off-period" data-mortgage-input="oneOffPeriod" type="number" min="1" step="1" value={initial.oneOffPeriod} inputmode="numeric" />
+          <span>{ui.oneOffPeriodHelp}</span>
+        </div>
+      </div>
+    </details>
+  </form>
+
+  <section class="mortgage-output" aria-live="polite">
+    <div class="mortgage-output-heading">
+      <span class="mortgage-eyebrow">{ui.outputTitle}</span>
+      <span class="mortgage-output-currency" data-mortgage-output-currency>{ui.currencySymbols[initial.currency]} {initial.currency}</span>
+    </div>
+    <div class="mortgage-output-grid">
+      <div class="mortgage-scene" data-mortgage-scene>
+        <div class="mortgage-initial-scene" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span></div>
+      </div>
+      <div class="mortgage-results" data-mortgage-results>
+        {initialResult && <div class="mortgage-static-result"><span>{ui.regularPaymentLabel}</span><strong>{new Intl.NumberFormat(locale, { style: 'currency', currency: initial.currency }).format(initialResult.regularPayment)}</strong></div>}
+      </div>
+    </div>
+    <p class="mortgage-empty" data-mortgage-empty hidden>{ui.emptyMessage}</p>
+    <div class="mortgage-annual-wrap">
+      <div class="mortgage-annual-heading"><h2>{ui.annualScheduleTitle}</h2><span>{ui.currencyLabel}</span></div>
+      <div class="mortgage-annual-table-scroll" data-mortgage-annual></div>
+    </div>
+  </section>
+
+  <details class="mortgage-method">
+    <summary>{ui.formulaTitle}</summary>
+    <p>{ui.formulaText}</p>
+    <p class="mortgage-risk-note">{ui.riskNote}</p>
+  </details>
+</div>
+
+<script is:inline type="application/json" data-mortgage-config set:html={config}></script>
+<script>
+  import { initMortgagePlanner } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-mortgage-planner]');
+  const configElement = document.querySelector<HTMLScriptElement>('[data-mortgage-config]');
+  if (root && configElement?.textContent) initMortgagePlanner(root, JSON.parse(configElement.textContent));
+</script>

package/src/tool/mortgageExtraPaymentPlanner/controller.ts

@@ -0,0 +1,150 @@
+import { calculateMortgage, convertCurrencyAmount, type CurrencyCode, type MortgageFrequency, type MortgageInputs } from './logic';
+import { renderMortgageViews } from './dom-views';
+import { readMortgageState, writeMortgageState } from './storage';
+import type { MortgageExtraPaymentPlannerUI } from './ui';
+
+interface MortgageConfig {
+  ui: MortgageExtraPaymentPlannerUI;
+  initial: MortgageInputs;
+  locale: string;
+}
+
+function fieldValue(root: HTMLElement, key: string): string {
+  return root.querySelector<HTMLInputElement>(`[data-mortgage-input="${key}"]`)?.value ?? '';
+}
+
+function numberValue(root: HTMLElement, key: string): number {
+  const value = Number(fieldValue(root, key));
+  return Number.isFinite(value) ? value : 0;
+}
+
+function setInput(root: HTMLElement, key: string, value: string | number): void {
+  const input = root.querySelector<HTMLInputElement>(`[data-mortgage-input="${key}"]`);
+  if (input) input.value = `${value}`;
+}
+
+function selectedValue(root: HTMLElement, key: string, fallback: string): string {
+  return root.querySelector<HTMLElement>(`[data-mortgage-select="${key}"]`)?.dataset.value ?? fallback;
+}
+
+function readInputs(root: HTMLElement, state: MortgageInputs): MortgageInputs {
+  return {
+    ...state,
+    principal: numberValue(root, 'principal'),
+    annualRate: numberValue(root, 'annualRate'),
+    termYears: numberValue(root, 'termYears'),
+    recurringExtra: numberValue(root, 'recurringExtra'),
+    oneOffExtra: numberValue(root, 'oneOffExtra'),
+    oneOffPeriod: numberValue(root, 'oneOffPeriod'),
+    startDate: fieldValue(root, 'startDate'),
+    frequency: selectedValue(root, 'frequency', state.frequency) as MortgageFrequency,
+    currency: selectedValue(root, 'currency', state.currency) as CurrencyCode,
+  };
+}
+
+function closeSelects(root: HTMLElement): void {
+  root.querySelectorAll<HTMLElement>('[data-mortgage-menu]').forEach((menu) => {
+    menu.hidden = true;
+    menu.previousElementSibling?.setAttribute('aria-expanded', 'false');
+  });
+}
+
+function selectedLabel(ui: MortgageExtraPaymentPlannerUI, key: string, value: string): string {
+  if (key === 'frequency') return ui.frequencyOptions[value as MortgageFrequency] ?? value;
+  return ui.currencyOptions[value as CurrencyCode] ?? value;
+}
+
+function syncSelect(root: HTMLElement, ui: MortgageExtraPaymentPlannerUI, key: string, value: string): void {
+  const select = root.querySelector<HTMLElement>(`[data-mortgage-select="${key}"]`);
+  if (!select) return;
+  select.dataset.value = value;
+  const trigger = select.querySelector<HTMLButtonElement>('[data-mortgage-trigger]');
+  if (trigger) trigger.textContent = selectedLabel(ui, key, value);
+  select.querySelectorAll<HTMLButtonElement>('[data-mortgage-option]').forEach((option) => {
+    const active = option.dataset.value === value;
+    option.classList.toggle('is-active', active);
+    option.setAttribute('aria-selected', `${active}`);
+  });
+}
+
+function syncCurrency(root: HTMLElement, ui: MortgageExtraPaymentPlannerUI, currency: CurrencyCode): void {
+  const outputCurrency = root.querySelector<HTMLElement>('[data-mortgage-output-currency]');
+  if (outputCurrency) outputCurrency.textContent = `${ui.currencySymbols[currency]} ${currency}`;
+}
+
+function convertMonetaryInputs(root: HTMLElement, from: CurrencyCode, to: CurrencyCode): void {
+  if (from === to) return;
+  const factor = convertCurrencyAmount(1, from, to);
+  ['principal', 'recurringExtra', 'oneOffExtra'].forEach((key) => {
+    const value = numberValue(root, key);
+    setInput(root, key, Number((value * factor).toFixed(2)));
+  });
+}
+
+function bindSelect(root: HTMLElement, key: string, onChange: (value: string) => void): void {
+  const select = root.querySelector<HTMLElement>(`[data-mortgage-select="${key}"]`);
+  const trigger = select?.querySelector<HTMLButtonElement>('[data-mortgage-trigger]');
+  const menu = select?.querySelector<HTMLElement>('[data-mortgage-menu]');
+  if (!select || !trigger || !menu) return;
+  trigger.addEventListener('click', () => {
+    const shouldOpen = menu.hidden;
+    closeSelects(root);
+    menu.hidden = !shouldOpen;
+    trigger.setAttribute('aria-expanded', `${shouldOpen}`);
+  });
+  trigger.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      menu.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+    }
+  });
+  menu.querySelectorAll<HTMLButtonElement>('[data-mortgage-option]').forEach((option) => {
+    option.addEventListener('click', () => {
+      onChange(option.dataset.value ?? '');
+      menu.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.focus();
+    });
+  });
+}
+
+function bindInputs(root: HTMLElement, update: () => void): void {
+  root.querySelectorAll<HTMLInputElement>('[data-mortgage-input]').forEach((input) => {
+    input.addEventListener('input', update);
+    input.addEventListener('change', update);
+  });
+}
+
+function syncAll(root: HTMLElement, state: MortgageInputs, ui: MortgageExtraPaymentPlannerUI): void {
+  ['principal', 'annualRate', 'termYears', 'recurringExtra', 'oneOffExtra', 'oneOffPeriod', 'startDate'].forEach((key) => setInput(root, key, state[key as keyof MortgageInputs] as string | number));
+  syncSelect(root, ui, 'frequency', state.frequency);
+  syncSelect(root, ui, 'currency', state.currency);
+  syncCurrency(root, ui, state.currency);
+}
+
+export function initMortgagePlanner(root: HTMLElement, config: MortgageConfig): void {
+  let state: MortgageInputs = { ...config.initial, ...readMortgageState(config.locale) };
+  const update = () => {
+    state = readInputs(root, state);
+    writeMortgageState(state, config.locale);
+    syncCurrency(root, config.ui, state.currency);
+    const result = calculateMortgage(state);
+    renderMortgageViews(root, result ? { result, inputs: state, ui: config.ui, locale: config.locale } : null);
+    const status = root.querySelector<HTMLElement>('[data-mortgage-status]');
+    if (status) status.textContent = result ? `${result.periodsSaved} ${config.ui.periodsSavedLabel}` : config.ui.invalidInputMessage;
+  };
+  syncAll(root, state, config.ui);
+  bindInputs(root, update);
+  bindSelect(root, 'frequency', (value) => { state.frequency = value as MortgageFrequency; syncSelect(root, config.ui, 'frequency', value); update(); });
+  bindSelect(root, 'currency', (value) => {
+    const nextCurrency = value as CurrencyCode;
+    convertMonetaryInputs(root, state.currency, nextCurrency);
+    state.currency = nextCurrency;
+    syncSelect(root, config.ui, 'currency', value);
+    update();
+  });
+  document.addEventListener('click', (event) => {
+    if (!root.contains(event.target as Node)) closeSelects(root);
+  });
+  update();
+}

package/src/tool/mortgageExtraPaymentPlanner/currency-defaults.ts

@@ -0,0 +1,25 @@
+import type { CurrencyCode } from './logic';
+
+export const DEFAULT_CURRENCY_BY_LOCALE: Record<string, CurrencyCode> = {
+  'en-au': 'AUD',
+  'en-ca': 'CAD',
+  'en-gb': 'GBP',
+  'en-in': 'INR',
+  'fr-ca': 'CAD',
+  'pt-br': 'BRL',
+  de: 'EUR',
+  en: 'USD',
+  es: 'EUR',
+  fr: 'EUR',
+  id: 'IDR',
+  it: 'EUR',
+  ja: 'JPY',
+  ko: 'KRW',
+  nl: 'EUR',
+  pl: 'PLN',
+  pt: 'EUR',
+  ru: 'RUB',
+  sv: 'SEK',
+  tr: 'TRY',
+  zh: 'CNY',
+};