@akinon/projectzero 2.0.78-rc.0 → 2.0.78-rc.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @akinon/projectzero
 
+## 2.0.78-rc.2
+
+## 2.0.78-rc.1
+
 ## 2.0.78-rc.0
 
 ### Patch Changes

package/app-template/CHANGELOG.md

@@ -1,5 +1,71 @@
 # projectzeronext
 
+## 2.0.78-rc.2
+
+### Patch Changes
+
+- Updated dependencies [86187b1c]
+  - @akinon/next@2.0.78-rc.2
+  - @akinon/pz-theme@2.0.78-rc.2
+  - @akinon/pz-virtual-try-on@2.0.78-rc.2
+  - @akinon/pz-akifast@2.0.78-rc.2
+  - @akinon/pz-apple-pay@2.0.78-rc.2
+  - @akinon/pz-b2b@2.0.78-rc.2
+  - @akinon/pz-basket-gift-pack@2.0.78-rc.2
+  - @akinon/pz-bkm@2.0.78-rc.2
+  - @akinon/pz-checkout-gift-pack@2.0.78-rc.2
+  - @akinon/pz-click-collect@2.0.78-rc.2
+  - @akinon/pz-credit-payment@2.0.78-rc.2
+  - @akinon/pz-cybersource-uc@2.0.78-rc.2
+  - @akinon/pz-flow-payment@2.0.78-rc.2
+  - @akinon/pz-google-pay@2.0.78-rc.2
+  - @akinon/pz-gpay@2.0.78-rc.2
+  - @akinon/pz-haso@2.0.78-rc.2
+  - @akinon/pz-hepsipay@2.0.78-rc.2
+  - @akinon/pz-masterpass@2.0.78-rc.2
+  - @akinon/pz-masterpass-rest@2.0.78-rc.2
+  - @akinon/pz-multi-basket@2.0.78-rc.2
+  - @akinon/pz-one-click-checkout@2.0.78-rc.2
+  - @akinon/pz-otp@2.0.78-rc.2
+  - @akinon/pz-pay-on-delivery@2.0.78-rc.2
+  - @akinon/pz-saved-card@2.0.78-rc.2
+  - @akinon/pz-similar-products@2.0.78-rc.2
+  - @akinon/pz-tabby-extension@2.0.78-rc.2
+  - @akinon/pz-tamara-extension@2.0.78-rc.2
+
+## 2.0.78-rc.1
+
+### Patch Changes
+
+- 8a0379e6: ZERO-4845: Implement FavouriteProductIds context and provider; enhance fav button logic and add tests for fallback functionality
+  - @akinon/next@2.0.78-rc.1
+  - @akinon/pz-akifast@2.0.78-rc.1
+  - @akinon/pz-apple-pay@2.0.78-rc.1
+  - @akinon/pz-b2b@2.0.78-rc.1
+  - @akinon/pz-basket-gift-pack@2.0.78-rc.1
+  - @akinon/pz-bkm@2.0.78-rc.1
+  - @akinon/pz-checkout-gift-pack@2.0.78-rc.1
+  - @akinon/pz-click-collect@2.0.78-rc.1
+  - @akinon/pz-credit-payment@2.0.78-rc.1
+  - @akinon/pz-cybersource-uc@2.0.78-rc.1
+  - @akinon/pz-flow-payment@2.0.78-rc.1
+  - @akinon/pz-google-pay@2.0.78-rc.1
+  - @akinon/pz-gpay@2.0.78-rc.1
+  - @akinon/pz-haso@2.0.78-rc.1
+  - @akinon/pz-hepsipay@2.0.78-rc.1
+  - @akinon/pz-masterpass@2.0.78-rc.1
+  - @akinon/pz-masterpass-rest@2.0.78-rc.1
+  - @akinon/pz-multi-basket@2.0.78-rc.1
+  - @akinon/pz-one-click-checkout@2.0.78-rc.1
+  - @akinon/pz-otp@2.0.78-rc.1
+  - @akinon/pz-pay-on-delivery@2.0.78-rc.1
+  - @akinon/pz-saved-card@2.0.78-rc.1
+  - @akinon/pz-similar-products@2.0.78-rc.1
+  - @akinon/pz-tabby-extension@2.0.78-rc.1
+  - @akinon/pz-tamara-extension@2.0.78-rc.1
+  - @akinon/pz-theme@2.0.78-rc.1
+  - @akinon/pz-virtual-try-on@2.0.78-rc.1
+
 ## 2.0.78-rc.0
 
 ### Patch Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.78-rc.0",
+  "version": "2.0.78-rc.2",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.78-rc.0",
-    "@akinon/pz-akifast": "2.0.78-rc.0",
-    "@akinon/pz-apple-pay": "2.0.78-rc.0",
-    "@akinon/pz-b2b": "2.0.78-rc.0",
-    "@akinon/pz-basket-gift-pack": "2.0.78-rc.0",
-    "@akinon/pz-bkm": "2.0.78-rc.0",
-    "@akinon/pz-checkout-gift-pack": "2.0.78-rc.0",
-    "@akinon/pz-click-collect": "2.0.78-rc.0",
-    "@akinon/pz-credit-payment": "2.0.78-rc.0",
-    "@akinon/pz-cybersource-uc": "2.0.78-rc.0",
-    "@akinon/pz-flow-payment": "2.0.78-rc.0",
-    "@akinon/pz-google-pay": "2.0.78-rc.0",
-    "@akinon/pz-gpay": "2.0.78-rc.0",
-    "@akinon/pz-haso": "2.0.78-rc.0",
-    "@akinon/pz-hepsipay": "2.0.78-rc.0",
-    "@akinon/pz-masterpass": "2.0.78-rc.0",
-    "@akinon/pz-masterpass-rest": "2.0.78-rc.0",
-    "@akinon/pz-multi-basket": "2.0.78-rc.0",
-    "@akinon/pz-one-click-checkout": "2.0.78-rc.0",
-    "@akinon/pz-otp": "2.0.78-rc.0",
-    "@akinon/pz-pay-on-delivery": "2.0.78-rc.0",
-    "@akinon/pz-saved-card": "2.0.78-rc.0",
-    "@akinon/pz-similar-products": "2.0.78-rc.0",
-    "@akinon/pz-tabby-extension": "2.0.78-rc.0",
-    "@akinon/pz-tamara-extension": "2.0.78-rc.0",
-    "@akinon/pz-theme": "2.0.78-rc.0",
-    "@akinon/pz-virtual-try-on": "2.0.78-rc.0",
+    "@akinon/next": "2.0.78-rc.2",
+    "@akinon/pz-akifast": "2.0.78-rc.2",
+    "@akinon/pz-apple-pay": "2.0.78-rc.2",
+    "@akinon/pz-b2b": "2.0.78-rc.2",
+    "@akinon/pz-basket-gift-pack": "2.0.78-rc.2",
+    "@akinon/pz-bkm": "2.0.78-rc.2",
+    "@akinon/pz-checkout-gift-pack": "2.0.78-rc.2",
+    "@akinon/pz-click-collect": "2.0.78-rc.2",
+    "@akinon/pz-credit-payment": "2.0.78-rc.2",
+    "@akinon/pz-cybersource-uc": "2.0.78-rc.2",
+    "@akinon/pz-flow-payment": "2.0.78-rc.2",
+    "@akinon/pz-google-pay": "2.0.78-rc.2",
+    "@akinon/pz-gpay": "2.0.78-rc.2",
+    "@akinon/pz-haso": "2.0.78-rc.2",
+    "@akinon/pz-hepsipay": "2.0.78-rc.2",
+    "@akinon/pz-masterpass": "2.0.78-rc.2",
+    "@akinon/pz-masterpass-rest": "2.0.78-rc.2",
+    "@akinon/pz-multi-basket": "2.0.78-rc.2",
+    "@akinon/pz-one-click-checkout": "2.0.78-rc.2",
+    "@akinon/pz-otp": "2.0.78-rc.2",
+    "@akinon/pz-pay-on-delivery": "2.0.78-rc.2",
+    "@akinon/pz-saved-card": "2.0.78-rc.2",
+    "@akinon/pz-similar-products": "2.0.78-rc.2",
+    "@akinon/pz-tabby-extension": "2.0.78-rc.2",
+    "@akinon/pz-tamara-extension": "2.0.78-rc.2",
+    "@akinon/pz-theme": "2.0.78-rc.2",
+    "@akinon/pz-virtual-try-on": "2.0.78-rc.2",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -74,7 +74,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.78-rc.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.78-rc.2",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/src/hooks/favourite-product-ids-context.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import { useSession } from 'next-auth/react';
+import { useGetFavouriteProductIdsQuery } from '@akinon/next/data/client/wishlist';
+import {
+  isFavouriteProductIdsSuspended,
+  suspendFavouriteProductIds
+} from '@theme/utils/favourite-product-ids-fallback';
+
+interface FavouriteProductIdsContextValue {
+  // False while the batch flow is unavailable (endpoint 404'd or errored), so
+  // consumers can fall back to the legacy favourites-list request.
+  isActive: boolean;
+  getFavouriteId: (productPk: number) => number | undefined;
+}
+
+const FavouriteProductIdsContext =
+  createContext<FavouriteProductIdsContextValue | null>(null);
+
+export const useFavouriteProductIds = () =>
+  useContext(FavouriteProductIdsContext);
+
+type Phase = 'init' | 'batch' | 'fallback';
+
+interface FavouriteProductIdsProviderProps {
+  productIds: Array<number | string>;
+  children: ReactNode;
+}
+
+export function FavouriteProductIdsProvider({
+  productIds,
+  children
+}: FavouriteProductIdsProviderProps) {
+  const { status } = useSession();
+
+  // Storage can only be read on the client, so the first render stays neutral
+  // to keep SSR and hydration output identical.
+  const [phase, setPhase] = useState<Phase>('init');
+
+  useEffect(() => {
+    setPhase(isFavouriteProductIdsSuspended() ? 'fallback' : 'batch');
+  }, []);
+
+  const sortedProductIds = useMemo(() => {
+    const unique = Array.from(
+      new Set(productIds.map(Number).filter((id) => Number.isFinite(id)))
+    );
+    // Stable order keeps the RTK Query cache key deterministic for the page.
+    return unique.sort((a, b) => a - b);
+  }, [productIds]);
+
+  const { data, error } = useGetFavouriteProductIdsQuery(
+    { productIds: sortedProductIds },
+    {
+      skip:
+        status !== 'authenticated' ||
+        phase !== 'batch' ||
+        sortedProductIds.length === 0
+    }
+  );
+
+  useEffect(() => {
+    if (!error) return;
+
+    if ('status' in error && error.status === 404) {
+      suspendFavouriteProductIds();
+    }
+
+    setPhase('fallback');
+  }, [error]);
+
+  const favouriteIdByProductPk = useMemo(() => {
+    const map = new Map<number, number>();
+
+    data?.favourite_products?.forEach((item) => {
+      map.set(Number(item.product_id), item.favourite_id);
+    });
+
+    return map;
+  }, [data]);
+
+  const value = useMemo<FavouriteProductIdsContextValue>(
+    () => ({
+      isActive: phase !== 'fallback',
+      getFavouriteId: (productPk: number) =>
+        favouriteIdByProductPk.get(Number(productPk))
+    }),
+    [phase, favouriteIdByProductPk]
+  );
+
+  return (
+    <FavouriteProductIdsContext.Provider value={value}>
+      {children}
+    </FavouriteProductIdsContext.Provider>
+  );
+}

package/app-template/src/hooks/use-fav-button.tsx

@@ -8,9 +8,11 @@ import {
   useGetFavoritesQuery,
   useRemoveFavoriteMutation
 } from '@akinon/next/data/client/wishlist';
+import { Product } from '@akinon/next/types';
 import { Icon } from '@theme/components';
 import { pushAddToWishlist } from '@theme/utils/gtm';
 import { useToast, useLocalization } from '@akinon/next/hooks';
+import { useFavouriteProductIds } from './favourite-product-ids-context';
 
 interface FavButtonProps {
   label?: string;
@@ -21,16 +23,25 @@ interface FavButtonProps {
 
 const FAV_TOAST_OPTIONS = { position: 'bottom-right' as const }
 
-const useFavButton = (productPk: number) => {
+const useFavButton = (
+  productPk: number,
+  product?: Pick<Product, 'base_code' | 'name' | 'price' | 'currency_type'>
+) => {
   const { status } = useSession();
   const { t } = useLocalization();
   const { success, error: showError } = useToast();
 
+  // Inside a FavouriteProductIdsProvider (PLP) the favourite state comes from
+  // the batched favourite-product-ids request, so the full favourites list is
+  // only fetched when that flow is unavailable (no provider, or 404 fallback).
+  const favouriteProductIds = useFavouriteProductIds();
+  const useBatchFlow = Boolean(favouriteProductIds?.isActive);
+
   const { data: favorites } = useGetFavoritesQuery(
     {
       limit: 1000
     },
-    { skip: status !== 'authenticated' }
+    { skip: status !== 'authenticated' || useBatchFlow }
   );
 
   const favoriteItem = useMemo(
@@ -41,7 +52,11 @@ const useFavButton = (productPk: number) => {
     [favorites, productPk]
   );
 
-  const isActive = Boolean(favoriteItem);
+  const favouriteId = useBatchFlow
+    ? favouriteProductIds.getFavouriteId(productPk)
+    : favoriteItem?.pk;
+
+  const isActive = favouriteId !== undefined;
   const [isPushed, setIsPushed] = useState<boolean>(false);
 
   const [addFavorite] = useAddFavoriteMutation();
@@ -49,8 +64,8 @@ const useFavButton = (productPk: number) => {
 
   const handleClick = useCallback(async () => {
     try {
-      if (favoriteItem) {
-        await removeFavorite(favoriteItem.pk).unwrap();
+      if (favouriteId !== undefined) {
+        await removeFavorite(favouriteId).unwrap();
         success(t('product.removed_from_favorites'), FAV_TOAST_OPTIONS);
       } else {
         await addFavorite(productPk).unwrap();
@@ -60,19 +75,26 @@ const useFavButton = (productPk: number) => {
     } catch (err) {
       showError(t('product.favorites_error'), FAV_TOAST_OPTIONS);
     }
-  }, [favoriteItem, productPk, addFavorite, removeFavorite, success, showError, t]);
+  }, [favouriteId, productPk, addFavorite, removeFavorite, success, showError, t]);
 
   useEffect(() => {
-    if (favoriteItem && isPushed) {
+    if (!isActive || !isPushed) return;
+
+    // The batched flow returns ids only, so the analytics payload falls back
+    // to the product the card already renders.
+    const gtmProduct = favoriteItem?.product ?? product;
+
+    if (gtmProduct) {
       pushAddToWishlist({
-        base_code: favoriteItem?.product?.base_code,
-        name: favoriteItem?.product?.name,
-        price: favoriteItem?.product?.price,
-        currency_type: favoriteItem?.product?.currency_type
+        base_code: gtmProduct.base_code,
+        name: gtmProduct.name,
+        price: gtmProduct.price,
+        currency_type: gtmProduct.currency_type
       });
-      setIsPushed(false);
     }
-  }, [favoriteItem, isPushed]);
+
+    setIsPushed(false);
+  }, [isActive, favoriteItem, product, isPushed]);
 
   const FavButton = useMemo(() => {
     const View = (props: FavButtonProps) => (

package/app-template/src/utils/__tests__/favourite-product-ids-fallback.test.ts

@@ -0,0 +1,42 @@
+import {
+  FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS,
+  isFavouriteProductIdsSuspended,
+  suspendFavouriteProductIds
+} from '../favourite-product-ids-fallback';
+
+const STORAGE_KEY = 'pz-favourite-product-ids-unavailable-until';
+
+describe('favourite-product-ids-fallback', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('is not suspended by default', () => {
+    expect(isFavouriteProductIdsSuspended()).toBe(false);
+  });
+
+  it('suspends after a 404 marker is written', () => {
+    suspendFavouriteProductIds();
+
+    expect(isFavouriteProductIdsSuspended()).toBe(true);
+
+    const until = Number(window.localStorage.getItem(STORAGE_KEY));
+    expect(until).toBeGreaterThan(Date.now());
+    expect(until).toBeLessThanOrEqual(
+      Date.now() + FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS
+    );
+  });
+
+  it('expires the suspension and clears the marker', () => {
+    window.localStorage.setItem(STORAGE_KEY, String(Date.now() - 1000));
+
+    expect(isFavouriteProductIdsSuspended()).toBe(false);
+    expect(window.localStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('treats a corrupt marker as not suspended', () => {
+    window.localStorage.setItem(STORAGE_KEY, 'not-a-number');
+
+    expect(isFavouriteProductIdsSuspended()).toBe(false);
+  });
+});

package/app-template/src/utils/favourite-product-ids-fallback.ts

@@ -0,0 +1,51 @@
+const STORAGE_KEY = 'pz-favourite-product-ids-unavailable-until';
+
+// Not every brand's backend ships the favourite-product-ids endpoint at the
+// same time, so a 404 suspends the new flow for this long before probing again.
+export const FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS = 6 * 60 * 60 * 1000;
+
+const getStorage = (): Storage | null => {
+  try {
+    // The property access itself is what throws when storage is blocked, so it
+    // has to be inside the try rather than guarded by a typeof check.
+    return typeof window === 'undefined' ? null : window.localStorage ?? null;
+  } catch {
+    return null;
+  }
+};
+
+// Fails open: when storage is unavailable the endpoint is probed again, which
+// at worst costs one extra 404 per page view.
+export const isFavouriteProductIdsSuspended = (): boolean => {
+  const storage = getStorage();
+  if (!storage) return false;
+
+  try {
+    const raw = storage.getItem(STORAGE_KEY);
+    if (!raw) return false;
+
+    const until = Number(raw);
+    if (!Number.isFinite(until) || Date.now() >= until) {
+      storage.removeItem(STORAGE_KEY);
+      return false;
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const suspendFavouriteProductIds = (): void => {
+  const storage = getStorage();
+  if (!storage) return;
+
+  try {
+    storage.setItem(
+      STORAGE_KEY,
+      String(Date.now() + FAVOURITE_PRODUCT_IDS_RETRY_AFTER_MS)
+    );
+  } catch {
+    // Fail open; see isFavouriteProductIdsSuspended.
+  }
+};

package/app-template/src/views/category/category-info.tsx

@@ -11,6 +11,7 @@ import { GetCategoryResponse } from '@akinon/next/types';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setFacets, setMenuOpen } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
+import { FavouriteProductIdsProvider } from '@theme/hooks/favourite-product-ids-context';
 import { useLocalization } from '@akinon/next/hooks';
 import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
@@ -62,6 +63,11 @@ export default function ListPage(props: ListPageProps) {
 
   const { t } = useLocalization();
 
+  const productPks = useMemo(
+    () => data?.products?.map((product) => product.pk) ?? [],
+    [data?.products]
+  );
+
   useEffect(() => {
     dispatch(setFacets(data.facets));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -105,23 +111,25 @@ export default function ListPage(props: ListPageProps) {
 
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
-            <div
-              className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
-                'md:grid-cols-3': layoutSize === 3,
-                'lg:grid-cols-2': layoutSize === 2,
-                'lg:grid-cols-3': layoutSize === 3
-              })}
-            >
-              {data?.products?.map((product, index) => (
-                <ProductItem
-                  key={product.pk}
-                  product={product}
-                  width={itemDimensions.width}
-                  height={itemDimensions.height}
-                  index={index}
-                />
-              ))}
-            </div>
+            <FavouriteProductIdsProvider productIds={productPks}>
+              <div
+                className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
+                  'md:grid-cols-3': layoutSize === 3,
+                  'lg:grid-cols-2': layoutSize === 2,
+                  'lg:grid-cols-3': layoutSize === 3
+                })}
+              >
+                {data?.products?.map((product, index) => (
+                  <ProductItem
+                    key={product.pk}
+                    product={product}
+                    width={itemDimensions.width}
+                    height={itemDimensions.height}
+                    index={index}
+                  />
+                ))}
+              </div>
+            </FavouriteProductIdsProvider>
             {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}

package/app-template/src/views/product-item/index.tsx

@@ -22,7 +22,7 @@ export const ProductItem = (props: Props) => {
   // TODO: Static image will change (TR)
   const { product, width, height, index } = props;
   const [viewed, setViewed] = useState(false);
-  const { FavButton } = useFavButton(product.pk);
+  const { FavButton } = useFavButton(product.pk, product);
   const { ref, inView } = useInView();
 
   const image_url = product.productimage_set[0]?.image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.78-rc.0",
+  "version": "2.0.78-rc.2",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {