refactor(composables): update load method of useCart composable (#…

…182)

* refactor(composables): do not create empty cart on M2 side, clean up load method

* refactor(composables): overwrite useCartFactory for new param

packages/composables/src/api-extractor-data.ts

@@ -11,6 +11,7 @@
 
 export * from './index';
 export * from './factories/useAddressesFactory';
+export * from './factories/useCartFactory';
 export * from './factories/useCategorySearchFactory';
 export * from './factories/useConfigFactory';
 export * from './factories/useContentFactory';

packages/composables/src/composables/useCart/index.ts

@@ -3,8 +3,6 @@
 import {
   Context,
   Logger,
-  useCartFactory,
-  UseCartFactoryParams,
 } from '@vue-storefront/core';
 import {
   AddConfigurableProductsToCartInput,
@@ -15,56 +13,60 @@ import {
   RemoveItemFromCartInput,
   UpdateCartItemsInput,
 } from '@vue-storefront/magento-api';
+import {
+  UseCartFactoryParams,
+  useCartFactory,
+} from '../../factories/useCartFactory';
 
 const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
-  load: async (context: Context) => {
+  load: async (context: Context, params: {
+    customQuery?: any;
+    realCart?: boolean;
+  }) => {
     const apiState = context.$magento.config.state;
     Logger.debug('[Magento Storefront]: Loading Cart');
+
     const customerToken = apiState.getCustomerToken();
+    const virtual = !params.realCart;
 
-    const createNewCart = async (): Promise<string> => {
+    const createVirtualCart = () => (null as Cart);
+
+    const createRealCart = async (): Promise<string> => {
       Logger.debug('[Magento Storefront]: useCart.load.createNewCart');
 
       apiState.setCartId();
 
       const { data } = await context.$magento.api.createEmptyCart();
-
       Logger.debug('[Result]:', { data });
 
       apiState.setCartId(data.createEmptyCart);
 
       return data.createEmptyCart;
     };
 
-    const getCartData = async (id?: string) => {
-      const fetchData = async (cartId = id) => {
-        apiState.setCartId(cartId);
-        const cartResponse = await context.$magento.api.cart(cartId);
-
-        Logger.debug('[Result]:', { data: cartResponse });
+    const getCartData = async (id: string) => {
+      Logger.debug('[Magento Storefront]: useCart.load.getCartData ID->', id);
 
-        return cartResponse.data.cart as unknown as Cart;
-      };
+      const cartResponse = await context.$magento.api.cart(id);
+      Logger.debug('[Result]:', { data: cartResponse });
 
-      try {
-        Logger.debug('[Magento Storefront]: useCart.load.getCartData ID->', id);
-
-        return await fetchData();
-      } catch {
-        apiState.setCartId();
+      return cartResponse.data.cart as unknown as Cart;
+    };
 
-        const cartId = await createNewCart();
+    const getCart = async (virtualCart: boolean, cartId?: string) => {
+      if (!cartId) {
+        if (virtualCart) {
+          return createVirtualCart();
+        }
 
-        return await fetchData(cartId);
+        cartId = await createRealCart();
+        apiState.setCartId(cartId);
       }
-    };
 
-    const generateCart = async (id?: string) => {
-      const cartId = await createNewCart();
-
-      return getCartData(id || apiState.getCartId() || cartId);
+      return getCartData(cartId);
     };
 
+    // Try to load cart for existing customer, clean customer token if not possible
     if (customerToken) {
       try {
         const result = await context.$magento.api.customerCart();
@@ -73,23 +75,19 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
         return result.data.customerCart as unknown as Cart;
       } catch {
         apiState.setCustomerToken();
-
-        return await generateCart();
       }
     }
 
-    const cartId = apiState.getCartId();
-
     try {
-      if (!cartId) {
-        return await generateCart();
-      }
-
-      return await getCartData(cartId);
+      // If it's not existing customer check if cart id is set and try to load it
+      const cartId = apiState.getCartId();
+      return await getCart(virtual, cartId);
     } catch {
-      return generateCart();
+      apiState.setCartId();
+      return await getCart(virtual);
     }
   },
+
   addItem: async (context: Context, {
     product,
     quantity,
@@ -100,9 +98,10 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
 
     const apiState = context.$magento.config.state;
     let currentCartId = apiState.getCartId();
-
     if (!currentCartId) {
-      await factoryParams.load(context, {});
+      await factoryParams.load(context, {
+        realCart: true,
+      });
 
       currentCartId = apiState.getCartId();
     }
@@ -244,13 +243,20 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       ],
     };
 
-    const { data } = await context.$magento.api.updateCartItems(updateCartParams);
+    try {
+      const { data } = await context.$magento.api.updateCartItems(updateCartParams);
 
-    Logger.debug('[Result]:', { data });
+      Logger.debug('[Result]:', { data });
 
-    return data
-      .updateCartItems
-      .cart as unknown as Cart;
+      return data
+        .updateCartItems
+        .cart as unknown as Cart;
+    } catch {
+      // If we can't change quantity, the card could be expired on Magento side, try to reload
+      return await factoryParams.load(context, {
+        realCart: true,
+      });
+    }
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   clear: (context: Context, _params = null) => {
@@ -298,9 +304,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       currentCart,
       product,
     },
-  ) => !!currentCart
-    .items
-    .find((cartItem) => cartItem.product.uid === product.uid),
+  ) => !!currentCart?.items.find((cartItem) => cartItem.product.uid === product.uid),
 };
 
 export default useCartFactory<Cart, CartItem, Product>(factoryParams);