refactor(theme)!: refactored useUpsellProducts composable

packages/composables/src/composables/useUpsellProducts/index.ts

@@ -14,6 +14,9 @@ import {
 } from '../../factories/useUpsellProductsFactory';
 import { UseUpsellProducts } from '../../types/composables';
 
+/**
+ * @deprecated since version 1.0.0
+ */
 const factoryParams: UseUpsellProductsFactoryParams<UpsellProductsQuery['products']['items'][0]['upsell_products'], ProductsSearchParams> = {
   productsSearch: async (
     context: Context,

packages/composables/src/factories/useUpsellProductsFactory.ts

@@ -20,6 +20,9 @@ export interface UseUpsellProductsFactoryParams<
   productsSearch: (context: Context, params: ComposableFunctionArgs<UPSELL_PRODUCTS_SEARCH_PARAMS>) => Promise<PRODUCTS>;
 }
 
+/**
+ * @deprecated since version 1.0.0
+ */
 export function useUpsellProductsFactory<PRODUCTS, UPSELL_PRODUCTS_SEARCH_PARAMS, API extends PlatformApi = any>(
   factoryParams: UseProductFactoryParams<PRODUCTS, UPSELL_PRODUCTS_SEARCH_PARAMS, API>,
 ) {

packages/theme/components/UpsellProducts.vue

@@ -6,9 +6,8 @@
   />
 </template>
 <script>
-import { defineComponent } from '@nuxtjs/composition-api';
-import { useUpsellProducts } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
+import { defineComponent, useFetch, ref } from '@nuxtjs/composition-api';
+import { useUpsellProducts } from '~/composables';
 import ProductsCarousel from '~/components/ProductsCarousel.vue';
 import { productData } from '~/helpers/product/productData';
 
@@ -19,9 +18,10 @@ export default defineComponent({
   },
   setup() {
     const { id } = productData();
-    const { search, products, loading } = useUpsellProducts(id);
+    const { search, loading } = useUpsellProducts(id);
+    const products = ref([]);
 
-    onSSR(async () => {
+    useFetch(async () => {
       const baseSearchQuery = {
         filter: {
           sku: {
@@ -30,7 +30,7 @@ export default defineComponent({
         },
       };
 
-      await search(baseSearchQuery);
+      products.value = await search(baseSearchQuery);
     });
 
     return {

packages/theme/composables/index.ts

@@ -21,6 +21,7 @@ export { default as useShipping } from './useShipping';
 export { default as useShippingProvider } from './useShippingProvider';
 export { default as useBilling } from './useBilling';
 export { default as useRelatedProducts } from './useRelatedProducts';
+export { default as useUpsellProducts } from './useUpsellProducts';
 export { default as usePaymentProvider } from './usePaymentProvider';
 export { default as useAddresses } from './useAddresses';
 export { default as useMakeOrder } from './useMakeOrder';

packages/theme/composables/useUpsellProducts/index.ts

@@ -0,0 +1,55 @@
+import { ref, useContext, Ref } from '@nuxtjs/composition-api';
+import { ProductsSearchParams, Logger } from '@vue-storefront/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { GetProductSearchParams } from '@vue-storefront/magento-api';
+import { UseUpsellProductsError, UpsellProducts, UseUpsellProductsInterface } from './useUpsellProducts';
+import { Maybe, ComposableFunctionArgs } from '~/composables/types';
+
+export const useUpsellProducts = (): UseUpsellProductsInterface => {
+  const { app } = useContext();
+  const loading = ref(false);
+  const error: Ref<UseUpsellProductsError> = ref({
+    search: null,
+  });
+
+  const search = async (params: ComposableFunctionArgs<ProductsSearchParams>): Promise<Maybe<Array<UpsellProducts>>> => {
+    const {
+      customQuery,
+      ...searchParams
+    } = params;
+
+    let results = null;
+
+    try {
+      loading.value = true;
+
+      Logger.debug('[Magento] Load upsell products based on ', { searchParams });
+
+      const { data } = await app
+        .$vsf
+        .$magento
+        .api
+        .upsellProduct(searchParams as GetProductSearchParams);
+
+      Logger.debug('[Result] Upsell products:', { data });
+
+      results = data.products?.items[0]?.upsell_products;
+      error.value.search = null;
+    } catch (err) {
+      error.value.search = err;
+      Logger.error('useUpsellProducts/search', err);
+    } finally {
+      loading.value = false;
+    }
+
+    return results;
+  };
+
+  return {
+    search,
+    loading,
+    error,
+  };
+};
+
+export default useUpsellProducts;

packages/theme/composables/useUpsellProducts/useUpsellProducts.d.ts

@@ -0,0 +1,19 @@
+import { ComposableFunctionArgs, ProductsSearchParams } from '@vue-storefront/core';
+import { Ref } from '@nuxtjs/composition-api';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  UpsellProductsQuery,
+} from '~/modules/GraphQL/types';
+import { Maybe } from '~/composables/types';
+
+export interface UseUpsellProductsError {
+  search: Error | null;
+}
+
+export type UpsellProducts = UpsellProductsQuery['products']['items'][0]['upsell_products'];
+
+export interface UseUpsellProductsInterface {
+  search: (params?: ComposableFunctionArgs<ProductsSearchParams>) => Promise<Maybe<Array<UpsellProducts>>>;
+  loading: Ref<boolean>;
+  error: Ref<UseUpsellProductsError>;
+}

packages/theme/pages/Product.vue

@@ -194,12 +194,12 @@
                   <SfReview
                     v-for="review in reviews"
                     v-show="!reviewsLoading"
-                    :key="reviewGetters.getReviewId(review)"
-                    :author="reviewGetters.getReviewAuthor(review)"
-                    :date="reviewGetters.getReviewDate(review)"
-                    :message="reviewGetters.getReviewMessage(review)"
+                    :key="getReviewId(review)"
+                    :author="getReviewAuthor(review)"
+                    :date="getReviewDate(review)"
+                    :message="getReviewMessage(review)"
                     :max-rating="5"
-                    :rating="reviewGetters.getReviewRating(review)"
+                    :rating="getReviewRating(review)"
                     :char-limit="250"
                     read-more-text="Read more"
                     hide-full-text="Read less"
@@ -276,10 +276,21 @@ import {
   useContext,
   useRoute,
   useRouter,
-  defineComponent, useFetch,
+  defineComponent,
+  useAsync,
 } from '@nuxtjs/composition-api';
 import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
-import { productGetters, reviewGetters } from '~/getters';
+import productGetters, {
+  getSwatchData as getProductSwatchData,
+  getName as getProductName
+} from '~/getters/productGetters';
+import reviewGetters, {
+  getReviewId,
+  getReviewAuthor,
+  getReviewDate,
+  getReviewMessage,
+  getReviewRating,
+} from '~/getters/reviewGetters';
 import {
   useProduct, useCart, useWishlist, useUser, useReview,
 } from '~/composables';
@@ -459,7 +470,7 @@ export default defineComponent({
       });
     };
 
-    useFetch(async () => {
+    useAsync(async () => {
       const baseSearchQuery = {
         filter: {
           sku: {
@@ -521,15 +532,19 @@ export default defineComponent({
       productDataIsLoading,
       productDescription,
       productGallery,
-      getProductName: productGetters.getName,
-      getProductSwatchData: productGetters.getSwatchData,
+      getProductName,
+      getProductSwatchData,
       productLoading,
       productPrice,
       productReviews,
       productShortDescription,
       productSpecialPrice,
       qty,
-      reviewGetters,
+      getReviewId,
+      getReviewAuthor,
+      getReviewDate,
+      getReviewMessage,
+      getReviewRating,
       reviews,
       reviewsLoading,
       successAddReview,