@akinon/next 1.125.0-rc.0 → 1.125.0

package/CHANGELOG.md

@@ -1,22 +1,10 @@
 # @akinon/next
 
-## 1.125.0-rc.0
+## 1.125.0
 
 ### Minor Changes
 
-- ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
-- b55acb76: 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
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
 - cd68a97a: ZERO-4126: Enhance error handling in appFetch and related data handlers to throw notFound on 404 and 422 errors
-- 9f8cd3bc: 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
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
-- 591e345e: ZERO-3855: Enhance credit card payment handling in checkout middlewares
-- 4de5303c: ZERO-2504: add cookie filter to api client request
-- 95b139dc: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
-- 3909d322: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
-- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
 
 ## 1.124.0
 

package/bin/pz-generate-routes.js

@@ -26,6 +26,7 @@ const generateRoutes = () => {
   const excludedDirs = ['api', 'pz-not-found'];
 
   const skipSegments = [
+    '[pz]',
     '[commerce]',
     '[locale]',
     '[currency]',

package/components/plugin-module.tsx

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

package/data/urls.ts

@@ -183,11 +183,7 @@ export const product = {
   breadcrumbUrl: (menuitemmodel: string) =>
     `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
   bundleProduct: (productPk: string, queryString: string) =>
-    `/bundle-product/${productPk}/?${queryString}`,
-  similarProducts: (params?: string) =>
-    `/similar-products${params ? `?${params}` : ''}`,
-  similarProductsList: (params?: string) =>
-    `/similar-product-list${params ? `?${params}` : ''}`
+    `/bundle-product/${productPk}/?${queryString}`
 };
 
 export const wishlist = {

package/hocs/server/with-segment-defaults.tsx

@@ -4,6 +4,12 @@ import { redirect } from 'next/navigation';
 import { ServerVariables } from '../../utils/server-variables';
 import { ROUTES } from 'routes';
 import logger from '../../utils/log';
+import {
+  decodePzValue,
+  getPzSegmentsConfig,
+  getBuiltInSegments,
+  isLegacyMode
+} from '../../utils/pz-segments';
 
 type SegmentType = 'root-layout' | 'layout' | 'page';
 
@@ -20,17 +26,31 @@ export const withSegmentDefaults =
   ) =>
   async (props: T) => {
     let componentProps = { ...props };
+    let localeValue: string;
+    let currencyValue: string;
+
+    if (isLegacyMode(settings)) {
+      localeValue = (props.params as any).locale;
+      currencyValue = (props.params as any).currency;
+    } else {
+      const pzConfig = getPzSegmentsConfig(settings);
+      const parsed = decodePzValue(props.params.pz, pzConfig);
+      const builtIn = getBuiltInSegments(parsed, settings);
+      localeValue = builtIn.locale;
+      currencyValue = builtIn.currency;
+    }
 
     if (options.segmentType === 'root-layout') {
       componentProps = (await addRootLayoutProps(
-        componentProps as RootLayoutProps
+        componentProps as RootLayoutProps,
+        localeValue
       )) as T;
 
       checkRedisVariables();
     }
 
-    ServerVariables.locale = props.params.locale;
-    ServerVariables.currency = props.params.currency;
+    ServerVariables.locale = localeValue;
+    ServerVariables.currency = currencyValue;
 
     return await (
       <>
@@ -39,12 +59,21 @@ export const withSegmentDefaults =
     );
   };
 
-const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
-  const params = componentProps.params;
-
-  if (
-    params.commerce !== encodeURIComponent(decodeURI(settings.commerceUrl)) ||
-    !settings.localization.locales.find((l) => l.value === params.locale)
+const addRootLayoutProps = async (
+  componentProps: RootLayoutProps,
+  localeValue: string
+) => {
+  if (isLegacyMode(settings)) {
+    const params = componentProps.params as any;
+    if (
+      params.commerce !==
+        encodeURIComponent(decodeURI(settings.commerceUrl)) ||
+      !settings.localization.locales.find((l) => l.value === localeValue)
+    ) {
+      return redirect(ROUTES.HOME);
+    }
+  } else if (
+    !settings.localization.locales.find((l) => l.value === localeValue)
   ) {
     return redirect(ROUTES.HOME);
   }
@@ -52,12 +81,12 @@ const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
   const { getTranslations } = settings.useOptimizedTranslations
     ? require('translations')
     : require('../../utils/server-translation');
-  const translations = await getTranslations(params.locale);
+  const translations = await getTranslations(localeValue);
 
   componentProps.translations = translations;
 
   const locale = settings.localization.locales.find(
-    (l) => l.value === params.locale
+    (l) => l.value === localeValue
   );
   const [isoCode] = locale.value.split('-');
 

package/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './use-message-listener';
 export * from './use-logger';
 export * from './use-logger-context';
 export * from './use-sentry-uncaught-errors';
+export * from './use-pz-params';

package/hooks/use-pz-params.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import settings from 'settings';
+import {
+  decodePzValue,
+  getPzSegmentsConfig,
+  getBuiltInSegments,
+  isLegacyMode
+} from '../utils/pz-segments';
+
+export function usePzParams(): {
+  locale: string;
+  currency: string;
+  [key: string]: string;
+} {
+  const params = useParams() as Record<string, string>;
+
+  if (isLegacyMode(settings)) {
+    return {
+      locale:
+        params.locale ?? settings.localization.defaultLocaleValue,
+      currency:
+        params.currency ?? settings.localization.defaultCurrencyCode
+    };
+  }
+
+  const pzValue = params.pz ?? '';
+  const config = getPzSegmentsConfig(settings);
+  const parsed = decodePzValue(pzValue, config);
+  const builtIn = getBuiltInSegments(parsed, settings);
+
+  return {
+    ...parsed,
+    ...builtIn
+  };
+}

package/localization/provider.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext } from 'react';
 import { getTranslateFn } from '../utils';
-import { useParams } from 'next/navigation';
+import { usePzParams } from '../hooks/use-pz-params';
 import { Currency, Locale } from '../types';
 import settings from 'settings';
 
@@ -34,10 +34,7 @@ export default function LocalizationProvider({
     localeUrlStrategy
   } = settings.localization;
 
-  const { locale, currency } = useParams() as {
-    locale: string;
-    currency: string;
-  };
+  const { locale, currency } = usePzParams();
 
   return (
     <LocalizationContext.Provider

package/middlewares/default.ts

@@ -18,6 +18,7 @@ import {
   withBfcacheHeaders
 } from '.';
 import { urlLocaleMatcherRegex } from '../utils';
+import { getPzSegmentsConfig, encodePzValue, isLegacyMode } from '../utils/pz-segments';
 import withCurrency from './currency';
 import withLocale from './locale';
 import logger from '../utils/log';
@@ -306,12 +307,76 @@ const withPzDefault =
                                         );
                                     }
 
-                                    url.basePath = `/${commerceUrl}`;
-                                    url.pathname = `/${
-                                      locale.length ? `${locale}/` : ''
-                                    }${currency}/${customRewriteUrlDiff}${
-                                      prettyUrl ?? pathnameWithoutLocale
-                                    }`.replace(/\/+/g, '/');
+                                    let ordersPrefix: string;
+
+                                    if (isLegacyMode(Settings)) {
+                                      url.basePath = `/${commerceUrl}`;
+                                      url.pathname =
+                                        `/${locale.length ? `${locale}/` : ''}${currency}/${customRewriteUrlDiff}${
+                                          prettyUrl ?? pathnameWithoutLocale
+                                        }`.replace(/\/+/g, '/');
+                                      ordersPrefix = `/${currency}/orders`;
+                                    } else {
+                                      const pzConfig =
+                                        getPzSegmentsConfig(Settings);
+                                      const fullUrlPath =
+                                        `${customRewriteUrlDiff}${
+                                          prettyUrl ?? pathnameWithoutLocale
+                                        }`.replace(/\/+/g, '/');
+                                      const fullUrl = `${req.nextUrl.origin}${fullUrlPath}`;
+                                      const resolvedLocale =
+                                        locale?.length > 0
+                                          ? locale
+                                          : Settings.localization
+                                              .defaultLocaleValue;
+                                      const resolveContext = {
+                                        req,
+                                        event,
+                                        url,
+                                        locale: resolvedLocale,
+                                        currency,
+                                        pathname: pathnameWithoutLocale
+                                      };
+                                      const customSegments = pzConfig.segments
+                                        .filter(
+                                          (seg) =>
+                                            seg.name !== 'locale' &&
+                                            seg.name !== 'currency' &&
+                                            seg.name !== 'url'
+                                        );
+                                      const segmentValues: Record<
+                                        string,
+                                        string
+                                      > = {
+                                        locale: resolvedLocale,
+                                        currency,
+                                        url: encodeURIComponent(fullUrl),
+                                        ...Object.fromEntries(
+                                          customSegments
+                                            .map((seg) => [
+                                              seg.name,
+                                              req.middlewareParams.rewrites[
+                                                seg.name
+                                              ] ??
+                                                (seg.resolve
+                                                  ? seg.resolve(resolveContext)
+                                                  : '')
+                                            ])
+                                        )
+                                      };
+
+                                      const pzValue = encodePzValue(
+                                        segmentValues,
+                                        pzConfig
+                                      );
+
+                                      url.pathname =
+                                        `/${pzValue}/${fullUrlPath}`.replace(
+                                          /\/+/g,
+                                          '/'
+                                        );
+                                      ordersPrefix = `/${pzValue}/orders`;
+                                    }
 
                                     if (
                                       Settings.usePrettyUrlRoute &&
@@ -388,7 +453,7 @@ const withPzDefault =
 
                                     if (
                                       !url.pathname.startsWith(
-                                        `/${currency}/orders`
+                                        ordersPrefix
                                       )
                                     ) {
                                       middlewareResult.cookies.set(

package/middlewares/index.ts

@@ -40,6 +40,7 @@ export interface PzNextRequest extends NextRequest {
       locale?: string;
       prettyUrl?: string;
       currency?: string;
+      [key: string]: string | undefined;
     };
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.125.0-rc.0",
+  "version": "1.125.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -35,7 +35,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.125.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.125.0",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/plugins.d.ts

@@ -37,16 +37,6 @@ declare module '@akinon/pz-cybersource-uc/src/redux/middleware' {
   export default middleware as any;
 }
 
-declare module '@akinon/pz-apple-pay' {}
-
-declare module '@akinon/pz-similar-products' {
-  export const SimilarProductsModal: any;
-  export const SimilarProductsFilterSidebar: any;
-  export const SimilarProductsResultsGrid: any;
-  export const SimilarProductsPlugin: any;
-  export const SimilarProductsButtonPlugin: any;
-}
-
 declare module '@akinon/pz-cybersource-uc/src/redux/reducer' {
   export default reducer as any;
 }

package/plugins.js

@@ -16,7 +16,6 @@ module.exports = [
   'pz-tabby-extension',
   'pz-apple-pay',
   'pz-tamara-extension',
-  'pz-similar-products',
   'pz-cybersource-uc',
   'pz-hepsipay',
   'pz-flow-payment',

package/redux/middlewares/checkout.ts

@@ -209,25 +209,15 @@ export const contextListMiddleware: Middleware = ({
             (ctx) => ctx.page_name === 'DeliveryOptionSelectionPage'
           )
         ) {
-          const isCreditCardPayment =
-            preOrder?.payment_option?.payment_type === 'credit_card' ||
-            preOrder?.payment_option?.payment_type === 'masterpass';
-
           if (context.page_context.card_type) {
             dispatch(setCardType(context.page_context.card_type));
-          } else if (isCreditCardPayment) {
-            dispatch(setCardType(null));
           }
 
           if (
             context.page_context.installments &&
             preOrder?.payment_option?.payment_type !== 'masterpass_rest'
           ) {
-            if (!isCreditCardPayment || context.page_context.card_type) {
-              dispatch(
-                setInstallmentOptions(context.page_context.installments)
-              );
-            }
+            dispatch(setInstallmentOptions(context.page_context.installments));
           }
         }
 

package/redux/middlewares/pre-order/installment-option.ts

@@ -14,17 +14,9 @@ export const installmentOptionMiddleware: Middleware = ({
       return result;
     }
 
-    const { installmentOptions, cardType } = getState().checkout;
+    const { installmentOptions } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
-    const isCreditCardPayment =
-      preOrder?.payment_option?.payment_type === 'credit_card' ||
-      preOrder?.payment_option?.payment_type === 'masterpass';
-
-    if (isCreditCardPayment && !cardType) {
-      return result;
-    }
-
     if (
       !preOrder?.installment &&
       preOrder?.payment_option?.payment_type !== 'saved_card' &&

package/types/index.ts

@@ -1,5 +1,7 @@
 import { LocaleUrlStrategy } from '../localization';
 import { PzNextRequest } from '../middlewares';
+import { NextFetchEvent } from 'next/server';
+import { NextURL } from 'next/dist/server/web/next-url';
 import { Control, FieldError } from 'react-hook-form';
 import { ReactNode } from 'react';
 import { UsePaginationType } from '../hooks/use-pagination';
@@ -83,12 +85,6 @@ export interface Settings {
   };
   usePrettyUrlRoute?: boolean;
   commerceUrl: string;
-  /**
-   * This option allows you to track Sentry events on the client side, in addition to server and edge environments.
-   *
-   * It overrides process.env.NEXT_PUBLIC_SENTRY_DSN and process.env.SENTRY_DSN.
-   */
-  sentryDsn?: string;
   redis: {
     defaultExpirationTime: number;
   };
@@ -216,6 +212,11 @@ export interface Settings {
    */
   resetBasketOnCurrencyChange?: boolean;
   frontendIds?: Record<string, number>;
+  usePzSegment?: boolean;
+  pzSegments?: {
+    separator?: string;
+    segments: PzSegmentDefinition[];
+  };
 }
 
 export interface CacheOptions {
@@ -255,8 +256,34 @@ export type ImageOptions = CDNOptions & {
 
 export type Translations = { [key: string]: object };
 
+export interface PzSegmentResolveContext {
+  req: PzNextRequest;
+  event: NextFetchEvent;
+  url: NextURL;
+  locale: string;
+  currency: string;
+  pathname: string;
+}
+
+export interface PzSegmentDefinition {
+  name: string;
+  resolve?: (context: PzSegmentResolveContext) => string;
+}
+
+export interface PzSegmentsConfig {
+  separator: string;
+  segments: PzSegmentDefinition[];
+}
+
 export interface PageProps<T = any> {
-  params: T & { locale: string; currency: string };
+  params: T & {
+    pz?: string;
+    commerce?: string;
+    locale?: string;
+    currency?: string;
+    url?: string;
+    [key: string]: any;
+  };
   searchParams: URLSearchParams;
 }
 
@@ -264,13 +291,7 @@ export interface LayoutProps<T = any> extends PageProps<T> {
   children: React.ReactNode;
 }
 
-export interface RootLayoutProps<
-  T = {
-    commerce: string;
-    locale: string;
-    currency: string;
-  }
-> extends LayoutProps<T> {
+export interface RootLayoutProps<T = any> extends LayoutProps<T> {
   translations: Translations;
   locale: Locale & {
     isoCode: string;

package/utils/app-fetch.ts

@@ -61,15 +61,13 @@ const appFetch = async <T>({
     status = req.status;
     logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
-    if (req.ok) {
-      if (responseType === FetchResponseType.JSON) {
-        response = (await req.json()) as T;
-      } else {
-        response = (await req.text()) as unknown as T;
-      }
-
-      logger.trace(`FETCH RESPONSE`, { url, response, ip });
+    if (responseType === FetchResponseType.JSON) {
+      response = (await req.json()) as T;
+    } else {
+      response = (await req.text()) as unknown as T;
     }
+
+    logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
     const logType = status === 500 ? 'fatal' : 'error';
 

package/utils/index.ts

@@ -7,6 +7,7 @@ export * from './get-currency';
 export * from './menu-generator';
 export * from './generate-commerce-search-params';
 export * from './get-currency-label';
+export * from './pz-segments';
 export * from './get-checkout-path';
 
 export function getCookie(name: string) {

package/utils/pz-segments.ts

@@ -0,0 +1,92 @@
+import type { PzSegmentDefinition, PzSegmentsConfig } from '../types';
+
+export function isLegacyMode(settings: any): boolean {
+  return !settings.usePzSegment;
+}
+
+const DEFAULT_SEPARATOR = '--';
+
+const DEFAULT_SEGMENTS: PzSegmentDefinition[] = [
+  { name: 'locale' },
+  { name: 'currency' },
+  { name: 'url' }
+];
+
+export function getPzSegmentsConfig(settings: any): PzSegmentsConfig {
+  if (settings.pzSegments) {
+    const customSegments = (settings.pzSegments.segments ?? []).filter(
+      (seg: PzSegmentDefinition) =>
+        !DEFAULT_SEGMENTS.some((d) => d.name === seg.name)
+    );
+
+    return {
+      separator: settings.pzSegments.separator ?? DEFAULT_SEPARATOR,
+      segments: [...DEFAULT_SEGMENTS, ...customSegments]
+    };
+  }
+
+  return {
+    separator: DEFAULT_SEPARATOR,
+    segments: DEFAULT_SEGMENTS
+  };
+}
+
+export function encodePzValue(
+  values: Record<string, string>,
+  config: PzSegmentsConfig
+): string {
+  return config.segments
+    .map((seg) => values[seg.name] ?? '')
+    .join(config.separator);
+}
+
+export function decodePzValue(
+  pzValue: string,
+  config: PzSegmentsConfig
+): Record<string, string> {
+  const parts = pzValue.split(config.separator);
+  const result: Record<string, string> = {};
+
+  config.segments.forEach((seg, index) => {
+    result[seg.name] = parts[index] ?? '';
+  });
+
+  return result;
+}
+
+export function getBuiltInSegments(
+  parsed: Record<string, string>,
+  settings: any
+): { locale: string; currency: string; url: string } {
+  const { defaultLocaleValue, defaultCurrencyCode } = settings.localization;
+
+  return {
+    locale: parsed.locale || defaultLocaleValue,
+    currency: parsed.currency || defaultCurrencyCode,
+    url: parsed.url ? decodeURIComponent(parsed.url) : ''
+  };
+}
+
+export function parsePzParams(
+  params: { pz?: string; locale?: string; currency?: string; url?: string },
+  settings: any
+): { locale: string; currency: string; url: string; [key: string]: string } {
+  if (isLegacyMode(settings)) {
+    return {
+      locale:
+        params.locale ?? settings.localization.defaultLocaleValue,
+      currency:
+        params.currency ?? settings.localization.defaultCurrencyCode,
+      url: params.url ? decodeURIComponent(params.url) : ''
+    };
+  }
+
+  const config = getPzSegmentsConfig(settings);
+  const parsed = decodePzValue(params.pz ?? '', config);
+  const builtIn = getBuiltInSegments(parsed, settings);
+
+  return {
+    ...parsed,
+    ...builtIn
+  };
+}