From a04ca599ba25bc42d93cf8f895a7f6180a4c9f8e Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 9 Feb 2022 12:42:51 +0100
Subject: [PATCH] refactor(theme): refactor useCart composable

---
 .../src/composables/useCart/index.ts          |   7 +-
 .../src/composables/useFacet/index.ts         |   5 +
 .../src/composables/useGuestUser/index.ts     |   5 +
 .../src/factories/useCartFactory.ts           |   5 +
 .../src/factories/useGuestUserFactory.ts      |   5 +
 .../composables/src/getters/cartGetters.ts    |   3 +-
 packages/theme/components/AppHeader.vue       |   2 +-
 packages/theme/components/CartSidebar.vue     |   2 +-
 .../theme/components/Checkout/CartPreview.vue |   3 +-
 .../Checkout/VsfShippingProvider.vue          |   2 +-
 packages/theme/components/CouponCode.vue      |   3 +-
 .../Products/BundleProductSelector.vue        |   3 +-
 .../Products/GroupedProductSelector.vue       |   4 +-
 packages/theme/composables/index.ts           |   2 +
 .../useCart/commands/addItemCommand.ts        | 162 +++++++++++
 .../useCart/commands/applyCouponCommand.ts    |  27 ++
 .../useCart/commands/clearCartCommand.ts      |   7 +
 .../useCart/commands/loadCartCommand.ts       |  83 ++++++
 .../useCart/commands/removeCouponCommand.ts   |  19 ++
 .../useCart/commands/removeItemCommand.ts     |  35 +++
 .../useCart/commands/updateItemQtyCommand.ts  |  35 +++
 packages/theme/composables/useCart/index.ts   | 268 ++++++++++++++++++
 .../theme/composables/useCart/useCart.d.ts    |  24 ++
 .../commands/attachToCartCommand.ts           |  17 ++
 .../theme/composables/useGuestUser/index.ts   |  35 +++
 .../useGuestUser/useGuestUser.d.ts            |  20 ++
 packages/theme/composables/useUser/index.ts   |   3 +-
 packages/theme/helpers/cart/addToCart.ts      |   3 +-
 packages/theme/pages/Checkout.vue             |   2 +-
 packages/theme/pages/Checkout/Payment.vue     |   3 +-
 packages/theme/pages/Checkout/UserAccount.vue |   9 +-
 packages/theme/pages/MyAccount/MyWishlist.vue |   5 +-
 packages/theme/pages/Product.vue              |   5 +-
 packages/theme/stores/customer.ts             |  14 +-
 34 files changed, 799 insertions(+), 28 deletions(-)
 create mode 100644 packages/theme/composables/useCart/commands/addItemCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/applyCouponCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/clearCartCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/loadCartCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/removeCouponCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/removeItemCommand.ts
 create mode 100644 packages/theme/composables/useCart/commands/updateItemQtyCommand.ts
 create mode 100644 packages/theme/composables/useCart/index.ts
 create mode 100644 packages/theme/composables/useCart/useCart.d.ts
 create mode 100644 packages/theme/composables/useGuestUser/commands/attachToCartCommand.ts
 create mode 100644 packages/theme/composables/useGuestUser/index.ts
 create mode 100644 packages/theme/composables/useGuestUser/useGuestUser.d.ts

diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
index 6383819e0..e073fcfe6 100644
--- a/packages/composables/src/composables/useCart/index.ts
+++ b/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,
diff --git a/packages/composables/src/composables/useFacet/index.ts b/packages/composables/src/composables/useFacet/index.ts
index 354a0195d..b200092d3 100644
--- a/packages/composables/src/composables/useFacet/index.ts
+++ b/packages/composables/src/composables/useFacet/index.ts
@@ -1,3 +1,8 @@
+/**
+ * @deprecated since version <version?>
+ *
+ * @see <add docs link>
+ */
 import {
   ComposableFunctionArgs,
   Context,
diff --git a/packages/composables/src/composables/useGuestUser/index.ts b/packages/composables/src/composables/useGuestUser/index.ts
index 7074561fd..b336b2919 100644
--- a/packages/composables/src/composables/useGuestUser/index.ts
+++ b/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';
diff --git a/packages/composables/src/factories/useCartFactory.ts b/packages/composables/src/factories/useCartFactory.ts
index b8a4e3429..e1123454a 100644
--- a/packages/composables/src/factories/useCartFactory.ts
+++ b/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';
diff --git a/packages/composables/src/factories/useGuestUserFactory.ts b/packages/composables/src/factories/useGuestUserFactory.ts
index 549ac9015..eb64e996b 100644
--- a/packages/composables/src/factories/useGuestUserFactory.ts
+++ b/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,
diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
index 5432d8b59..a7b23e130 100644
--- a/packages/composables/src/getters/cartGetters.ts
+++ b/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: '',
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 92671470e..4777b5612 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/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,
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 4a9506a9c..0431f91bb 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/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,
diff --git a/packages/theme/components/Checkout/CartPreview.vue b/packages/theme/components/Checkout/CartPreview.vue
index 7dc34de8c..f0212a53d 100644
--- a/packages/theme/components/Checkout/CartPreview.vue
+++ b/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';
 
diff --git a/packages/theme/components/Checkout/VsfShippingProvider.vue b/packages/theme/components/Checkout/VsfShippingProvider.vue
index aead04ec5..208754d16 100644
--- a/packages/theme/components/Checkout/VsfShippingProvider.vue
+++ b/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({
diff --git a/packages/theme/components/CouponCode.vue b/packages/theme/components/CouponCode.vue
index 0604bcf87..aa8066450 100644
--- a/packages/theme/components/CouponCode.vue
+++ b/packages/theme/components/CouponCode.vue
@@ -27,7 +27,7 @@
 
 <script>
 import { SfButton, SfInput } from '@storefront-ui/vue';
-import { useCart, cartGetters } from '@vue-storefront/magento';
+import { cartGetters } from '@vue-storefront/magento';
 import {
   computed,
   onMounted,
@@ -35,6 +35,7 @@ import {
   ref,
   defineComponent,
 } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 
 export default defineComponent({
   name: 'CouponCode',
diff --git a/packages/theme/components/Products/BundleProductSelector.vue b/packages/theme/components/Products/BundleProductSelector.vue
index e47411602..9707a2b2f 100644
--- a/packages/theme/components/Products/BundleProductSelector.vue
+++ b/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';
 
diff --git a/packages/theme/components/Products/GroupedProductSelector.vue b/packages/theme/components/Products/GroupedProductSelector.vue
index e592ed472..b2856b531 100644
--- a/packages/theme/components/Products/GroupedProductSelector.vue
+++ b/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',
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index c56a87ba9..9c4cb0a33 100644
--- a/packages/theme/composables/index.ts
+++ b/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';
diff --git a/packages/theme/composables/useCart/commands/addItemCommand.ts b/packages/theme/composables/useCart/commands/addItemCommand.ts
new file mode 100644
index 000000000..e6686f30b
--- /dev/null
+++ b/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`);
+    }
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/applyCouponCommand.ts b/packages/theme/composables/useCart/commands/applyCouponCommand.ts
new file mode 100644
index 000000000..ea9687c19
--- /dev/null
+++ b/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 },
+    };
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/clearCartCommand.ts b/packages/theme/composables/useCart/commands/clearCartCommand.ts
new file mode 100644
index 000000000..0249b896f
--- /dev/null
+++ b/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);
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/loadCartCommand.ts b/packages/theme/composables/useCart/commands/loadCartCommand.ts
new file mode 100644
index 000000000..f32ebec50
--- /dev/null
+++ b/packages/theme/composables/useCart/commands/loadCartCommand.ts
@@ -0,0 +1,83 @@
+import { ComposableFunctionArgs, Context, Logger } from '@vue-storefront/core';
+import { Cart } from '@vue-storefront/magento-api';
+
+// TODO refactoring point
+export const loadCartCommand = {
+  execute: async (context: Context, params: ComposableFunctionArgs<{
+    realCart?: boolean;
+  }>) => {
+    const apiState = context.$magento.config.state;
+    Logger.debug('[Magento Storefront]: Loading Cart');
+    const customerToken = apiState.getCustomerToken();
+    const virtual = !params.realCart;
+    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) => {
+      Logger.debug('[Magento Storefront]: useCart.load.getCartData ID->', id);
+
+      const { data, errors } = await context.$magento.api.cart(id);
+      Logger.debug('[Result]:', { data });
+
+      if (!data?.cart && errors?.length) {
+        throw errors[0];
+      }
+
+      data.cart.items = data.cart.items.filter(Boolean);
+      return data.cart as unknown as Cart;
+    };
+
+    const getCart = async (virtualCart: boolean, cartId?: string) => {
+      if (!cartId) {
+        if (virtualCart) {
+          return createVirtualCart();
+        }
+
+        cartId = await createRealCart();
+        apiState.setCartId(cartId);
+      }
+
+      return getCartData(cartId);
+    };
+
+    // Try to load cart for existing customer, clean customer token if not possible
+    if (customerToken) {
+      try {
+        const { data, errors } = await context.$magento.api.customerCart();
+        Logger.debug('[Result]:', { data, errors });
+
+        if (!data?.customerCart && errors?.length) {
+          throw errors[0];
+        }
+
+        apiState.setCartId(data.customerCart.id);
+        data.customerCart.items = data.customerCart.items.filter(Boolean);
+
+        return data.customerCart as unknown as Cart;
+      } catch {
+        apiState.setCustomerToken();
+      }
+    }
+
+    try {
+      // 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 {
+      apiState.setCartId();
+      return await getCart(virtual);
+    }
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/removeCouponCommand.ts b/packages/theme/composables/useCart/commands/removeCouponCommand.ts
new file mode 100644
index 000000000..95935467d
--- /dev/null
+++ b/packages/theme/composables/useCart/commands/removeCouponCommand.ts
@@ -0,0 +1,19 @@
+import { Context, Logger } from '@vue-storefront/core';
+import { Cart } from '@vue-storefront/magento-api';
+
+export const removeCouponCommand = {
+  execute: async (context: Context, { currentCart, customQuery = { removeCouponFromCart: 'removeCouponFromCart' } }) => {
+    Logger.debug('[Magento]: Remove coupon from cart', { currentCart });
+
+    const { data } = await context.$magento.api.removeCouponFromCart({
+      cart_id: currentCart.id,
+    }, customQuery);
+
+    Logger.debug('[Result]:', { data });
+
+    return {
+      updatedCart: data.removeCouponFromCart.cart as unknown as Cart,
+      updatedCoupon: { code: '' },
+    };
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/removeItemCommand.ts b/packages/theme/composables/useCart/commands/removeItemCommand.ts
new file mode 100644
index 000000000..63944c943
--- /dev/null
+++ b/packages/theme/composables/useCart/commands/removeItemCommand.ts
@@ -0,0 +1,35 @@
+import { Context, Logger } from '@vue-storefront/core';
+import { Cart, RemoveItemFromCartInput } from '@vue-storefront/magento-api';
+
+// TODO refactoring point
+export const removeItemCommand = {
+  execute: async (
+    context: Context,
+    { currentCart, product },
+  ) => {
+    Logger.debug('[Magento]: Remove item from cart', {
+      product,
+      currentCart,
+    });
+
+    const item = currentCart.items.find((cartItem) => cartItem.uid === product.uid);
+
+    if (!item) {
+      return;
+    }
+
+    const removeItemParams: RemoveItemFromCartInput = {
+      cart_id: currentCart.id,
+      cart_item_uid: item.uid,
+    };
+
+    const { data } = await context.$magento.api.removeItemFromCart(removeItemParams);
+
+    Logger.debug('[Result]:', { data });
+
+    // eslint-disable-next-line consistent-return
+    return data
+      .removeItemFromCart
+      .cart as unknown as Cart;
+  },
+};
diff --git a/packages/theme/composables/useCart/commands/updateItemQtyCommand.ts b/packages/theme/composables/useCart/commands/updateItemQtyCommand.ts
new file mode 100644
index 000000000..aa3979215
--- /dev/null
+++ b/packages/theme/composables/useCart/commands/updateItemQtyCommand.ts
@@ -0,0 +1,35 @@
+import { Context, Logger } from '@vue-storefront/core';
+import { Cart, UpdateCartItemsInput } from '@vue-storefront/magento-api';
+
+export const updateItemQtyCommand = {
+  execute: async (context: Context, {
+    currentCart,
+    product,
+    quantity,
+    customQuery = { updateCartItems: 'updateCartItems' },
+  }) => {
+    Logger.debug('[Magento]: Update product quantity on cart', {
+      product,
+      quantity,
+      currentCart,
+    });
+
+    const updateCartParams: UpdateCartItemsInput = {
+      cart_id: currentCart.id,
+      cart_items: [
+        {
+          cart_item_uid: product.uid,
+          quantity,
+        },
+      ],
+    };
+
+    const { data } = await context.$magento.api.updateCartItems(updateCartParams, customQuery);
+
+    Logger.debug('[Result]:', { data });
+
+    return data
+      .updateCartItems
+      .cart as unknown as Cart;
+  },
+};
diff --git a/packages/theme/composables/useCart/index.ts b/packages/theme/composables/useCart/index.ts
new file mode 100644
index 000000000..2426935e0
--- /dev/null
+++ b/packages/theme/composables/useCart/index.ts
@@ -0,0 +1,268 @@
+import { ref, computed, useContext } from '@nuxtjs/composition-api';
+import { Logger, UseCartErrors } from '@vue-storefront/core';
+import { Cart, CartItemInterface, ProductInterface } from '@vue-storefront/magento-api';
+import { UseCartInterface } from '~/composables/useCart/useCart';
+import { useCustomerStore } from '~/stores/customer';
+
+const useCart = <
+  CART extends Cart,
+  CART_ITEM extends CartItemInterface,
+  PRODUCT extends ProductInterface>
+(): UseCartInterface<CART, CART_ITEM, PRODUCT> => {
+  const loading = ref<boolean>(false);
+  const error = ref<UseCartErrors>({
+    addItem: null,
+    removeItem: null,
+    updateItemQty: null,
+    load: null,
+    clear: null,
+    applyCoupon: null,
+    removeCoupon: null,
+  });
+  const { app } = useContext();
+  const context = app.$vsf;
+  const customerStore = useCustomerStore();
+  const cart = computed<CART>(() => customerStore.cart);
+  const apiState = context.$magento.config.state;
+
+  /**
+   * Assign new cart object
+   * @param newCart
+   *
+   * @return void
+   */
+  const setCart = (newCart: CART): void => {
+    Logger.debug('useCart.setCart', newCart);
+
+    customerStore.$patch((state) => {
+      state.cart = newCart;
+    });
+  };
+
+  /**
+   * Check if product is in the cart
+   * @param product
+   *
+   * @return boolean
+   */
+  // TODO rework parameter {product} => product, wrapping obj is not necessary
+  const isInCart = ({ product }: { product: PRODUCT }): boolean => !!cart.value?.items?.find(
+    (cartItem) => cartItem?.product?.uid === product.uid,
+  );
+
+  const load = async ({ customQuery = {}, realCart = false } = { customQuery: { cart: 'cart' } }): Promise<void> => {
+    Logger.debug('useCart.load');
+
+    try {
+      loading.value = true;
+      const { loadCartCommand } = await import('~/composables/useCart/commands/loadCartCommand');
+      const loadedCart = await loadCartCommand.execute(context, { customQuery, realCart });
+      customerStore.$patch((state) => {
+        state.cart = loadedCart;
+      });
+      error.value.load = null;
+    } catch (err) {
+      error.value.load = err;
+      Logger.error('useCart/load', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const clear = async ({ customQuery } = { customQuery: { cart: 'cart' } }): Promise<void> => {
+    Logger.debug('useCart.clear');
+
+    try {
+      loading.value = true;
+      const [{ loadCartCommand }, { clearCartCommand }] = await Promise.all(
+        [
+          import('~/composables/useCart/commands/loadCartCommand'),
+          import('~/composables/useCart/commands/clearCartCommand'),
+        ],
+      );
+      await clearCartCommand.execute(context);
+      const loadedCart = await loadCartCommand.execute(context, { customQuery });
+
+      customerStore.$patch((state) => {
+        state.cart = loadedCart;
+      });
+    } catch (err) {
+      error.value.clear = err;
+      Logger.error('useCart/clear', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const addItem = async ({
+    product,
+    quantity,
+  }): Promise<void> => {
+    Logger.debug('useCart.addItem', { product, quantity });
+
+    try {
+      loading.value = true;
+
+      if (!apiState.getCartId()) {
+        // TODO if cart is not loaded throw error instead to decouple this method
+        await load({ realCart: true });
+      }
+      const { addItemCommand } = await import('~/composables/useCart/commands/addItemCommand');
+      const updatedCart = await addItemCommand.execute(
+        context,
+        {
+          currentCart: cart.value,
+          product,
+          quantity,
+        },
+      );
+      error.value.addItem = null;
+      customerStore.$patch((state) => {
+        state.cart = updatedCart;
+      });
+    } catch (err) {
+      error.value.addItem = err;
+      Logger.error('useCart/addItem', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const removeItem = async ({ product }) => {
+    Logger.debug('useCart.removeItem', { product });
+
+    try {
+      loading.value = true;
+      const { removeItemCommand } = await import('~/composables/useCart/commands/removeItemCommand');
+      const updatedCart = await removeItemCommand.execute(
+        context,
+        {
+          currentCart: cart.value,
+          product,
+        },
+      );
+
+      error.value.removeItem = null;
+      customerStore.$patch((state) => {
+        state.cart = updatedCart;
+      });
+    } catch (err) {
+      error.value.removeItem = err;
+      Logger.error('useCart/removeItem', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const updateItemQty = async ({
+    product,
+    quantity,
+    customQuery = { updateCartItems: 'updateCartItems' },
+  }): Promise<void> => {
+    Logger.debug('useCart.updateItemQty', {
+      product,
+      quantity,
+    });
+
+    if (quantity && quantity > 0) {
+      try {
+        loading.value = true;
+        const { updateItemQtyCommand } = await import('~/composables/useCart/commands/updateItemQtyCommand');
+        const updatedCart = await updateItemQtyCommand.execute(
+          context,
+          {
+            currentCart: cart.value,
+            product,
+            quantity,
+            customQuery,
+          },
+        );
+
+        error.value.updateItemQty = null;
+        customerStore.$patch((state) => {
+          state.cart = updatedCart;
+        });
+      } catch (err) {
+        error.value.updateItemQty = err;
+        Logger.error('useCart/updateItemQty', err);
+      } finally {
+        loading.value = false;
+      }
+    }
+  };
+
+  const applyCoupon = async ({
+    couponCode,
+    customQuery,
+  }): Promise<void> => {
+    Logger.debug('useCart.applyCoupon');
+
+    try {
+      loading.value = true;
+      const { applyCouponCommand } = await import('~/composables/useCart/commands/applyCouponCommand');
+      const { updatedCart } = await applyCouponCommand.execute(
+        context,
+        {
+          currentCart: cart.value,
+          couponCode,
+          customQuery,
+        },
+      );
+
+      error.value.applyCoupon = null;
+      customerStore.$patch((state) => {
+        state.cart = updatedCart;
+      });
+    } catch (err) {
+      error.value.applyCoupon = err;
+      Logger.error('useCart/applyCoupon', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const removeCoupon = async ({
+    customQuery,
+  }): Promise<void> => {
+    Logger.debug('useCart.removeCoupon');
+
+    try {
+      loading.value = true;
+      const { removeCouponCommand } = await import('~/composables/useCart/commands/removeCouponCommand');
+      const { updatedCart } = await removeCouponCommand.execute(
+        context,
+        {
+          currentCart: cart.value,
+          customQuery,
+        },
+      );
+
+      error.value.removeCoupon = null;
+      customerStore.$patch((state) => {
+        state.cart = updatedCart;
+      });
+      loading.value = false;
+    } catch (err) {
+      error.value.removeCoupon = err;
+      Logger.error('useCart/removeCoupon', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    setCart,
+    cart,
+    isInCart,
+    addItem,
+    load,
+    removeItem,
+    clear,
+    updateItemQty,
+    applyCoupon,
+    removeCoupon,
+    loading,
+    error,
+  };
+};
+
+export default useCart;
diff --git a/packages/theme/composables/useCart/useCart.d.ts b/packages/theme/composables/useCart/useCart.d.ts
new file mode 100644
index 000000000..975e7407f
--- /dev/null
+++ b/packages/theme/composables/useCart/useCart.d.ts
@@ -0,0 +1,24 @@
+import { ComposableFunctionArgs, Context, UseCartErrors } from '@vue-storefront/core';
+import { ComputedRef, Ref } from '@nuxtjs/composition-api';
+
+export interface UseCartInterface<CART, CART_ITEM, PRODUCT> {
+  load: (params: ComposableFunctionArgs<{ realCart?: boolean; }>) => Promise<void>;
+  addItem: (
+    params: ComposableFunctionArgs<{
+      product: PRODUCT;
+      quantity: any;
+    }>
+  ) => Promise<void>;
+  removeItem: (params: ComposableFunctionArgs<{ currentCart: CART; product: CART_ITEM; }>) => Promise<void>;
+  updateItemQty: (
+    params: ComposableFunctionArgs<{ product: CART_ITEM; quantity: number; }>
+  ) => Promise<void>;
+  clear: (params: ComposableFunctionArgs<{ realCart?: boolean; }>) => Promise<void>;
+  applyCoupon: (params: ComposableFunctionArgs<{ couponCode: string; }>) => Promise<void>;
+  removeCoupon: (params: ComposableFunctionArgs<{}>) => Promise<void>;
+  isInCart: (context: Context, params: { currentCart: CART; product: PRODUCT }) => boolean;
+  setCart: (newCart: CART) => void;
+  cart: ComputedRef<CART>;
+  loading: Ref<boolean>;
+  error: Ref<UseCartErrors>;
+}
diff --git a/packages/theme/composables/useGuestUser/commands/attachToCartCommand.ts b/packages/theme/composables/useGuestUser/commands/attachToCartCommand.ts
new file mode 100644
index 000000000..d7766a04d
--- /dev/null
+++ b/packages/theme/composables/useGuestUser/commands/attachToCartCommand.ts
@@ -0,0 +1,17 @@
+import { Logger } from '@vue-storefront/core';
+import { SetGuestEmailOnCartInput } from '@vue-storefront/magento-api';
+
+export const attachToCartCommand = {
+  execute: async (context, params): Promise<void> => {
+    Logger.debug('[Magento]: Attach guest cart to user');
+
+    const emailOnCartInput: SetGuestEmailOnCartInput = {
+      email: params?.email,
+      cart_id: params?.cart?.value?.id,
+    };
+
+    await context.$magento.api.setGuestEmailOnCart({
+      ...emailOnCartInput,
+    });
+  },
+};
diff --git a/packages/theme/composables/useGuestUser/index.ts b/packages/theme/composables/useGuestUser/index.ts
new file mode 100644
index 000000000..0447e35eb
--- /dev/null
+++ b/packages/theme/composables/useGuestUser/index.ts
@@ -0,0 +1,35 @@
+import { ref, useContext } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs, Logger } from '@vue-storefront/core';
+import { AttachToCartParams, UseGuestUser, UseGuestUserErrors } from '~/composables/useGuestUser/useGuestUser';
+
+export const useGuestUser = <PARAMS extends AttachToCartParams>(): UseGuestUser<PARAMS> => {
+  const loading = ref(false);
+  const error = ref<UseGuestUserErrors>({ attachToCart: null });
+  const { app } = useContext();
+  const context = app.$vsf;
+
+  const attachToCart = async (params: ComposableFunctionArgs<PARAMS>) => {
+    Logger.debug('useGuestUserFactory.attachToCart', { params });
+
+    try {
+      loading.value = true;
+      const { attachToCartCommand } = await import('~/composables/useGuestUser/commands/attachToCartCommand');
+      await attachToCartCommand.execute(context, params);
+
+      error.value.attachToCart = null;
+    } catch (err) {
+      error.value.attachToCart = err;
+      Logger.error('useGuestUser/attachToCart', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    attachToCart,
+    loading,
+    error,
+  };
+};
+
+export default useGuestUser;
diff --git a/packages/theme/composables/useGuestUser/useGuestUser.d.ts b/packages/theme/composables/useGuestUser/useGuestUser.d.ts
new file mode 100644
index 000000000..064b4cb06
--- /dev/null
+++ b/packages/theme/composables/useGuestUser/useGuestUser.d.ts
@@ -0,0 +1,20 @@
+import { PlatformApi } from '@vue-storefront/core/lib/src/types';
+import { Composable, ComposableFunctionArgs } from '@vue-storefront/core';
+import { ComputedRef, Ref } from '@nuxtjs/composition-api';
+import { Cart } from '@vue-storefront/magento-api';
+
+export interface UseGuestUserErrors {
+  attachToCart: Error;
+}
+
+export interface AttachToCartParams {
+  email: string;
+  cart: ComputedRef<Cart>,
+  [x: string]: any;
+}
+
+export interface UseGuestUser<REGISTER_GUEST_USER_PARAMS extends AttachToCartParams, API extends PlatformApi = any> extends Composable<API> {
+  attachToCart: (params: ComposableFunctionArgs<REGISTER_GUEST_USER_PARAMS>) => Promise<void>;
+  loading: Ref<boolean>;
+  error: Ref<UseGuestUserErrors>;
+}
diff --git a/packages/theme/composables/useUser/index.ts b/packages/theme/composables/useUser/index.ts
index a382e89b0..c02930b1c 100644
--- a/packages/theme/composables/useUser/index.ts
+++ b/packages/theme/composables/useUser/index.ts
@@ -2,11 +2,10 @@ import {
   Ref, ref, computed, useContext,
 } from '@nuxtjs/composition-api';
 import { Logger, mask } from '@vue-storefront/core';
-import { useCart } from '@vue-storefront/magento'; // todo: replace by the new useCart composable when it will be done
-
 import { useCustomerStore } from '~/stores/customer';
 import { generateUserData } from '~/helpers/customer/userDataGenerator';
 import { UseUser } from '~/composables/useUser/useUser';
+import { useCart } from '~/composables';
 
 export const useUser = (): UseUser => {
   const customerStore = useCustomerStore();
diff --git a/packages/theme/helpers/cart/addToCart.ts b/packages/theme/helpers/cart/addToCart.ts
index 073a57ae7..4a1378cd2 100644
--- a/packages/theme/helpers/cart/addToCart.ts
+++ b/packages/theme/helpers/cart/addToCart.ts
@@ -1,5 +1,6 @@
-import { Product, productGetters, useCart } from '@vue-storefront/magento';
+import { Product, productGetters } from '@vue-storefront/magento';
 import { useRouter, useContext } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 
 export const useAddToCart = () => {
   const {
diff --git a/packages/theme/pages/Checkout.vue b/packages/theme/pages/Checkout.vue
index 9ca3e8446..94e13d439 100644
--- a/packages/theme/pages/Checkout.vue
+++ b/packages/theme/pages/Checkout.vue
@@ -34,12 +34,12 @@
 <script>
 import { SfSteps } from '@storefront-ui/vue';
 import {
-  useCart,
   cartGetters,
 } from '@vue-storefront/magento';
 import {
   computed, defineComponent, ref, useRoute, useRouter, useContext, onMounted,
 } from '@nuxtjs/composition-api';
+import { useCart } from '~/composables';
 import CartPreview from '~/components/Checkout/CartPreview.vue';
 
 export default defineComponent({
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 12f8bc2ef..5d2fb8424 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -176,11 +176,10 @@ import {
 } from '@nuxtjs/composition-api';
 import {
   useMakeOrder,
-  useCart,
   cartGetters,
 } from '@vue-storefront/magento';
+import { useCart, useImage } from '~/composables';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
-import { useImage } from '~/composables';
 import { removeItem } from '~/helpers/asyncLocalStorage';
 import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
diff --git a/packages/theme/pages/Checkout/UserAccount.vue b/packages/theme/pages/Checkout/UserAccount.vue
index 48f90397b..e809dcedf 100644
--- a/packages/theme/pages/Checkout/UserAccount.vue
+++ b/packages/theme/pages/Checkout/UserAccount.vue
@@ -142,12 +142,13 @@ import {
   useRouter,
   useContext, onMounted,
 } from '@nuxtjs/composition-api';
-import { useGuestUser } from '@vue-storefront/magento';
 import {
   required, min, email,
 } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { useUiNotification, useUser } from '~/composables';
+import {
+  useUiNotification, useUser, useGuestUser, useCart,
+} from '~/composables';
 import { getItem, mergeItem } from '~/helpers/asyncLocalStorage';
 import { customerPasswordRegExp, invalidPasswordMsg } from '../../helpers/customer/regex';
 
@@ -191,6 +192,8 @@ export default defineComponent({
       error: errorGuestUser,
     } = useGuestUser();
 
+    const { cart } = useCart();
+
     const {
       load,
       loading: loadingUser,
@@ -233,7 +236,7 @@ export default defineComponent({
 
         await (
           !createUserAccount.value
-            ? attachToCart({ email: form.value.email })
+            ? attachToCart({ email: form.value.email, cart })
             : register({ user: form.value })
         );
       }
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index 4d2c767f3..78e5e2288 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -273,11 +273,12 @@ import {
   useContext,
 } from '@nuxtjs/composition-api';
 import {
-  useCart,
   productGetters,
   wishlistGetters,
 } from '@vue-storefront/magento';
-import { useUiHelpers, useUiState, useImage, useWishlist } from '~/composables';
+import {
+  useCart, useUiHelpers, useUiState, useImage, useWishlist,
+} from '~/composables';
 
 export default defineComponent({
   name: 'MyWishlist',
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 641ad60f0..2fbaadbb9 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -270,7 +270,6 @@ import {
 } from '@storefront-ui/vue';
 import {
   useProduct,
-  useCart,
   productGetters,
   useReview,
   reviewGetters,
@@ -284,7 +283,8 @@ import {
   useRouter,
   defineComponent,
 } from '@nuxtjs/composition-api';
-import { useWishlist, useUser } from '~/composables';
+import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
+import { useCart, useWishlist, useUser } from '~/composables';
 import { productData } from '~/helpers/product/productData';
 import cacheControl from '~/helpers/cacheControl';
 import BundleProductSelector from '~/components/Products/BundleProductSelector';
@@ -296,7 +296,6 @@ import UpsellProducts from '~/components/UpsellProducts';
 import RelatedProducts from '~/components/RelatedProducts';
 import HTMLContent from '~/components/HTMLContent';
 import AddToWishlist from '~/components/AddToWishlist';
-import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 
 export default defineComponent({
   name: 'ProductPage',
diff --git a/packages/theme/stores/customer.ts b/packages/theme/stores/customer.ts
index a0100036d..700d3f18d 100644
--- a/packages/theme/stores/customer.ts
+++ b/packages/theme/stores/customer.ts
@@ -1,12 +1,20 @@
 import { defineStore } from 'pinia';
-import { Wishlist } from '@vue-storefront/magento';
+import { Wishlist, Cart } from '@vue-storefront/magento';
 
 const wishlist: Wishlist = {};
 const user: any = {};
+const cart: Cart | {} = {};
+
+interface CustomerState {
+  wishlist,
+  user,
+  cart,
+}
 
 export const useCustomerStore = defineStore('customer', {
-  state: () => ({
+  state: (): CustomerState => ({
     wishlist,
-    user
+    user,
+    cart,
   }),
 });