feat: improve variant handling for wishlist

apps/web/components/OrderSummary/__tests__/ContactInformation.spec.ts

@@ -41,7 +41,7 @@ const cart: Cart =   {
   "subAmount": 1,
   "isExportDelivery": true,
   "shopCountryId": 1,
-  "itemWishListIds": [],
+  "itemWishListIds": {},
   "items": [
     {
       "id": 1,

apps/web/components/WishlistButton/WishlistButton.vue

@@ -16,8 +16,9 @@
     <SfLoaderCircular v-if="actionLoading" class="flex justify-center items-center" size="sm" />
     <template v-else>
       <SfIconClose v-if="isCloseButton" size="sm" />
-      <SfIconFavoriteFilled v-else-if="isWishlistItem(variationId)" size="sm" />
+      <SfIconFavoriteFilled v-else-if="isWishlistItem(variationId) && isTrulyInWishlist" size="sm" />
       <SfIconFavorite v-else size="sm" />
+
       <slot />
     </template>
   </UiButton>
@@ -28,7 +29,7 @@ import type { WishlistButtonProps } from '~/components/WishlistButton/types';
 import { SfIconFavorite, SfIconFavoriteFilled, SfLoaderCircular, SfIconClose } from '@storefront-ui/vue';
 import { productGetters } from '@plentymarkets/shop-api';
 
-const { product, quantity = 1, discard = false } = defineProps<WishlistButtonProps>();
+const { product, quantity = 1, discard = false, isTrulyInWishlist = false } = defineProps<WishlistButtonProps>();
 const { t } = useI18n();
 const { isWishlistItem, interactWithWishlist, loading: wishlistLoading } = useWishlist();
 const actionLoading = ref(false);
@@ -38,7 +39,7 @@ const variationId = computed(() => productGetters.getVariationId(product));
 const isCloseButton = computed(() => isWishlistItem(variationId.value) && discard);
 const onWishlistClick = async () => {
   actionLoading.value = true;
-  await interactWithWishlist(variationId.value, quantity);
+  await interactWithWishlist(variationId.value, quantity, isTrulyInWishlist);
   actionLoading.value = false;
 };
 </script>

apps/web/components/WishlistButton/types.ts

@@ -4,4 +4,5 @@ export type WishlistButtonProps = {
   product: Product;
   quantity?: number;
   discard?: boolean;
+  isTrulyInWishlist?: boolean;
 };

apps/web/components/WishlistPageContent/WishlistPageContent.vue

@@ -45,7 +45,13 @@
             :show-base-price="productGetters.showPricePerUnit(product)"
           >
             <template #wishlistButton>
-              <WishlistButton discard square class="absolute top-0 right-0 mr-2 mb-2 bg-white" :product="product" />
+              <WishlistButton
+                discard
+                square
+                class="absolute top-0 right-0 mr-2 mb-2 bg-white"
+                :product="product"
+                is-truly-in-wishlist
+              />
             </template>
           </UiProductCard>
         </NuxtLazyHydrate>

apps/web/components/ui/Header.vue

@@ -32,15 +32,15 @@
           class="group relative text-white hover:text-white active:text-white hover:bg-primary-800 active:bg-primary-700 mr-1 -ml-0.5 rounded-md"
           :tag="NuxtLink"
           :to="localePath(paths.wishlist)"
-          :aria-label="t('numberInWishlist', { count: wishlistItemIds.length })"
+          :aria-label="t('numberInWishlist', { count: Object.keys(wishlistItemIds).length })"
           variant="tertiary"
           square
           data-testid="wishlist-page-navigation"
         >
           <template #prefix>
             <SfIconFavorite />
             <SfBadge
-              :content="wishlistItemIds.length"
+              :content="Object.keys(wishlistItemIds).length"
               class="outline outline-primary-500 bg-white !text-neutral-900 group-hover:outline-primary-800 group-active:outline-primary-700 flex justify-center items-center text-[13px] leading-[12px] min-w-[16px] min-h-[16px]"
               data-testid="wishlist-badge"
               placement="top-right"

apps/web/components/ui/NavbarBottom.vue

@@ -24,7 +24,7 @@
           />
           <SfBadge
             v-if="label === t('wishlist')"
-            :content="wishlistItemIds.length"
+            :content="Object.keys(wishlistItemIds).length"
             :max="99"
             class="translate-x-[5px] translate-y-[-3px] outline outline-primary-500 bg-white !text-neutral-900 group-hover:outline-primary-800 group-active:outline-primary-700 flex justify-center items-center text-[13px] leading-[12px] min-w-[16px] min-h-[16px]"
             data-testid="wishlist-badge"

apps/web/components/ui/ProductCard/ProductCard.vue

@@ -34,6 +34,10 @@
           square
           class="absolute bottom-0 right-0 mr-2 mb-2 bg-white ring-1 ring-inset ring-neutral-200 !rounded-full"
           :product="product"
+          :is-truly-in-wishlist="
+            productGetters.canBeAddedToCartFromCategoryPage(product) ===
+            canBeDirectlyAddedToCart(productGetters.getVariationId(product))
+          "
         />
       </slot>
     </div>
@@ -70,7 +74,11 @@
         </span>
       </div>
       <UiButton
-        v-if="productGetters.canBeAddedToCartFromCategoryPage(product)"
+        v-if="
+          isFromWishlist
+            ? wishlistGetters.canDirectlyAddToCart(product)
+            : productGetters.canBeAddedToCartFromCategoryPage(product)
+        "
         size="sm"
         class="min-w-[80px] w-fit"
         data-testid="add-to-basket-short"
@@ -93,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { CategoryTreeItem, productGetters } from '@plentymarkets/shop-api';
+import { CategoryTreeItem, productGetters, wishlistGetters } from '@plentymarkets/shop-api';
 import { SfLink, SfIconShoppingCart, SfLoaderCircular, SfRating, SfCounter } from '@storefront-ui/vue';
 import type { ProductCardProps } from '~/components/ui/ProductCard/types';
 
@@ -124,6 +132,7 @@ const { openQuickCheckout } = useQuickCheckout();
 const { addToCart } = useCart();
 const { send } = useNotification();
 const { price, crossedPrice } = useProductPrice(product);
+const { canBeDirectlyAddedToCart } = useWishlist();
 
 const loading = ref(false);
 const runtimeConfig = useRuntimeConfig();

apps/web/components/ui/ProductCard/types.ts

@@ -1,7 +1,7 @@
-import type { Product } from '@plentymarkets/shop-api';
+import type { Product, WishlistItem } from '@plentymarkets/shop-api';
 
 export type ProductCardProps = {
-  product: Product;
+  product: Product | WishlistItem;
   name: string;
   imageUrl: string;
   imageAlt?: string;

apps/web/components/ui/PurchaseCard/PurchaseCard.vue

@@ -17,9 +17,14 @@
             'bottom-0 right-0 mr-2 mb-2 bg-white ring-1 ring-inset ring-neutral-200 !rounded-full':
               viewport.isLessThan('lg'),
           }"
+          :is-truly-in-wishlist="!productCanBeAddedToWishlist(product)"
         >
           <template v-if="viewport.isGreaterOrEquals('lg')">
-            {{ !isWishlistItem(productGetters.getVariationId(product)) ? t('addToWishlist') : t('removeFromWishlist') }}
+            {{
+              !isWishlistItem(productGetters.getVariationId(product)) || productCanBeAddedToWishlist(product)
+                ? t('addToWishlist')
+                : t('removeFromWishlist')
+            }}
           </template>
         </WishlistButton>
       </div>
@@ -143,7 +148,7 @@ const { send } = useNotification();
 const { addToCart, loading } = useCart();
 const { t } = useI18n();
 const quantitySelectorValue = ref(productGetters.getMinimumOrderQuantity(product));
-const { isWishlistItem } = useWishlist();
+const { isWishlistItem, productCanBeAddedToWishlist } = useWishlist();
 const { openQuickCheckout } = useQuickCheckout();
 const { crossedPrice } = useProductPrice(product);
 const { reviewArea } = useProductReviews(Number(productGetters.getId(product)));

apps/web/composables/useCustomer/useCustomer.ts

@@ -1,4 +1,9 @@
-import type { RegisterParams, SessionResult, UserChangePasswordParams } from '@plentymarkets/shop-api';
+import type {
+  RegisterParams,
+  SessionResult,
+  UserChangePasswordParams,
+  WishlistVariation,
+} from '@plentymarkets/shop-api';
 import type {
   UseCustomerReturn,
   UseCustomerState,
@@ -63,7 +68,7 @@ export const useCustomer: UseCustomerReturn = () => {
     useHandleError(error.value);
     state.value.data = data?.value?.data ?? state.value.data;
     checkUserState();
-    useWishlist().setWishlistItemIds(state.value.data?.basket?.itemWishListIds || []);
+    useWishlist().setWishlistItemIds(state.value.data?.basket?.itemWishListIds || ({} as WishlistVariation));
 
     state.value.loading = false;
     return state.value.data;
@@ -140,7 +145,7 @@ export const useCustomer: UseCustomerReturn = () => {
 
     state.value.data.user = null;
     checkUserState();
-    useWishlist().setWishlistItemIds([]);
+    useWishlist().setWishlistItemIds({} as WishlistVariation);
   };
 
   /** Function for registering a user.

apps/web/composables/useInitialSetup/useInitialSetup.ts

@@ -1,5 +1,4 @@
-import type { Cart, SessionResult } from '@plentymarkets/shop-api';
-
+import type { Cart, SessionResult, WishlistVariation } from '@plentymarkets/shop-api';
 import type { SetInitialData, UseInitialSetupReturn } from './types';
 import type { ErrorParams } from '../useHandleError';
 
@@ -52,7 +51,12 @@ 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 || []);
+
+      let dataWishlistIds = data.value.data.session?.basket?.itemWishListIds;
+      if (dataWishlistIds && dataWishlistIds.length === 0) {
+        dataWishlistIds = {} as WishlistVariation;
+      }
+      setWishlistItemIds(dataWishlistIds || ({} as WishlistVariation));
     }
   } catch (error) {
     useHandleError(error as ErrorParams);

apps/web/composables/useWishlist/types.ts

@@ -1,22 +1,26 @@
 import type {
   WishlistItem,
+  WishlistVariation,
   AddWishlistItemParams,
   AddWishlistItemResponse,
   DeleteWishlistItemParams,
 } from '@plentymarkets/shop-api';
+import { Product } from '@plentymarkets/shop-api';
 
 export interface UseWishlistState {
   data: WishlistItem[];
   loading: boolean;
-  wishlistItemIds: string[];
+  wishlistItemIds: WishlistVariation;
 }
 
 export type FetchWishlist = () => Promise<WishlistItem[]>;
 export type AddWishlistItem = (params: AddWishlistItemParams) => Promise<AddWishlistItemResponse>;
 export type DeleteWishlistItem = (params: DeleteWishlistItemParams) => Promise<boolean>;
 export type IsWishlistItem = (variationId: number) => boolean;
-export type InteractWithWishlist = (variationId: number, quantity: number) => Promise<void>;
-export type SetWishlistItemIds = (wishlistItemIds: string[]) => void;
+export type CanBeDirectlyAddedToCart = (variationId: number) => boolean;
+export type ProductCanBeAddedToWishlist = (product: Product) => boolean;
+export type InteractWithWishlist = (variationId: number, quantity: number, isTrulyInWishlist: boolean) => Promise<void>;
+export type SetWishlistItemIds = (wishlistItemIds: WishlistVariation) => void;
 
 export interface UseWishlist {
   data: Readonly<Ref<UseWishlistState['data']>>;
@@ -26,6 +30,8 @@ export interface UseWishlist {
   addWishlistItem: AddWishlistItem;
   deleteWishlistItem: DeleteWishlistItem;
   isWishlistItem: IsWishlistItem;
+  canBeDirectlyAddedToCart: CanBeDirectlyAddedToCart;
+  productCanBeAddedToWishlist: ProductCanBeAddedToWishlist;
   setWishlistItemIds: SetWishlistItemIds;
   interactWithWishlist: InteractWithWishlist;
 }