Merge f6f4389 into e1736da

vuestorefront · Dec 21, 2020 · b5c64e9 · b5c64e9
2 parents e1736da + f6f4389
commit b5c64e9
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 58 deletions.
diff --git a/packages/commercetools/theme/composables/useUiHelpers/index.ts b/packages/commercetools/theme/composables/useUiHelpers/index.ts
@@ -1,6 +1,6 @@
 import { getCurrentInstance } from '@vue/composition-api';
 import { Category } from '@vue-storefront/commercetools-api';
-import { AgnosticFacet, useVSFContext } from '@vue-storefront/core';
+import { AgnosticFacet } from '@vue-storefront/core';
 
 const nonFilters = ['page', 'sort', 'term', 'itemsPerPage'];
 
@@ -28,7 +28,6 @@ const getFiltersDataFromUrl = (context, onlyFilters) => {
 
 const useUiHelpers = () => {
   const instance = getInstance();
-  const context = useVSFContext();
 
   const getFacetsFromURL = () => {
     const { query, params } = instance.$router.history.current;
@@ -85,17 +84,7 @@ const useUiHelpers = () => {
 
   const isFacetCheckbox = (): boolean => false;
 
-  const formatPrice = (price: number): string => {
-    if (!price) {
-      return null;
-    }
-    const { locale, currency } = context.$ct.config;
-
-    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price);
-  };
-
   return {
-    formatPrice,
     getFacetsFromURL,
     getCatLink,
     changeSorting,

diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js
@@ -141,7 +141,19 @@ export default {
     seo: true,
     langDir: 'lang/',
     vueI18n: {
-      fallbackLocale: 'en'
+      fallbackLocale: 'en',
+      numberFormats: {
+        en: {
+          currency: {
+            style: 'currency', currency: 'USD', currencyDisplay: 'symbol'
+          }
+        },
+        de: {
+          currency: {
+            style: 'currency', currency: 'EUR', currencyDisplay: 'symbol'
+          }
+        }
+      }
     },
     detectBrowserLanguage: {
       cookieKey: 'vsf-locale'

diff --git a/packages/commercetools/theme/pages/Checkout/OrderReview.vue b/packages/commercetools/theme/pages/Checkout/OrderReview.vue
@@ -95,8 +95,8 @@
         <SfTableData class="table__data">{{ cartGetters.getItemQty(product) }}</SfTableData>
         <SfTableData class="table__data price">
           <SfPrice
-            :regular="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).regular)"
-            :special="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).special)"
+            :regular="$n(cartGetters.getItemPrice(product).regular, 'currency')"
+            :special="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
             class="product-price"
           />
         </SfTableData>
@@ -107,12 +107,12 @@
         <div class="summary__total">
           <SfProperty
             name="Subtotal"
-            :value="checkoutGetters.getFormattedPrice(totals.special > 0 ? totals.special : totals.subtotal)"
+            :value="$n(totals.special > 0 ? totals.special : totals.subtotal, 'currency')"
             class="sf-property--full-width property"
           />
           <SfProperty
             name="Shipping"
-            :value="checkoutGetters.getFormattedPrice(checkoutGetters.getShippingMethodPrice(chosenShippingMethod))"
+            :value="$n(checkoutGetters.getShippingMethodPrice(chosenShippingMethod), 'currency')"
             class="sf-property--full-width property"
           />
         </div>

diff --git a/packages/core/docs/commercetools/changelog.md b/packages/core/docs/commercetools/changelog.md
@@ -5,6 +5,7 @@
 - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253))
 - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
 - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
+- removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function
 
 ## 1.0.1-rc.1
 - updated version of core

diff --git a/packages/core/docs/contributing/changelog.md b/packages/core/docs/contributing/changelog.md
@@ -4,6 +4,8 @@
 - added bottom margin to fix visibility of last footer category ([#5253](https://github.com/DivanteLtd/vue-storefront/issues/5253))
 - [BREAKING] refactored names of many factory methods and composable methods, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
 - [BREAKING] changed signatures of factory methods to always 2 arguments, details in linked PR ([#5299](https://github.com/DivanteLtd/vue-storefront/pull/5299))
+- removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function
+
 
 ## 2.1.1-rc.1
 - updated version of nuxt composition-api

diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
@@ -24,8 +24,8 @@
                 :key="cartGetters.getItemSku(product)"
                 :image="cartGetters.getItemImage(product)"
                 :title="cartGetters.getItemName(product)"
-                :regular-price="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).regular)"
-                :special-price="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).special)"
+                :regular-price="$n(cartGetters.getItemPrice(product).regular, 'currency')"
+                :special-price="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
                 :stock="99999"
                 :qty="cartGetters.getItemQty(product)"
                 @input="updateItemQty({ product, quantity: $event })"
@@ -83,7 +83,7 @@
               class="sf-property--full-width sf-property--large my-cart__total-price"
             >
               <template #value>
-                <SfPrice :regular="cartGetters.getFormattedPrice(totals.subtotal)" />
+                <SfPrice :regular="$n(totals.subtotal, 'currency')" />
               </template>
             </SfProperty>
             <nuxt-link :to="`/checkout/${isAuthenticated ? 'shipping' : 'personal-details'}`">

diff --git a/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue b/packages/core/nuxt-theme-module/theme/components/RelatedProducts.vue
@@ -10,8 +10,8 @@
           <SfProductCard
             :title="productGetters.getName(product)"
             :image="productGetters.getCoverImage(product)"
-            :regular-price="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)"
-            :special-price="productGetters.getFormattedPrice(productGetters.getPrice(product).special)"
+            :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+            :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
             :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
           />
         </SfCarouselItem>

diff --git a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
@@ -26,8 +26,8 @@
                 :key="wishlistGetters.getItemSku(product)"
                 :image="wishlistGetters.getItemImage(product)"
                 :title="wishlistGetters.getItemName(product)"
-                :regular-price="wishlistGetters.getFormattedPrice(wishlistGetters.getItemPrice(product).regular)"
-                :special-price="wishlistGetters.getFormattedPrice(wishlistGetters.getItemPrice(product).special)"
+                :regular-price="$n(wishlistGetters.getItemPrice(product).regular, 'currency')"
+                :special-price="wishlistGetters.getItemPrice(product).special && $n(wishlistGetters.getItemPrice(product).special, 'currency')"
                 :stock="99999"
                 image-width="180"
                 image-height="200"
@@ -49,7 +49,7 @@
               <span class="my-wishlist__total-price-label">Total price:</span>
             </template>
             <template #value>
-              <SfPrice :regular="wishlistGetters.getFormattedPrice(totals.subtotal)" />
+              <SfPrice :regular="$n(totals.subtotal, 'currency')" />
             </template>
           </SfProperty>
           </div>

diff --git a/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue b/packages/core/nuxt-theme-module/theme/components/checkout/CartPreview.vue
@@ -15,29 +15,29 @@
       />
       <SfProperty
         name="Subtotal"
-        :value="checkoutGetters.getFormattedPrice(totals.subtotal)"
+        :value="$n(totals.subtotal, 'currency')"
         :class="['sf-property--full-width', 'sf-property--large', { discounted: totals.special > 0 }]"
       />
       <SfProperty
         v-for="discount in discounts"
         :key="discount.id"
         :name="discount.name + (discount.code && ` (${discount.code})`)"
-        :value="'-' + checkoutGetters.getFormattedPrice(discount.value)"
+        :value="'-' + $n(discount.value, 'currency')"
         class="sf-property--full-width sf-property--small"
       />
      <SfProperty
         v-if="totals.special > 0"
-        :value="checkoutGetters.getFormattedPrice(totals.special)"
+        :value="$n(totals.special, 'currency')"
         class="sf-property--full-width sf-property--small property special-price"
       />
       <SfProperty
         name="Shipping"
-        :value="checkoutGetters.getFormattedPrice(checkoutGetters.getShippingMethodPrice(chosenShippingMethod))"
+        :value="$n(checkoutGetters.getShippingMethodPrice(chosenShippingMethod), 'currency')"
         class="sf-property--full-width sf-property--large property"
       />
       <SfProperty
         name="Total"
-        :value="checkoutGetters.getFormattedPrice(totals.total)"
+        :value="$n(totals.total, 'currency')"
         class="sf-property--full-width sf-property--large property-total"
       />
     </div>

diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts b/packages/core/nuxt-theme-module/theme/composables/useUiHelpers/index.ts
@@ -52,15 +52,7 @@ const useUiHelpers = () => {
     return false;
   };
 
-  // eslint-disable-next-line
-  const formatPrice = (price: number): string => {
-    console.warn('[VSF] please implement useUiHelpers.formatPrice.');
-
-    return '00';
-  };
-
   return {
-    formatPrice,
     getFacetsFromURL,
     getCatLink,
     changeSorting,

diff --git a/packages/core/nuxt-theme-module/theme/pages/Category.vue b/packages/core/nuxt-theme-module/theme/pages/Category.vue
@@ -148,8 +148,8 @@
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
               :image="productGetters.getCoverImage(product)"
-              :regular-price="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)"
-              :special-price="productGetters.getFormattedPrice(productGetters.getPrice(product).special)"
+              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
               :max-rating="5"
               :score-rating="productGetters.getAverageRating(product)"
               :show-add-to-cart-button="true"
@@ -176,8 +176,8 @@
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
               :image="productGetters.getCoverImage(product)"
-              :regular-price="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)"
-              :special-price="productGetters.getFormattedPrice(productGetters.getPrice(product).special)"
+              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
               :max-rating="5"
               :score-rating="3"
               :is-on-wishlist="false"

diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/OrderReview.vue
@@ -98,8 +98,8 @@
           <SfTableData class="table__data">{{ cartGetters.getItemQty(product) }}</SfTableData>
           <SfTableData class="table__data">
             <SfPrice
-              :regular="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).regular)"
-              :special="cartGetters.getFormattedPrice(cartGetters.getItemPrice(product).special)"
+              :regular="$n(cartGetters.getItemPrice(product).regular, 'currency')"
+              :special="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
               class="product-price"
             />
           </SfTableData>
@@ -122,19 +122,19 @@
         <div class="summary__total">
           <SfProperty
             name="Subtotal"
-            :value="cartGetters.getFormattedPrice(totals.subtotal)"
+            :value="$n(totals.subtotal, 'currency')"
             class="sf-property--full-width property"
           />
           <SfProperty
             name="Shipping"
-            :value="cartGetters.getFormattedPrice(checkoutGetters.getShippingMethodPrice(chosenShippingMethod))"
+            :value="$n(checkoutGetters.getShippingMethodPrice(chosenShippingMethod), 'currency')"
             class="sf-property--full-width property"
           />
         </div>
         <SfDivider />
         <SfProperty
           name="Total price"
-          :value="cartGetters.getFormattedPrice(totals.total)"
+          :value="$n(totals.total, 'currency')"
           class="sf-property--full-width sf-property--large summary__property-total"
         />
         <SfCheckbox v-model="terms" name="terms" class="summary__terms">

diff --git a/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue b/packages/core/nuxt-theme-module/theme/pages/Checkout/Shipping.vue
@@ -108,7 +108,7 @@
           <template #label="{label}">
             <div class="sf-radio__label shipping__label">
               <div>{{ label }}</div>
-              <div>${{ checkoutGetters.getShippingMethodPrice(item) }}</div>
+              <div>${{ $n(checkoutGetters.getShippingMethodPrice(item), 'currency') }}</div>
             </div>
           </template>
           <template #description="{description}">

diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -39,7 +39,7 @@
             data-cy="home-url_product"
             :title="product.title"
             :image="product.image"
-            :regular-price="product.price.regular"
+            :regular-price="$n(product.price.regular, 'currency')"
             :max-rating="product.rating.max"
             :score-rating="product.rating.score"
             :show-add-to-cart-button="true"

diff --git a/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -21,7 +21,7 @@
           />
           <SfProperty
             name="Total"
-            :value="formatPrice(orderGetters.getPrice(currentOrder))"
+            :value="$n(orderGetters.getPrice(currentOrder), 'currency')"
             class="sf-property--full-width property"
           />
         </div>
@@ -34,7 +34,7 @@
           <SfTableRow v-for="(item, i) in orderGetters.getItems(currentOrder)" :key="i">
             <SfTableData class="products__name"><SfLink :link="'/p/'+orderGetters.getItemSku(item)+'/'+orderGetters.getItemSku(item)">{{orderGetters.getItemName(item)}}</SfLink></SfTableData>
             <SfTableData>{{orderGetters.getItemQty(item)}}</SfTableData>
-            <SfTableData>{{formatPrice(orderGetters.getItemPrice(item))}}</SfTableData>
+            <SfTableData>{{$n(orderGetters.getItemPrice(item), 'currency')}}</SfTableData>
           </SfTableRow>
         </SfTable>
       </div>
@@ -67,7 +67,7 @@
           <SfTableRow v-for="order in orders" :key="orderGetters.getId(order)">
             <SfTableData>{{ orderGetters.getId(order) }}</SfTableData>
             <SfTableData>{{ orderGetters.getDate(order) }}</SfTableData>
-            <SfTableData>{{ formatPrice(orderGetters.getPrice(order)) }}</SfTableData>
+            <SfTableData>{{ $n(orderGetters.getPrice(order), 'currency') }}</SfTableData>
             <SfTableData>
               <span :class="getStatusTextClass(order)">{{ orderGetters.getStatus(order) }}</span>
             </SfTableData>
@@ -99,7 +99,6 @@ import {
 } from '@storefront-ui/vue';
 import { computed, ref } from '@vue/composition-api';
 import { useUserOrders, orderGetters } from '<%= options.generate.replace.composables %>';
-import { useUiHelpers } from '~/composables';
 import { AgnosticOrderStatus } from '@vue-storefront/core';
 import { onSSR } from '@vue-storefront/core';
 
@@ -114,7 +113,6 @@ export default {
   },
   setup() {
     const { orders, search } = useUserOrders();
-    const { formatPrice } = useUiHelpers();
     const currentOrder = ref(null);
 
     onSSR(async () => {
@@ -167,8 +165,7 @@ export default {
       orderGetters,
       downloadOrder,
       downloadOrders,
-      currentOrder,
-      formatPrice
+      currentOrder
     };
   }
 };

diff --git a/packages/core/nuxt-theme-module/theme/pages/Product.vue b/packages/core/nuxt-theme-module/theme/pages/Product.vue
@@ -22,8 +22,8 @@
         </div>
         <div class="product__price-and-rating">
           <SfPrice
-            :regular="productGetters.getFormattedPrice(productGetters.getPrice(product).regular)"
-            :special="productGetters.getFormattedPrice(productGetters.getPrice(product).special)"
+            :regular="$n(productGetters.getPrice(product).regular, 'currency')"
+            :special="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
           />
           <div>
             <div class="product__rating">