feat: improve variant handling for wishlist

apps/web/composables/useCustomer/useCustomer.ts

@@ -63,7 +63,13 @@ export const useCustomer: UseCustomerReturn = () => {
     useHandleError(error.value);
     state.value.data = data?.value?.data ?? state.value.data;
     checkUserState();
-    useWishlist().setWishlistItemIds(state.value.data?.basket?.itemWishListIds || []);
+    const wishlistIdsFromSession = state.value.data?.basket?.itemWishListIds || [];
+    const wishlistIdsJSON = JSON.parse(JSON.stringify(wishlistIdsFromSession));
+    const wishlistIds = [];
+    for (const wishlistObject of wishlistIdsJSON) {
+      wishlistIds.push(wishlistObject.variationId);
+    }
+    useWishlist().setWishlistItemIds(wishlistIds || []);
 
     state.value.loading = false;
     return state.value.data;

apps/web/composables/useInitialSetup/useInitialSetup.ts

@@ -42,7 +42,7 @@ const setInitialDataSSR: SetInitialData = async () => {
   const { setUser } = useCustomer();
   const { setCategoryTree } = useCategoryTree();
   const { setCart, loading: cartLoading } = useCart();
-  const { setWishlistItemIds } = useWishlist();
+  const { setWishlistItemIds, setWishlistVariationIds } = useWishlist();
 
   cartLoading.value = true;
 
@@ -52,7 +52,16 @@ const setInitialDataSSR: SetInitialData = async () => {
       setUser(data.value.data.session as SessionResult);
       setCart(data.value.data.session?.basket as Cart);
       setCategoryTree(data.value.data.categories);
-      setWishlistItemIds(data.value.data.session?.basket?.itemWishListIds || []);
+      const wishlistIdsFromSession = data.value.data.session?.basket?.itemWishListIds || [];
+      const wishlistIdsJSON = JSON.parse(JSON.stringify(wishlistIdsFromSession));
+      const wishlistIds = [];
+      const wishlistVariationIds = [];
+      for (const wishlistObject of wishlistIdsJSON) {
+        wishlistIds.push(wishlistObject.variationId);
+        wishlistVariationIds.push(wishlistObject);
+      }
+      setWishlistItemIds(wishlistIds || []);
+      setWishlistVariationIds(wishlistVariationIds || []);
     }
   } catch (error) {
     useHandleError(error as ErrorParams);

apps/web/composables/useWishlist/types.ts

@@ -1,5 +1,6 @@
 import type {
   WishlistItem,
+  WishlistVariation,
   AddWishlistItemParams,
   AddWishlistItemResponse,
   DeleteWishlistItemParams,
@@ -9,6 +10,7 @@ export interface UseWishlistState {
   data: WishlistItem[];
   loading: boolean;
   wishlistItemIds: string[];
+  wishlistVariationIds: WishlistVariation[];
 }
 
 export type FetchWishlist = () => Promise<WishlistItem[]>;
@@ -17,6 +19,7 @@ export type DeleteWishlistItem = (params: DeleteWishlistItemParams) => Promise<b
 export type IsWishlistItem = (variationId: number) => boolean;
 export type InteractWithWishlist = (variationId: number, quantity: number) => Promise<void>;
 export type SetWishlistItemIds = (wishlistItemIds: string[]) => void;
+export type SetWishlistVariationIds = (wishlistItems: any[]) => void;
 
 export interface UseWishlist {
   data: Readonly<Ref<UseWishlistState['data']>>;
@@ -28,6 +31,7 @@ export interface UseWishlist {
   isWishlistItem: IsWishlistItem;
   setWishlistItemIds: SetWishlistItemIds;
   interactWithWishlist: InteractWithWishlist;
+  setWishlistVariationIds: SetWishlistVariationIds;
 }
 
 export type UseWishlistReturn = () => UseWishlist;

apps/web/composables/useWishlist/useWishlist.ts

@@ -1,4 +1,4 @@
-import type { AddWishlistItemResponse, WishlistItem } from '@plentymarkets/shop-api';
+import type { AddWishlistItemResponse, WishlistItem, WishlistVariation } from '@plentymarkets/shop-api';
 import type { AddWishlistItemParams, DeleteWishlistItemParams } from '@plentymarkets/shop-api';
 import type {
   FetchWishlist,
@@ -9,6 +9,7 @@ import type {
   IsWishlistItem,
   InteractWithWishlist,
   SetWishlistItemIds,
+  SetWishlistVariationIds,
 } from '~/composables/useWishlist/types';
 
 /**
@@ -26,8 +27,28 @@ export const useWishlist: UseWishlistReturn = () => {
     data: [] as WishlistItem[],
     loading: false,
     wishlistItemIds: [] as string[],
+    wishlistVariationIds: [] as WishlistVariation[],
   }));
 
+  /**
+   * @description Function for setting the wishlist item ids.
+   * @return SetWishlistItemIds
+   * @example
+   * ``` ts
+   *  setWishlistItemIds(['1', '2']);
+   * ```
+   * @param wishlistItemIds
+   */
+  const setWishlistItemIds: SetWishlistItemIds = (wishlistItemIds = []) => {
+    state.value.wishlistItemIds = wishlistItemIds.map((number) => number.toString());
+
+    if (state.value.data.length > 0) {
+      state.value.data = state.value.data.filter((wishListItem) =>
+        state.value.wishlistItemIds.includes(wishListItem.variation.id.toString()),
+      );
+    }
+  };
+
   /**
    * @description Function for fetching products.
    * @return FetchWishlist
@@ -44,27 +65,24 @@ export const useWishlist: UseWishlistReturn = () => {
       .then(({ data }) => {
         state.value.data = data ?? state.value.data;
         state.value.loading = false;
+        const itemIds = data ?? state.value.wishlistItemIds;
+        setWishlistItemIds(itemIds.map((wishlistItem) => wishlistItem.variation.id.toString()));
+
         return state.value.data;
       });
   };
 
   /**
-   * @description Function for setting the wishlist item ids.
-   * @return SetWishlistItemIds
+   * @description Function for setting the wishlist variation ids.
+   * @return SetWishlistVariationIds
    * @example
    * ``` ts
-   *  setWishlistItemIds(['1', '2']);
+   *  setWishlistVariationIds([{variationId: 1, canDirectlyAddToCart: 0}, {variationId: 2, canDirectlyAddToCart: 1}]);
    * ```
    * @param wishlistItemIds
    */
-  const setWishlistItemIds: SetWishlistItemIds = (wishlistItemIds = []) => {
-    state.value.wishlistItemIds = wishlistItemIds.map((number) => number.toString());
-
-    if (state.value.data.length > 0) {
-      state.value.data = state.value.data.filter((wishListItem) =>
-        state.value.wishlistItemIds.includes(wishListItem.variation.id.toString()),
-      );
-    }
+  const setWishlistVariationIds: SetWishlistVariationIds = (wishlistItems = []) => {
+    state.value.wishlistVariationIds = wishlistItems.map((item) => item);
   };
 
   /**
@@ -162,6 +180,7 @@ export const useWishlist: UseWishlistReturn = () => {
     deleteWishlistItem,
     isWishlistItem,
     interactWithWishlist,
+    setWishlistVariationIds,
     ...toRefs(state.value),
   };
 };