@akinon/next 2.0.0-beta.12 → 2.0.0-beta.13

package/redux/middlewares/pre-order/pre-order-validation.ts

@@ -1,15 +1,16 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { CheckoutResult } from '../../../types';
+import { CheckoutResult, MiddlewareAction } from '../../../types';
 
 export const preOrderValidationMiddleware: Middleware = () => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
+    const act = action as MiddlewareAction;
 
     if (
       !preOrder ||
       ['guestLogin', 'getCheckoutLoyaltyBalance'].includes(
-        action?.meta?.arg?.endpointName
+        act?.meta?.arg?.endpointName
       )
     ) {
       return result;

package/redux/middlewares/pre-order/redirection.ts

@@ -1,12 +1,12 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { MiddlewareParams } from '../../../types';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
 import { checkoutApi } from '../../../data/client/checkout';
 
 export const redirectionMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {

package/redux/middlewares/pre-order/set-pre-order.ts

@@ -1,12 +1,12 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { MiddlewareParams } from '../../../types';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
 import { setPreOrder } from '../../../redux/reducers/checkout';
 
 export const setPreOrderMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (preOrder) {

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

@@ -7,7 +7,7 @@ export const shippingOptionMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {

package/redux/middlewares/pre-order/shipping-step.ts

@@ -7,7 +7,7 @@ export const shippingStepMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {

package/redux/reducers/checkout.ts

@@ -40,6 +40,7 @@ export interface CheckoutState {
   shippingOptions: ShippingOption[];
   dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
+  unavailablePaymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
   paymentChoices: PaymentChoice[];
@@ -60,6 +61,8 @@ export interface CheckoutState {
       countryCode: string;
       currencyCode: string;
       version: string;
+      public_key: string;
+      [key: string]: any;
     };
     detail: {
       label: string;
@@ -94,6 +97,7 @@ const initialState: CheckoutState = {
   shippingOptions: [],
   dataSourceShippingOptions: [],
   paymentOptions: [],
+  unavailablePaymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
   paymentChoices: [],
@@ -157,6 +161,9 @@ const checkoutSlice = createSlice({
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
+    setUnavailablePaymentOptions(state, { payload }) {
+      state.unavailablePaymentOptions = payload;
+    },
     setPaymentChoices(state, { payload }) {
       state.paymentChoices = payload;
     },
@@ -218,9 +225,10 @@ export const {
   setShippingOptions,
   setDataSourceShippingOptions,
   setPaymentOptions,
+  setUnavailablePaymentOptions,
+  setPaymentChoices,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,
-  setPaymentChoices,
   setCardType,
   setInstallmentOptions,
   setBankAccounts,

package/redux/reducers/index.ts

@@ -8,6 +8,8 @@ import { api } from '../../data/client/api';
 import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
 import { savedCardReducer } from '@akinon/pz-saved-card';
+import cyberSourceUcReducer from '@akinon/pz-cybersource-uc/src/redux/reducer';
+import { masterpassRestReducer } from '@akinon/pz-masterpass-rest';
 
 const fallbackReducer = (state = {}) => state;
 
@@ -19,7 +21,9 @@ const reducers = {
   header: headerReducer,
   masterpass: masterpassReducer || fallbackReducer,
   otp: otpReducer || fallbackReducer,
-  savedCard: savedCardReducer || fallbackReducer
+  savedCard: savedCardReducer || fallbackReducer,
+  cybersource_uc: cyberSourceUcReducer || fallbackReducer,
+  masterpassRest: masterpassRestReducer || fallbackReducer
 };
 
 export default reducers;

package/sentry/index.ts

@@ -13,36 +13,73 @@ const ALLOWED_CLIENT_LOG_TYPES: ClientLogType[] = [
   ClientLogType.CHECKOUT
 ];
 
+const isNetworkError = (exception: unknown): boolean => {
+  if (!(exception instanceof Error)) return false;
+
+  const networkErrorPatterns = [
+    'networkerror',
+    'failed to fetch',
+    'network request failed',
+    'network error',
+    'loading chunk',
+    'chunk load failed'
+  ];
+
+  if (exception.name === 'NetworkError') return true;
+
+  if (exception.name === 'TypeError') {
+    return networkErrorPatterns.some((pattern) =>
+      exception.message.toLowerCase().includes(pattern)
+    );
+  }
+
+  return networkErrorPatterns.some((pattern) =>
+    exception.message.toLowerCase().includes(pattern)
+  );
+};
+
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
   options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
 ) => {
-  // TODO: Handle options with ESLint rules
+  // TODO: Remove Zero Project DSN
 
-  Sentry.init({
+  const baseConfig = {
     dsn:
-      options.dsn ||
       SENTRY_DSN ||
+      options.dsn ||
       'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
     initialScope: {
       tags: {
         APP_TYPE: 'ProjectZeroNext',
-        TYPE: type
+        TYPE: type,
+        ...((options.initialScope as any)?.tags || {})
       }
     },
     tracesSampleRate: 0,
-    integrations: [],
-    beforeSend: (event, hint) => {
-      if (
-        type === 'Client' &&
-        !ALLOWED_CLIENT_LOG_TYPES.includes(
-          event.tags?.LOG_TYPE as ClientLogType
-        )
-      ) {
-        return null;
-      }
+    integrations: []
+  };
 
-      return event;
-    }
-  });
+  if (type === 'Server' || type === 'Edge') {
+    Sentry.init(baseConfig);
+  } else if (type === 'Client') {
+    Sentry.init({
+      ...baseConfig,
+      beforeSend: (event, hint) => {
+        if (
+          !ALLOWED_CLIENT_LOG_TYPES.includes(
+            event.tags?.LOG_TYPE as ClientLogType
+          )
+        ) {
+          return null;
+        }
+
+        if (isNetworkError(hint?.originalException)) {
+          return null;
+        }
+
+        return event;
+      }
+    });
+  }
 };

package/types/commerce/checkout.ts

@@ -1,9 +1,9 @@
+import type { JSX } from 'react';
 import { Address } from './address';
 import { Basket } from './basket';
 import { RetailStore } from './misc';
 import { PaymentOption } from './order';
 import { Product } from './product';
-import { JSX } from 'react';
 import { RootState, TypedDispatch } from 'redux/store';
 
 export enum CheckoutStep {
@@ -109,6 +109,7 @@ export interface PreOrder {
   token?: string;
   agreement_confirmed?: boolean;
   phone_number?: string;
+  number?: string;
 }
 
 export type ExtraField = Record<string, any>;
@@ -202,6 +203,15 @@ export interface MiddlewareParams {
   dispatch: TypedDispatch;
 }
 
+export interface MiddlewareAction {
+  type: string;
+  payload?: { status?: number; [key: string]: unknown };
+  meta?: {
+    arg?: { endpointName?: string };
+    baseQueryMeta?: { request?: { url?: string } };
+  };
+}
+
 export type SendSmsType = {
   phone_number: string;
 };

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';
@@ -199,6 +201,7 @@ export interface Settings {
     extraPaymentTypes?: string[];
     masterpassJsUrl?: string;
   };
+  customNotFoundEnabled: boolean;
   useOptimizedTranslations?: boolean;
   plugins?: Record<string, Record<string, any>>;
   includedProxyHeaders?: string[];
@@ -209,13 +212,26 @@ export interface Settings {
    */
   resetBasketOnCurrencyChange?: boolean;
   frontendIds?: Record<string, number>;
-  customNotFoundEnabled: boolean;
+  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 {
@@ -240,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;
@@ -283,7 +346,13 @@ export interface ButtonProps
   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;
@@ -304,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 {
@@ -337,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/utils/app-fetch.ts

@@ -43,12 +43,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 = {

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/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()}`);
+  }
 
-  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+  cookieParts.push(`path=${options.path ?? '/'}`);
 
-  document.cookie =
-    name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
+  if (options.secure) {
+    cookieParts.push('secure');
+  }
+
+  if (options.sameSite) {
+    cookieParts.push(`sameSite=${options.sameSite}`);
+  }
+
+  const domain =
+    options.domain ??
+    (settings.localization.localeUrlStrategy === LocaleUrlStrategy.Subdomain
+      ? getRootHostname(document.location.href)
+      : null);
+
+  if (domain) {
+    cookieParts.push(`domain=${domain}`);
+  }
+
+  document.cookie = cookieParts.join('; ');
 }
 
 export function removeCookie(name: string) {
@@ -152,9 +181,6 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
   return `${rootWithoutOptions}${options}${fileExtension}`;
 }
 
-const { locales, localeUrlStrategy, defaultLocaleValue } =
-  settings.localization;
-
 export const urlLocaleMatcherRegex = new RegExp(
   `^/(${settings.localization.locales
     .filter((l) =>
@@ -169,7 +195,8 @@ export const urlLocaleMatcherRegex = new RegExp(
 );
 
 export const getPosError = () => {
-  const error = JSON.parse(getCookie('pz-pos-error') ?? '{}');
+  const cookieValue = getCookie('pz-pos-error');
+  const error = JSON.parse(cookieValue ? decodeURIComponent(cookieValue) : '{}');
 
   // delete 'pz-pos-error' cookie when refreshing or closing page
   window.addEventListener('beforeunload', () => {

package/utils/override-middleware.ts

@@ -10,6 +10,7 @@ export enum MiddlewareNames {
   DataSourceShippingOptionMiddleware = 'dataSourceShippingOptionMiddleware',
   AttributeBasedShippingOptionMiddleware = 'attributeBasedShippingOptionMiddleware',
   PaymentOptionMiddleware = 'paymentOptionMiddleware',
+  PaymentOptionResetMiddleware = 'paymentOptionResetMiddleware',
   InstallmentOptionMiddleware = 'installmentOptionMiddleware',
   ShippingStepMiddleware = 'shippingStepMiddleware'
 }

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