From c70c8fecf9ebafbc651c4d5c4609e0ef776a9a74 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 4 May 2022 09:49:19 +0200
Subject: [PATCH] refactor: create wishlist module M2-507

---
 packages/theme/components/AppHeader.vue       |  9 ++---
 .../Header/SearchBar/SearchResults.vue        |  3 +-
 packages/theme/components/LoginModal.vue      |  3 +-
 packages/theme/components/NewProducts.vue     |  3 +-
 packages/theme/composables/index.ts           |  2 +-
 packages/theme/composables/useCart/useCart.ts |  2 +-
 packages/theme/layouts/default.vue            | 10 ++---
 .../views/useProductsWithCommonCardProps.ts   |  3 +-
 .../theme/modules/catalog/pages/category.vue  |  7 ++--
 .../theme/modules/catalog/pages/product.vue   |  4 +-
 .../product/components/ProductsCarousel.vue   |  3 +-
 .../useForgotPassword/useForgotPassword.ts    |  8 ++--
 .../customer/composables/useUser/useUser.ts   |  6 +--
 .../composables/useWishlist/helpers.ts        | 17 --------
 .../components/wishlist}/WishlistSidebar.vue  | 22 +++++-----
 packages/theme/modules/theme/index.ts         |  5 +++
 .../composables/useWishlist/index.ts          | 40 +++++++++----------
 .../composables/useWishlist/useWishlist.ts    | 17 +++++---
 .../wishlist/helpers/findItemOnWishlist.ts    | 10 +++++
 .../modules/wishlist/helpers/productMatch.ts  | 11 +++++
 packages/theme/modules/wishlist/index.ts      |  5 +++
 .../modules/wishlist/store/wishlistStore.ts   | 12 ++++++
 packages/theme/nuxt.config.js                 |  2 +
 packages/theme/stores/customer.ts             |  4 +-
 24 files changed, 123 insertions(+), 85 deletions(-)
 delete mode 100644 packages/theme/modules/customer/composables/useWishlist/helpers.ts
 rename packages/theme/{components => modules/theme/components/wishlist}/WishlistSidebar.vue (94%)
 create mode 100644 packages/theme/modules/theme/index.ts
 rename packages/theme/modules/{customer => wishlist}/composables/useWishlist/index.ts (87%)
 rename packages/theme/modules/{customer => wishlist}/composables/useWishlist/useWishlist.ts (80%)
 create mode 100644 packages/theme/modules/wishlist/helpers/findItemOnWishlist.ts
 create mode 100644 packages/theme/modules/wishlist/helpers/productMatch.ts
 create mode 100644 packages/theme/modules/wishlist/index.ts
 create mode 100644 packages/theme/modules/wishlist/store/wishlistStore.ts

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 362ee5f32..0c279e337 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -121,16 +121,15 @@ import {
   useCart,
   useUiHelpers,
   useUiState,
-  useWishlist,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
-
+import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
 import type { CategoryTree } from '~/modules/GraphQL/types';
 import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 import StoreSwitcher from '~/components/StoreSwitcher.vue';
-import { useCustomerStore } from '~/stores/customer';
 
 export default defineComponent({
   components: {
@@ -158,10 +157,10 @@ export default defineComponent({
     const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
     const { categories: categoryList, load: categoriesListLoad } = useCategory();
 
-    const customerStore = useCustomerStore();
+    const wishlistStore = useWishlistStore();
     const isSearchOpen = ref(false);
     const result = ref(null);
-    const wishlistItemsQty = computed(() => customerStore.wishlist?.items_count ?? 0);
+    const wishlistItemsQty = computed(() => wishlistStore.wishlist?.items_count ?? 0);
 
     const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
diff --git a/packages/theme/components/Header/SearchBar/SearchResults.vue b/packages/theme/components/Header/SearchBar/SearchResults.vue
index 2a94dbe80..212fb4a3b 100644
--- a/packages/theme/components/Header/SearchBar/SearchResults.vue
+++ b/packages/theme/components/Header/SearchBar/SearchResults.vue
@@ -157,8 +157,9 @@ import {
 import { ref, computed, defineComponent } from '@nuxtjs/composition-api';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
 import {
-  useUiHelpers, useImage, useWishlist,
+  useUiHelpers, useImage,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
 
diff --git a/packages/theme/components/LoginModal.vue b/packages/theme/components/LoginModal.vue
index 53fee5651..3b0f6a2b8 100644
--- a/packages/theme/components/LoginModal.vue
+++ b/packages/theme/components/LoginModal.vue
@@ -299,8 +299,9 @@ import {
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, email } from 'vee-validate/dist/rules';
 import {
-  useUiState, useWishlist, useForgotPassword, useCart,
+  useUiState, useForgotPassword, useCart,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/modules/customer/helpers/passwordValidation';
 
diff --git a/packages/theme/components/NewProducts.vue b/packages/theme/components/NewProducts.vue
index 862812e83..76158edf3 100644
--- a/packages/theme/components/NewProducts.vue
+++ b/packages/theme/components/NewProducts.vue
@@ -65,8 +65,9 @@ import {
   computed, defineComponent, onMounted, ref,
 } from '@nuxtjs/composition-api';
 import {
-  useImage, useProduct, useWishlist,
+  useImage, useProduct,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useAddToCart } from '~/helpers/cart/addToCart';
diff --git a/packages/theme/composables/index.ts b/packages/theme/composables/index.ts
index f5fc1d761..859f6c7e5 100644
--- a/packages/theme/composables/index.ts
+++ b/packages/theme/composables/index.ts
@@ -40,7 +40,7 @@ export * from './useUrlResolver';
 export * from '~/modules/customer/composables/useUser';
 export * from '~/modules/customer/composables/useUserAddress';
 export * from '~/modules/customer/composables/useUserOrder';
-export * from '~/modules/customer/composables/useWishlist';
+export * from '~/modules/wishlist/composables/useWishlist';
 export * from './useMagentoConfiguration';
 
 export * from './types';
diff --git a/packages/theme/composables/useCart/useCart.ts b/packages/theme/composables/useCart/useCart.ts
index faa8db770..908bc924c 100644
--- a/packages/theme/composables/useCart/useCart.ts
+++ b/packages/theme/composables/useCart/useCart.ts
@@ -51,7 +51,7 @@ type UseCartIsInCartParams<PRODUCT> = {
  */
 export interface UseCartInterface<CART, CART_ITEM, PRODUCT> {
   /** Loads the current cart */
-  load(params: ComposableFunctionArgs<{ realCart?: boolean }>): Promise<void>;
+  load(params?: ComposableFunctionArgs<{ realCart?: boolean }>): Promise<void>;
   /** Updates the global application state with the current total quantity of the cart */
   loadTotalQty(): Promise<void>;
   /** Takes in a `product` and its `quantity` and adds it to the cart */
diff --git a/packages/theme/layouts/default.vue b/packages/theme/layouts/default.vue
index 76b02afa3..c57475e03 100644
--- a/packages/theme/layouts/default.vue
+++ b/packages/theme/layouts/default.vue
@@ -18,15 +18,15 @@
     </LoadWhenVisible>
   </div>
 </template>
-<script>
+<script lang="ts">
 import LazyHydrate from 'vue-lazy-hydration';
 import { useRoute, defineComponent } from '@nuxtjs/composition-api';
 import { useUiState } from '~/composables';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import IconSprite from '~/components/General/IconSprite.vue';
-import LoadWhenVisible from '~/components/utils/LoadWhenVisible';
-import TopBar from '~/components/TopBar';
+import LoadWhenVisible from '~/components/utils/LoadWhenVisible.vue';
+import TopBar from '~/components/TopBar/index.vue';
 
 export default defineComponent({
   name: 'DefaultLayout',
@@ -40,9 +40,9 @@ export default defineComponent({
     TopBar,
     AppFooter: () => import(/* webpackPrefetch: true */ '~/components/AppFooter.vue'),
     CartSidebar: () => import(/* webpackPrefetch: true */ '~/components/CartSidebar.vue'),
-    WishlistSidebar: () => import(/* webpackPrefetch: true */ '~/components/WishlistSidebar.vue'),
+    WishlistSidebar: () => import(/* webpackPrefetch: true */ '~/modules/theme/components/wishlist/WishlistSidebar.vue'),
     LoginModal: () => import(/* webpackPrefetch: true */ '~/components/LoginModal.vue'),
-    Notification: () => import(/* webpackPrefetch: true */ '~/components/Notification'),
+    Notification: () => import(/* webpackPrefetch: true */ '~/components/Notification.vue'),
   },
 
   setup() {
diff --git a/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts b/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
index 76fcbc099..cc66612d4 100644
--- a/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
+++ b/packages/theme/modules/catalog/category/components/views/useProductsWithCommonCardProps.ts
@@ -1,7 +1,8 @@
 import { computed, Ref, useContext } from '@nuxtjs/composition-api';
 import {
-  useImage, useUser, useWishlist,
+  useImage, useUser,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import {
   getName, getPrice, getProductSku, getProductThumbnailImage, getSlug,
 } from '~/modules/catalog/product/getters/productGetters';
diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
index 081680486..fbb28ce43 100644
--- a/packages/theme/modules/catalog/pages/category.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -112,11 +112,10 @@ import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
 import { facetGetters } from '~/getters';
 import {
   useFacet,
-  useWishlist,
   useUiHelpers,
   useUiState,
 } from '~/composables';
-
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { AgnosticPagination } from '~/composables/types';
 import { Product } from '~/modules/catalog/product/types';
 import { useUrlResolver } from '~/composables/useUrlResolver';
@@ -124,7 +123,7 @@ import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent';
 import { usePrice } from '~/modules/catalog/pricing/usePrice';
 import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar.vue';
-import type { ProductInterface, EntityUrl } from '~/modules/GraphQL/types';
+import type { EntityUrl } from '~/modules/GraphQL/types';
 import { useTraverseCategory } from '~/modules/catalog/category/helpers/useTraverseCategory';
 import CategoryBreadcrumbs from '~/modules/catalog/category/components/breadcrumbs/CategoryBreadcrumbs.vue';
 
@@ -173,7 +172,7 @@ export default defineComponent({
     const { result, search } = useFacet();
     const { addItemToCart } = useAddToCart();
 
-    const addItemToWishlist = async (product: ProductInterface) => {
+    const addItemToWishlist = async (product: Product) => {
       await (isInWishlist({ product })
         ? removeItemFromWishlist({ product })
         : addItemToWishlistBase({ product }));
diff --git a/packages/theme/modules/catalog/pages/product.vue b/packages/theme/modules/catalog/pages/product.vue
index 3d3e58a22..43ae7d2b7 100644
--- a/packages/theme/modules/catalog/pages/product.vue
+++ b/packages/theme/modules/catalog/pages/product.vue
@@ -308,9 +308,9 @@ import reviewGetters, {
 } from '~/getters/reviewGetters';
 
 import {
-  useCart, useWishlist, useReview,
+  useCart, useReview,
 } from '~/composables';
-
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useProduct } from '~/modules/catalog/product/composables/useProduct';
 import type { Product } from '~/modules/catalog/product/types';
 
diff --git a/packages/theme/modules/catalog/product/components/ProductsCarousel.vue b/packages/theme/modules/catalog/product/components/ProductsCarousel.vue
index f6c1e866a..a38d24c58 100644
--- a/packages/theme/modules/catalog/product/components/ProductsCarousel.vue
+++ b/packages/theme/modules/catalog/product/components/ProductsCarousel.vue
@@ -94,7 +94,8 @@ import {
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
 import { useAddToCart } from '~/helpers/cart/addToCart';
-import { useImage, useWishlist } from '~/composables';
+import { useImage } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
 import type { Product } from '~/modules/catalog/product/types';
diff --git a/packages/theme/modules/customer/composables/useForgotPassword/useForgotPassword.ts b/packages/theme/modules/customer/composables/useForgotPassword/useForgotPassword.ts
index 31a1f10ec..7364a1db4 100644
--- a/packages/theme/modules/customer/composables/useForgotPassword/useForgotPassword.ts
+++ b/packages/theme/modules/customer/composables/useForgotPassword/useForgotPassword.ts
@@ -1,4 +1,4 @@
-import { DeepReadonly, Ref } from '@nuxtjs/composition-api';
+import { Ref } from '@nuxtjs/composition-api';
 import { ComposableFunctionArgs } from '~/composables/types';
 
 /** Represents the result of a password change or reset operation */
@@ -32,11 +32,11 @@ export interface UseForgotPasswordSetNewParams {
  */
 export interface UseForgotPasswordInterface {
   /** Returns the result of the reset operation */
-  result: DeepReadonly<Ref<UseForgotPasswordResults>>;
+  result: Readonly<Ref<UseForgotPasswordResults>>;
   /** Returns the loading state */
-  loading: DeepReadonly<Ref<boolean>>;
+  loading: Readonly<Ref<boolean>>;
   /** Returns possible errors */
-  error: DeepReadonly<Ref<UseForgotPasswordErrors>>;
+  error: Readonly<Ref<UseForgotPasswordErrors>>;
   /** Sets the new password fot the user */
   setNew (params: ComposableFunctionArgs<UseForgotPasswordSetNewParams>): Promise<void>;
   /** Requests a new password reset email to be sent to user */
diff --git a/packages/theme/modules/customer/composables/useUser/useUser.ts b/packages/theme/modules/customer/composables/useUser/useUser.ts
index 29744074d..f47f5d581 100644
--- a/packages/theme/modules/customer/composables/useUser/useUser.ts
+++ b/packages/theme/modules/customer/composables/useUser/useUser.ts
@@ -1,4 +1,4 @@
-import type { Ref, ComputedRef, DeepReadonly } from '@nuxtjs/composition-api';
+import type { Ref, ComputedRef } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
 
 /**
@@ -106,12 +106,12 @@ export interface UseUserInterface {
   /**
    * Indicates whether any of the methods is in progress
    */
-  loading: DeepReadonly<Ref<boolean>>;
+  loading: Readonly<Ref<boolean>>;
 
   /**
    * Contains errors from any of the composable methods
    */
-  error: DeepReadonly<Ref<UseUserErrors>>;
+  error: Readonly<Ref<UseUserErrors>>;
 
   /**
    * Main data object populated by the `load()` method and updated by other methods in this composable
diff --git a/packages/theme/modules/customer/composables/useWishlist/helpers.ts b/packages/theme/modules/customer/composables/useWishlist/helpers.ts
deleted file mode 100644
index 84b13f715..000000000
--- a/packages/theme/modules/customer/composables/useWishlist/helpers.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const compareWishlistProduct = (
-  productA,
-  productB,
-): boolean => {
-  const equalSku = productA?.sku === productB?.sku;
-  const equalUid = productA?.uid === productB?.uid;
-
-  return equalSku && equalUid;
-};
-
-export const findItemOnWishlist = (currentWishlist, product) => {
-  const wishlist = Array.isArray(currentWishlist) ? currentWishlist[0] : currentWishlist;
-
-  return wishlist
-    ?.items_v2
-    ?.items?.find((item) => compareWishlistProduct(item.product, product));
-};
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/modules/theme/components/wishlist/WishlistSidebar.vue
similarity index 94%
rename from packages/theme/components/WishlistSidebar.vue
rename to packages/theme/modules/theme/components/wishlist/WishlistSidebar.vue
index 0ca252b40..a81d84789 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/modules/theme/components/wishlist/WishlistSidebar.vue
@@ -177,12 +177,16 @@ import {
 } from '@nuxtjs/composition-api';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
 import {
-  useUiState, useImage, useWishlist, AgnosticPrice, WishlistItemInterface,
+  useUiState, useImage, AgnosticPrice,
 } from '~/composables';
+import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
-import { useCustomerStore } from '~/stores/customer';
+import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
+
 import SvgImage from '~/components/General/SvgImage.vue';
 
+import type { WishlistItemInterface } from '~/modules/GraphQL/types';
+
 export default defineComponent({
   name: 'WishlistSidebar',
   components: {
@@ -203,9 +207,9 @@ export default defineComponent({
       removeItem, load: loadWishlist, loading,
     } = useWishlist();
     const { isAuthenticated } = useUser();
-    const customerStore = useCustomerStore();
+    const wishlistStore = useWishlistStore();
     const wishlistItems = computed<WishlistItemInterface[]>(
-      () => customerStore.wishlist?.items_v2?.items ?? [],
+      () => wishlistStore.wishlist?.items_v2?.items ?? [],
     );
 
     const getItemPrice = (product: WishlistItemInterface): AgnosticPrice => {
@@ -228,8 +232,8 @@ export default defineComponent({
     };
 
     const totals = computed<{ total: number, subtotal: number }>(
-      () => ((customerStore.wishlist?.items_v2?.items ?? []).length > 0
-        ? customerStore.wishlist?.items_v2?.items.reduce((acc, curr) => ({
+      () => ((wishlistStore.wishlist?.items_v2?.items ?? []).length > 0
+        ? wishlistStore.wishlist?.items_v2?.items.reduce((acc, curr) => ({
           total: acc.total + getItemPrice(curr).special,
           subtotal: acc.subtotal + getItemPrice(curr).regular,
         }), ({ total: 0, subtotal: 0 }))
@@ -237,7 +241,7 @@ export default defineComponent({
     );
 
     const totalItems = computed(
-      () => customerStore.wishlist?.items_count ?? 0,
+      () => wishlistStore.wishlist?.items_count ?? 0,
     );
 
     const getAttributes = (product) => product?.product?.configurable_options || [];
@@ -246,7 +250,7 @@ export default defineComponent({
     const { getMagentoImage, imageSizes } = useImage();
 
     onMounted(async () => {
-      if (!customerStore.wishlist.id) {
+      if (!wishlistStore.wishlist.id) {
         await loadWishlist();
       }
     });
@@ -261,7 +265,7 @@ export default defineComponent({
       toggleWishlistSidebar,
       totalItems,
       totals,
-      wishlist: customerStore.wishlist,
+      wishlist: wishlistStore.wishlist,
       productGetters,
       getMagentoImage,
       imageSizes,
diff --git a/packages/theme/modules/theme/index.ts b/packages/theme/modules/theme/index.ts
new file mode 100644
index 000000000..a5c7dab74
--- /dev/null
+++ b/packages/theme/modules/theme/index.ts
@@ -0,0 +1,5 @@
+import { Module } from '@nuxt/types';
+
+const nuxtModule : Module = function themeModule() {};
+
+export default nuxtModule;
diff --git a/packages/theme/modules/customer/composables/useWishlist/index.ts b/packages/theme/modules/wishlist/composables/useWishlist/index.ts
similarity index 87%
rename from packages/theme/modules/customer/composables/useWishlist/index.ts
rename to packages/theme/modules/wishlist/composables/useWishlist/index.ts
index cea33fd9c..945472e5d 100644
--- a/packages/theme/modules/customer/composables/useWishlist/index.ts
+++ b/packages/theme/modules/wishlist/composables/useWishlist/index.ts
@@ -1,7 +1,7 @@
 import { readonly, ref, useContext } from '@nuxtjs/composition-api';
-import { findItemOnWishlist } from '~/modules/customer/composables/useWishlist/helpers';
+import { findItemOnWishlist } from '~/modules/wishlist/helpers/findItemOnWishlist';
 import { Logger } from '~/helpers/logger';
-import { useCustomerStore } from '~/stores/customer';
+import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
 import type { Wishlist } from '~/modules/GraphQL/types';
 import type {
   UseWishlistAddItemParams,
@@ -10,7 +10,7 @@ import type {
   UseWishlistIsInWishlistParams,
   UseWishlistLoadParams,
   UseWishlistRemoveItemParams,
-} from '~/modules/customer/composables/useWishlist/useWishlist';
+} from '~/modules/wishlist/composables/useWishlist/useWishlist';
 
 /**
  * The `useWishlist()` composable allows loading and manipulating wishlist of the current user.
@@ -18,7 +18,7 @@ import type {
  * See the {@link UseWishlistInterface} page for more information.
  */
 export function useWishlist(): UseWishlistInterface {
-  const customerStore = useCustomerStore();
+  const wishlistStore = useWishlistStore();
   const { app } = useContext();
   const loading = ref(false);
   // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
@@ -45,7 +45,7 @@ export function useWishlist(): UseWishlistInterface {
 
         Logger.debug('[Result]:', { data });
         const loadedWishlist = data?.customer?.wishlists ?? [];
-        customerStore.wishlist = loadedWishlist[0] ?? {};
+        wishlistStore.wishlist = loadedWishlist[0] ?? {};
       }
 
       error.value.load = null;
@@ -56,19 +56,19 @@ export function useWishlist(): UseWishlistInterface {
       loading.value = false;
     }
 
-    return customerStore.wishlist;
+    return wishlistStore.wishlist;
   };
 
   const isInWishlist = ({ product }: UseWishlistIsInWishlistParams) => {
     Logger.debug('useWishlist/isInWishlist', product);
 
-    const wishlistProduct = findItemOnWishlist(customerStore.wishlist, product);
+    const wishlistProduct = findItemOnWishlist(wishlistStore.wishlist, product);
 
     return !!(wishlistProduct?.id && wishlistProduct?.quantity);
   };
 
   const setWishlist = (newWishlist: Wishlist) => {
-    customerStore.wishlist = newWishlist;
+    wishlistStore.wishlist = newWishlist;
     Logger.debug('useWishlist/setWishlist', newWishlist);
   };
 
@@ -78,12 +78,12 @@ export function useWishlist(): UseWishlistInterface {
     try {
       loading.value = true;
       Logger.debug('[Magento Storefront]: useWishlist.removeItem params->', {
-        currentWishlist: customerStore.wishlist,
+        currentWishlist: wishlistStore.wishlist,
         product,
         customQuery,
       });
 
-      const itemOnWishlist = findItemOnWishlist(customerStore.wishlist, product);
+      const itemOnWishlist = findItemOnWishlist(wishlistStore.wishlist, product);
       const { data } = await app.context.$vsf.$magento.api.removeProductsFromWishlist({
         id: '0',
         items: [itemOnWishlist.id],
@@ -91,7 +91,7 @@ export function useWishlist(): UseWishlistInterface {
 
       Logger.debug('[Result]:', { data });
       error.value.removeItem = null;
-      customerStore.$patch((state) => {
+      wishlistStore.$patch((state) => {
         state.wishlist = data?.removeProductsFromWishlist?.wishlist ?? {};
       });
     } catch (err) {
@@ -116,7 +116,7 @@ export function useWishlist(): UseWishlistInterface {
         Logger.debug('[Result]:', { data });
         const loadedWishlist = data?.customer?.wishlists ?? [];
         itemsCount = calculateWishlistTotal(loadedWishlist);
-        customerStore.$patch((state) => {
+        wishlistStore.$patch((state) => {
           state.wishlist = { items_count: itemsCount };
         });
       }
@@ -137,16 +137,16 @@ export function useWishlist(): UseWishlistInterface {
     try {
       loading.value = true;
       Logger.debug('[Magento Storefront]: useWishlist.addItem params->', {
-        currentWishlist: customerStore.wishlist,
+        currentWishlist: wishlistStore.wishlist,
         product,
         customQuery,
       });
 
-      if (!customerStore.wishlist) {
+      if (!wishlistStore.wishlist) {
         await load({});
       }
 
-      const itemOnWishlist = findItemOnWishlist(customerStore.wishlist, product);
+      const itemOnWishlist = findItemOnWishlist(wishlistStore.wishlist, product);
 
       // todo: legacy code, should be double-checked and probably removed
       if (itemOnWishlist) {
@@ -177,7 +177,7 @@ export function useWishlist(): UseWishlistInterface {
 
           Logger.debug('[Result]:', { data });
 
-          customerStore.$patch((state) => {
+          wishlistStore.$patch((state) => {
             state.wishlist = data?.addProductsToWishlist?.wishlist ?? {};
           });
 
@@ -195,7 +195,7 @@ export function useWishlist(): UseWishlistInterface {
 
           Logger.debug('[Result]:', { data: configurableProductData });
 
-          customerStore.$patch((state) => {
+          wishlistStore.$patch((state) => {
             state.wishlist = configurableProductData?.addProductsToWishlist?.wishlist ?? {};
           });
 
@@ -207,13 +207,13 @@ export function useWishlist(): UseWishlistInterface {
             items: [{
               sku: product.sku,
               quantity: 1,
-              entered_options: product.bundle_options ? [...product.bundle_options] : [],
+              entered_options: [],
             }],
           }, customQuery);
 
           Logger.debug('[Result]:', { data: bundleProductData });
 
-          customerStore.$patch((state) => {
+          wishlistStore.$patch((state) => {
             state.wishlist = bundleProductData?.addProductsToWishlist?.wishlist ?? {};
           });
 
@@ -240,7 +240,7 @@ export function useWishlist(): UseWishlistInterface {
     try {
       loading.value = true;
       error.value.clear = null;
-      customerStore.$patch((state) => {
+      wishlistStore.$patch((state) => {
         state.wishlist = {};
       });
     } catch (err) {
diff --git a/packages/theme/modules/customer/composables/useWishlist/useWishlist.ts b/packages/theme/modules/wishlist/composables/useWishlist/useWishlist.ts
similarity index 80%
rename from packages/theme/modules/customer/composables/useWishlist/useWishlist.ts
rename to packages/theme/modules/wishlist/composables/useWishlist/useWishlist.ts
index 24c845801..1a8290eb8 100644
--- a/packages/theme/modules/customer/composables/useWishlist/useWishlist.ts
+++ b/packages/theme/modules/wishlist/composables/useWishlist/useWishlist.ts
@@ -1,9 +1,14 @@
 import type { Ref, DeepReadonly } from '@nuxtjs/composition-api';
 import type { ComposableFunctionArgs } from '~/composables/types';
 import type { Wishlist, ProductInterface } from '~/modules/GraphQL/types';
+import {
+  BundleProduct, ConfigurableProduct, DownloadableProduct, GroupedProduct, VirtualProduct,
+} from '~/modules/GraphQL/types';
+
+export interface Product extends ProductInterface, ConfigurableProduct, Omit<BundleProduct, 'items'>, Omit<GroupedProduct, 'items'>, Omit<DownloadableProduct, 'items'>, Omit<VirtualProduct, 'items'> { __typename: string }
 
 /**
- * Errors that occured in the `useWishlist` composable
+ * Errors that occurred in the `useWishlist` composable
  */
 export interface UseWishlistErrors {
   addItem: Error | null;
@@ -23,13 +28,13 @@ export type UseWishlistLoadItemsCountParams = ComposableFunctionArgs<{
 /**
  * Parameters accepted by the `isInWishlist` method in the `useWishlist` composable
  */
-export type UseWishlistIsInWishlistParams = { product: ProductInterface };
+export type UseWishlistIsInWishlistParams = { product: Product };
 
 /**
  * Parameters accepted by the `addItem` method in the `useWishlist` composable
  */
 export type UseWishlistAddItemParams = ComposableFunctionArgs<{
-  product: any; // TODO: add product interface
+  product: Product;
 }>;
 
 /**
@@ -46,14 +51,14 @@ export type UseWishlistLoadParams = ComposableFunctionArgs<{
  * Parameters accepted by the `removeItem` method in the `useWishlist` composable
  */
 export type UseWishlistRemoveItemParams = ComposableFunctionArgs<{
-  product: any; // TODO: add product interface
+  product: Product;
 }>;
 
 /**
  * Parameters accepted by the `clear` method in the `useWishlist` composable
  */
 export type UseWishlistClearParams = {
-  currentWishlist: any; // TODO: Add type
+  currentWishlist: Wishlist;
 };
 
 /**
@@ -63,7 +68,7 @@ export interface UseWishlistInterface {
   /**
    * Returns a total number of items added to the wishlist of the current user
    */
-  loadItemsCount(params: UseWishlistLoadItemsCountParams): Promise<number | null>;
+  loadItemsCount(params?: UseWishlistLoadItemsCountParams): Promise<number | null>;
 
   /**
    * Checks if given product is in the wishlist of the current user
diff --git a/packages/theme/modules/wishlist/helpers/findItemOnWishlist.ts b/packages/theme/modules/wishlist/helpers/findItemOnWishlist.ts
new file mode 100644
index 000000000..5458dc5f1
--- /dev/null
+++ b/packages/theme/modules/wishlist/helpers/findItemOnWishlist.ts
@@ -0,0 +1,10 @@
+import { ProductInterface, Wishlist } from '~/modules/GraphQL/types';
+import { productMatch } from '~/modules/wishlist/helpers/productMatch';
+
+export const findItemOnWishlist = (currentWishlist: Wishlist, product: ProductInterface) => {
+  const wishlist: Wishlist = Array.isArray(currentWishlist) ? currentWishlist[0] : currentWishlist;
+
+  return wishlist
+    ?.items_v2
+    ?.items?.find((item) => productMatch(item.product, product));
+};
diff --git a/packages/theme/modules/wishlist/helpers/productMatch.ts b/packages/theme/modules/wishlist/helpers/productMatch.ts
new file mode 100644
index 000000000..2b4881774
--- /dev/null
+++ b/packages/theme/modules/wishlist/helpers/productMatch.ts
@@ -0,0 +1,11 @@
+import { ProductInterface } from '~/modules/GraphQL/types';
+
+export const productMatch = (
+  productA: ProductInterface,
+  productB: ProductInterface,
+): boolean => {
+  const equalSku = productA?.sku === productB?.sku;
+  const equalUid = productA?.uid === productB?.uid;
+
+  return equalSku && equalUid;
+};
diff --git a/packages/theme/modules/wishlist/index.ts b/packages/theme/modules/wishlist/index.ts
new file mode 100644
index 000000000..a66382d39
--- /dev/null
+++ b/packages/theme/modules/wishlist/index.ts
@@ -0,0 +1,5 @@
+import { Module } from '@nuxt/types';
+
+const nuxtModule : Module = function wishlistModule() {};
+
+export default nuxtModule;
diff --git a/packages/theme/modules/wishlist/store/wishlistStore.ts b/packages/theme/modules/wishlist/store/wishlistStore.ts
new file mode 100644
index 000000000..3f4c2e2b6
--- /dev/null
+++ b/packages/theme/modules/wishlist/store/wishlistStore.ts
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+import type { Wishlist } from '~/modules/GraphQL/types';
+
+interface WishlistState {
+  wishlist: Wishlist,
+}
+
+export const useWishlistStore = defineStore('wishlist', {
+  state: (): WishlistState => ({
+    wishlist: { items_count: 0 },
+  }),
+});
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index 58f145c1d..b7bec0fd2 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -94,6 +94,8 @@ export default () => {
     modules: [
       '~/modules/catalog',
       '~/modules/customer',
+      '~/modules/wishlist',
+      '~/modules/theme',
       ['nuxt-i18n', {
         baseUrl: process.env.VSF_STORE_URL || 'http://localhost:3000',
       }],
diff --git a/packages/theme/stores/customer.ts b/packages/theme/stores/customer.ts
index 0830a5745..d7331b958 100644
--- a/packages/theme/stores/customer.ts
+++ b/packages/theme/stores/customer.ts
@@ -1,9 +1,8 @@
 import { defineStore } from 'pinia';
-import type { Wishlist, Cart } from '~/modules/GraphQL/types';
+import type { Cart } from '~/modules/GraphQL/types';
 import type { User } from '~/modules/customer/composables/useUser/useUser';
 
 interface CustomerState {
-  wishlist: Wishlist,
   cart: Cart,
   user: User | null,
   isLoggedIn: boolean,
@@ -11,7 +10,6 @@ interface CustomerState {
 
 export const useCustomerStore = defineStore('customer', {
   state: (): CustomerState => ({
-    wishlist: { items_count: 0 },
     user: null,
     cart: {
       id: '', is_virtual: false, total_quantity: 0, shipping_addresses: [],