Format currency input with commas in household input

src/api/language.js

@@ -48,14 +48,13 @@ export function cardinal(number) {
   return number + (suffixes[(rem - 20) % 10] || suffixes[rem] || suffixes[0]);
 }
 
-export function currencyString(number, metadata, maximumFractionDigits) {
-  return number.toLocaleString("en-US", {
-    style: "currency",
-    currency: metadata.countryId === "uk" ? "GBP" : "USD",
-    maximumFractionDigits: maximumFractionDigits,
-  });
+// returns the Unicode locale identifier for the country id in the metadata
+export function localeCode(countryId) {
+  return countryId === "uk" ? "en-GB" : "en-US";
 }
 
-export function localeString(metadata) {
-  return metadata.countryId === "uk" ? "en" : "en-US";
+// returns the ISO 4217 currency codes for the currency for the country id in
+// the metadata
+export function currencyCode(countryId) {
+  return countryId === "uk" ? "GBP" : "USD";
 }

src/pages/household/input/VariableEditor.jsx

@@ -1,5 +1,5 @@
 import { useSearchParams } from "react-router-dom";
-import { capitalize } from "../../../api/language";
+import { capitalize, localeCode } from "../../../api/language";
 import {
   currencyMap,
   getNewHouseholdId,
@@ -231,11 +231,22 @@ function HouseholdVariableEntityInput(props) {
         style={{
           width: mobile ? 150 : 200,
         }}
-        addonBefore={isCurrency ? currencyMap[variable.unit] : undefined}
-        min={isCurrency ? 0 : undefined}
-        precision={variable.valueType === "float" ? 2 : undefined}
+        {...(isCurrency
+          ? {
+              addonBefore: currencyMap[variable.unit],
+            }
+          : {})}
+        {...(variable.valueType === "float"
+          ? {
+              formatter: (value, {userTyping}) =>
+                (+value).toLocaleString(localeCode(metadata.countryId), {
+                  minimumFractionDigits: !userTyping && 2,
+                  maximumFractionDigits: 2,
+                }),
+            }
+          : {})}
         defaultValue={defaultValue}
-        autoFocus={true}
+        autoFocus
         onChange={submitValue}
       />
     );

src/pages/policy/output/AverageImpactByDecile.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import Plot from "react-plotly.js";
 import { ChartLogo } from "../../../api/charts";
-import { cardinal, currencyString, localeString } from "../../../api/language";
+import { cardinal, localeCode, currencyCode } from "../../../api/language";
 import { formatVariableValue } from "../../../api/variables";
 import HoverCard, { HoverCardContext } from "../../../layout/HoverCard";
 import useMobile from "../../../layout/Responsive";
@@ -33,7 +33,13 @@ export default function AverageImpactByDecile(props) {
                 value < 0 ? style.colors.DARK_GRAY : style.colors.BLUE,
               ),
             },
-            text: yArray.map((value) => currencyString(value, metadata, 0)),
+            text: yArray.map((value) =>
+              value.toLocaleString(localeCode(metadata.countryId), {
+                style: "currency",
+                currency: currencyCode(metadata.countryId),
+                maximumFractionDigits: 0,
+              }),
+            ),
             textangle: 0,
             ...(useHoverCard
               ? {
@@ -102,7 +108,7 @@ export default function AverageImpactByDecile(props) {
         config={{
           displayModeBar: false,
           responsive: true,
-          locale: localeString(metadata),
+          locale: localeCode(metadata.countryId),
         }}
         style={{
           width: "100%",

src/pages/policy/output/AverageImpactByWealthDecile.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import Plot from "react-plotly.js";
 import { ChartLogo } from "../../../api/charts";
-import { cardinal, currencyString, localeString } from "../../../api/language";
+import { cardinal, localeCode, currencyCode } from "../../../api/language";
 import { formatVariableValue } from "../../../api/variables";
 import HoverCard, { HoverCardContext } from "../../../layout/HoverCard";
 import useMobile from "../../../layout/Responsive";
@@ -33,7 +33,13 @@ export default function AverageImpactByWealthDecile(props) {
                 value < 0 ? style.colors.DARK_GRAY : style.colors.BLUE,
               ),
             },
-            text: yArray.map((value) => currencyString(value, metadata, 0)),
+            text: yArray.map((value) =>
+              value.toLocaleString(localeCode(metadata.countryId), {
+                style: "currency",
+                currency: currencyCode(metadata.countryId),
+                maximumFractionDigits: 0,
+              }),
+            ),
             textangle: 0,
             ...(useHoverCard
               ? {
@@ -102,7 +108,7 @@ export default function AverageImpactByWealthDecile(props) {
         config={{
           displayModeBar: false,
           responsive: true,
-          locale: localeString(metadata),
+          locale: localeCode(metadata.countryId),
         }}
         style={{
           width: "100%",

src/pages/policy/output/BudgetaryImpact.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import Plot from "react-plotly.js";
 import { ChartLogo } from "../../../api/charts";
-import { aggregateCurrency, localeString } from "../../../api/language";
+import { aggregateCurrency, localeCode } from "../../../api/language";
 import HoverCard, { HoverCardContext } from "../../../layout/HoverCard";
 import useMobile from "../../../layout/Responsive";
 import DownloadableScreenshottable from "./DownloadableScreenshottable";
@@ -156,7 +156,7 @@ export default function BudgetaryImpact(props) {
         config={{
           displayModeBar: false,
           responsive: true,
-          locale: localeString(metadata),
+          locale: localeCode(metadata.countryId),
         }}
         style={{
           width: "100%",

src/pages/policy/output/DetailedBudgetaryImpact.jsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import Plot from "react-plotly.js";
 import { ChartLogo } from "../../../api/charts";
-import { aggregateCurrency, localeString } from "../../../api/language";
+import { aggregateCurrency, localeCode } from "../../../api/language";
 import HoverCard, { HoverCardContext } from "../../../layout/HoverCard";
 import useMobile from "../../../layout/Responsive";
 import Screenshottable from "../../../layout/Screenshottable";
@@ -129,7 +129,7 @@ export default function DetailedBudgetaryImpact(props) {
         config={{
           displayModeBar: false,
           responsive: true,
-          locale: localeString(metadata),
+          locale: localeCode(metadata.countryId),
         }}
         style={{
           width: "100%",

src/plotly_locales/locale-en.js → src/plotly_locales/locale-en-gb.js

@@ -4,7 +4,7 @@
 
 module.exports = {
   moduleType: "locale",
-  name: "en",
+  name: "en-GB",
   dictionary: {
     "Click to enter Colorscale title": "Click to enter Colourscale title",
   },

src/redesign/components/PolicyEngine.jsx

@@ -20,7 +20,7 @@ import Header from "./Header";
 import Testimonials from "./Testimonials";
 import CalculatorInterstitial from "./CalculatorInterstitial";
 import CitizensEconomicCouncil from "./CitizensEconomicCouncil";
-import loc_en from "../../plotly_locales/locale-en.js";
+import loc_en_gb from "../../plotly_locales/locale-en-gb.js";
 import loc_en_us from "../../plotly_locales/locale-en-us.js";
 import APIDocumentationPage from "./APIDocumentationPage";
 import CookieConsent from "layout/CookieConsent";
@@ -40,7 +40,7 @@ function ScrollToTop() {
 
 export default function PolicyEngine({ pathname }) {
   var Plotly = require("plotly.js/dist/plotly.js");
-  Plotly.register(loc_en);
+  Plotly.register(loc_en_gb);
   Plotly.register(loc_en_us);
   const COUNTRIES = ["us", "uk", "ca", "ng", "il"];