fix: m2-668. fixed pricing calculation on pdp

Author: Marcin Kwiatkowski

packages/api-client/src/api/productDetail/productDetailsQuery.ts

@@ -90,51 +90,29 @@ export default gql`
         }
         options_container
         special_to_date
-        ... on BundleProduct {
-          items {
-            position
-            required
-            sku
-            title
-            type
-            uid
-            options {
-              can_change_quantity
-              is_default
-              position
-              uid
-              quantity
-              product {
-                uid
-                sku
-                name
-                price_range {
-                  maximum_price {
-                    final_price {
-                      currency
-                      value
-                    }
-                    regular_price {
-                      currency
-                      value
-                    }
-                  }
-                  minimum_price {
-                    final_price {
-                      currency
-                      value
-                    }
-                    regular_price {
-                      currency
-                      value
-                    }
-                  }
-                }
+        ... on ConfigurableProduct {
+            price_range {
+            maximum_price {
+              final_price {
+                currency
+                value
+              }
+              regular_price {
+                currency
+                value
+              }
+            }
+            minimum_price {
+              final_price {
+                currency
+                value
+              }
+              regular_price {
+                currency
+                value
               }
             }
           }
-        }
-        ... on ConfigurableProduct {
           configurable_options {
             attribute_code
             attribute_uid
@@ -190,47 +168,7 @@ export default gql`
             }
           }
         }
-        ... on GroupedProduct {
-          items {
-            position
-            qty
-            product {
-              uid
-              sku
-              name
-              stock_status
-              only_x_left_in_stock
-              price_range {
-                maximum_price {
-                  final_price {
-                    currency
-                    value
-                  }
-                  regular_price {
-                    currency
-                    value
-                  }
-                }
-                minimum_price {
-                  final_price {
-                    currency
-                    value
-                  }
-                  regular_price {
-                    currency
-                    value
-                  }
-                }
-              }
-              thumbnail {
-                url
-                position
-                disabled
-                label
-              }
-            }
-          }
-        }
+
         ... on DownloadableProduct {
           downloadable_product_samples {
             sample_url

packages/theme/modules/catalog/pages/product.vue

@@ -38,6 +38,7 @@ import {
   useFetch,
   onMounted,
 } from '@nuxtjs/composition-api';
+import { merge } from 'lodash-es';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 import { SfBreadcrumbs, SfLoader } from '@storefront-ui/vue';
 import { getBreadcrumbs } from '~/modules/catalog/product/getters/productGetters';
@@ -131,14 +132,15 @@ export default defineComponent({
     });
 
     onMounted(async () => {
-      if (product.value) {
-        const { data } = await query<ProductDetailsQuery>(getProductPriceBySkuGql, { sku: product.value.sku });
-
-        product.value = {
-          ...product.value,
-          price_range: data.products?.items?.[0].price_range,
-        };
+      if (!product.value) {
+        await fetchProduct();
       }
+
+      const { data } = await query<ProductDetailsQuery>(getProductPriceBySkuGql, { sku: product.value.sku });
+
+      product.value = {
+        ...merge(product.value, data.products?.items?.[0] as Product),
+      };
     });
 
     return {

packages/theme/modules/catalog/pricing/getGroupedProductPriceCommand.ts

@@ -8,8 +8,8 @@ export function getGroupedProductPriceCommand(product: GroupedProduct): number {
     return regular > special && special !== null ? special : regular;
   };
 
-  return product.items.reduce(
+  return product.items ? product.items.reduce(
     (acc, curr) => curr.qty * evalProductPrice(curr.product) + acc,
     0,
-  );
+  ) : 0;
 }

packages/theme/modules/catalog/product/components/product-types/bundle/BundleProduct.vue

@@ -37,23 +37,23 @@
         />
       </div>
       <div class="product__price-and-rating">
-        <client-only>
-          <div class="product__price">
-            <span class="product__price-label">{{ $t('From') }}</span>
-            <SfPrice
-              :regular="$fc(productPrice)"
-              :special="productSpecialPrice && $fc(productSpecialPrice)"
-            />
-            <span class="product__price-label">{{ $t('To') }}</span>
-            <SfPrice
-              :regular="$fc(productMaximumPrice)"
-            />
+        <div class="product__price">
+          <span class="product__price-label">{{ $t('From') }}</span>
+          <SfPrice
+            :regular="$fc(productPrices.regular)"
+            :special="productPrices.special && $fc(productPrices.special)"
+          />
+          <span class="product__price-label">{{ $t('To') }}</span>
+          <SfPrice
+            :regular="$fc(productPrices.maximum)"
+          />
+          <div v-if="customizationPrice">
             <span class="product__price-label">{{ $t('Your customization') }}</span>
             <SfPrice
               :regular="$fc(customizationPrice)"
             />
           </div>
-        </client-only>
+        </div>
         <div>
           <div class="product__rating">
             <SfRating
@@ -90,13 +90,17 @@
           tag="p"
           class="product__description desktop-only"
         />
-        <client-only>
-          <BundleProductSelector
-            :can-add-to-cart="canAddToCart(product, qty)"
-            :product="product"
-            @update-price="customizationPrice = $event"
-          />
-        </client-only>
+        <BundleProductSelector
+          v-if="productPrices.regular"
+          :can-add-to-cart="canAddToCart(product, qty)"
+          :product="product"
+          @update-price="customizationPrice = $event"
+        />
+        <div v-else>
+          <BundleProductOptionSkeleton />
+          <BundleProductOptionSkeleton />
+          <BundleProductOptionSkeleton />
+        </div>
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"
@@ -155,10 +159,13 @@ import ProductTabs from '~/modules/catalog/product/components/tabs/ProductTabs.v
 import { useProductGallery } from '~/modules/catalog/product/composables/useProductGallery';
 import { Product } from '~/modules/catalog/product/types';
 import { TabsConfig, useProductTabs } from '~/modules/catalog/product/composables/useProductTabs';
+import BundleProductOptionSkeleton
+  from '~/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue';
 
 export default defineComponent({
   name: 'BundleProduct',
   components: {
+    BundleProductOptionSkeleton,
     BundleProductSelector,
     HTMLContent,
     LazyHydrate,
@@ -199,10 +206,11 @@ export default defineComponent({
       () => props.product?.description?.html || '',
     );
 
-    const productPrice = ref(getProductPrice(props.product).regular);
-    const productSpecialPrice = ref(getProductPrice(props.product).special);
-    const productMaximumPrice = ref(getProductPrice(props.product).maximum);
-    const customizationPrice = ref(productSpecialPrice.value ?? productPrice.value);
+    // const productPrice = computed(() => getProductPrice(props.product).regular);
+    // const productSpecialPrice = computed(() => getProductPrice(props.product).special);
+    // const productMaximumPrice = computed(() => getProductPrice(props.product).maximum);
+    const productPrices = computed(() => getProductPrice(props.product));
+    const customizationPrice = ref(productPrices.value.special ?? productPrices.value.regular);
 
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
@@ -218,9 +226,7 @@ export default defineComponent({
       productGallery,
       getProductName,
       getProductSwatchData,
-      productPrice,
-      productSpecialPrice,
-      productMaximumPrice,
+      productPrices,
       customizationPrice,
       productShortDescription,
       qty,

packages/theme/modules/catalog/product/components/product-types/bundle/BundleProductOptionSkeleton.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <SkeletonLoader
+      width="100%"
+      height="23px"
+    />
+    <SkeletonLoader
+      width="100%"
+      height="240px"
+    />
+    <div>
+      <SkeletonLoader
+        width="80px"
+        height="23px"
+      />
+    </div>
+    <SkeletonLoader
+      width="108px"
+      height="52px"
+    />
+  </div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+} from '@nuxtjs/composition-api';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+
+export default defineComponent({
+  name: 'BundleProductOptionSkeleton',
+  components: {
+    SkeletonLoader,
+  },
+});
+</script>

packages/theme/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue

@@ -37,12 +37,10 @@
         />
       </div>
       <div class="product__price-and-rating">
-        <client-only>
-          <SfPrice
-            :regular="$fc(productPrice)"
-            :special="productSpecialPrice && $fc(productSpecialPrice)"
-          />
-        </client-only>
+        <SfPrice
+          :regular="$fc(productPrice)"
+          :special="productSpecialPrice && $fc(productSpecialPrice)"
+        />
         <div>
           <div class="product__rating">
             <SfRating
@@ -293,6 +291,7 @@ export default defineComponent({
 
       emit('fetchProduct', { query: getBaseSearchQuery() });
     };
+
     return {
       addItem,
       addItemToWishlist: addOrRemoveItem,

packages/theme/modules/catalog/product/components/product-types/grouped/GroupedProduct.vue

@@ -37,12 +37,10 @@
         />
       </div>
       <div class="product__price-and-rating">
-        <client-only>
-          <SfPrice
-            :regular="$fc(productPrice)"
-            :special="productSpecialPrice && $fc(productSpecialPrice)"
-          />
-        </client-only>
+        <SfPrice
+          :regular="$fc(productPrice)"
+          :special="productSpecialPrice && $fc(productSpecialPrice)"
+        />
         <div>
           <div class="product__rating">
             <SfRating
@@ -79,13 +77,11 @@
           tag="p"
           class="product__description desktop-only"
         />
-        <client-only>
-          <grouped-product-selector
-            :can-add-to-cart="canAddToCart(product, qty)"
-            :product="product"
-            @update-price="basePrice = $event"
-          />
-        </client-only>
+        <grouped-product-selector
+          :can-add-to-cart="canAddToCart(product, qty)"
+          :product="product"
+          @update-price="basePrice = $event"
+        />
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"

packages/theme/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue

@@ -126,8 +126,8 @@ export default defineComponent({
 
     watch(
       () => props.product,
-      (product) => {
-        const price = getGroupedProductPriceCommand(product);
+      (productNewValue) => {
+        const price = getGroupedProductPriceCommand(productNewValue);
         emit('update-price', price);
       },
       {

packages/theme/modules/catalog/product/components/product-types/simple/SimpleProduct.vue

@@ -37,12 +37,10 @@
         />
       </div>
       <div class="product__price-and-rating">
-        <client-only>
-          <SfPrice
-            :regular="$fc(productPrice)"
-            :special="productSpecialPrice && $fc(productSpecialPrice)"
-          />
-        </client-only>
+        <SfPrice
+          :regular="$fc(productPrice)"
+          :special="productSpecialPrice && $fc(productSpecialPrice)"
+        />
         <div>
           <div class="product__rating">
             <SfRating