currency pricerange formatter (#943)

- Added Formatter.priceRange() function that utilize `locale-currency` and `currency-symbol-map` npm library to retrieve currency symbol based on location's country code (ISO format), and construct the price range accordingly.
- exclude `currency-symbol-map` from the node_modules exclusion in webpack babel for production build so it can be transpile to es5

J=SLAP-1552
TEST=manual&auto

- added jest test for Formatter.priceRange
- add priceRange for a UK location entity. Launched test site and see that it's displayed in £ instead of default $

package.json

@@ -29,6 +29,7 @@
     "babel-jest": "^25.5.1",
     "comment-json": "^4.1.1",
     "cross-env": "^7.0.2",
+    "currency-symbol-map": "^5.0.1",
     "express": "^4.17.1",
     "file-system": "^2.2.2",
     "full-icu": "^1.3.1",
@@ -37,6 +38,7 @@
     "jest": "^25.5.2",
     "libphonenumber-js": "^1.9.6",
     "loader-utils": "^2.0.0",
+    "locale-currency": "0.0.2",
     "lodash.clonedeep": "^4.5.0",
     "postcss": "^8.2.1",
     "puppeteer": "^10.2.0",

static/js/formatters-internal.js

@@ -7,7 +7,8 @@ import HoursStringsLocalizer from './hours/stringslocalizer.js';
 import HoursTableBuilder from './hours/table/builder.js';
 import { DayNames } from './hours/constants.js';
 import { generateCTAFieldTypeLink } from './formatters/generate-cta-field-type-link';
-
+import LocaleCurrency from 'locale-currency'
+import getSymbolFromCurrency from 'currency-symbol-map'
 
 export function address(profile) {
   if (!profile.address) {
@@ -522,6 +523,28 @@ export function price(fieldValue = {}, locale) {
   return price.toLocaleString(localeForFormatting, { style: 'currency', currency: currencyCode });
 }
 
+/**
+ * Returns a localized price range string for the given price range ($-$$$$) and country code (ISO format)
+ * @param {string} defaultPriceRange The price range from LiveAPI entity
+ * @param {string} countrycode The country code from LiveAPI entity (e.g. profile.address.countryCode)
+ * @return {string} The price range with correct currency symbol formatting according to country code
+ */
+export function priceRange(defaultPriceRange, countryCode) {
+  if (!defaultPriceRange || !countryCode) {
+    console.warn(`No price range or country code given.`);
+    return '';
+  }
+  const currencyCode = LocaleCurrency.getCurrency(countryCode);
+  if (currencyCode) {
+    const currencySymbol = getSymbolFromCurrency(currencyCode);
+    if (currencySymbol) {
+      return defaultPriceRange.replace(/\$/g, currencySymbol); 
+    }
+  }
+  console.warn(`Unable to determine currency symbol from ISO country code ${countryCode}.`);
+  return defaultPriceRange;
+}
+
 /**
  * Highlights snippets of the provided fieldValue according to the matched substrings.
  * Each match will be wrapped in <mark> tags.

static/js/formatters.js

@@ -28,6 +28,7 @@ import {
   hoursList,
   generateCTAFieldTypeLink,
   price,
+  priceRange,
   highlightField,
   getYoutubeUrl
 } from './formatters-internal.js';
@@ -61,6 +62,7 @@ let Formatters = {
   hoursList,
   generateCTAFieldTypeLink,
   price,
+  priceRange,
   highlightField,
   getYoutubeUrl
 };

static/package.json

@@ -22,6 +22,7 @@
     "babel-loader": "^8.1.0",
     "comment-json": "^4.1.1",
     "css-loader": "^3.4.2",
+    "currency-symbol-map": "^5.0.1",
     "esbuild-loader": "^2.13.1",
     "file-system": "^2.2.2",
     "fs-extra": "^9.0.1",
@@ -32,6 +33,7 @@
     "html-webpack-plugin": "^5.3.1",
     "jambo": "^1.12.0",
     "jsdom": "^16.4.0",
+    "locale-currency": "0.0.2",
     "mini-css-extract-plugin": "^1.6.0",
     "postcss": "^8.3.1",
     "resolve-url-loader": "^3.1.1",

static/webpack/webpack.prod.js

@@ -17,7 +17,7 @@ module.exports = (jamboConfig) => {
         {
           test: /\.js$/,
           exclude: [
-            /node_modules\//
+            /node_modules\/(?!(currency-symbol-map)\/).*/
           ],
           loader: 'babel-loader',
           options: {