From 071687f4388c6653e5e195932d83e987eaea9dc5 Mon Sep 17 00:00:00 2001
From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:57:08 +0100
Subject: [PATCH] TH-173-meraki: Meraki > Cart drawer > Format currency based
 on Dotshop locale (#63)

---
 themes/meraki/assets/add-to-cart.js   | 22 ++++++++++---
 themes/meraki/assets/main.js          | 45 +++++++++++++++++++++++++++
 themes/meraki/assets/money.js         | 24 --------------
 themes/meraki/assets/product.js       | 12 ++-----
 themes/meraki/sections/product.liquid |  1 -
 5 files changed, 65 insertions(+), 39 deletions(-)
 delete mode 100644 themes/meraki/assets/money.js

diff --git a/themes/meraki/assets/add-to-cart.js b/themes/meraki/assets/add-to-cart.js
index a1a12dd1..3b14fed1 100644
--- a/themes/meraki/assets/add-to-cart.js
+++ b/themes/meraki/assets/add-to-cart.js
@@ -105,10 +105,12 @@ function cartTemplate(item) {
           ${CART_DRAWER_TRANSLATION.quantityVariant}:${item.quantity} &nbsp;${variationsCheck}
           </div>
           <div class="product-price">
-            <span class="compare-price">${item.productVariant.compare_at_price ? `${item.productVariant.compare_at_price} ${currencyCode}` : ''}</span>
+            ${
+              item.productVariant.compare_at_price ? 
+              `<span class="compare-price">${item.productVariant.compare_at_price}</span>` : ''
+            }
             <div class="currency-wrapper">
               <span class="price">${item.productVariant.price}</span>
-              <span class="currency-code">${currencyCode}</span>
             </div>
           </div>
           <button class="remove-item-btn" aria-label="remove item">
@@ -150,6 +152,17 @@ async function updateCartDrawer() {
       const products = document.createElement('ul');
 
       for (const item of cartData.items) {
+        item.price = formatCurrency(item.price, currencyCode, customerLocale);
+        item.productVariant.price = formatCurrency(item.productVariant.price, currencyCode, customerLocale);
+
+        if (item.productVariant.compare_at_price) {
+          item.productVariant.compare_at_price = formatCurrency(
+            item.productVariant.compare_at_price, 
+            currencyCode,
+            customerLocale,
+          );
+        }
+
         products.innerHTML += cartTemplate(item);
       }
 
@@ -165,13 +178,14 @@ async function updateCartDrawer() {
       cartDrawerContent.appendChild(p);
     }
 
+    cartData.sub_total = formatCurrency(cartData.sub_total, currencyCode, customerLocale);
+
     const footerContainerHTML = `
         <div class="footer">
           <div class="price-wrapper">
             <span class="total-price">${CART_DRAWER_TRANSLATION.totalAmount}</span>
             <div class="currency-wrapper">
-              <span class="currency-value">${cartData.sub_total.toFixed(2)}</span>
-              <span class="currency-code">${currencyCode}</span>
+              <span class="currency-value">${cartData.sub_total}</span>
             </div>
           </div>
           <a href='${location.origin}/cart' class="yc-btn">${CART_DRAWER_TRANSLATION.checkoutPayment}</a>
diff --git a/themes/meraki/assets/main.js b/themes/meraki/assets/main.js
index 374dcd0b..68d664fd 100644
--- a/themes/meraki/assets/main.js
+++ b/themes/meraki/assets/main.js
@@ -1,5 +1,6 @@
 /* ----- Store currency ----- */
 const currencyCode = window.Dotshop.currency;
+const customerLocale = window.Dotshop.customer_locale;
 /* ------------------ */
 /* ----- navbar ----- */
 /* ------------------ */
@@ -330,3 +331,47 @@ if (FORM.errors) {
   let decodedText = decodeHtmlEntities(FORM.errors);
   notify(renderTextContent(decodedText), 'error', 20000);
 }
+
+/**
+ * Formats a given amount into a currency string.
+ *
+ * @param {number} amount - The numerical value to be formatted.
+ * @param {string} currencySymbol - The symbol of the currency (e.g., $, €, £, USD, EUR, etc).
+ * @param {string} [locale='en-US'] - Optional. The locale string to format the currency (e.g., 'en-US', 'fr-FR').
+ * @param {boolean} [usePrecision=false] - Optional. Whether to include decimal precision.
+ * @returns {string} - The formatted currency string.
+ */
+function formatCurrency(amount, currencySymbol, locale = 'en-US') {
+  const usePrecision = shouldUsePrecision(amount);
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    maximumFractionDigits: usePrecision ? 2 : 0,
+    roundingMode: 'floor'
+  });
+
+  const formattedValue = formatter.format(amount);
+
+  const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: 'USD',
+    currencyDisplay: 'symbol',
+  });
+
+  const parts = determineSymbolPositionFormatter.formatToParts(1); // format with 1 USD just to determine the position of the currency symbol
+  const symbolIndex = parts.findIndex(part => part.type === 'currency');
+
+  return symbolIndex === 0
+    ? `${currencySymbol} ${formattedValue}`
+    : `${formattedValue} ${currencySymbol}`;
+}
+
+function shouldUsePrecision(amount) {
+  const { multicurrency_settings } = Dotshop.store;
+  const { isMulticurrencyActive, usePrecision } = multicurrency_settings;
+
+  if (!isMulticurrencyActive) {
+    return !Number.isInteger(amount);
+  }
+
+  return isMulticurrencyActive && usePrecision;
+}
diff --git a/themes/meraki/assets/money.js b/themes/meraki/assets/money.js
deleted file mode 100644
index bce0d4a6..00000000
--- a/themes/meraki/assets/money.js
+++ /dev/null
@@ -1,24 +0,0 @@
-function formatCurrency(amount, currencySymbol, locale = 'en-US', usePrecision = false) {
-  const shouldUsePrecision = !(amount % 1 === 0) || usePrecision;
-
-  const formatter = new Intl.NumberFormat(locale, {
-    style: 'decimal',
-    minimumFractionDigits: shouldUsePrecision ? 2 : 0,
-  });
-
-  const formattedValue = formatter.format(amount);
-
-  const determineSymbolPositionFormatter = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: 'USD',
-    currencyDisplay: 'symbol',
-  });
-
-  const parts = determineSymbolPositionFormatter.formatToParts(1); // format with 1 USD just to determine the position of the currency symbol
-  const symbolIndex = parts.findIndex(part => part.type === 'currency');
-  const isSymbolOnLeft = symbolIndex === 0;
-
-  return isSymbolOnLeft
-    ? `${currencySymbol} ${formattedValue}`
-    : `${formattedValue} ${currencySymbol}`;
-}
diff --git a/themes/meraki/assets/product.js b/themes/meraki/assets/product.js
index 544cd5dd..07b0f16a 100644
--- a/themes/meraki/assets/product.js
+++ b/themes/meraki/assets/product.js
@@ -335,11 +335,7 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
     const productPrices = parentSection.querySelectorAll('.product-price');
     const showStickyCheckoutPrice = document.getElementById('sticky-price');
 
-    const { store, currency, customer_locale } = Dotshop;
-    const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings;
-    const shouldUsePrecision = isMulticurrencyActive && usePrecision;
-
-    const formattedPrice = formatCurrency(price, currency, customer_locale, shouldUsePrecision);
+    const formattedPrice = formatCurrency(price, currencyCode, customerLocale);
 
     if (productPrices.length === 0) {
       if (showStickyCheckoutPrice) {
@@ -363,11 +359,7 @@ function updateProductDetails(parentSection, image, price, compareAtPrice) {
   const variantCompareAtPrices = parentSection.querySelectorAll('.compare-price');
 
   if (compareAtPrice) {
-    const { store, currency, customer_locale } = Dotshop;
-    const { isMulticurrencyActive, usePrecision} = store.multicurrency_settings;
-    const shouldUsePrecision = isMulticurrencyActive && usePrecision;
-
-    const formattedCompareAtPrice = formatCurrency(compareAtPrice, currency, customer_locale, shouldUsePrecision);
+    const formattedCompareAtPrice = formatCurrency(compareAtPrice, currencyCode, customerLocale);
 
     variantCompareAtPrices.forEach(variantComparePrice => {
       variantComparePrice.innerHTML = `<del> ${formattedCompareAtPrice} </del>`;
diff --git a/themes/meraki/sections/product.liquid b/themes/meraki/sections/product.liquid
index 713515d5..b1bbd63f 100644
--- a/themes/meraki/sections/product.liquid
+++ b/themes/meraki/sections/product.liquid
@@ -450,5 +450,4 @@
   {% endif %}
 {%- endjavascript -%}
 
-{{ 'money.js' | asset_url | script_tag }}
 {{ 'product.js' | asset_url | script_tag_deferred }}