Add empty character after currency symbol

Author: w3bdesign

components/Product/IndexProducts.component.jsx

@@ -72,19 +72,21 @@ const IndexProducts = ({ products }) => {
                 {onSale && (
                   <div className="flex justify-center">
                     <div className="pt-1 text-gray-900">
-                      {variations && filteredVariantPrice(price)}
-                      {!variations && paddedPrice(salePrice)}
+                      {variations &&
+                        filteredVariantPrice(paddedPrice(price, 'kr'))}
+                      {!variations && paddedPrice(salePrice, 'kr')}
                     </div>
                     <div className="pt-1 ml-2 text-gray-900 line-through">
-                      {variations && filteredVariantPrice(price, 'right')}
-                      {!variations && paddedPrice(regularPrice)}
+                      {variations &&
+                        filteredVariantPrice(paddedPrice(price, 'kr'), 'right')}
+                      {!variations && paddedPrice(regularPrice, 'kr')}
                     </div>
                   </div>
                 )}
                 {/* Display regular price when not on sale */}
                 {!onSale && (
                   <p className="pt-1 text-center text-gray-900">
-                    {paddedPrice(price)}
+                    {paddedPrice(price, 'kr')}
                   </p>
                 )}
               </div>

utils/functions/functions.js

@@ -3,9 +3,11 @@ import { v4 as uuidv4 } from 'uuid';
 /**
  * Add empty character after currency symbol
  * @param {String} price The price string that we input
+ * @param {String} symbol Currency symbol to add empty character/padding after
  */
 
-export const paddedPrice = (price) => price.split('kr').join('kr ');
+export const paddedPrice = (price, symbol) =>
+  price.split(symbol).join(`${symbol} `);
 
 /**
  * Shorten inputted string (usually product description) to a maximum of length