@akinon/next 2.0.0-beta.9 → 2.0.0

package/redux/reducers/index.ts

@@ -2,12 +2,15 @@ import rootReducer from './root';
 import checkoutReducer from './checkout';
 import configReducer from './config';
 import headerReducer from './header';
+import widgetReducer from './widget';
 import { api } from '../../data/client/api';
 
 // Plugin reducers
 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;
 
@@ -17,9 +20,12 @@ const reducers = {
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
+  widget: widgetReducer,
   masterpass: masterpassReducer || fallbackReducer,
   otp: otpReducer || fallbackReducer,
-  savedCard: savedCardReducer || fallbackReducer
+  savedCard: savedCardReducer || fallbackReducer,
+  cybersource_uc: cyberSourceUcReducer || fallbackReducer,
+  masterpassRest: masterpassRestReducer || fallbackReducer
 };
 
 export default reducers;

package/redux/reducers/widget.ts

@@ -0,0 +1,80 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { WidgetComponentData, WidgetDataSource } from '../../types/widget';
+
+export interface WidgetState {
+  designMode: boolean;
+  responsive: string;
+  components: WidgetComponentData[];
+  placeholders: {
+    slug: string;
+    widgetSlugs: string[];
+  }[];
+  selectedPlaceholder?: string;
+  selectedWidget?: string;
+  selectedComponentId?: string;
+  draggingActive?: boolean;
+  dataSources: WidgetDataSource[];
+}
+
+const initialState: WidgetState = {
+  designMode: true,
+  responsive: 'mobile',
+  components: [],
+  placeholders: [],
+  selectedPlaceholder: undefined,
+  selectedWidget: undefined,
+  selectedComponentId: undefined,
+  draggingActive: false,
+  dataSources: []
+};
+
+const widgetSlice = createSlice({
+  name: 'widget',
+  initialState,
+  reducers: {
+    setDesignMode(state, { payload }: PayloadAction<boolean>) {
+      state.designMode = payload;
+    },
+    setResponsive(state, { payload }: PayloadAction<string>) {
+      state.responsive = payload;
+    },
+    setComponents(state, { payload }: PayloadAction<WidgetComponentData[]>) {
+      state.components = payload;
+    },
+    setPlaceholders(
+      state,
+      { payload }: PayloadAction<WidgetState['placeholders']>
+    ) {
+      state.placeholders = payload;
+    },
+    setSelectedPlaceholder(state, { payload }: PayloadAction<string>) {
+      state.selectedPlaceholder = payload;
+    },
+    setSelectedWidget(state, { payload }: PayloadAction<string>) {
+      state.selectedWidget = payload;
+    },
+    setSelectedComponentId(state, { payload }: PayloadAction<string>) {
+      state.selectedComponentId = payload;
+    },
+    setDraggingActive(state, { payload }: PayloadAction<boolean>) {
+      state.draggingActive = payload;
+    },
+    setDataSources(state, { payload }: PayloadAction<WidgetDataSource[]>) {
+      state.dataSources = payload;
+    }
+  }
+});
+
+export const {
+  setDesignMode,
+  setResponsive,
+  setComponents,
+  setPlaceholders,
+  setSelectedPlaceholder,
+  setSelectedWidget,
+  setSelectedComponentId,
+  setDraggingActive,
+  setDataSources
+} = widgetSlice.actions;
+
+export default widgetSlice.reducer;

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/tailwind/content.js

@@ -0,0 +1,16 @@
+const defaultPlugins = require('../plugins');
+
+const getAkinonNextContent = (plugins = defaultPlugins) => {
+  return [
+    `./node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    `../../node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    ...plugins
+      .map((plugin) => [
+        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
+        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
+      ])
+      .flat()
+  ];
+};
+
+module.exports = getAkinonNextContent;

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 {
@@ -68,6 +68,18 @@ export interface CheckoutPaymentOption {
   viewProps?: any;
 }
 
+export interface LoyaltyBalanceItem {
+  label_id: number | null;
+  label: string | null;
+  balance: string;
+  currency?: string;
+}
+
+export interface AccountUsage {
+  label_id: number | null;
+  amount: number;
+}
+
 export interface GiftBox {
   note: string;
   gift_video: boolean;
@@ -91,6 +103,7 @@ export interface PreOrder {
   notes?: string;
   user_phone_number?: string;
   loyalty_money?: string;
+  loyalty_account_usages?: AccountUsage[];
   currency_type_label?: string;
   is_guest?: boolean;
   is_post_order?: boolean;
@@ -109,6 +122,7 @@ export interface PreOrder {
   token?: string;
   agreement_confirmed?: boolean;
   phone_number?: string;
+  number?: string;
 }
 
 export type ExtraField = Record<string, any>;
@@ -150,6 +164,8 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    balances?: LoyaltyBalanceItem[];
+    accounts?: LoyaltyBalanceItem[];
     attribute_based_shipping_options?: AttributeBasedShippingOption[];
     paymentData?: any;
     paymentMethod?: string;
@@ -202,6 +218,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/commerce/widget.ts

@@ -26,3 +26,36 @@ export type WidgetResultType<T> = {
   slug?: string;
   template?: string;
 };
+
+export type WidgetSchemaType<T> = {
+  pk?: number;
+  name?: string;
+  schema?: T;
+};
+
+export type DynamicWidgetResultType = WidgetResultType<{
+  [key: string]: {
+    value: string;
+    kwargs: {
+      data_type: string;
+      value?: string;
+      url?: string;
+    };
+  };
+}>;
+
+export type DynamicWidgetSchemaType = WidgetSchemaType<{
+  [key: string]: {
+    key: string;
+    data_type: string;
+    label: string;
+    properties: {
+      parent_id?: string;
+      style?: {
+        [key: string]: any;
+      };
+      tag?: string;
+      type?: 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,12 +212,26 @@ export interface Settings {
    */
   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 {
@@ -239,22 +256,87 @@ 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[];
+}
+
+// Search params type compatible with both Next.js resolved searchParams and URLSearchParams
+export type SearchParams = Record<string, string | string[] | undefined> | URLSearchParams;
+
+// Raw Next 16 server prop shape, used at the middleware/HOC boundary before normalization
+export type RawSearchParams = Record<string, string | string[] | undefined>;
+
+// Page/Layout props — sync params for backward compatibility with v1 brands.
+// `searchParams` is always exposed as `URLSearchParams` (matching v1 behavior).
+// The server HOC normalizes Next 16's raw Record into a URLSearchParams instance.
 export interface PageProps<T = any> {
-  params: Promise<T & { locale: string; currency: string }>;
-  searchParams: Promise<URLSearchParams>;
+  params: T & {
+    pz?: string;
+    commerce?: string;
+    locale?: string;
+    currency?: string;
+    url?: string;
+    [key: string]: any;
+  };
+  searchParams: URLSearchParams;
 }
 
 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;
+  };
+}
+
+// Async versions for Next.js 16 generateMetadata and internal use
+export interface AsyncPageProps<T = any> {
+  params: Promise<T & {
+    pz?: string;
+    commerce?: string;
+    locale?: string;
+    currency?: string;
+    url?: string;
+    [key: string]: any;
+  }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+// Resolved (sync) versions for inner components after withSegmentDefaults resolves props
+export interface ResolvedPageProps<T = any> {
+  params: T & { locale: string; currency: string };
+  searchParams: URLSearchParams;
+}
+
+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;
@@ -282,7 +364,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;
@@ -303,15 +391,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 {
@@ -336,3 +428,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?: number | 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;
+  }
+}