@akinon/projectzero 2.0.79-beta.1 → 2.0.79-rc.0

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/plugins.js

@@ -19,6 +19,7 @@ module.exports = [
   'pz-hepsipay',
   'pz-flow-payment',
   'pz-virtual-try-on',
+  'pz-similar-products',
   'pz-cybersource-uc',
   'pz-hepsipay',
   'pz-masterpass-rest',

package/app-template/src/proxy.ts

@@ -1,5 +1,4 @@
-import { PzNextRequest, withPzDefault } from '@akinon/next/middlewares';
-import { PREVIEW_ID_QUERY_PARAM } from '@akinon/next/utils/preview';
+import { withPzDefault } from '@akinon/next/middlewares';
 import { NextMiddleware, NextResponse } from 'next/server';
 
 /**
@@ -15,7 +14,8 @@ export const config = {
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',
     '/(.+\\.)(html|htm|aspx|asp|php)',
-    '/(.*orders\\/checkout-with-token.*)'
+    '/(.*orders\\/checkout-with-token.*)',
+    '/(.*orders\\/post-checkout.*)'
   ]
 };
 
@@ -33,47 +33,4 @@ const proxy: NextMiddleware = () =>
     return NextResponse.next();
   };
 
-const pzMiddleware = withPzDefault(proxy);
-
-const PREVIEW_EXIT_VALUES = new Set(['exit', 'off', '0', 'false']);
-
-/**
- * Widget preview entry: any page url carrying `?preview` is redirected to the
- * draft-mode route handler (/api/preview), which sets/clears the bypass and
- * preview-id cookies and returns to the same page without the params. Runs
- * BEFORE withPzDefault so the redirect is not subject to its response
- * rewriting (pz-override-response).
- *
- * The `?preview` value is a signed token naming WHICH preview to view (see
- * utils/preview-token.ts); it travels only as far as the route handler, which
- * stores the preview id for the rest of the session. A stray `preview_id`
- * from an old-style link is dropped from the return url.
- */
-const middleware: NextMiddleware = (req, event) => {
-  const url = req.nextUrl;
-
-  if (url.searchParams.has('preview')) {
-    const value = url.searchParams.get('preview') ?? '';
-    const target = url.clone();
-    target.searchParams.delete('preview');
-    target.searchParams.delete(PREVIEW_ID_QUERY_PARAM);
-
-    const previewApi = url.clone();
-    previewApi.pathname = '/api/preview';
-    previewApi.search = '';
-    previewApi.searchParams.set(
-      'redirect',
-      `${target.pathname}${target.search}`
-    );
-    if (PREVIEW_EXIT_VALUES.has(value.toLowerCase())) {
-      previewApi.searchParams.set('exit', '1');
-    } else {
-      if (value) previewApi.searchParams.set('token', value);
-    }
-    return NextResponse.redirect(previewApi);
-  }
-
-  return pzMiddleware(req as PzNextRequest, event);
-};
-
-export default middleware;
+export default withPzDefault(proxy);

package/app-template/src/settings.js

@@ -1,8 +1,4 @@
 const { LocaleUrlStrategy } = require('@akinon/next/localization');
-const {
-  PREVIEW_PZ_SEGMENT,
-  resolvePreviewSegment
-} = require('@akinon/next/utils/preview');
 const { ROUTES } = require('@theme/routes');
 
 const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
@@ -68,19 +64,6 @@ module.exports = {
   },
   customNotFoundEnabled: false,
   usePzSegment: true,
-  pzSegments: {
-    segments: [
-      {
-        // Carries WHICH named preview is being viewed into the render. The
-        // widget pages are force-static, where cookies() is blanked, so the
-        // middleware folds the preview cookie into the route instead.
-        // Empty for ordinary visitors — nothing renders from preview unless
-        // draft mode is on as well.
-        name: PREVIEW_PZ_SEGMENT,
-        resolve: (context) => resolvePreviewSegment(context.req)
-      }
-    ]
-  },
   commerceRedirectionIgnoreList: ['/users/reset'],
   csrf: {
     httpOnly: true

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/header/search/index.tsx

@@ -4,8 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { closeSearch } from '@akinon/next/redux/reducers/header';
 import clsx from 'clsx';
-
-import { Icon } from '@theme/components';
+import { Icon, Input } from '@theme/components';
 import Results from './results';
 import { ROUTES } from '@theme/routes';
 import { useLocalization, useRouter } from '@akinon/next/hooks';
@@ -42,6 +41,14 @@ export default function Search() {
     };
   }, [isSearchOpen, dispatch]);
 
+  const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
+  };
+
+  const handleCloseSearch = () => {
+    dispatch(closeSearch());
+  };
+
   return (
     <>
       <div
@@ -67,9 +74,9 @@ export default function Search() {
               {t('common.search.results_for')}
             </span>
             <div className="flex items-center">
-              <input
+              <Input
                 value={searchText}
-                onChange={(e) => setSearchText(e.target.value)}
+                onChange={handleSearchTextChange}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && searchText.trim() !== '') {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
@@ -91,11 +98,12 @@ export default function Search() {
               <Icon
                 name="close"
                 size={14}
-                onClick={() => dispatch(closeSearch())}
+                onClick={handleCloseSearch}
                 className="cursor-pointer"
               />
             </div>
           </div>
+
           <Results searchText={searchText} />
         </div>
       </div>

package/app-template/src/views/product/slider.tsx

@@ -36,53 +36,100 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
     carouselRef.current?.next();
   };
 
-  const handleThumbnailClick = (index) => {
+  const handleThumbnailClick = (index: number) => {
     setActiveIndex(index);
     carouselRef.current?.goToSlide(index);
   };
 
   return (
-    <div className="lg:grid lg:grid-cols-6">
-      <div className="lg:col-span-1">
-        <div className="flex flex-col items-center justify-center md:mr-[6px]">
-          <button
-            onClick={goToPrev}
-            className={twMerge(
-              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
-            )}
-            disabled={activeIndex === 0}
+    <>
+      <div className="lg:grid lg:grid-cols-6">
+        <div className="lg:col-span-1">
+          <div className="flex flex-col items-center justify-center md:mr-[6px]">
+            <button
+              onClick={goToPrev}
+              className={twMerge(
+                'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+                [activeIndex === 0 && 'cursor-not-allowed opacity-45']
+              )}
+              disabled={activeIndex === 0}
+            >
+              <Icon name="chevron-up" size={15} className="fill-[#000000]" />
+            </button>
+            <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
+              {product?.productimage_set?.map((item, index) => (
+                <Image
+                  key={index}
+                  src={item.image}
+                  alt={`Thumbnail ${index}`}
+                  width={80}
+                  height={128}
+                  aspectRatio={80 / 128}
+                  className={twMerge('cursor-pointer', [
+                    activeIndex === index && 'border-2 border-primary'
+                  ])}
+                  onClick={() => handleThumbnailClick(index)}
+                />
+              ))}
+            </div>
+            <button
+              onClick={goToNext}
+              className={twMerge(
+                'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+                [
+                  activeIndex === product.productimage_set.length - 1 &&
+                    'cursor-not-allowed opacity-45'
+                ]
+              )}
+              disabled={activeIndex === product.productimage_set.length - 1}
+            >
+              <Icon name="chevron-down" size={15} className="fill-[#000000]" />
+            </button>
+          </div>
+        </div>
+
+        <div className="relative lg:col-span-5">
+          <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+
+          <PluginModule
+            component={Component.ProductImageSearchFeature}
+            props={{
+              product,
+              activeIndex,
+              showResetButton: true
+            }}
+          />
+
+          <CarouselCore
+            responsive={{
+              all: {
+                breakpoint: { max: 5000, min: 0 },
+                items: 1
+              }
+            }}
+            arrows={false}
+            swipeable={true}
+            ref={carouselRef}
+            afterChange={(previousSlide, { currentSlide }) => {
+              setActiveIndex(currentSlide);
+            }}
+            containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
           >
-            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
-          </button>
-          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
-            {product?.productimage_set?.map((item, index) => (
+            {product?.productimage_set?.map((item, i) => (
               <Image
-                key={index}
+                key={i}
                 src={item.image}
-                alt={`Thumbnail ${index}`}
-                width={80}
-                height={128}
-                className={twMerge('cursor-pointer', [
-                  activeIndex === index && 'border-2 border-primary'
-                ])}
-                onClick={() => handleThumbnailClick(index)}
+                alt={product?.name || 'Product image'}
+                draggable={false}
+                aspectRatio={484 / 726}
+                sizes="(min-width: 425px) 512px,
+              (min-width: 601px) 576px,
+              (min-width: 768px) 336px,
+              (min-width: 1024px) 484px, 368px"
+                fill
               />
             ))}
-          </div>
-          <button
-            onClick={goToNext}
-            className={twMerge(
-              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
-              [
-                activeIndex === product.productimage_set.length - 1 &&
-                  'cursor-not-allowed opacity-45'
-              ]
-            )}
-            disabled={activeIndex === product.productimage_set.length - 1}
-          >
-            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
-          </button>
+          </CarouselCore>
         </div>
       </div>
 
@@ -140,6 +187,6 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
           ))}
         </CarouselCore>
       </div>
-    </div>
+    </>
   );
 }

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/commands/plugins.ts

@@ -164,6 +164,10 @@ export default async () => {
       name: 'Tamara Payment Extension',
       value: 'pz-tamara-extension'
     },
+    {
+      name: 'Similar Products',
+      value: 'pz-similar-products'
+    },
     {
       name: 'Hepsipay',
       value: 'pz-hepsipay'

package/dist/commands/plugins.js

@@ -183,6 +183,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
             name: 'Tamara Payment Extension',
             value: 'pz-tamara-extension'
         },
+        {
+            name: 'Similar Products',
+            value: 'pz-similar-products'
+        },
         {
             name: 'Hepsipay',
             value: 'pz-hepsipay'

package/package.json

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