refactor: create wishlist module

M2-507

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'));

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';
 

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';
 

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';

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';

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 */

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.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() {

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';

packages/theme/modules/catalog/pages/category.vue

@@ -112,19 +112,18 @@ 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';
 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 }));

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';
 

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';

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 */

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

packages/theme/components/WishlistSidebar.vue → 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,16 +232,16 @@ 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 }))
         : ({ total: 0, subtotal: 0 })),
     );
 
     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,

packages/theme/modules/theme/index.ts

@@ -0,0 +1,5 @@
+import { Module } from '@nuxt/types';
+
+const nuxtModule : Module = function themeModule() {};
+
+export default nuxtModule;