refactor(theme): refactor useCart composable

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

@@ -1,5 +1,8 @@
-/* istanbul ignore file */
-/* eslint-disable no-param-reassign */
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import {
   ComposableFunctionArgs,
   Context,

packages/composables/src/composables/useFacet/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import {
   ComposableFunctionArgs,
   Context,

packages/composables/src/composables/useGuestUser/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import { SetGuestEmailOnCartInput } from '@vue-storefront/magento-api';
 import { Logger } from '@vue-storefront/core';
 import { useGuestUserFactory, UseGuestUserFactoryParams } from '../../factories/useGuestUserFactory';

packages/composables/src/factories/useCartFactory.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import {
   CustomQuery, UseCart, Context, FactoryParams, UseCartErrors, PlatformApi, sharedRef, Logger, configureFactoryParams, ComposableFunctionArgs,
 } from '@vue-storefront/core';

packages/composables/src/factories/useGuestUserFactory.ts

@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import { Ref, computed } from '@vue/composition-api';
 import {
   Context,

packages/composables/src/getters/cartGetters.ts

@@ -13,6 +13,7 @@ import {
   Product,
   SelectedShippingMethod, ConfigurableCartItem, ProductInterface,
 } from '@vue-storefront/magento-api';
+
 import productGetters from './productGetters';
 import { AgnosticPaymentMethod } from '../types';
 
@@ -145,7 +146,7 @@ export const getCoupons = (cart: Cart): AgnosticCoupon[] => (Array.isArray(cart?
   code: c.code,
 } as AgnosticCoupon)) : []);
 
-export const getDiscounts = (cart: Cart): AgnosticDiscount[] => (Array.isArray(cart?.prices.discounts) ? cart.prices.discounts.map((d) => ({
+export const getDiscounts = (cart: Cart): AgnosticDiscount[] => (Array.isArray(cart?.prices?.discounts) ? cart.prices.discounts.map((d) => ({
   id: d.label,
   name: d.label,
   description: '',

packages/theme/components/AppHeader.vue

@@ -170,7 +170,6 @@ import {
 import {
   cartGetters,
   categoryGetters,
-  useCart,
   useCategorySearch,
   wishlistGetters,
 } from '@vue-storefront/magento';
@@ -192,6 +191,7 @@ import {
 } from '@storefront-ui/vue/src/utilities/mobile-observer.js';
 import debounce from 'lodash.debounce';
 import {
+  useCart,
   useUiHelpers,
   useUiState,
   useWishlist,

packages/theme/components/CartSidebar.vue

@@ -253,11 +253,11 @@ import {
   useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import {
-  useCart,
   cartGetters,
 } from '@vue-storefront/magento';
 import _debounce from 'lodash.debounce';
 import {
+  useCart,
   useUiState,
   useUiNotification,
   useUser,

packages/theme/components/Checkout/CartPreview.vue

@@ -53,7 +53,8 @@
 <script>
 import { SfHeading, SfProperty, SfCharacteristic } from '@storefront-ui/vue';
 import { computed, ref, defineComponent } from '@nuxtjs/composition-api';
-import { useCart, cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '@vue-storefront/magento';
+import { useCart } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 import CouponCode from '../CouponCode.vue';
 

packages/theme/components/Checkout/VsfShippingProvider.vue

@@ -83,7 +83,6 @@
 
 <script>
 import {
-  useCart,
   useShippingProvider,
   cartGetters,
   useGetShippingMethods,
@@ -93,6 +92,7 @@ import {
 } from '@storefront-ui/vue';
 
 import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
 
 export default defineComponent({

packages/theme/components/CouponCode.vue

@@ -27,14 +27,15 @@
 
 <script>
 import { SfButton, SfInput } from '@storefront-ui/vue';
-import { useCart, cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '@vue-storefront/magento';
 import {
   computed,
   onMounted,
   watch,
   ref,
   defineComponent,
 } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 
 export default defineComponent({
   name: 'CouponCode',

packages/theme/components/Products/BundleProductSelector.vue

@@ -81,13 +81,14 @@ import {
   SfRadio,
   SfButton,
 } from '@storefront-ui/vue';
-import { productGetters, useCart } from '@vue-storefront/magento';
+import { productGetters } from '@vue-storefront/magento';
 import {
   computed,
   defineComponent,
   ref,
   watch,
 } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 import { bundleProductInitialSelector } from '~/helpers/product/bundleProduct';
 import { productData } from '~/helpers/product/productData';
 

packages/theme/components/Products/GroupedProductSelector.vue

@@ -44,12 +44,12 @@ import {
   SfButton,
   SfQuantitySelector,
 } from '@storefront-ui/vue';
-import { productGetters, useCart } from '@vue-storefront/magento';
+import { productGetters } from '@vue-storefront/magento';
 import {
   computed, watch, ref, defineComponent,
 } from '@nuxtjs/composition-api';
+import { useCart, useImage } from '~/composables';
 import { productData } from '~/helpers/product/productData';
-import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'GroupedProductSelector',

packages/theme/composables/index.ts

@@ -8,6 +8,8 @@ export { default as useCurrency } from './useCurrency';
 export { default as useExternalCheckout } from './useExternalCheckout';
 export { default as useWishlist } from './useWishlist';
 export { default as useUser } from './useUser';
+export { default as useGuestUser } from './useGuestUser';
 export { default as useForgotPassword } from './useForgotPassword';
 export { default as useCategory } from './useCategory';
 export { default as useFacet } from './useFacet';
+export { default as useCart } from './useCart';

packages/theme/composables/useCart/commands/addItemCommand.ts

@@ -0,0 +1,162 @@
+import { Context, Logger } from '@vue-storefront/core';
+import {
+  AddConfigurableProductsToCartInput,
+  AddDownloadableProductsToCartInput,
+  AddProductsToCartInput,
+  AddVirtualProductsToCartInput,
+  Cart,
+} from '@vue-storefront/magento-api';
+
+// TODO this whole file must be refactored
+export const addItemCommand = {
+  execute: async (
+    context: Context,
+    {
+      product,
+      quantity,
+      currentCart,
+    },
+  ) => {
+    Logger.debug('[Magento]: Add item to cart', {
+      product,
+      quantity,
+      currentCart,
+    });
+
+    const apiState = context.$magento.config.state;
+    const currentCartId = apiState.getCartId();
+
+    if (!product) {
+      return;
+    }
+    // @ts-ignore
+    // eslint-disable-next-line no-underscore-dangle
+    switch (product.__typename) {
+      case 'SimpleProduct':
+        const simpleCartInput: AddProductsToCartInput = {
+          cartId: currentCartId,
+          cartItems: [
+            {
+              quantity,
+              sku: product.sku,
+            },
+          ],
+        };
+
+        const simpleProduct = await context.$magento.api.addProductsToCart(simpleCartInput);
+
+        Logger.debug('[Result]:', { data: simpleProduct });
+
+        // eslint-disable-next-line consistent-return
+        return simpleProduct
+          .data
+          .addProductsToCart
+          .cart as unknown as Cart;
+      case 'ConfigurableProduct':
+        const cartItems = [
+          {
+            parent_sku: product.sku,
+            data: {
+              quantity,
+              sku: product.configurable_product_options_selection?.variant?.sku || '',
+            },
+          },
+        ];
+
+        const configurableCartInput: AddConfigurableProductsToCartInput = {
+          cart_id: currentCartId,
+          cart_items: cartItems,
+        };
+
+        const configurableProduct = await context.$magento.api.addConfigurableProductsToCart(configurableCartInput);
+
+        Logger.debug('[Result]:', { data: configurableProduct });
+
+        // eslint-disable-next-line consistent-return
+        return configurableProduct
+          .data
+          .addConfigurableProductsToCart
+          .cart as unknown as Cart;
+      case 'BundleProduct':
+        const createEnteredOptions = () =>
+        // @ts-ignore
+        // eslint-disable-next-line implicit-arrow-linebreak
+          product.bundle_options.map((bundleOption) => ({
+            ...bundleOption,
+            value: bundleOption.value.toString(),
+          }));
+
+        const bundleCartInput: AddProductsToCartInput = {
+          cartId: currentCartId,
+          cartItems: [
+            {
+              quantity,
+              sku: product.sku,
+              entered_options: createEnteredOptions(),
+            },
+          ],
+        };
+
+        const bundleProduct = await context.$magento.api.addProductsToCart(bundleCartInput);
+
+        Logger.debug('[Result]:', { data: bundleProduct });
+
+        // eslint-disable-next-line consistent-return
+        return bundleProduct
+          .data
+          .addProductsToCart
+          .cart as unknown as Cart;
+      case 'DownloadableProduct':
+        const downloadableCartItems = [
+          {
+            data: {
+              quantity,
+              sku: product.sku,
+            },
+            downloadable_product_links: product.downloadable_product_links.map((dpl) => ({ link_id: dpl.id })),
+          },
+        ];
+
+        const downloadableCartInput: AddDownloadableProductsToCartInput = {
+          cart_id: currentCartId,
+          cart_items: downloadableCartItems,
+        };
+
+        const downloadableProduct = await context.$magento.api.addDownloadableProductsToCart(downloadableCartInput);
+
+        Logger.debug('[Result DownloadableProduct]:', { data: downloadableProduct });
+
+        // eslint-disable-next-line consistent-return
+        return downloadableProduct
+          .data
+          .addDownloadableProductsToCart
+          .cart as unknown as Cart;
+      case 'VirtualProduct':
+        const virtualCartInput: AddVirtualProductsToCartInput = {
+          cart_id: currentCartId,
+          cart_items: [
+            {
+              data: {
+                quantity,
+                sku: product.sku,
+              },
+            },
+          ],
+        };
+        const virtualProduct = await context.$magento.api.addVirtualProductsToCart(virtualCartInput);
+
+        Logger.debug('[Result VirtualProduct]:', { data: virtualProduct });
+
+        // eslint-disable-next-line consistent-return
+        return virtualProduct
+          .data
+          .addVirtualProductsToCart
+          .cart as unknown as Cart;
+      default:
+        // todo implement other options
+        // @ts-ignore
+        // eslint-disable-next-line no-underscore-dangle
+        throw new Error(`Product Type ${product.__typename} not supported in add to cart yet`);
+    }
+  },
+};

packages/theme/composables/useCart/commands/applyCouponCommand.ts

@@ -0,0 +1,27 @@
+import { Context, Logger } from '@vue-storefront/core';
+import { Cart } from '@vue-storefront/magento-api';
+
+export const applyCouponCommand = {
+  execute: async (context: Context, {
+    currentCart,
+    couponCode,
+    customQuery = { applyCouponToCart: 'applyCouponToCart' },
+  }) => {
+    Logger.debug('[Magento]: Apply coupon on cart', {
+      couponCode,
+      currentCart,
+    });
+
+    const { data } = await context.$magento.api.applyCouponToCart({
+      cart_id: currentCart.id,
+      coupon_code: couponCode,
+    }, customQuery);
+
+    Logger.debug('[Result]:', { data });
+
+    return {
+      updatedCart: data.applyCouponToCart.cart as unknown as Cart,
+      updatedCoupon: { code: couponCode },
+    };
+  },
+};

packages/theme/composables/useCart/commands/clearCartCommand.ts

@@ -0,0 +1,7 @@
+import { Context } from '@vue-storefront/core';
+
+export const clearCartCommand = {
+  execute: (context: Context) => {
+    context.$magento.config.state.setCartId(null);
+  },
+};