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

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # @akinon/projectzero
 
-## 2.0.78-beta.0
+## 2.0.78-rc.1
+
+## 2.0.78-rc.0
+
+### Patch Changes
+
+- 143be2b9d: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+- d99a6a7d5: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- e18836b20: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
 
 ## 2.0.77
 

package/app-template/.env.example

@@ -7,6 +7,7 @@ NEXT_PUBLIC_URL=http://localhost:3000
 SERVICE_BACKEND_URL=https://02fde10fee4440269e695aa10707dfaf.lb.akinoncloud.com
 SITEMAP_S3_BUCKET_NAME=0fb534
 NEXT_PUBLIC_VIRTUAL_TRY_ON_API_URL=https://d2a26507c7094f359aba349b96a96881.lb.akinoncloud.com
+NEXT_PUBLIC_ENABLE_IMAGE_SEARCH=true
 
 # PZ Dashboard dataLayer observability (unset = observer disabled)
 # NEXT_PUBLIC_PZ_DASHBOARD_URL=http://localhost:3005

package/app-template/AGENTS.md

@@ -1,3 +1,11 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# Next.js: ALWAYS read docs before coding
+
+Before any Next.js work, find and read the relevant doc in `node_modules/next/dist/docs/`. Your training data is outdated — the docs are the source of truth.
+
+<!-- END:nextjs-agent-rules -->
+
 # Project Zero Next.js - Developer Instructions
 
 ## 📚 Available Instruction Files

package/app-template/CHANGELOG.md

@@ -1,37 +1,117 @@
 # projectzeronext
 
-## 2.0.78-beta.0
-
-### Patch Changes
-
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.78-beta.0
-  - @akinon/pz-theme@2.0.78-beta.0
-  - @akinon/pz-virtual-try-on@2.0.78-beta.0
-  - @akinon/pz-akifast@2.0.78-beta.0
-  - @akinon/pz-apple-pay@2.0.78-beta.0
-  - @akinon/pz-b2b@2.0.78-beta.0
-  - @akinon/pz-basket-gift-pack@2.0.78-beta.0
-  - @akinon/pz-bkm@2.0.78-beta.0
-  - @akinon/pz-checkout-gift-pack@2.0.78-beta.0
-  - @akinon/pz-click-collect@2.0.78-beta.0
-  - @akinon/pz-credit-payment@2.0.78-beta.0
-  - @akinon/pz-cybersource-uc@2.0.78-beta.0
-  - @akinon/pz-flow-payment@2.0.78-beta.0
-  - @akinon/pz-google-pay@2.0.78-beta.0
-  - @akinon/pz-gpay@2.0.78-beta.0
-  - @akinon/pz-haso@2.0.78-beta.0
-  - @akinon/pz-hepsipay@2.0.78-beta.0
-  - @akinon/pz-masterpass@2.0.78-beta.0
-  - @akinon/pz-masterpass-rest@2.0.78-beta.0
-  - @akinon/pz-multi-basket@2.0.78-beta.0
-  - @akinon/pz-one-click-checkout@2.0.78-beta.0
-  - @akinon/pz-otp@2.0.78-beta.0
-  - @akinon/pz-pay-on-delivery@2.0.78-beta.0
-  - @akinon/pz-saved-card@2.0.78-beta.0
-  - @akinon/pz-similar-products@2.0.78-beta.0
-  - @akinon/pz-tabby-extension@2.0.78-beta.0
-  - @akinon/pz-tamara-extension@2.0.78-beta.0
+## 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
+
+- 1a8622a9b: ZERO-3392: Implemented AI Search functionality and update env
+- 2fea4143: ZERO-4620: Add runtime access to `NEXT_PUBLIC_*` environment variables from Client Components
+- b55acb768: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
+- 143be2b9d: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+- 9f8cd3bc5: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
+- d99a6a7d5: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- ccf21475d: ZERO-4404: Add Next.js 16.2 AI improvements
+- c0228aff0: ZERO-4159: Upgrade the package versions
+- b05c35435: ZERO-2570: Category filters routes to absolute url
+- e18836b20: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
+- c3244a310: ZERO-4013: Update runtime version to node:25-alpine in project configuration
+- Updated dependencies [a3e2acbf8]
+- Updated dependencies [0cf9ea239]
+- Updated dependencies [324f97d55]
+- Updated dependencies [51ea06888]
+- Updated dependencies
+- Updated dependencies [c97525a31]
+- Updated dependencies [eba125b24]
+- Updated dependencies [2fea4143]
+- Updated dependencies [119f0c11]
+- Updated dependencies [823a4449a]
+- Updated dependencies [b55acb768]
+- Updated dependencies [760258c1c]
+- Updated dependencies [5da13fffc]
+- Updated dependencies [143be2b9d]
+- Updated dependencies [7889b08fe]
+- Updated dependencies [fb4aa9b47]
+- Updated dependencies [9f8cd3bc5]
+- Updated dependencies [bfafa3f49]
+- Updated dependencies [00b9f488f]
+- Updated dependencies [57d7eb305]
+- Updated dependencies [d99a6a7d5]
+- Updated dependencies [9db81a714]
+- Updated dependencies [591e345e1]
+- Updated dependencies [0df6bc1f8]
+- Updated dependencies [4de5303c5]
+- Updated dependencies [63a720003]
+- Updated dependencies [95b139dc1]
+- Updated dependencies [1d00f2d06]
+- Updated dependencies [4ac7b2a1e]
+- Updated dependencies [e9598c71]
+- Updated dependencies [4998a9631]
+- Updated dependencies [804d2bd6c]
+- Updated dependencies [c0228aff0]
+- Updated dependencies [3909d3224]
+- Updated dependencies [6a3d8a631]
+- Updated dependencies [e18836b20]
+- Updated dependencies [b1111d7b]
+  - @akinon/pz-tabby-extension@2.0.78-rc.0
+  - @akinon/next@2.0.78-rc.0
+  - @akinon/pz-checkout-gift-pack@2.0.78-rc.0
+  - @akinon/pz-masterpass-rest@2.0.78-rc.0
+  - @akinon/pz-one-click-checkout@2.0.78-rc.0
+  - @akinon/pz-basket-gift-pack@2.0.78-rc.0
+  - @akinon/pz-pay-on-delivery@2.0.78-rc.0
+  - @akinon/pz-credit-payment@2.0.78-rc.0
+  - @akinon/pz-click-collect@2.0.78-rc.0
+  - @akinon/pz-multi-basket@2.0.78-rc.0
+  - @akinon/pz-masterpass@2.0.78-rc.0
+  - @akinon/pz-gpay@2.0.78-rc.0
+  - @akinon/pz-b2b@2.0.78-rc.0
+  - @akinon/pz-bkm@2.0.78-rc.0
+  - @akinon/pz-otp@2.0.78-rc.0
+  - @akinon/pz-similar-products@2.0.78-rc.0
+  - @akinon/pz-virtual-try-on@2.0.78-rc.0
+  - @akinon/pz-theme@2.0.78-rc.0
+  - @akinon/pz-akifast@2.0.78-rc.0
+  - @akinon/pz-apple-pay@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-haso@2.0.78-rc.0
+  - @akinon/pz-hepsipay@2.0.78-rc.0
+  - @akinon/pz-saved-card@2.0.78-rc.0
+  - @akinon/pz-tamara-extension@2.0.78-rc.0
 
 ## 2.0.77
 

package/app-template/README.md

@@ -12,6 +12,30 @@ Run `cp .env.example .env && yarn` command at project root and all dependencies
 
 - `SITEMAP_S3_BUCKET_NAME`: S3 bucket name for XML sitemaps (e.g., "0fb534"). This is required for the sitemap route to function correctly.
 
+### Optional Environment Variables
+
+- `NEXT_PUBLIC_ENABLE_IMAGE_SEARCH`: Set to `true` to enable image search feature for all users. If not set or `false`, the feature will only be visible to users who have enabled it via localStorage.
+
+## Image Search Feature
+
+The image search functionality allows users to search for similar products by uploading images or cropping existing product images.
+
+### Feature Visibility Control
+
+The image search feature can be controlled in two ways:
+
+1. **Environment Variable (Global)**: Set `NEXT_PUBLIC_ENABLE_IMAGE_SEARCH=true` to enable for all users
+2. **localStorage (Individual Users)**: Users can enable it locally using browser developer tools
+
+````
+
+### Feature Locations
+
+When enabled, the image search feature appears in:
+
+- **Header Search**: Camera icon next to the search input
+- **Product Detail Page**: "View Similar Styles" button on product images
+
 ### Build
 
 To build the app, run the following command:
@@ -19,7 +43,7 @@ To build the app, run the following command:
 ```bash
 cd projectzeronext # Project root
 yarn build
-```
+````
 
 ### Develop
 

package/app-template/next.config.mjs

@@ -38,6 +38,9 @@ const nextConfig = {
         ]
       }
     ];
+  },
+  logging: {
+    browserToTerminal: 'error'
   }
 };
 
@@ -50,9 +53,12 @@ const withSerwist = withSerwistInit({
 const sentryConfig = {
   silent: true,
   dryRun: !process.env.SENTRY_DSN,
-  org: 'akinon'
+  org: 'akinon',
   // project: 'enter_your_project_name_here',
   // authToken: 'enter_your_auth_token_here'
+  sourcemaps: {
+    deleteSourcemapsAfterUpload: true
+  }
 };
 
 const enhancedConfig = withPzConfig(nextConfig);

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.78-beta.0",
+  "version": "2.0.78-rc.1",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.78-beta.0",
-    "@akinon/pz-akifast": "2.0.78-beta.0",
-    "@akinon/pz-apple-pay": "2.0.78-beta.0",
-    "@akinon/pz-b2b": "2.0.78-beta.0",
-    "@akinon/pz-basket-gift-pack": "2.0.78-beta.0",
-    "@akinon/pz-bkm": "2.0.78-beta.0",
-    "@akinon/pz-checkout-gift-pack": "2.0.78-beta.0",
-    "@akinon/pz-click-collect": "2.0.78-beta.0",
-    "@akinon/pz-credit-payment": "2.0.78-beta.0",
-    "@akinon/pz-cybersource-uc": "2.0.78-beta.0",
-    "@akinon/pz-flow-payment": "2.0.78-beta.0",
-    "@akinon/pz-google-pay": "2.0.78-beta.0",
-    "@akinon/pz-gpay": "2.0.78-beta.0",
-    "@akinon/pz-haso": "2.0.78-beta.0",
-    "@akinon/pz-hepsipay": "2.0.78-beta.0",
-    "@akinon/pz-masterpass": "2.0.78-beta.0",
-    "@akinon/pz-masterpass-rest": "2.0.78-beta.0",
-    "@akinon/pz-multi-basket": "2.0.78-beta.0",
-    "@akinon/pz-one-click-checkout": "2.0.78-beta.0",
-    "@akinon/pz-otp": "2.0.78-beta.0",
-    "@akinon/pz-pay-on-delivery": "2.0.78-beta.0",
-    "@akinon/pz-saved-card": "2.0.78-beta.0",
-    "@akinon/pz-similar-products": "2.0.78-beta.0",
-    "@akinon/pz-tabby-extension": "2.0.78-beta.0",
-    "@akinon/pz-tamara-extension": "2.0.78-beta.0",
-    "@akinon/pz-theme": "2.0.78-beta.0",
-    "@akinon/pz-virtual-try-on": "2.0.78-beta.0",
+    "@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",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -59,7 +59,7 @@
     "next": "16.2.6",
     "@serwist/next": "9.5.11",
     "next-auth": "5.0.0-beta.30",
-    "pino": "8.11.0",
+    "pino": "8.21.0",
     "serwist": "9.5.11",
     "postcss": "8.4.49",
     "react": "19.2.5",
@@ -67,14 +67,14 @@
     "react-google-recaptcha": "2.1.0",
     "react-hook-form": "7.71.2",
     "react-intersection-observer": "9.4.0",
-    "react-multi-carousel": "2.8.4",
-    "react-string-replace": "1.1.0",
-    "start-server-and-test": "2.0.3",
-    "tailwind-merge": "1.8.0",
+    "react-multi-carousel": "2.8.5",
+    "react-string-replace": "1.1.1",
+    "start-server-and-test": "2.0.8",
+    "tailwind-merge": "1.14.0",
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.78-beta.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.78-rc.1",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -89,25 +89,25 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "client-only": "0.0.1",
-    "clsx": "1.1.1",
+    "clsx": "1.2.1",
     "currency-symbol-map": "5.1.0",
     "eslint": "9.39.4",
     "eslint-config-next": "16.2.4",
     "eslint-config-prettier": "10.1.1",
     "husky": "8.0.0",
     "jest": "29.7.0",
-    "jest-css-modules-transform": "4.3.0",
+    "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "lint-staged": "13.1.0",
-    "prettier": "2.6.2",
+    "lint-staged": "13.3.0",
+    "prettier": "2.8.8",
     "react-number-format": "5.3.4",
-    "sass": "1.49.9",
+    "sass": "1.83.0",
     "semantic-release": "19.0.5",
     "server-only": "0.0.1",
-    "stylelint": "14.6.0",
+    "stylelint": "14.16.1",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-config-standard": "25.0.0",
-    "stylelint-scss": "4.2.0",
+    "stylelint-scss": "4.7.0",
     "stylelint-selector-bem-pattern": "2.1.1",
     "tailwindcss": "4.2.0",
     "ts-jest": "29.2.6",

package/app-template/src/app/api/client-env/route.ts

@@ -0,0 +1,5 @@
+export { GET } from '@akinon/next/api/client-env';
+
+// NEXT_PUBLIC_* values are read from the server runtime, not the build. Force
+// dynamic so Next never statically caches an (empty) build-time response.
+export const dynamic = 'force-dynamic';

package/app-template/src/app/global-error.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+
+export default function GlobalError({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useSentryUncaughtErrors(error);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}

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/index.ts

@@ -1 +1,3 @@
+export * from './use-contract';
+export * from './use-fav-button';
 export * from './use-add-product-to-basket';

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

@@ -14,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.*)'
   ]
 };
 

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.78-beta.0",
+  "version": "2.0.78-rc.1",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {