diff --git a/locales/en/index.yml b/locales/en/index.yml index 77643ebfc65..982f3c1e14a 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -28,6 +28,7 @@ global: question: "?" asterisk: "*" localization: + delimiterSeparator: "," decimalSeparator: "." date: today: "today" diff --git a/locales/it/index.yml b/locales/it/index.yml index d74eff8b8cf..edce41eea48 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -28,6 +28,7 @@ global: question: "?" asterisk: "*" localization: + delimiterSeparator: "." decimalSeparator: "," date: today: "oggi" diff --git a/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx b/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx index 996329e0ac9..69b66a57f03 100644 --- a/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx +++ b/ts/features/bonus/bpd/components/bpdCardComponent/BpdCardComponent.tsx @@ -177,7 +177,9 @@ const statusClosedHandler = (props: Props): GraphicalState => { totalAmount.transactionNumber < period.minTransactionNumber && !isInGracePeriod ? ["0", "00"] - : formatNumberAmount(props.totalAmount.totalCashback).split(","), + : formatNumberAmount(props.totalAmount.totalCashback).split( + I18n.t("global.localization.decimalSeparator") + ), isInGracePeriod, // TODO: Add supercashback business logic statusBadge: isInGracePeriod @@ -208,7 +210,9 @@ const statusActiveHandler = (props: Props): GraphicalState => { label: I18n.t("bonus.bpd.details.card.status.active") }, showLock: totalAmount.transactionNumber < period.minTransactionNumber, - amount: formatNumberAmount(props.totalAmount.totalCashback).split(",") + amount: formatNumberAmount(props.totalAmount.totalCashback).split( + I18n.t("global.localization.decimalSeparator") + ) }; }; @@ -221,7 +225,9 @@ const statusInactiveHandler = (props: Props): GraphicalState => ({ label: I18n.t("bonus.bpd.details.card.status.inactive") }, showLock: true, - amount: formatNumberAmount(props.totalAmount.totalCashback).split(",") + amount: formatNumberAmount(props.totalAmount.totalCashback).split( + I18n.t("global.localization.decimalSeparator") + ) }); const statusHandlersMap = new Map< @@ -274,7 +280,7 @@ export const BpdCardComponent: React.FunctionComponent = ( {"€ "} - {amount[0]}, + {`${amount[0]}${I18n.t("global.localization.decimalSeparator")}`} {amount[1]} @@ -359,7 +365,9 @@ export const BpdCardComponent: React.FunctionComponent = ( > {"€ "} - {amount[0]}, + {`${amount[0]}${I18n.t( + "global.localization.decimalSeparator" + )}`} {amount[1]} diff --git a/ts/utils/__tests__/stringBuilder.test.ts b/ts/utils/__tests__/stringBuilder.test.ts index a410b2c0882..683c82bc076 100644 --- a/ts/utils/__tests__/stringBuilder.test.ts +++ b/ts/utils/__tests__/stringBuilder.test.ts @@ -1,17 +1,42 @@ import { entries } from "lodash"; +import { Locales } from "../../../locales/locales"; +import { setLocale } from "../../i18n"; import { formatNumberAmount } from "../stringBuilder"; +const valuesEN = { + "10.00": 10, + "0.30": 0.3, + "0.12": 0.1 + 0.02, + "100.99": 100.99, + "102.00": 101.999999, // round to the appropriate 2-decimals number + "10.50": 10.5001, + "1,000.50": 1000.5 +}; + +beforeAll(() => setLocale("en" as Locales)); + +describe("amountBuilder", () => { + it("should render amounts correctly for EN language", async () => { + entries(valuesEN).forEach(([k, v]) => + expect(formatNumberAmount(v)).toEqual(k) + ); + }); +}); + +const valuesIT = { + "10,00": 10, + "0,30": 0.3, + "0,12": 0.1 + 0.02, + "100,99": 100.99, + "102,00": 101.999999, // round to the appropriate 2-decimals number + "10,50": 10.5001, + "1.000,50": 1000.5 +}; + describe("amountBuilder", () => { - it("should render amounts correctly", async () => { - const values = { - "10.00": 10, - "0.30": 0.3, - "0.12": 0.1 + 0.02, - "100.99": 100.99, - "102.00": 101.999999, // round to the appropriate 2-decimals number - "10.50": 10.5001 - }; - entries(values).forEach(([k, v]) => + it("should render amounts correctly for IT language", async () => { + setLocale("it" as Locales); + entries(valuesIT).forEach(([k, v]) => expect(formatNumberAmount(v)).toEqual(k) ); }); diff --git a/ts/utils/stringBuilder.ts b/ts/utils/stringBuilder.ts index bffd927adac..25c42c42a50 100644 --- a/ts/utils/stringBuilder.ts +++ b/ts/utils/stringBuilder.ts @@ -19,6 +19,7 @@ export const formatNumberAmount = ( ): string => I18n.toCurrency(amount, { precision: DISPLAYED_DIGITS, + delimiter: I18n.t("global.localization.delimiterSeparator"), separator: I18n.t("global.localization.decimalSeparator"), format: displayCurrency ? "€ %n" : "%n" });