From 6390f87b3bad07167528d37ed872143afad25d25 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 19 Jan 2022 08:52:14 +0100
Subject: [PATCH 1/4] fix(theme): solve currency change issue

---
 packages/theme/components/CartSidebar.vue      |  8 ++++----
 .../theme/components/Checkout/CartPreview.vue  |  9 +++++----
 .../Checkout/VsfShippingProvider.vue           |  2 +-
 .../Products/BundleProductSelector.vue         |  8 ++++----
 .../Products/GroupedProductSelector.vue        |  4 ++--
 packages/theme/components/ProductsCarousel.vue |  4 ++--
 packages/theme/components/SearchResults.vue    |  4 ++--
 packages/theme/components/WishlistSidebar.vue  |  6 +++---
 packages/theme/nuxt.config.js                  |  1 +
 packages/theme/pages/Category.vue              |  8 ++++----
 packages/theme/pages/Checkout/Payment.vue      | 12 ++++++------
 packages/theme/pages/MyAccount/MyWishlist.vue  |  8 ++++----
 .../theme/pages/MyAccount/OrderHistory.vue     |  6 +++---
 packages/theme/pages/Product.vue               |  4 ++--
 packages/theme/plugins/formatCurrency.ts       | 18 ++++++++++++++++++
 packages/theme/test-utils.js                   |  2 ++
 16 files changed, 63 insertions(+), 41 deletions(-)
 create mode 100644 packages/theme/plugins/formatCurrency.ts

diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 8f855e858..511069ca4 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -97,12 +97,12 @@
                 :image="cartGetters.getItemImage(product)"
                 :title="cartGetters.getItemName(product)"
                 :regular-price="
-                  $n(cartGetters.getItemPrice(product).regular, 'currency')
+                  $fc(cartGetters.getItemPrice(product).regular)
                 "
                 :special-price="
                   cartGetters.productHasSpecialPrice(product)
                     ? getItemPrice(product).special &&
-                      $n(cartGetters.getItemPrice(product).special, 'currency')
+                      $fc(cartGetters.getItemPrice(product).special)
                     : ''
                 "
                 :link="
@@ -196,11 +196,11 @@
             >
               <template #value>
                 <SfPrice
-                  :regular="$n(totals.subtotal, 'currency')"
+                  :regular="$fc(totals.subtotal)"
                   :special="
                     totals.subtotal <= totals.special
                       ? ''
-                      : $n(totals.special, 'currency')
+                      : $fc(totals.special)
                   "
                 />
               </template>
diff --git a/packages/theme/components/Checkout/CartPreview.vue b/packages/theme/components/Checkout/CartPreview.vue
index f1a37f301..7dc34de8c 100644
--- a/packages/theme/components/Checkout/CartPreview.vue
+++ b/packages/theme/components/Checkout/CartPreview.vue
@@ -15,24 +15,25 @@
       />
       <SfProperty
         :name="$t('Subtotal')"
-        :value="$n(totals.subtotal, 'currency')"
+        :value="$fc(totals.subtotal)"
         :class="['sf-property--full-width', 'sf-property--large property']"
       />
       <SfProperty
         v-if="hasDiscounts"
         :name="$t('Discount')"
-        :value="$n(discountsAmount, 'currency')"
+        :value="$fc(discountsAmount)"
         class="sf-property--full-width sf-property--small property"
       />
       <SfProperty
         v-if="selectedShippingMethod"
         :name="$t('Shipping')"
-        :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
+        :value="$fc(getShippingMethodPrice(selectedShippingMethod))"
         class="sf-property--full-width sf-property--large property"
       />
+
       <SfProperty
         :name="$t('Total')"
-        :value="$n(totals.total, 'currency')"
+        :value="$fc(totals.total)"
         class="sf-property--full-width sf-property--large property-total"
       />
     </div>
diff --git a/packages/theme/components/Checkout/VsfShippingProvider.vue b/packages/theme/components/Checkout/VsfShippingProvider.vue
index 39da57609..67ed99527 100644
--- a/packages/theme/components/Checkout/VsfShippingProvider.vue
+++ b/packages/theme/components/Checkout/VsfShippingProvider.vue
@@ -49,7 +49,7 @@
             <div class="sf-radio__label shipping__label">
               <div>{{ method.carrier_title }}</div>
               <div v-if="method && (method.amount || method.price_incl_tax)">
-                {{ $n(getShippingMethodPrice(method), 'currency') }}
+                {{ $fc(getShippingMethodPrice(method)) }}
               </div>
             </div>
           </template>
diff --git a/packages/theme/components/Products/BundleProductSelector.vue b/packages/theme/components/Products/BundleProductSelector.vue
index d6f716677..763fa2014 100644
--- a/packages/theme/components/Products/BundleProductSelector.vue
+++ b/packages/theme/components/Products/BundleProductSelector.vue
@@ -26,8 +26,8 @@
             >
               {{ productGetters.getName(option.product) }}
               <SfPrice
-                :regular="$n(productGetters.getPrice(option.product).regular, 'currency')"
-                :special="productGetters.getPrice(option.product).special && $n(productGetters.getPrice(option.product).special, 'currency')"
+                :regular="$fc(productGetters.getPrice(option.product).regular)"
+                :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
               />
             </template>
             <template
@@ -43,8 +43,8 @@
               >
                 <template #description>
                   <SfPrice
-                    :regular="$n(productGetters.getPrice(option.product).regular, 'currency')"
-                    :special="productGetters.getPrice(option.product).special && $n(productGetters.getPrice(option.product).special, 'currency')"
+                    :regular="$fc(productGetters.getPrice(option.product).regular)"
+                    :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
                   />
                 </template>
               </SfRadio>
diff --git a/packages/theme/components/Products/GroupedProductSelector.vue b/packages/theme/components/Products/GroupedProductSelector.vue
index f93a42efd..138c022ee 100644
--- a/packages/theme/components/Products/GroupedProductSelector.vue
+++ b/packages/theme/components/Products/GroupedProductSelector.vue
@@ -16,8 +16,8 @@
         <div>
           <p>{{ productGetters.getName(groupedItem.product) }}</p>
           <SfPrice
-            :regular="$n(productGetters.getPrice(groupedItem.product).regular, 'currency')"
-            :special="productGetters.getPrice(groupedItem.product).special && $n(productGetters.getPrice(groupedItem.product).special, 'currency')"
+            :regular="$fc(productGetters.getPrice(groupedItem.product).regular)"
+            :special="productGetters.getPrice(groupedItem.product).special && $fc(productGetters.getPrice(groupedItem.product).special)"
           />
         </div>
         <SfQuantitySelector
diff --git a/packages/theme/components/ProductsCarousel.vue b/packages/theme/components/ProductsCarousel.vue
index e03fedf45..5c281906e 100644
--- a/packages/theme/components/ProductsCarousel.vue
+++ b/packages/theme/components/ProductsCarousel.vue
@@ -20,8 +20,8 @@
           <SfProductCard
             :title="productGetters.getName(product)"
             :image="productGetters.getProductThumbnailImage(product)"
-            :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-            :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+            :regular-price="$fc(productGetters.getPrice(product).regular)"
+            :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
             :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
             :max-rating="5"
             :score-rating="productGetters.getAverageRating(product)"
diff --git a/packages/theme/components/SearchResults.vue b/packages/theme/components/SearchResults.vue
index 257866744..4d4fabb74 100644
--- a/packages/theme/components/SearchResults.vue
+++ b/packages/theme/components/SearchResults.vue
@@ -69,7 +69,7 @@
                   v-for="(product, index) in products"
                   :key="index"
                   class="result-card"
-                  :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product).regular)"
                   :max-rating="5"
                   :score-rating="productGetters.getAverageRating(product)"
                   :reviews-count="productGetters.getTotalReviews(product)"
@@ -89,7 +89,7 @@
                 v-for="(product, index) in products"
                 :key="index"
                 class="result-card"
-                :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+                :regular-price="$fc(productGetters.getPrice(product).regular)"
                 :max-rating="5"
                 :score-rating="productGetters.getAverageRating(product)"
                 :reviews-count="productGetters.getTotalReviews(product)"
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index f64705e69..4a041b801 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -45,9 +45,9 @@
               :key="i"
               :image="wishlistGetters.getItemImage(product)"
               :title="wishlistGetters.getItemName(product)"
-              :regular-price="$n(wishlistGetters.getItemPrice(product).regular, 'currency')"
+              :regular-price="$fc(wishlistGetters.getItemPrice(product).regular)"
               :link="localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)"
-              :special-price="wishlistGetters.getItemPrice(product).special && $n(wishlistGetters.getItemPrice(product).special, 'currency')"
+              :special-price="wishlistGetters.getItemPrice(product).special && $fc(wishlistGetters.getItemPrice(product).special)"
               :stock="99999"
               class="collected-product"
               @click:remove="removeItem({ product: product.product })"
@@ -107,7 +107,7 @@
                 <span class="my-wishlist__total-price-label">Total price:</span>
               </template>
               <template #value>
-                <SfPrice :regular="$n(totals.subtotal, 'currency')" />
+                <SfPrice :regular="$fc(totals.subtotal)" />
               </template>
             </SfProperty>
           </div>
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index c9f0ad01c..859aef3ff 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -230,6 +230,7 @@ export default {
   plugins: [
     '~/plugins/token-expired',
     '~/plugins/i18n',
+    '~/plugins/formatCurrency',
   ],
   router: {
     extendRoutes(routes) {
diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
index 22bafada6..2dd407ccd 100644
--- a/packages/theme/pages/Category.vue
+++ b/packages/theme/pages/Category.vue
@@ -123,8 +123,8 @@
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
               :image="productGetters.getProductThumbnailImage(product)"
-              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+              :regular-price="$fc(productGetters.getPrice(product).regular)"
+              :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
               :reviews-count="productGetters.getTotalReviews(product)"
               :show-add-to-cart-button="true"
@@ -158,8 +158,8 @@
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
               :image="productGetters.getProductThumbnailImage(product)"
-              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+              :regular-price="$fc(productGetters.getPrice(product).regular)"
+              :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
               :reviews-count="productGetters.getTotalReviews(product)"
               :is-in-wishlist="isInWishlist({product})"
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 52e7a6c34..c7ed39b48 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -65,8 +65,8 @@
         </SfTableData>
         <SfTableData class="table__data price">
           <SfPrice
-            :regular="$n(cartGetters.getItemPrice(product).regular, 'currency')"
-            :special="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
+            :regular="$fc(cartGetters.getItemPrice(product).regular)"
+            :special="cartGetters.getItemPrice(product).special && $fc(cartGetters.getItemPrice(product).special)"
             class="product-price"
           />
         </SfTableData>
@@ -77,13 +77,13 @@
         <div class="summary__total">
           <SfProperty
             name="Subtotal"
-            :value="$n(totals.subtotal, 'currency')"
+            :value="$fc(totals.subtotal)"
             class="sf-property--full-width property"
           />
           <SfProperty
             v-if="hasDiscounts"
             :name="$t('Discount')"
-            :value="$n(discountsAmount, 'currency')"
+            :value="$fc(discountsAmount)"
             class="sf-property--full-width sf-property--small property"
           />
         </div>
@@ -92,7 +92,7 @@
           class="summary__total"
         >
           <SfProperty
-            :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
+            :value="$fc(getShippingMethodPrice(selectedShippingMethod))"
             class="sf-property--full-width property"
           >
             <template #name>
@@ -107,7 +107,7 @@
 
         <SfProperty
           name="Total price"
-          :value="$n(totals.total, 'currency')"
+          :value="$fc(totals.total)"
           class="sf-property--full-width sf-property--large summary__property-total"
         />
 
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index 7b33cc675..f12bf4c1c 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -76,12 +76,12 @@
                       )}${productGetters.getSlug(product.product, product.product.categories[0])}`
                     )
                   "
-                  :regular-price="$n(productGetters.getPrice(product.product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
                   :reviews-count="productGetters.getTotalReviews(product.product)"
                   :score-rating="productGetters.getAverageRating(product.product)"
                   :show-add-to-cart-button="true"
                   :special-price="productGetters.getPrice(product.product).special
-                    && $n(productGetters.getPrice(product.product).special, 'currency')"
+                    && $fc(productGetters.getPrice(product.product).special)"
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
@@ -110,11 +110,11 @@
                       )}${productGetters.getSlug(product.product, product.product.categories[0])}`
                     )
                   "
-                  :regular-price="$n(productGetters.getPrice(product.product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
                   :reviews-count="productGetters.getTotalReviews(product.product)"
                   :score-rating="productGetters.getAverageRating(product.product)"
                   :special-price="productGetters.getPrice(product.product).special
-                    && $n(productGetters.getPrice(product.product).special, 'currency')"
+                    && $fc(productGetters.getPrice(product.product).special)"
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
diff --git a/packages/theme/pages/MyAccount/OrderHistory.vue b/packages/theme/pages/MyAccount/OrderHistory.vue
index 3658180ce..f899a981e 100644
--- a/packages/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/theme/pages/MyAccount/OrderHistory.vue
@@ -33,7 +33,7 @@
           />
           <SfProperty
             name="Total"
-            :value="$n(orderGetters.getPrice(currentOrder), 'currency')"
+            :value="$fc(orderGetters.getPrice(currentOrder))"
             class="sf-property--full-width property"
           />
         </div>
@@ -55,7 +55,7 @@
               </nuxt-link>
             </SfTableData>
             <SfTableData>{{ orderGetters.getItemQty(item) }}</SfTableData>
-            <SfTableData>{{ $n(orderGetters.getItemPrice(item), 'currency') }}</SfTableData>
+            <SfTableData>{{ $fc(orderGetters.getItemPrice(item)) }}</SfTableData>
           </SfTableRow>
         </SfTable>
       </div>
@@ -97,7 +97,7 @@
           >
             <SfTableData>{{ orderGetters.getId(order) }}</SfTableData>
             <SfTableData>{{ orderGetters.getDate(order) }}</SfTableData>
-            <SfTableData>{{ $n(orderGetters.getPrice(order), 'currency') }}</SfTableData>
+            <SfTableData>{{ $fc(orderGetters.getPrice(order)) }}</SfTableData>
             <SfTableData>
               <span :class="getStatusTextClass(order)">{{ orderGetters.getStatus(order) }}</span>
             </SfTableData>
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 648ba77dd..32f865c34 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -40,8 +40,8 @@
             </div>
             <div class="product__price-and-rating">
               <SfPrice
-                :regular="$n(productPrice, 'currency')"
-                :special="productSpecialPrice && $n(productSpecialPrice, 'currency')"
+                :regular="$fc(productPrice)"
+                :special="productSpecialPrice && $fc(productSpecialPrice)"
               />
               <div>
                 <div class="product__rating">
diff --git a/packages/theme/plugins/formatCurrency.ts b/packages/theme/plugins/formatCurrency.ts
new file mode 100644
index 000000000..4fd3e5a2c
--- /dev/null
+++ b/packages/theme/plugins/formatCurrency.ts
@@ -0,0 +1,18 @@
+import cookieNames from '~/enums/cookieNameEnum';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $fc(value: number): string;
+    $fc(value: number, options?: Intl.NumberFormatOptions): string;
+    $fc(value: number, locale?: string, options?: Intl.NumberFormatOptions): string;
+  }
+}
+
+export default ({ app }, inject) => {
+  inject('fc', (value: number, locale: string = '', options = {}): string => {
+    const localeToUse: string = locale || app.$cookies.get(cookieNames.localeCookieName);
+    const currency: string = app.$cookies.get(cookieNames.currencyCookieName);
+
+    return new Intl.NumberFormat(localeToUse, { style: 'currency', currency, ...options }).format(value);
+  });
+};
diff --git a/packages/theme/test-utils.js b/packages/theme/test-utils.js
index b724dee36..4aaaf2823 100644
--- a/packages/theme/test-utils.js
+++ b/packages/theme/test-utils.js
@@ -2,12 +2,14 @@ import { render } from '@testing-library/vue';
 
 const $t = (text) => text;
 const $n = (text) => text;
+const $fc = (text) => text;
 const localePath = (path) => path;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 const customRender = (component, options = {}, callback = null) => render(component, {
   mocks: {
     $t,
     $n,
+    $fc,
     localePath,
     $nuxt: {
       context: {

From 24ddc54b887f6f8cac07136b80b019c244640b7d Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 19 Jan 2022 09:15:43 +0100
Subject: [PATCH 2/4] docs(theme): add currency formatting plugin information

---
 docs/plugins/index.md                    | 21 +++++++++++++++++++++
 packages/theme/plugins/formatCurrency.ts | 17 +++++++++++------
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/docs/plugins/index.md b/docs/plugins/index.md
index 9308aab00..096145217 100644
--- a/docs/plugins/index.md
+++ b/docs/plugins/index.md
@@ -26,3 +26,24 @@ client and server side.
 
 
 ![i18n flow](./i18n-plugin-diagram.png)
+
+## Currency
+
+We expose `$fc` (format currency) function as a plugin to allow you to convert any number or string into a formatted currency string. Under the hood plugins uses Intl.NumberFormat class to handle formatting and therefore exposes the same options configuration.
+Here are few examples of how you can use it in templates.
+```javascript
+$fc(productGetters.getPrice(product).regular) // by default vsf-currency cookie is used to define target currency
+$fc(productGetters.getPrice(product).regular, { currency: 'USD' }) // you can easily override this behaviour by passing configuration object
+```
+
+Configuration object is an interface Intl.NumberFormatOptions, check it for all available options.
+
+---
+***NOTE***
+
+Why we are not using built-in i18n package currency configuration and $n function to cover currency displaying? The answer is because we must be able to handle multiple currencies within one store but in i18n package, currency and locale are in 1:1 relation when in Magento one store can have multiple languages and currencies set. Currency and locale are necessarily disjointed which is not true for i18n plugin.
+
+You can still use all i18n native functions to perform any formatting though.
+
+---
+
diff --git a/packages/theme/plugins/formatCurrency.ts b/packages/theme/plugins/formatCurrency.ts
index 4fd3e5a2c..7b1827745 100644
--- a/packages/theme/plugins/formatCurrency.ts
+++ b/packages/theme/plugins/formatCurrency.ts
@@ -2,17 +2,22 @@ import cookieNames from '~/enums/cookieNameEnum';
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $fc(value: number): string;
-    $fc(value: number, options?: Intl.NumberFormatOptions): string;
-    $fc(value: number, locale?: string, options?: Intl.NumberFormatOptions): string;
+    $fc(value: number | string): string;
+    $fc(value: number | string, options?: Intl.NumberFormatOptions): string;
+    $fc(value: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;
   }
 }
 
 export default ({ app }, inject) => {
-  inject('fc', (value: number, locale: string = '', options = {}): string => {
-    const localeToUse: string = locale || app.$cookies.get(cookieNames.localeCookieName);
+  inject('fc', (value: number | string, locale: string = '', options = {}): string => {
+    if (typeof value === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      value = Number(value);
+    }
+    // eslint-disable-next-line no-param-reassign
+    locale = locale || app.$cookies.get(cookieNames.localeCookieName);
     const currency: string = app.$cookies.get(cookieNames.currencyCookieName);
 
-    return new Intl.NumberFormat(localeToUse, { style: 'currency', currency, ...options }).format(value);
+    return new Intl.NumberFormat(locale, { style: 'currency', currency, ...options }).format(value);
   });
 };

From 6ffd506b986c876a81d407299b0a6095bbf22df2 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 19 Jan 2022 10:53:53 +0100
Subject: [PATCH 3/4] test(theme): add UT for plugin and formatCurrency helper

---
 .../helpers/__tests__/formatCurrency.spec.js     | 16 ++++++++++++++++
 packages/theme/helpers/formatCurrency.ts         | 11 +++++++++++
 packages/theme/nuxt.config.js                    |  2 +-
 .../theme/plugins/__tests__/fcPlugin.spec.js     | 10 ++++++++++
 .../plugins/{formatCurrency.ts => fcPlugin.ts}   | 12 +++++-------
 5 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 packages/theme/helpers/__tests__/formatCurrency.spec.js
 create mode 100644 packages/theme/helpers/formatCurrency.ts
 create mode 100644 packages/theme/plugins/__tests__/fcPlugin.spec.js
 rename packages/theme/plugins/{formatCurrency.ts => fcPlugin.ts} (55%)

diff --git a/packages/theme/helpers/__tests__/formatCurrency.spec.js b/packages/theme/helpers/__tests__/formatCurrency.spec.js
new file mode 100644
index 000000000..2e0bfe2a2
--- /dev/null
+++ b/packages/theme/helpers/__tests__/formatCurrency.spec.js
@@ -0,0 +1,16 @@
+import formatCurrency from '~/helpers/formatCurrency';
+
+describe('formatCurrency()', () => {
+  it('executed without required options should throw error', () => {
+    expect(() => { formatCurrency(100, 'en-US', {}); }).toThrowError();
+  });
+
+  it('should return formatted currency string', () => {
+    const currency = 'EUR';
+    jest.spyOn(Intl, 'NumberFormat').mockImplementation(() => ({
+      format: (value) => `${value}${currency}`,
+    }));
+    const result = formatCurrency(123, 'de-DE', { currency });
+    expect(result).toBe('123EUR');
+  });
+});
diff --git a/packages/theme/helpers/formatCurrency.ts b/packages/theme/helpers/formatCurrency.ts
new file mode 100644
index 000000000..65cbc24bd
--- /dev/null
+++ b/packages/theme/helpers/formatCurrency.ts
@@ -0,0 +1,11 @@
+const formatCurrency = (value: number | string, locale: string, options: Intl.NumberFormatOptions): string => {
+  if (typeof value === 'string') {
+    // eslint-disable-next-line no-param-reassign
+    value = Number(value);
+  }
+  // eslint-disable-next-line no-param-reassign
+
+  return new Intl.NumberFormat(locale, { style: 'currency', ...options }).format(value);
+};
+
+export default formatCurrency;
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index 859aef3ff..08415c02f 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -230,7 +230,7 @@ export default {
   plugins: [
     '~/plugins/token-expired',
     '~/plugins/i18n',
-    '~/plugins/formatCurrency',
+    '~/plugins/fcPlugin',
   ],
   router: {
     extendRoutes(routes) {
diff --git a/packages/theme/plugins/__tests__/fcPlugin.spec.js b/packages/theme/plugins/__tests__/fcPlugin.spec.js
new file mode 100644
index 000000000..f436451f4
--- /dev/null
+++ b/packages/theme/plugins/__tests__/fcPlugin.spec.js
@@ -0,0 +1,10 @@
+import fcPlugin from '~/plugins/fcPlugin';
+
+const injectFnMock = jest.fn();
+
+describe('Format currency plugin', () => {
+  it('should inject $fc', () => {
+    fcPlugin({ app: {} }, injectFnMock);
+    expect(injectFnMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/theme/plugins/formatCurrency.ts b/packages/theme/plugins/fcPlugin.ts
similarity index 55%
rename from packages/theme/plugins/formatCurrency.ts
rename to packages/theme/plugins/fcPlugin.ts
index 7b1827745..05647c2a6 100644
--- a/packages/theme/plugins/formatCurrency.ts
+++ b/packages/theme/plugins/fcPlugin.ts
@@ -1,4 +1,5 @@
 import cookieNames from '~/enums/cookieNameEnum';
+import formatCurrency from '~/helpers/formatCurrency';
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -9,15 +10,12 @@ declare module 'vue/types/vue' {
 }
 
 export default ({ app }, inject) => {
-  inject('fc', (value: number | string, locale: string = '', options = {}): string => {
-    if (typeof value === 'string') {
-      // eslint-disable-next-line no-param-reassign
-      value = Number(value);
-    }
+  inject('fc', (value: number | string, locale?: string, options = {}): string => {
     // eslint-disable-next-line no-param-reassign
     locale = locale || app.$cookies.get(cookieNames.localeCookieName);
-    const currency: string = app.$cookies.get(cookieNames.currencyCookieName);
+    // eslint-disable-next-line no-param-reassign
+    options = { currency: app.$cookies.get(cookieNames.currencyCookieName), ...options };
 
-    return new Intl.NumberFormat(locale, { style: 'currency', currency, ...options }).format(value);
+    return formatCurrency(value, locale, options);
   });
 };

From 0e6d985fabbf581e30f7c878f330e32e7d5162f6 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Thu, 20 Jan 2022 08:51:33 +0100
Subject: [PATCH 4/4] refactor(fcplugin): change the logic responsible for
 resolving locale value

---
 packages/theme/plugins/fcPlugin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/plugins/fcPlugin.ts b/packages/theme/plugins/fcPlugin.ts
index 05647c2a6..ef0f47fdf 100644
--- a/packages/theme/plugins/fcPlugin.ts
+++ b/packages/theme/plugins/fcPlugin.ts
@@ -12,7 +12,7 @@ declare module 'vue/types/vue' {
 export default ({ app }, inject) => {
   inject('fc', (value: number | string, locale?: string, options = {}): string => {
     // eslint-disable-next-line no-param-reassign
-    locale = locale || app.$cookies.get(cookieNames.localeCookieName);
+    locale = locale || app.i18n?.localeProperties?.iso.replace('_', '-');
     // eslint-disable-next-line no-param-reassign
     options = { currency: app.$cookies.get(cookieNames.currencyCookieName), ...options };