From e9c2bc1c141ab85d0b1a56199ce3b2774d245e2b Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Fri, 1 Apr 2022 06:44:48 +0200
Subject: [PATCH] fix(category): move products loading to onMount hook to avoid
 caching prices (#793)

* refactor(prices): make prices non cachable
- add usePrice composable in catalog module
- rework category page to load prices onMounted lifecycle to avoid caching

* refactor(home): make new product carousel non cachable
- load products data onMounted to avoid price caching

* fix(theme): mobile store banner
- replace SfButton with SfLink so we can have images inside elements without breaking hydration

* refactor(theme): change the way related and upsell products are loaded
- upsell/related products on the PDP will be now loaded onMounted hook

M2-306
---
 .../theme/components/MobileStoreBanner.vue    | 14 +++---
 packages/theme/components/RelatedProducts.vue |  6 ++-
 packages/theme/components/UpsellProducts.vue  |  4 +-
 packages/theme/composables/useApi/index.ts    |  6 +++
 .../theme/modules/catalog/pages/default.vue   | 40 ++++++++++++----
 .../pricing/__tests__/usePrice.spec.js        | 48 +++++++++++++++++++
 .../catalog/pricing/getPricesQuery.gql.ts     | 33 +++++++++++++
 .../theme/modules/catalog/pricing/usePrice.ts | 28 +++++++++++
 packages/theme/pages/Home.vue                 | 11 ++---
 9 files changed, 166 insertions(+), 24 deletions(-)
 create mode 100644 packages/theme/modules/catalog/pricing/__tests__/usePrice.spec.js
 create mode 100644 packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts
 create mode 100644 packages/theme/modules/catalog/pricing/usePrice.ts

diff --git a/packages/theme/components/MobileStoreBanner.vue b/packages/theme/components/MobileStoreBanner.vue
index 644874e63..692dc713f 100644
--- a/packages/theme/components/MobileStoreBanner.vue
+++ b/packages/theme/components/MobileStoreBanner.vue
@@ -7,10 +7,11 @@
   >
     <template #call-to-action>
       <div class="app-banner__call-to-action">
-        <SfButton
+        <SfLink
           class="app-banner__button sf-banner__call-to-action"
           aria-label="Go to Apple Product"
           data-testid="banner-cta-button"
+          link="#"
         >
           <SfImage
             src="/homepage/apple.png"
@@ -19,11 +20,12 @@
             :width="134"
             :height="44"
           />
-        </SfButton>
-        <SfButton
+        </SfLink>
+        <SfLink
           class="app-banner__button sf-banner__call-to-action"
           aria-label="Go to Google Product"
           data-testid="banner-cta-button"
+          link="#"
         >
           <SfImage
             src="/homepage/google.png"
@@ -32,7 +34,7 @@
             :width="134"
             :height="44"
           />
-        </SfButton>
+        </SfLink>
       </div>
     </template>
   </SfBanner>
@@ -40,7 +42,7 @@
 <script type="module">
 import {
   SfBanner,
-  SfButton,
+  SfLink,
   SfImage,
 } from '@storefront-ui/vue';
 import { defineComponent } from '@nuxtjs/composition-api';
@@ -49,7 +51,7 @@ export default defineComponent({
   name: 'AppStoreBanner',
   components: {
     SfBanner,
-    SfButton,
+    SfLink,
     SfImage,
   },
 });
diff --git a/packages/theme/components/RelatedProducts.vue b/packages/theme/components/RelatedProducts.vue
index fe7f0744c..8b8aa564d 100644
--- a/packages/theme/components/RelatedProducts.vue
+++ b/packages/theme/components/RelatedProducts.vue
@@ -6,7 +6,9 @@
   />
 </template>
 <script>
-import { defineComponent, useFetch, ref } from '@nuxtjs/composition-api';
+import {
+  defineComponent, ref, onMounted,
+} from '@nuxtjs/composition-api';
 import { useRelatedProducts } from '~/composables';
 import ProductsCarousel from '~/components/ProductsCarousel.vue';
 import { productData } from '~/helpers/product/productData';
@@ -24,7 +26,7 @@ export default defineComponent({
     } = useRelatedProducts();
     const products = ref([]);
 
-    useFetch(async () => {
+    onMounted(async () => {
       const baseSearchQuery = {
         filter: {
           sku: {
diff --git a/packages/theme/components/UpsellProducts.vue b/packages/theme/components/UpsellProducts.vue
index 83d6ea4d0..427de4f11 100644
--- a/packages/theme/components/UpsellProducts.vue
+++ b/packages/theme/components/UpsellProducts.vue
@@ -6,7 +6,7 @@
   />
 </template>
 <script>
-import { defineComponent, useFetch, ref } from '@nuxtjs/composition-api';
+import { defineComponent, ref, onMounted } from '@nuxtjs/composition-api';
 import { useUpsellProducts } from '~/composables';
 import ProductsCarousel from '~/components/ProductsCarousel.vue';
 import { productData } from '~/helpers/product/productData';
@@ -21,7 +21,7 @@ export default defineComponent({
     const { search, loading } = useUpsellProducts(id);
     const products = ref([]);
 
-    useFetch(async () => {
+    onMounted(async () => {
       const baseSearchQuery = {
         filter: {
           sku: {
diff --git a/packages/theme/composables/useApi/index.ts b/packages/theme/composables/useApi/index.ts
index 00e54ead4..e4fc2feea 100644
--- a/packages/theme/composables/useApi/index.ts
+++ b/packages/theme/composables/useApi/index.ts
@@ -6,6 +6,7 @@ export const useApi = () => {
   const { app } = useContext();
   const customerToken = app.$cookies.get(cookieNames.customerCookieName);
   const storeCode = app.$cookies.get(cookieNames.storeCookieName);
+  const currency = app.$cookies.get(cookieNames.currencyCookieName);
   const magentoConfig = app.$vsf.$magento.config;
   // TODO remove once we remove apollo client
   const { useGETForQueries } = magentoConfig.customApolloHttpLinkOptions;
@@ -13,6 +14,7 @@ export const useApi = () => {
   const defaultHeaders: {
     authorization?: string,
     store?: string
+    'Content-Currency'?: string
   } = {};
 
   if (customerToken) {
@@ -23,6 +25,10 @@ export const useApi = () => {
     defaultHeaders.store = storeCode;
   }
 
+  if (currency) {
+    defaultHeaders['Content-Currency'] = currency;
+  }
+
   const query = (
     document: string,
     variables = null,
diff --git a/packages/theme/modules/catalog/pages/default.vue b/packages/theme/modules/catalog/pages/default.vue
index 98f58df2c..3af46c882 100644
--- a/packages/theme/modules/catalog/pages/default.vue
+++ b/packages/theme/modules/catalog/pages/default.vue
@@ -79,7 +79,16 @@
               class="products__product-card"
               @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            />
+            >
+              <template #price>
+                <SfPrice
+                  :class="{ 'display-none': !isPriceLoaded || !$fc(getPrice(product).regular) }"
+                  class="sf-product-card__price"
+                  :regular="$fc(getPrice(product).regular)"
+                  :special="getPrice(product).special && $fc(getPrice(product).special)"
+                />
+              </template>
+            </SfProductCard>
           </transition-group>
           <transition-group
             v-else
@@ -312,7 +321,6 @@ import {
   SfColor,
   SfFilter,
   SfHeading,
-  SfLink,
   SfPagination,
   SfProductCard,
   SfProductCardHorizontal,
@@ -320,10 +328,10 @@ import {
   SfRadio,
   SfSelect,
   SfSidebar,
-  SfImage,
+  SfPrice,
 } from '@storefront-ui/vue';
 import {
-  defineComponent, ref, useContext, useFetch,
+  defineComponent, onMounted, ref, useContext, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
 import { facetGetters, productGetters } from '~/getters';
@@ -341,6 +349,7 @@ import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent.ts';
 import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar';
 import SkeletonLoader from '~/components/SkeletonLoader';
+import { usePrice } from '~/modules/catalog/pricing/usePrice.ts';
 
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
@@ -351,6 +360,7 @@ export default defineComponent({
     CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent'),
     CategorySidebar: () => import('~/modules/catalog/category/components/sidebar/CategorySidebar'),
     EmptyResults: () => import('~/modules/catalog/category/components/EmptyResults'),
+    SfPrice,
     SfButton,
     SfSidebar,
     SfFilter,
@@ -363,9 +373,7 @@ export default defineComponent({
     SfColor,
     SfHeading,
     SfProperty,
-    SfLink,
     LazyHydrate,
-    SfImage,
   },
   middleware: cacheControl({
     'max-age': 60,
@@ -381,7 +389,7 @@ export default defineComponent({
     const cmsContent = ref('');
     const isShowCms = ref(false);
     const isShowProducts = ref(false);
-    const products = ref([]);
+    const products = ssrRef([]);
     const sortBy = ref({});
     const facets = ref([]);
     const pagination = ref({});
@@ -488,13 +496,13 @@ export default defineComponent({
       await searchCategoryProduct(routeData?.entity_uid);
       selectedFilters.value = getSelectedFilterValues();
       products.value = facetGetters.getProducts(result.value) ?? [];
+
       sortBy.value = facetGetters.getSortOptions(result.value);
       facets.value = facetGetters.getGrouped(
         result.value,
         magentoConfig.facets.available,
       );
       pagination.value = facetGetters.getPagination(result.value);
-
       const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
       // eslint-disable-next-line no-underscore-dangle
       const productTags = products.value.map((product) => ({
@@ -506,9 +514,25 @@ export default defineComponent({
       addTags([...tags, ...productTags]);
     });
 
+    const isPriceLoaded = ref(false);
+    onMounted(async () => {
+      const { getPricesBySku } = usePrice();
+      if (products.value.length > 0) {
+        const skus = products.value.map((item) => item.sku);
+        const priceData = await getPricesBySku(skus);
+        products.value = products.value.map((product) => {
+          const modifiedProduct = { ...product };
+          modifiedProduct.price_range = priceData.items.find((item) => item.sku === product.sku).price_range;
+          return modifiedProduct;
+        });
+      }
+      isPriceLoaded.value = true;
+    });
+
     const { getMagentoImage, imageSizes } = useImage();
 
     return {
+      isPriceLoaded,
       ...productGetters,
       ...uiHelpers,
       ...uiState,
diff --git a/packages/theme/modules/catalog/pricing/__tests__/usePrice.spec.js b/packages/theme/modules/catalog/pricing/__tests__/usePrice.spec.js
new file mode 100644
index 000000000..78e4a6050
--- /dev/null
+++ b/packages/theme/modules/catalog/pricing/__tests__/usePrice.spec.js
@@ -0,0 +1,48 @@
+import { usePrice } from '~/modules/catalog/pricing/usePrice';
+import { useApi } from '~/composables/useApi';
+import getPricesQuery from '~/modules/catalog/pricing/getPricesQuery.gql';
+
+jest.mock('~/composables/useApi', () => ({
+  useApi: jest.fn(),
+}));
+
+describe('usePrice', () => {
+  it('Factory returns required methods', () => {
+    const actual = usePrice();
+    expect(actual).toHaveProperty('getPricesBySku');
+    expect(actual).toHaveProperty('getPrices');
+  });
+
+  it('getPrices', async () => {
+    const { getPrices } = usePrice();
+    const pageSize = 20;
+    const currentPage = 1;
+    const variables = { filter: { sku: { eq: 'test' } }, pageSize, currentPage };
+    const expectedResult = { items: [] };
+    const useApiMock = { query: jest.fn(() => (expectedResult)) };
+
+    useApi.mockReturnValue(useApiMock);
+    const actualResult = await getPrices(variables);
+
+    expect(useApiMock.query).toBeCalledTimes(1);
+    expect(useApiMock.query).toBeCalledWith(getPricesQuery, variables);
+    expect(expectedResult).toMatchObject(actualResult);
+  });
+
+  it('getPricesBySku', async () => {
+    const { getPricesBySku } = usePrice();
+    const pageSize = 20;
+    const currentPage = 1;
+    const skus = ['sku1', 'sku2'];
+    const expectedVariables = { filter: { sku: { in: skus } }, pageSize, currentPage };
+    const expectedResult = { items: [] };
+    const useApiMock = { query: jest.fn(() => (expectedResult)) };
+
+    useApi.mockReturnValue(useApiMock);
+    const actualResult = await getPricesBySku(skus, pageSize, currentPage);
+
+    expect(useApiMock.query).toBeCalledTimes(1);
+    expect(useApiMock.query).toBeCalledWith(getPricesQuery, expectedVariables);
+    expect(expectedResult).toMatchObject(actualResult);
+  });
+});
diff --git a/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts b/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts
new file mode 100644
index 000000000..8e5fc94c6
--- /dev/null
+++ b/packages/theme/modules/catalog/pricing/getPricesQuery.gql.ts
@@ -0,0 +1,33 @@
+import { gql } from 'graphql-request';
+
+export default gql`
+  query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 20, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
+    products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
+      items {
+        sku
+        price_range {
+          maximum_price {
+            final_price {
+              currency
+              value
+            }
+            regular_price {
+              currency
+              value
+            }
+          }
+          minimum_price {
+            final_price {
+              currency
+              value
+            }
+            regular_price {
+              currency
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/theme/modules/catalog/pricing/usePrice.ts b/packages/theme/modules/catalog/pricing/usePrice.ts
new file mode 100644
index 000000000..7ae8c1649
--- /dev/null
+++ b/packages/theme/modules/catalog/pricing/usePrice.ts
@@ -0,0 +1,28 @@
+import { useApi } from '~/composables/useApi';
+import getPricesQuery from '~/modules/catalog/pricing/getPricesQuery.gql';
+import { PriceRange } from '~/modules/GraphQL/types';
+import { GetProductSearchParams } from '~/composables/types';
+
+export interface PriceItem {
+  price_range: PriceRange;
+  sku: String;
+}
+
+export interface PriceItems {
+  items: PriceItem[]
+}
+
+export const usePrice = () => {
+  const getPrices = async (variables: GetProductSearchParams): Promise<PriceItems> => {
+    const { query } = useApi();
+    const { products } = await query(getPricesQuery, variables);
+
+    return products ?? { items: [] };
+  };
+
+  const getPricesBySku = async (skus: string[], pageSize = 20, currentPage = 1): Promise<PriceItems> => getPrices(
+    { filter: { sku: { in: skus } }, pageSize, currentPage },
+  );
+
+  return { getPricesBySku, getPrices };
+};
diff --git a/packages/theme/pages/Home.vue b/packages/theme/pages/Home.vue
index f740b8b19..bb18cf312 100644
--- a/packages/theme/pages/Home.vue
+++ b/packages/theme/pages/Home.vue
@@ -99,11 +99,10 @@ import {
 } from '@storefront-ui/vue';
 
 import {
-  computed,
   defineComponent,
   ref,
   useContext,
-  useAsync,
+  onMounted,
 } from '@nuxtjs/composition-api';
 import LazyHydrate from 'vue-lazy-hydration';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
@@ -134,6 +133,7 @@ export default defineComponent({
     const { app } = useContext();
     const year = new Date().getFullYear();
     const { getProductList, loading: newProductsLoading } = useProduct();
+    const newProducts = ref([]);
     const heroes = ref([
       {
         title: app.i18n.t('Colorful summer dresses are already in store'),
@@ -240,7 +240,7 @@ export default defineComponent({
       },
     ]);
 
-    const products = useAsync(async () => {
+    onMounted(async () => {
       const productsData = await getProductList({
         pageSize: 10,
         currentPage: 1,
@@ -250,12 +250,11 @@ export default defineComponent({
       });
 
       addTags([{ prefix: CacheTagPrefix.View, value: 'home' }]);
-      return productsData;
+
+      newProducts.value = productGetters.getFiltered(productsData?.items, { master: true });
     });
 
     // @ts-ignore
-    const newProducts = computed(() => productGetters.getFiltered(products.value?.items, { master: true }));
-
     return {
       banners,
       heroes,