Use single price value instead of range in product list (saleor#2386)

* Render single value when amount of money is matching * Use Intl.NumberFormat in money formatting * Extract messages
aiworksla · Nov 2, 2022 · 7387019 · 7387019
1 parent da8e4e5
commit 7387019
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 45 deletions.
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -7863,10 +7863,6 @@
   "zSOvI0": {
     "string": "Filters"
   },
-  "zTdwWM": {
-    "context": "money",
-    "string": "{fromMoney} - {toMoney}"
-  },
   "zWM89r": {
     "context": "numeric attribute units of",
     "string": "Units of"

diff --git a/src/components/Money/index.ts b/src/components/Money/index.ts
@@ -18,12 +18,32 @@ export function subtractMoney(init: IMoney, ...args: IMoney[]): IMoney {
 
 export const formatMoney = (money: IMoney, locale: string) => {
   try {
-    const formattedMoney = money.amount.toLocaleString(locale, {
-      currency: money.currency,
+    const formattedMoney = Intl.NumberFormat(locale, {
       style: "currency",
-    });
+      currency: money.currency,
+    }).format(money.amount);
     return formattedMoney;
   } catch (error) {
     return `${money.amount} ${money.currency}`;
   }
 };
+
+export const formatMoneyRange = (
+  moneyFrom: IMoney,
+  moneyTo: IMoney,
+  locale: string,
+) => {
+  try {
+    const formattedMoneyRange = (Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: moneyFrom.currency,
+    }) as any).formatRange(moneyFrom.amount, moneyTo.amount);
+    // TODO: remove casting from formatRange when typescript
+    // is updated to 4.7 or higher
+    return formattedMoneyRange;
+  } catch (error) {
+    const formattedMoneyFrom = formatMoney(moneyFrom, locale);
+    const formattedMoneyTo = formatMoney(moneyTo, locale);
+    return `${formattedMoneyFrom} - ${formattedMoneyTo}`;
+  }
+};
diff --git a/src/components/MoneyRange/MoneyRange.tsx b/src/components/MoneyRange/MoneyRange.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { LocaleConsumer } from "../Locale";
-import { formatMoney, IMoney } from "../Money";
+import { formatMoney, formatMoneyRange, IMoney } from "../Money";
 
 export interface MoneyRangeProps {
   from?: IMoney;
@@ -14,43 +14,38 @@ export const MoneyRange: React.FC<MoneyRangeProps> = ({ from, to }) => {
 
   return (
     <LocaleConsumer>
-      {({ locale }) =>
-        from && to
-          ? intl.formatMessage(
-              {
-                id: "zTdwWM",
-                defaultMessage: "{fromMoney} - {toMoney}",
-                description: "money",
-              },
-              {
-                fromMoney: formatMoney(from, locale),
-                toMoney: formatMoney(to, locale),
-              },
-            )
-          : from && !to
-          ? intl.formatMessage(
-              {
-                id: "lW5uJO",
-                defaultMessage: "from {money}",
-                description: "money",
-              },
-              {
-                money: formatMoney(from, locale),
-              },
-            )
-          : !from && to
-          ? intl.formatMessage(
-              {
-                id: "hptDxW",
-                defaultMessage: "to {money}",
-                description: "money",
-              },
-              {
-                money: formatMoney(to, locale),
-              },
-            )
-          : "-"
-      }
+      {({ locale }) => {
+        if (from && to) {
+          return from.amount === to.amount
+            ? formatMoney(from, locale)
+            : formatMoneyRange(from, to, locale);
+        }
+        if (from && !to) {
+          return intl.formatMessage(
+            {
+              id: "lW5uJO",
+              defaultMessage: "from {money}",
+              description: "money",
+            },
+            {
+              money: formatMoney(from, locale),
+            },
+          );
+        }
+        if (!from && to) {
+          return intl.formatMessage(
+            {
+              id: "hptDxW",
+              defaultMessage: "to {money}",
+              description: "money",
+            },
+            {
+              money: formatMoney(to, locale),
+            },
+          );
+        }
+        return "-";
+      }}
     </LocaleConsumer>
   );
 };