price formatter style changed

2023-06-22 14:24:56 +01:00
parent 03b79f0e0c
commit a6c6c36fbc
9 changed files with 55 additions and 21 deletions
@@ -1,16 +1,48 @@
-export const PriceFormatter = (price, currency, currencyName) => {
-  const supportedCurrencies = ["USD", "EUR", "GBP"];
-  const symbolFormatter = supportedCurrencies.includes(currency)
-    ? currency
-    : undefined;
+import React from 'react'

-  const formatter = new Intl.NumberFormat("en", {
-    style: symbolFormatter,
-    currencyDisplay: "symbol",
-    minimumFractionDigits: 2,
-  });
+// export const PriceFormatter = (price, currency, currencyName) => {
+//   const supportedCurrencies = ["USD", "EUR", "GBP"];
+//   const symbolFormatter = supportedCurrencies.includes(currency)
+//     ? currency
+//     : undefined;

-  const displayCurrencyName = symbolFormatter ? "" : currencyName;
+//   const formatter = new Intl.NumberFormat("en", {
+//     style: symbolFormatter,
+//     currencyDisplay: "symbol",
+//     minimumFractionDigits: 2,
+//   });

-  return `${formatter.format(price)} ${displayCurrencyName}`;
-};
+//   const displayCurrencyName = symbolFormatter ? "" : currencyName;
+
+//   return `${formatter.format(price)} ${displayCurrencyName}`;
+// };
+
+
+export const PriceFormatter = (price='00', currency='', currencyName='') => {
+  // Convert the number to a string
+let numStr = String(price);
+
+// Split the string into integer and decimal parts
+let parts = numStr.split('.');
+let integerPart = parts[0];
+let decimalPart = parts[1] || '';
+
+// Add thousands separators to the integer part
+// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+let formattedInteger = integerPart;
+
+// Truncate or pad the decimal part to two decimal points
+let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
+
+// Combine the formatted integer and decimal parts
+// let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+// return formattedNumber;
+  return (
+    <span className='text-sm flex items-center'>
+      <sup>{currency || currencyName || ''}</sup>
+      <span className='px-1 font-bold text-lg'>{formattedInteger}</span>
+      <sup>{formattedDecimal}</sup>
+    </span>
+  )
+}