@akinon/next 2.0.38 → 2.0.39-rc.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @akinon/next
 
+## 2.0.39-rc.0
+
+### Patch Changes
+
+- 0cf9ea23: BRDG-16491: Prevent redirect when iframe payment is active
+- 324f97d5: ZERO-4219: replace masterpass-rest-complete with masterpass-rest-callback
+- 51ea0688: ZERO-4377: Fix checkout card type state being cleared after valid bin number responses.
+- ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
+- 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
+- 760258c1: ZERO-4160: Enhance oauth-login middleware to handle fetch errors and improve response handling
+- 143be2b9d: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
+- 7889b08f: ZERO-4276: Enhance route generation by adding .env loading and custom skip segments support
+- 9f8cd3bc5: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
+- bfafa3f4: ZERO-4160: Refactor oauth-login middleware to use fetchCommerce for API calls and improve cookie handling
+- 57d7eb30: ZERO-4276: Refactor route generation logic by removing environment loading and simplifying skip segments handling
+- d99a6a7d5: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
+- 9db81a71: ZERO-4365: Remove brand `@theme/*` alias imports from library packages
+- 591e345e1: ZERO-3855: Enhance credit card payment handling in checkout middlewares
+- 4de5303c5: ZERO-2504: add cookie filter to api client request
+- 95b139dc1: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
+- 1d00f2d0: BRDG-16664: Set secure flag for CSRF token cookies in useCaptcha and default middleware
+- 4ac7b2a1: ZERO-4219: fix masterpass-rest callback route format and double-encoded error cookie
+- e9598c71: ZERO-4622: Images remotePatterns for improved readability
+- 4998a963: ZERO-4168: Add server-side payload optimization
+- 804d2bd6: ZERO-4536: Add akinon.net domain to CSP frame-ancestors directive
+- 3909d3224: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
+- 6a3d8a63: ZERO-4541: Fix URL query string formatting in getOrders and getOldOrders functions
+- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
+
 ## 2.0.38
 
 ## 2.0.37

package/api/client-env.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * Runtime access to public (`NEXT_PUBLIC_*`) environment variables.
+ *
+ * Next.js inlines `process.env.NEXT_PUBLIC_*` into the bundle at *build* time.
+ * On hosting platforms where the build has no access to the environment (e.g.
+ * Akinon Cloud Commerce), those references resolve to `undefined` in the
+ * browser. This route reads the variables from the *server runtime* instead —
+ * `process.env[name]` is a computed lookup, so webpack never statically inlines
+ * it — and hands them back to the client.
+ *
+ * Only `NEXT_PUBLIC_`-prefixed names are resolvable. These values are public by
+ * design (they are shipped to the browser anyway), so nothing secret can leak
+ * through here; the prefix check is what keeps server-only secrets unreadable.
+ *
+ * Query: one or more `env` params, repeated (`?env=A&env=B`) and/or comma
+ * separated (`?env=A,B`). Names must include the full prefix. Responds with a
+ * `{ [name]: value | null }` map (`null` when the variable is not set).
+ *
+ * The consuming route file must set `export const dynamic = 'force-dynamic'` so
+ * Next never statically caches a build-time (empty) response.
+ *
+ * @see `@akinon/next/hooks` — `useClientEnv` / `getClientEnv` read from here.
+ */
+
+const CLIENT_ENV_NAME = /^NEXT_PUBLIC_[A-Za-z0-9_]+$/;
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    const names = Array.from(
+      new Set(
+        searchParams
+          .getAll('env')
+          .flatMap((value) => value.split(','))
+          .map((value) => value.trim())
+          .filter(Boolean)
+      )
+    );
+
+    if (names.length === 0) {
+      return NextResponse.json(
+        { message: 'At least one `env` query parameter is required.' },
+        { status: 400 }
+      );
+    }
+
+    const invalid = names.filter((name) => !CLIENT_ENV_NAME.test(name));
+
+    if (invalid.length > 0) {
+      return NextResponse.json(
+        {
+          message:
+            'Only NEXT_PUBLIC_-prefixed environment variables can be read.',
+          invalid
+        },
+        { status: 400 }
+      );
+    }
+
+    const values = names.reduce<Record<string, string | null>>((acc, name) => {
+      acc[name] = process.env[name] ?? null;
+      return acc;
+    }, {});
+
+    return NextResponse.json(values, {
+      headers: { 'Cache-Control': 'no-store' }
+    });
+  } catch (error) {
+    console.error('Error in client-env API:', error);
+    return NextResponse.json(
+      { message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/bin/pz-generate-routes.js

@@ -6,6 +6,7 @@ const findBaseDir = require('../utils/find-base-dir');
 
 const generateRoutes = () => {
   const baseDir = findBaseDir();
+
   const srcDir = path.join(baseDir, 'src');
   const appDir = path.join(srcDir, 'app');
 
@@ -34,8 +35,10 @@ const generateRoutes = () => {
     '[segment]',
     '[url]',
     '[theme]',
-    '[member_type]'
+    '[member_type]',
+    '[clienttype]'
   ];
+
   const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
 
   const walkDirectory = (dir, basePath = '') => {

package/components/plugin-module.tsx

@@ -116,7 +116,6 @@ const PluginComponents = new Map([
     ]
   ],
   [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
-  [Plugin.SavedCard, [Component.SavedCard]],
   [Plugin.FlowPayment, [Component.FlowPayment]],
   [
     Plugin.VirtualTryOn,

package/data/client/checkout.ts

@@ -738,7 +738,6 @@ export const checkoutApi = api.injectEndpoints({
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
-        dispatch(setCardType(arg));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }

package/data/server/category.ts

@@ -8,6 +8,8 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { headers as nHeaders } from 'next/headers';
 import { ServerVariables } from '../../utils/server-variables';
+import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
+import settings from 'settings';
 
 function getCategoryDataHandler(
   pk: number,
@@ -81,7 +83,7 @@ function getCategoryDataHandler(
   };
 }
 
-export const getCategoryData = ({
+export const getCategoryData = async ({
   pk,
   searchParams,
   headers,
@@ -105,6 +107,16 @@ export const getCategoryData = ({
       compressed: true
     }
   );
+
+  if (settings.payloadOptimization?.enabled && result?.data) {
+    try {
+      return { ...result, data: optimizeCategoryResponse(result.data, settings.payloadOptimization) };
+    } catch (e) {
+      logger.error('Payload optimization failed for category', { pk, error: (e as Error).message });
+    }
+  }
+
+  return result;
 };
 
 function getCategoryBySlugDataHandler(

package/data/server/list.ts

@@ -7,6 +7,8 @@ import appFetch, { FetchResponseType } from '../../utils/app-fetch';
 import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { ServerVariables } from '../../utils/server-variables';
+import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
+import settings from 'settings';
 
 const getListDataHandler = (
   locale,
@@ -78,4 +80,14 @@ export const getListData = async ({
       compressed: true
     }
   );
+
+  if (settings.payloadOptimization?.enabled && result) {
+    try {
+      return optimizeCategoryResponse(result, settings.payloadOptimization);
+    } catch (e) {
+      logger.error('Payload optimization failed for list', { error: (e as Error).message });
+    }
+  }
+
+  return result;
 };

package/data/server/product.ts

@@ -5,6 +5,8 @@ import appFetch from '../../utils/app-fetch';
 import { normalizeSearchParams } from '../../utils/normalize-search-params';
 import { ServerVariables } from '../../utils/server-variables';
 import logger from '../../utils/log';
+import { optimizeProductResponse } from '../../utils/payload-optimizer';
+import settings from 'settings';
 
 type GetProduct = {
   pk: number | string;
@@ -166,5 +168,13 @@ export const getProductData = async ({
     throw error;
   }
 
+  if (settings.payloadOptimization?.enabled && result?.data) {
+    try {
+      return { ...result, data: optimizeProductResponse(result.data, settings.payloadOptimization) };
+    } catch (e) {
+      logger.error('Payload optimization failed for product', { pk, error: (e as Error).message });
+    }
+  }
+
   return result;
 };

package/data/server/special-page.ts

@@ -5,6 +5,9 @@ import { generateCommerceSearchParams } from '../../utils';
 import { normalizeSearchParams } from '../../utils/normalize-search-params';
 import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
+import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
+import logger from '../../utils/log';
+import settings from 'settings';
 
 const getSpecialPageDataHandler = (
   pk: number,
@@ -57,4 +60,14 @@ export const getSpecialPageData = async ({
       compressed: true
     }
   );
+
+  if (settings.payloadOptimization?.enabled && result) {
+    try {
+      return optimizeCategoryResponse(result, settings.payloadOptimization);
+    } catch (e) {
+      logger.error('Payload optimization failed for special-page', { pk, error: (e as Error).message });
+    }
+  }
+
+  return result;
 };

package/data/server/widget.ts

@@ -4,6 +4,9 @@ import { CacheOptions, WidgetResultType, WidgetSchemaType } from '../../types';
 import appFetch from '../../utils/app-fetch';
 import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
+import { optimizeWidgetResponse } from '../../utils/payload-optimizer';
+import logger from '../../utils/log';
+import settings from 'settings';
 
 const getWidgetDataHandler =
   (
@@ -53,7 +56,7 @@ export const getWidgetData = async <T>({
   cacheOptions?: CacheOptions;
   headers?: Record<string, string>;
 }): Promise<WidgetResultType<T>> => {
-  return Cache.wrap(
+  const result = await Cache.wrap(
     CacheKey.Widget(slug),
     locale,
     getWidgetDataHandler(slug, locale, currency, headers),
@@ -62,6 +65,16 @@ export const getWidgetData = async <T>({
       ...cacheOptions
     }
   );
+
+  if (settings.payloadOptimization?.enabled && result) {
+    try {
+      return optimizeWidgetResponse(result, settings.payloadOptimization) as WidgetResultType<T>;
+    } catch (e) {
+      logger.error('Payload optimization failed for widget', { slug, error: (e as Error).message });
+    }
+  }
+
+  return result as WidgetResultType<T>;
 };
 
 const getCollectionWidgetDataHandler =

package/data/urls.ts

@@ -40,10 +40,11 @@ export const account = {
       shipping_option_slug
         ? `&shipping_option_slug${shipping_option_operator}${shipping_option_slug}`
         : ''
-    }${currency ? `&currency=${currency}` : ''}
-    ${filterType && filterValue ? `&${filterType}=${filterValue}` : ''}`,
+    }${currency ? `&currency=${currency}` : ''}${
+      filterType && filterValue ? `&${filterType}=${filterValue}` : ''
+    }`,
   getOldOrders: ({ page, limit }: { page?: number; limit?: number }) =>
-    `/users/old-orders/?page=${page || 1}&limit=${limit || 12}}`,
+    `/users/old-orders/?page=${page || 1}&limit=${limit || 12}`,
   getQuotations: (page?: number, status?: string, limit?: number) =>
     `/b2b/my-quotations/?page=${page || 1}` +
     (status ? `&status=${status}` : '') +
@@ -183,7 +184,11 @@ export const product = {
   breadcrumbUrl: (menuitemmodel: string) =>
     `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
   bundleProduct: (productPk: string, queryString: string) =>
-    `/bundle-product/${productPk}/?${queryString}`
+    `/bundle-product/${productPk}/?${queryString}`,
+  similarProducts: (params?: string) =>
+    `/similar-products${params ? `?${params}` : ''}`,
+  similarProductsList: (params?: string) =>
+    `/similar-product-list${params ? `?${params}` : ''}`
 };
 
 export const wishlist = {

package/hooks/index.ts

@@ -15,3 +15,4 @@ export * from './use-logger-context';
 export * from './use-sentry-uncaught-errors';
 export * from './use-pz-params';
 export * from './use-toast';
+export * from './use-client-env';

package/hooks/use-captcha.tsx

@@ -39,7 +39,7 @@ export const useCaptcha = () => {
   };
 
   if (csrfToken) {
-    setCookie('csrftoken', csrfToken);
+    setCookie('csrftoken', csrfToken, { secure: true });
   }
 
   const onCaptchaChange = useCallback(async (response) => {

package/hooks/use-client-env.ts

@@ -0,0 +1,265 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Runtime access to public (`NEXT_PUBLIC_*`) environment variables from Client
+ * Components.
+ *
+ * `process.env.NEXT_PUBLIC_*` is inlined at *build* time, so on platforms where
+ * the build has no environment (e.g. Akinon Cloud Commerce) it resolves to
+ * `undefined` in the browser. These helpers read the value from the server
+ * runtime through the `/api/client-env` route handler instead
+ * (`@akinon/next/api/client-env`).
+ *
+ * Always pass the full variable name, including the `NEXT_PUBLIC_` prefix:
+ *
+ * ```tsx
+ * // inside a Client Component
+ * const { value, isLoading } = useClientEnv('NEXT_PUBLIC_MAP_API_KEY');
+ *
+ * // imperative (event handlers, third-party init, ...)
+ * const key = await getClientEnv('NEXT_PUBLIC_MAP_API_KEY');
+ * ```
+ *
+ * Server Components do not need this — read the value with computed access
+ * (`process.env['NEXT_PUBLIC_MAP_API_KEY']`) so it is not build-time inlined.
+ */
+
+const ENDPOINT = '/api/client-env';
+
+// Shared across every caller so each variable is fetched at most once per page
+// load, no matter how many components ask for it.
+const cache = new Map<string, string | null>();
+const inflight = new Map<string, Promise<string | null>>();
+
+function request(names: string[]): void {
+  const pending = names.filter(
+    (name) => !cache.has(name) && !inflight.has(name)
+  );
+
+  if (pending.length === 0) return;
+
+  const query = pending
+    .map((name) => `env=${encodeURIComponent(name)}`)
+    .join('&');
+
+  const response = fetch(`${ENDPOINT}?${query}`, {
+    headers: { Accept: 'application/json' }
+  })
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(`Failed to load client env (status ${res.status}).`);
+      }
+      return res.json() as Promise<Record<string, string | null>>;
+    })
+    .then((data) => {
+      pending.forEach((name) => cache.set(name, data?.[name] ?? null));
+    });
+
+  // One in-flight entry per name so concurrent callers dedupe. On failure the
+  // entry is cleared (not cached) so a later render can retry.
+  pending.forEach((name) => {
+    inflight.set(
+      name,
+      response
+        .then(() => cache.get(name) ?? null)
+        .finally(() => inflight.delete(name))
+    );
+  });
+}
+
+function resolve(name: string): Promise<string | null> {
+  if (cache.has(name)) return Promise.resolve(cache.get(name) ?? null);
+  return inflight.get(name) ?? Promise.resolve(null);
+}
+
+/**
+ * Read a single public (`NEXT_PUBLIC_*`) environment variable at runtime,
+ * outside React (event handlers, third-party SDK init, …). Cached and
+ * deduplicated across callers.
+ *
+ * @param name - Full variable name, including the `NEXT_PUBLIC_` prefix.
+ * @returns The runtime value, or `null` when the variable is unset. Rejects if
+ * the request fails, so wrap direct calls in `try`/`catch`. A failed request is
+ * not cached — a later call retries.
+ *
+ * @example
+ * ```tsx
+ * import { getClientEnv } from '@akinon/next/hooks'
+ *
+ * const handleShare = async () => {
+ *   const baseUrl = await getClientEnv('NEXT_PUBLIC_URL')
+ *   navigator.clipboard.writeText(`${baseUrl}/product/123`)
+ * }
+ * ```
+ */
+export async function getClientEnv(name: string): Promise<string | null> {
+  request([name]);
+  return resolve(name);
+}
+
+/**
+ * Read several public (`NEXT_PUBLIC_*`) environment variables at runtime in a
+ * single request, outside React.
+ *
+ * @param names - Full variable names, each including the `NEXT_PUBLIC_` prefix.
+ * @returns A `{ [name]: value | null }` map. Rejects if the request fails.
+ *
+ * @example
+ * ```ts
+ * import { getClientEnvs } from '@akinon/next/hooks'
+ *
+ * const env = await getClientEnvs(['NEXT_PUBLIC_GTM_KEY', 'NEXT_PUBLIC_URL'])
+ * // env['NEXT_PUBLIC_URL']
+ * ```
+ */
+export async function getClientEnvs(
+  names: string[]
+): Promise<Record<string, string | null>> {
+  request(names);
+  const values = await Promise.all(names.map((name) => resolve(name)));
+  return names.reduce<Record<string, string | null>>((acc, name, index) => {
+    acc[name] = values[index];
+    return acc;
+  }, {});
+}
+
+/**
+ * Read a single public (`NEXT_PUBLIC_*`) environment variable at runtime from a
+ * Client Component.
+ *
+ * @param name - Full variable name, including the `NEXT_PUBLIC_` prefix.
+ * @returns `{ value, isLoading, error }`. `value` is `null` while loading, when
+ * the variable is unset, or on failure.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import { useClientEnv } from '@akinon/next/hooks'
+ *
+ * export const StoreMap = () => {
+ *   const { value: mapApiKey, isLoading } = useClientEnv('NEXT_PUBLIC_MAP_API_KEY')
+ *
+ *   if (isLoading) return <Spinner />
+ *   if (!mapApiKey) return null
+ *
+ *   return <GoogleMap apiKey={mapApiKey} />
+ * }
+ * ```
+ */
+export function useClientEnv(name: string) {
+  const [value, setValue] = useState<string | null>(
+    () => cache.get(name) ?? null
+  );
+  const [isLoading, setIsLoading] = useState(() => !cache.has(name));
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    if (cache.has(name)) {
+      setValue(cache.get(name) ?? null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    getClientEnv(name)
+      .then((resolved) => {
+        if (!active) return;
+        setValue(resolved);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (!active) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [name]);
+
+  return { value, isLoading, error };
+}
+
+/**
+ * Read several public (`NEXT_PUBLIC_*`) environment variables at runtime in a
+ * single request from a Client Component.
+ *
+ * @param names - Full variable names, each including the `NEXT_PUBLIC_` prefix.
+ * @returns `{ values, isLoading, error }` where `values` is a
+ * `{ [name]: value | null }` map.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import { useClientEnvs } from '@akinon/next/hooks'
+ *
+ * const { values, isLoading } = useClientEnvs([
+ *   'NEXT_PUBLIC_GTM_KEY',
+ *   'NEXT_PUBLIC_URL'
+ * ])
+ *
+ * const gtmKey = values['NEXT_PUBLIC_GTM_KEY']
+ * ```
+ */
+export function useClientEnvs(names: string[]) {
+  // Stable serialization so the effect re-runs only when the set changes, not
+  // on every render (a new array identity would otherwise loop it forever).
+  const key = names.join(',');
+
+  const [values, setValues] = useState<Record<string, string | null>>(() => {
+    const initial: Record<string, string | null> = {};
+    names.forEach((name) => {
+      if (cache.has(name)) initial[name] = cache.get(name) ?? null;
+    });
+    return initial;
+  });
+  const [isLoading, setIsLoading] = useState(
+    () => !names.every((name) => cache.has(name))
+  );
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    const list = key ? key.split(',') : [];
+
+    if (list.every((name) => cache.has(name))) {
+      const resolved: Record<string, string | null> = {};
+      list.forEach((name) => (resolved[name] = cache.get(name) ?? null));
+      setValues(resolved);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    getClientEnvs(list)
+      .then((resolved) => {
+        if (!active) return;
+        setValues(resolved);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (!active) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+    // `key` is the stable serialization of `names`.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  return { values, isLoading, error };
+}