From 71a9cf8f11c6a603be1048339e46e68660ca05b8 Mon Sep 17 00:00:00 2001
From: Eihab Khan <143792300+eihabkhan1@users.noreply.github.com>
Date: Tue, 8 Oct 2024 16:53:29 +0100
Subject: [PATCH] TH-155-aura: Format product price in product page based on a
 unified locale code (#55)

Co-authored-by: Anas <93322743+bj-anas@users.noreply.github.com>
---
 themes/aura/assets/money.js         | 24 ++++++++++++++++++++++++
 themes/aura/assets/product.js       | 29 +++++++++++++++++++----------
 themes/aura/sections/product.liquid |  1 +
 3 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 themes/aura/assets/money.js

diff --git a/themes/aura/assets/money.js b/themes/aura/assets/money.js
new file mode 100644
index 00000000..bce0d4a6
--- /dev/null
+++ b/themes/aura/assets/money.js
@@ -0,0 +1,24 @@
+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/aura/assets/product.js b/themes/aura/assets/product.js
index b1302bc0..6159a500 100644
--- a/themes/aura/assets/product.js
+++ b/themes/aura/assets/product.js
@@ -326,26 +326,29 @@ function getSelectedVariant(parentSection) {
 function updateProductDetails(parentSection, image, price, compareAtPrice) {
   if (image) {
     const mainImgs = parentSection.querySelectorAll('.main-image');
-
-    mainImgs.forEach(mainImg => mainImg.src = image)
+    mainImgs.forEach(mainImg => mainImg.src = image);
   }
 
   if (price) {
     const productPrices = parentSection.querySelectorAll('.product-price');
-    const showStickyCheckoutPrice = $('#sticky-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);
 
     if (productPrices.length === 0) {
       if (showStickyCheckoutPrice) {
-        showStickyCheckoutPrice.innerHTML = `${price} ${Dotshop.currency}`;
+        showStickyCheckoutPrice.innerHTML = formattedPrice;
       }
 
       return;
     }
 
     productPrices.forEach(productPrice => {
-      const displayValue = `${price} ${Dotshop.currency}`;
-
-      productPrice.innerText = displayValue;
+      productPrice.innerText = formattedPrice;
 
       if (showStickyCheckoutPrice) {
         showStickyCheckoutPrice.innerHTML = productPrice.innerHTML;
@@ -356,13 +359,19 @@ 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);
+    
     variantCompareAtPrices.forEach(variantComparePrice => {
-      variantComparePrice.innerHTML = `<del> ${compareAtPrice} ${Dotshop.currency} </del>`;
-    })
+      variantComparePrice.innerHTML = `<del>${formattedCompareAtPrice}</del>`;
+    });
   } else {
     variantCompareAtPrices.forEach(variantComparePrice => {
       variantComparePrice.innerHTML = ``;
-    })
+    });
   }
 
   goToCheckoutStep();
diff --git a/themes/aura/sections/product.liquid b/themes/aura/sections/product.liquid
index 5497ad43..ff7a885a 100644
--- a/themes/aura/sections/product.liquid
+++ b/themes/aura/sections/product.liquid
@@ -473,4 +473,5 @@
   {% endif %}
 {%- endjavascript -%}
 
+{{ 'money.js' | asset_url | script_tag }}
 {{ 'product.js' | asset_url | script_tag_deferred }}