fix(Bonus Pagamenti Digitali): [#175700724] Fixes wrong format of bpd…

… amount (#2376) * [#175700724] Fixes wrong formatting of bpd amount * [#175700724] Fixes currency convertion
pagopa · Nov 16, 2020 · 1d6183b · 1d6183b
1 parent bf78f97
commit 1d6183b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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<Props> = (
           <Text bold={true} white={true} style={[styles.amountTextBaseFull]}>
             {"€ "}
             <Text white={true} style={styles.amountTextUpperFull}>
-              {amount[0]},
+              {`${amount[0]}${I18n.t("global.localization.decimalSeparator")}`}
             </Text>
             {amount[1]}
           </Text>
@@ -359,7 +365,9 @@ export const BpdCardComponent: React.FunctionComponent<Props> = (
               >
                 {"€ "}
                 <Text white={true} style={styles.amountTextUpperPreview}>
-                  {amount[0]},
+                  {`${amount[0]}${I18n.t(
+                    "global.localization.decimalSeparator"
+                  )}`}
                 </Text>
                 {amount[1]}
               </Text>

diff --git 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
@@ -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"
   });