@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

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';
@@ -203,17 +205,33 @@ export interface Settings {
   useOptimizedTranslations?: boolean;
   plugins?: Record<string, Record<string, any>>;
   includedProxyHeaders?: string[];
+  commerceRedirectionIgnoreList?: string[];
   /**
    * By default, the currency will be reset when the currency is changed.
    * If you want to keep the basket when the currency is changed, you can set this option to `false`.
    */
   resetBasketOnCurrencyChange?: boolean;
+  frontendIds?: Record<string, number>;
+  usePzSegment?: boolean;
+  pzSegments?: {
+    separator?: string;
+    segments: PzSegmentDefinition[];
+  };
 }
 
 export interface CacheOptions {
   cache?: boolean;
   expire?: number;
   useProxy?: boolean;
+  compressed?: boolean;
+}
+
+export interface SetCookieOptions {
+  expires?: number; // days
+  path?: string;
+  domain?: string;
+  secure?: boolean;
+  sameSite?: 'strict' | 'lax' | 'none';
 }
 
 export interface ClientRequestOptions {
@@ -238,22 +256,69 @@ 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[];
+}
+
+// Next.js 16 async page/layout props (for exported page components and generateMetadata)
 export interface PageProps<T = any> {
-  params: Promise<T & { locale: string; currency: string }>;
-  searchParams: Promise<URLSearchParams>;
+  params: Promise<T & {
+    pz?: string;
+    commerce?: string;
+    locale?: string;
+    currency?: string;
+    url?: string;
+    [key: string]: any;
+  }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {
   children: React.ReactNode;
 }
 
-export interface RootLayoutProps<
+export interface RootLayoutProps<T = any> extends LayoutProps<T> {
+  translations: Translations;
+  locale: Locale & {
+    isoCode: string;
+  };
+}
+
+// Search params type compatible with both Next.js resolved searchParams and URLSearchParams
+export type SearchParams = Record<string, string | string[] | undefined> | URLSearchParams;
+
+// Resolved (sync) versions for inner components after withSegmentDefaults resolves props
+export interface ResolvedPageProps<T = any> {
+  params: T & { locale: string; currency: string };
+  searchParams: SearchParams;
+}
+
+export interface ResolvedLayoutProps<T = any> extends ResolvedPageProps<T> {
+  children: React.ReactNode;
+}
+
+export interface ResolvedRootLayoutProps<
   T = {
     commerce: string;
     locale: string;
     currency: string;
   }
-> extends LayoutProps<T> {
+> extends ResolvedLayoutProps<T> {
   translations: Translations;
   locale: Locale & {
     isoCode: string;
@@ -275,10 +340,19 @@ export interface IconProps extends React.ComponentPropsWithRef<'i'> {
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
-export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+export interface FileInputProps extends React.HTMLProps<HTMLInputElement> {
+  fileClassName?: string;
+  fileNameWrapperClassName?: string;
+  fileInputClassName?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClassName?: string;
+}
 
 export interface PriceProps {
   currencyCode?: string;
@@ -299,15 +373,19 @@ export interface InputProps extends React.HTMLProps<HTMLInputElement> {
 
 export interface AccordionProps {
   isCollapse?: boolean;
+  collapseClassName?: string;
   title?: string;
   subTitle?: string;
   icons?: string[];
   iconSize?: number;
   iconColor?: string;
   children?: ReactNode;
+  headerClassName?: string;
   className?: string;
   titleClassName?: string;
+  subTitleClassName?: string;
   dataTestId?: string;
+  contentClassName?: string;
 }
 
 export interface PluginModuleComponentProps {
@@ -332,3 +410,20 @@ export interface PaginationProps {
   direction?: 'next' | 'prev';
   isLoading?: boolean;
 }
+
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  headerWrapperClassName?: string;
+  titleClassName?: string;
+  closeButtonClassName?: string;
+  iconName?: string;
+  iconSize?: number;
+  iconClassName?: string;
+}

package/types/next-auth.d.ts

@@ -1,8 +1,8 @@
-import NextAuth from 'next-auth';
+import 'next-auth';
 
 declare module 'next-auth' {
   interface User {
-    id?: number;
+    id?: string;
     pk: number;
     firstName: string;
     lastName: string;

package/types/widget.ts

@@ -0,0 +1,80 @@
+export type WidgetStyle = {
+  [breakpoint: string]: Record<string, string>;
+};
+
+export enum WidgetDataSourceType {
+  COLLECTION = 'collection',
+  API = 'api',
+  STATIC = 'static'
+}
+
+export interface WidgetDataSource {
+  type: WidgetDataSourceType;
+  id: string;
+  widgetSlug?: string;
+  details: {
+    collection?: {
+      pk: number;
+      productLimit: number;
+    };
+    api?: {
+      url: string;
+      method: string;
+      headers: Record<string, string>;
+      body: Record<string, string>;
+    };
+    static?: {
+      name: string;
+      data: Record<string, any>;
+    };
+  };
+}
+
+export type ImageSrc = {
+  [key: string]: {
+    src: string;
+    dimensions: { width: number; height: number };
+  };
+};
+
+export type WidgetComponentData = {
+  id: string;
+  widgetSlug: string;
+  type: string;
+  tag: string;
+  style: WidgetStyle;
+  value: {
+    text?: string;
+    src?: string;
+    alt?: string;
+    title?: string;
+    url?: string;
+    type?: string;
+    width?: string;
+    height?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    [key: string]: any;
+  };
+  parentId: string | null;
+  iteratingNode: string;
+  iteratorValue: string;
+  iteratingValue: string;
+  selectedDataSourceId: string;
+  dataSources: WidgetDataSource[];
+  imageSrc?: ImageSrc;
+  href?: string;
+  target?: string;
+  slider?: {
+    items?: number;
+    slidesToSlide?: number;
+    autoPlay?: boolean;
+    autoPlaySpeed?: number;
+    infinite?: boolean;
+    showDots?: boolean;
+    arrows?: boolean;
+    itemsToShow?: number;
+  };
+};

package/utils/app-fetch.ts

@@ -2,6 +2,7 @@ import Settings from 'settings';
 import logger from '../utils/log';
 import { headers, cookies } from 'next/headers';
 import { ServerVariables } from './server-variables';
+import { notFound } from 'next/navigation';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -43,12 +44,12 @@ const appFetch = async <T>({
     const requestURL = `${decodeURIComponent(commerceUrl)}${url}`;
 
     init.headers = {
+      cookie: nextCookies.toString(),
       ...(init.headers ?? {}),
       ...(ServerVariables.globalHeaders ?? {}),
       'Accept-Language': currentLocale.apiValue,
       'x-currency': currency,
-      'x-forwarded-for': ip,
-      cookie: nextCookies.toString()
+      'x-forwarded-for': ip
     };
 
     init.next = {
@@ -75,6 +76,10 @@ const appFetch = async <T>({
     }
   }
 
+  if (status === 422) {
+    notFound();
+  }
+
   return response;
 };
 

package/utils/generate-commerce-search-params.ts

@@ -1,13 +1,14 @@
+import { SearchParams } from '../types';
 import logger from './log';
 
 export const generateCommerceSearchParams = (
-  searchParams?: URLSearchParams
+  searchParams?: SearchParams
 ) => {
   if (!searchParams) {
     return null;
   }
 
-  const urlSerchParams = new URLSearchParams(searchParams);
+  const urlSerchParams = new URLSearchParams(searchParams as any);
 
   Object.entries(searchParams).forEach(([key, value]) => {
     if (typeof value === 'object') {

package/utils/get-checkout-path.ts

@@ -0,0 +1,3 @@
+export const getCheckoutPath = (isPostCheckout: boolean): string => {
+  return isPostCheckout ? '/orders/post-checkout/' : '/orders/checkout/';
+};

package/utils/get-root-hostname.ts

@@ -0,0 +1,28 @@
+import Settings from 'settings';
+
+export default function getRootHostname(
+  url: string | undefined
+): string | null {
+  if (!url) return null;
+
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname;
+    const parts = hostname.split('.');
+
+    const firstPart = parts[0];
+
+    const isLocale = Settings.localization.locales.some(
+      (locale) => locale.value === firstPart
+    );
+
+    if (isLocale) {
+      const hostnameAfterLocale = parts.slice(1).join('.');
+      return `.${hostnameAfterLocale}`;
+    }
+
+    return `.${hostname}`;
+  } catch {
+    return null;
+  }
+}

package/utils/index.ts

@@ -1,11 +1,14 @@
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../localization';
-import { CDNOptions, ClientRequestOptions } from '../types';
+import { CDNOptions, ClientRequestOptions, SetCookieOptions } from '../types';
+import getRootHostname from './get-root-hostname';
 
 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) {
   if (typeof document === 'undefined') {
@@ -20,14 +23,40 @@ export function getCookie(name: string) {
   }
 }
 
-export function setCookie(name: string, val: string) {
-  const date = new Date();
-  const value = val;
+export function setCookie(
+  name: string,
+  value: string,
+  options: SetCookieOptions = {}
+) {
+  const cookieParts = [`${name}=${value}`];
+
+  if (options.expires) {
+    const date = new Date();
+    date.setTime(date.getTime() + options.expires * 24 * 60 * 60 * 1000);
+    cookieParts.push(`expires=${date.toUTCString()}`);
+  }
+
+  cookieParts.push(`path=${options.path ?? '/'}`);
+
+  if (options.secure) {
+    cookieParts.push('secure');
+  }
+
+  if (options.sameSite) {
+    cookieParts.push(`sameSite=${options.sameSite}`);
+  }
 
-  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+  const domain =
+    options.domain ??
+    (settings.localization.localeUrlStrategy === LocaleUrlStrategy.Subdomain
+      ? getRootHostname(document.location.href)
+      : null);
 
-  document.cookie =
-    name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
+  if (domain) {
+    cookieParts.push(`domain=${domain}`);
+  }
+
+  document.cookie = cookieParts.join('; ');
 }
 
 export function removeCookie(name: string) {
@@ -155,8 +184,9 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
 export const urlLocaleMatcherRegex = new RegExp(
   `^/(${settings.localization.locales
     .filter((l) =>
-      settings.localization.localeUrlStrategy !==
-      LocaleUrlStrategy.ShowAllLocales
+      ![LocaleUrlStrategy.ShowAllLocales, LocaleUrlStrategy.Subdomain].includes(
+        settings.localization.localeUrlStrategy
+      )
         ? l.value !== settings.localization.defaultLocaleValue
         : l
     )
@@ -165,7 +195,14 @@ export const urlLocaleMatcherRegex = new RegExp(
 );
 
 export const getPosError = () => {
-  const error = JSON.parse(getCookie('pz-pos-error') ?? '{}');
+  const cookieValue = getCookie('pz-pos-error');
+  let decoded: string;
+  try {
+    decoded = cookieValue ? decodeURIComponent(cookieValue) : '{}';
+  } catch {
+    decoded = cookieValue ?? '{}';
+  }
+  const error = JSON.parse(decoded);
 
   // delete 'pz-pos-error' cookie when refreshing or closing page
   window.addEventListener('beforeunload', () => {
@@ -175,6 +212,23 @@ export const getPosError = () => {
   return error;
 };
 
+export const checkPaymentWillRedirect = (response: {
+  context_list?: Array<{
+    page_name: string;
+    page_context?: { context_data?: { redirect_url?: string } };
+  }>;
+  redirect_url?: string;
+  errors?: unknown;
+}): boolean => {
+  if (!response) return false;
+
+  const hasThankYouPage = response.context_list?.some(
+    (c) => c.page_name === 'ThankYouPage'
+  );
+
+  return Boolean(hasThankYouPage || response.redirect_url);
+};
+
 export const urlSchemes = [
   'http',
   'tel:',

package/utils/localization.ts

@@ -11,6 +11,10 @@ export const getUrlPathWithLocale = (
     currentLocale = defaultLocaleValue;
   }
 
+  if (localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
+    return pathname;
+  }
+
   if (localeUrlStrategy === LocaleUrlStrategy.HideAllLocales) {
     return pathname;
   }

package/utils/mobile-3d-iframe.ts

@@ -1,8 +1,14 @@
 const iframeURLChange = (iframe, callback) => {
   iframe.addEventListener('load', () => {
     setTimeout(() => {
-      if (iframe?.contentWindow?.location) {
-        callback(iframe.contentWindow.location);
+      try {
+        if (iframe?.contentWindow?.location) {
+          const iframeLocation = iframe.contentWindow.location;
+
+          callback(iframeLocation);
+        }
+      } catch (error) {
+        // Expected: browser blocks cross-origin iframe access for security
       }
     }, 0);
   });

package/utils/override-middleware.ts

@@ -10,22 +10,17 @@ export enum MiddlewareNames {
   DataSourceShippingOptionMiddleware = 'dataSourceShippingOptionMiddleware',
   AttributeBasedShippingOptionMiddleware = 'attributeBasedShippingOptionMiddleware',
   PaymentOptionMiddleware = 'paymentOptionMiddleware',
+  PaymentOptionResetMiddleware = 'paymentOptionResetMiddleware',
   InstallmentOptionMiddleware = 'installmentOptionMiddleware',
   ShippingStepMiddleware = 'shippingStepMiddleware'
 }
 
 export const overrideMiddleware = (
-  middlewares: Middleware[],
-  updates: { name: MiddlewareNames; middleware: Middleware }[]
-): void => {
-  const updatesMap = new Map(
-    updates.map(({ name, middleware }) => [name, middleware])
-  );
-
-  middlewares.forEach((mw, index) => {
-    const updatedMiddleware = updatesMap.get(mw.name as MiddlewareNames);
-    if (updatedMiddleware) {
-      middlewares[index] = updatedMiddleware;
-    }
+  originalMiddlewares: Middleware[],
+  overrides: Record<string, Middleware>
+): Middleware[] => {
+  return originalMiddlewares.map((middleware) => {
+    const middlewareKey = middleware.name || middleware.toString();
+    return overrides[middlewareKey] || middleware;
   });
 };

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
+  };
+}

package/utils/redirect-ignore.ts

@@ -0,0 +1,35 @@
+import settings from 'settings';
+import { getUrlPathWithLocale } from './localization';
+
+type IgnorePath = string | RegExp;
+
+const defaultIgnoreList: string[] = [];
+
+const extraIgnores: IgnorePath[] = Array.isArray(
+  settings.commerceRedirectionIgnoreList
+)
+  ? settings.commerceRedirectionIgnoreList.map((path) => {
+      if (path === '/users/reset') {
+        return /^\/users\/reset\/[^/]+\/[^/]+\/$/;
+      }
+      return path;
+    })
+  : [];
+
+export function shouldIgnoreRedirect(
+  pathname: string,
+  locale: string
+): boolean {
+  if (!pathname) return false;
+
+  const rawIgnoreList: IgnorePath[] = [...defaultIgnoreList, ...extraIgnores];
+
+  return rawIgnoreList.some((ignorePath) => {
+    if (ignorePath instanceof RegExp) {
+      return ignorePath.test(pathname);
+    }
+
+    const localized = getUrlPathWithLocale(ignorePath, locale);
+    return localized === pathname;
+  });
+}

package/utils/redirect.ts

@@ -3,21 +3,27 @@ import Settings from 'settings';
 import { headers } from 'next/headers';
 import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
+import { urlLocaleMatcherRegex } from '@akinon/next/utils';
 
 export const redirect = async (path: string, type?: RedirectType) => {
   const nextHeaders = await headers();
   const pageUrl = new URL(
-    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
+    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL ?? ''
   );
 
   const currentLocale = Settings.localization.locales.find(
     (locale) => locale.value === ServerVariables.locale
   );
 
-  const callbackUrl = pageUrl.pathname;
+  const searchParams = new URLSearchParams(pageUrl.search);
+
+  const callbackUrl =
+    pageUrl.pathname.replace(urlLocaleMatcherRegex, '') +
+    (searchParams.toString() ? `?${searchParams.toString()}` : '');
+
   const redirectUrlWithLocale = getUrlPathWithLocale(
     path,
-    currentLocale.localePath ?? currentLocale.value
+    currentLocale?.value
   );
 
   const redirectUrl = `${redirectUrlWithLocale}?callbackUrl=${callbackUrl}`;