@akinon/projectzero 2.0.79-rc.0 → 2.0.79

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

@@ -8,11 +8,9 @@ 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;
@@ -23,25 +21,16 @@ interface FavButtonProps {
 
 const FAV_TOAST_OPTIONS = { position: 'bottom-right' as const }
 
-const useFavButton = (
-  productPk: number,
-  product?: Pick<Product, 'base_code' | 'name' | 'price' | 'currency_type'>
-) => {
+const useFavButton = (productPk: number) => {
   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' || useBatchFlow }
+    { skip: status !== 'authenticated' }
   );
 
   const favoriteItem = useMemo(
@@ -52,11 +41,7 @@ const useFavButton = (
     [favorites, productPk]
   );
 
-  const favouriteId = useBatchFlow
-    ? favouriteProductIds.getFavouriteId(productPk)
-    : favoriteItem?.pk;
-
-  const isActive = favouriteId !== undefined;
+  const isActive = Boolean(favoriteItem);
   const [isPushed, setIsPushed] = useState<boolean>(false);
 
   const [addFavorite] = useAddFavoriteMutation();
@@ -64,8 +49,8 @@ const useFavButton = (
 
   const handleClick = useCallback(async () => {
     try {
-      if (favouriteId !== undefined) {
-        await removeFavorite(favouriteId).unwrap();
+      if (favoriteItem) {
+        await removeFavorite(favoriteItem.pk).unwrap();
         success(t('product.removed_from_favorites'), FAV_TOAST_OPTIONS);
       } else {
         await addFavorite(productPk).unwrap();
@@ -75,26 +60,19 @@ const useFavButton = (
     } catch (err) {
       showError(t('product.favorites_error'), FAV_TOAST_OPTIONS);
     }
-  }, [favouriteId, productPk, addFavorite, removeFavorite, success, showError, t]);
+  }, [favoriteItem, productPk, addFavorite, removeFavorite, success, showError, t]);
 
   useEffect(() => {
-    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) {
+    if (favoriteItem && isPushed) {
       pushAddToWishlist({
-        base_code: gtmProduct.base_code,
-        name: gtmProduct.name,
-        price: gtmProduct.price,
-        currency_type: gtmProduct.currency_type
+        base_code: favoriteItem?.product?.base_code,
+        name: favoriteItem?.product?.name,
+        price: favoriteItem?.product?.price,
+        currency_type: favoriteItem?.product?.currency_type
       });
+      setIsPushed(false);
     }
-
-    setIsPushed(false);
-  }, [isActive, favoriteItem, product, isPushed]);
+  }, [favoriteItem, isPushed]);
 
   const FavButton = useMemo(() => {
     const View = (props: FavButtonProps) => (

package/app-template/src/plugins.js

@@ -19,7 +19,6 @@ 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,4 +1,5 @@
-import { withPzDefault } from '@akinon/next/middlewares';
+import { PzNextRequest, withPzDefault } from '@akinon/next/middlewares';
+import { PREVIEW_ID_QUERY_PARAM } from '@akinon/next/utils/preview';
 import { NextMiddleware, NextResponse } from 'next/server';
 
 /**
@@ -14,8 +15,7 @@ export const config = {
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',
     '/(.+\\.)(html|htm|aspx|asp|php)',
-    '/(.*orders\\/checkout-with-token.*)',
-    '/(.*orders\\/post-checkout.*)'
+    '/(.*orders\\/checkout-with-token.*)'
   ]
 };
 
@@ -33,4 +33,47 @@ const proxy: NextMiddleware = () =>
     return NextResponse.next();
   };
 
-export default withPzDefault(proxy);
+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;

package/app-template/src/settings.js

@@ -1,4 +1,8 @@
 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');
@@ -64,6 +68,19 @@ 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__/preview-contract.test.ts

@@ -0,0 +1,223 @@
+import {
+  isPreviewCopySlug,
+  isPreviewSlug,
+  isValidPreviewId,
+  previewSlug,
+  resolvePreviewSegment
+} from '@akinon/next/utils/preview';
+import {
+  decodePzValue,
+  encodePzValue,
+  getPzSegmentsConfig
+} from '@akinon/next/utils/pz-segments';
+import {
+  signPreviewToken,
+  verifyPreviewToken
+} from '@akinon/next/utils/preview-token';
+import { webcrypto } from 'node:crypto';
+import { TextEncoder as NodeTextEncoder } from 'node:util';
+
+// jsdom ships neither Web Crypto nor TextEncoder; the token code needs both.
+if (!globalThis.crypto?.subtle) {
+  Object.defineProperty(globalThis, 'crypto', { value: webcrypto });
+}
+if (typeof globalThis.TextEncoder === 'undefined') {
+  Object.defineProperty(globalThis, 'TextEncoder', { value: NodeTextEncoder });
+}
+
+/**
+ * The half of the preview contract this app owns: which named preview a
+ * request belongs to, and the widget slug that preview's copies live under.
+ * The theme editor builds the same slugs — if these change, previews stop
+ * resolving and every page silently falls back to live.
+ */
+
+const req = (cookie?: string, draft = true) => ({
+  cookies: {
+    get: (name: string) => {
+      if (name === '__prerender_bypass') {
+        return draft ? { value: 'bypass' } : undefined;
+      }
+      return name === 'pz-preview-id' && cookie !== undefined
+        ? { value: cookie }
+        : undefined;
+    }
+  }
+});
+
+describe('preview id validation', () => {
+  it('accepts the ids the editor produces', () => {
+    expect(isValidPreviewId('staging')).toBe(true);
+    expect(isValidPreviewId('black-friday')).toBe(true);
+    expect(isValidPreviewId('kis-kampanyasi-2026')).toBe(true);
+    expect(isValidPreviewId('a'.repeat(32))).toBe(true);
+  });
+
+  it('rejects anything that could escape the slug', () => {
+    // Ids arrive from a cookie, so this is a trust boundary.
+    expect(isValidPreviewId('')).toBe(false);
+    expect(isValidPreviewId('-leading')).toBe(false);
+    expect(isValidPreviewId('Upper')).toBe(false);
+    expect(isValidPreviewId('has space')).toBe(false);
+    expect(isValidPreviewId('../etc')).toBe(false);
+    expect(isValidPreviewId('a'.repeat(33))).toBe(false);
+    expect(isValidPreviewId(undefined)).toBe(false);
+    // `--` is the pz segment separator; the editor never produces it.
+    expect(isValidPreviewId('a--b')).toBe(false);
+    expect(isValidPreviewId('trailing-')).toBe(false);
+  });
+});
+
+describe('preview slugs', () => {
+  it('suffixes the live slug with the preview id', () => {
+    expect(previewSlug('homepage-body-new', 'staging')).toBe(
+      'homepage-body-new-preview-staging'
+    );
+    expect(previewSlug('homepage-body-new', 'black-friday')).toBe(
+      'homepage-body-new-preview-black-friday'
+    );
+  });
+
+  it('recognises its own output so previews are never nested', () => {
+    expect(isPreviewSlug('homepage-body-new-preview-staging')).toBe(true);
+    expect(isPreviewSlug('homepage-body-new')).toBe(false);
+    // The old single-preview suffix carries no id and is not one of ours.
+    expect(isPreviewSlug('homepage-body-new-preview')).toBe(false);
+  });
+
+  it('only treats a slug as a copy when it belongs to THIS preview', () => {
+    expect(isPreviewCopySlug('header-preview-staging', 'staging')).toBe(true);
+    // Another preview's copy is not ours to skip.
+    expect(isPreviewCopySlug('header-preview-winter', 'staging')).toBe(false);
+    // A live custom page whose name merely looks like a copy still gets its
+    // overlay — the shape-only check used to skip it and render live.
+    expect(isPreviewCopySlug('page-summer-preview-2026', 'staging')).toBe(
+      false
+    );
+    expect(isPreviewCopySlug('header', '')).toBe(false);
+  });
+});
+
+describe('the preview id inside the pz segment', () => {
+  const settings = {
+    pzSegments: { segments: [{ name: 'preview' }] }
+  };
+  const config = getPzSegmentsConfig(settings);
+  const url = encodeURIComponent('https://shop.test/collections/summer--sale');
+
+  it('round-trips a url containing the separator with a preview id after it', () => {
+    const encoded = encodePzValue(
+      { locale: 'en', currency: 'usd', url, preview: 'staging' },
+      config
+    );
+    expect(decodePzValue(encoded, config)).toEqual({
+      locale: 'en',
+      currency: 'usd',
+      url,
+      preview: 'staging'
+    });
+  });
+
+  it('round-trips such a url when no preview is active', () => {
+    const encoded = encodePzValue(
+      { locale: 'en', currency: 'usd', url, preview: '' },
+      config
+    );
+    expect(decodePzValue(encoded, config)).toEqual({
+      locale: 'en',
+      currency: 'usd',
+      url,
+      preview: ''
+    });
+  });
+
+  it('still reads a plain segment positionally', () => {
+    expect(decodePzValue('tr--try--%2F--kis', config)).toEqual({
+      locale: 'tr',
+      currency: 'try',
+      url: '%2F',
+      preview: 'kis'
+    });
+  });
+});
+
+describe('resolvePreviewSegment', () => {
+  it('passes a valid cookie through to the pz segment', () => {
+    expect(resolvePreviewSegment(req('staging'))).toBe('staging');
+  });
+
+  it('yields no preview for a missing or tampered cookie', () => {
+    expect(resolvePreviewSegment(req())).toBe('');
+    expect(resolvePreviewSegment(req(''))).toBe('');
+    expect(resolvePreviewSegment(req('../../evil'))).toBe('');
+    expect(resolvePreviewSegment(req('Staging'))).toBe('');
+  });
+
+  it('ignores the id cookie unless draft mode is on', () => {
+    // An anonymous visitor forging pz-preview-id must not get a private
+    // cache key per request — without the draft cookie the id is inert.
+    expect(resolvePreviewSegment(req('staging', false))).toBe('');
+  });
+});
+
+describe('signed preview links', () => {
+  const secret = 'k3y';
+  const now = 1_800_000_000_000; // ms
+  const inAnHour = Math.floor(now / 1000) + 3600;
+
+  it('round-trips the preview id and expiry it was minted with', async () => {
+    const token = await signPreviewToken(
+      { previewId: 'kis-kampanyasi', expiresAt: inAnHour },
+      secret
+    );
+    expect(token.startsWith('v1.kis-kampanyasi.')).toBe(true);
+    expect(await verifyPreviewToken(token, secret, now)).toEqual({
+      ok: true,
+      claims: { previewId: 'kis-kampanyasi', expiresAt: inAnHour }
+    });
+  });
+
+  it('dies at its expiry', async () => {
+    const token = await signPreviewToken(
+      { previewId: 'staging', expiresAt: inAnHour },
+      secret
+    );
+    expect(await verifyPreviewToken(token, secret, inAnHour * 1000)).toEqual({
+      ok: false,
+      reason: 'expired'
+    });
+  });
+
+  it('rejects tampering with the id, the expiry or the key', async () => {
+    const token = await signPreviewToken(
+      { previewId: 'staging', expiresAt: inAnHour },
+      secret
+    );
+    const [v, , exp, sig] = token.split('.');
+    expect(
+      (await verifyPreviewToken(`${v}.winter.${exp}.${sig}`, secret, now)).ok
+    ).toBe(false);
+    expect(
+      (await verifyPreviewToken(`${v}.staging.${exp + 1}.${sig}`, secret, now))
+        .ok
+    ).toBe(false);
+    expect((await verifyPreviewToken(token, 'other-key', now)).ok).toBe(false);
+  });
+
+  it('treats anything else as malformed — including the old raw secret', async () => {
+    expect(await verifyPreviewToken('pz-preview-local', secret, now)).toEqual({
+      ok: false,
+      reason: 'malformed'
+    });
+    expect((await verifyPreviewToken('', secret, now)).ok).toBe(false);
+    expect(
+      (await verifyPreviewToken('v1.Bad Id.123.sig', secret, now)).ok
+    ).toBe(false);
+  });
+
+  it('refuses to mint for an invalid id', async () => {
+    await expect(
+      signPreviewToken({ previewId: '../x', expiresAt: inAnHour }, secret)
+    ).rejects.toThrow();
+  });
+});

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

@@ -11,7 +11,6 @@ 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';
@@ -63,11 +62,6 @@ 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
@@ -111,25 +105,23 @@ export default function ListPage(props: ListPageProps) {
 
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
-            <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>
+            <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>
             {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}

package/app-template/src/views/header/search/index.tsx

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