@akinon/next 2.0.6-rc.0 → 2.0.6-rc.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 2.0.6-rc.2
+
+### Patch Changes
+
+- 89deabe5: ZERO-4392: Remove deprecated dependencies and update package versions in yarn.lock
+- 1a345c47: ZERO-4234: Add Global Toast Notification System
+- 1f1ae44e: ZERO-4230: Add Commerce API mock/replay mode for development
+- 89ed4e03: ZERO-4394: Add Next.js 16 ESLint migration v9 + flat config
+- 8d8fefbe: ZERO-4398: Enhance SEO metadata generation for flat pages and update FlatPage interface to include localized URLs
+
+## 2.0.6-rc.1
+
+### Patch Changes
+
+- 51ea0688: ZERO-4377: Fix checkout card type state being cleared after valid bin number responses.
+
 ## 2.0.6-rc.0
 
 ### Patch Changes

package/api/auth.ts

@@ -154,18 +154,49 @@ const getDefaultAuthConfig = () => {
             userIp
           });
 
-          const checkCurrentUser = await getCurrentUser(
-            cookieStore.get('osessionid')?.value ?? '',
-            cookieStore.get('pz-currency')?.value ?? ''
-          );
-
-          if (checkCurrentUser?.pk) {
-            const sessionCookie = reqHeaders
-              .get('cookie')
-              ?.match(/osessionid=\w+/)?.[0]
-              .replace(/osessionid=/, '');
-            if (sessionCookie) {
-              reqHeaders.set('cookie', sessionCookie);
+          const existingSessionId = cookieStore.get('osessionid')?.value;
+
+          if (existingSessionId) {
+            const checkCurrentUser = await getCurrentUser(
+              existingSessionId,
+              cookieStore.get('pz-currency')?.value ?? ''
+            );
+
+            if (checkCurrentUser?.pk) {
+              const sessionCookie = reqHeaders
+                .get('cookie')
+                ?.match(/osessionid=\w+/)?.[0]
+                .replace(/osessionid=/, '');
+              if (sessionCookie) {
+                reqHeaders.set('cookie', sessionCookie);
+              }
+            } else {
+              // Stale session cookie — remove from headers and clear in browser
+              const currentCookies = reqHeaders.get('cookie') || '';
+              const cleanedCookies = currentCookies
+                .split(';')
+                .filter((c) => !c.trim().startsWith('osessionid='))
+                .join(';')
+                .trim();
+              reqHeaders.set('cookie', cleanedCookies);
+
+              const { localeUrlStrategy } = Settings.localization;
+              const fallbackHost =
+                headerStore.get('x-forwarded-host') ||
+                headerStore.get('host');
+              const hostname =
+                process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+              const rootHostname =
+                localeUrlStrategy === LocaleUrlStrategy.Subdomain
+                  ? getRootHostname(hostname)
+                  : null;
+              const expireOptions = {
+                path: '/',
+                maxAge: 0,
+                ...(rootHostname ? { domain: rootHostname } : {})
+              };
+              cookieStore.set('osessionid', '', expireOptions);
+              cookieStore.set('sessionid', '', expireOptions);
             }
           }
 
@@ -393,18 +424,47 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
             userIp
           });
 
-          const checkCurrentUser = await getCurrentUser(
-            req.cookies['osessionid'] ?? '',
-            req.cookies['pz-currency'] ?? ''
-          );
-
-          if (checkCurrentUser?.pk) {
-            const sessionCookie = reqHeaders
-              .get('cookie')
-              ?.match(/osessionid=\w+/)?.[0]
-              .replace(/osessionid=/, '');
-            if (sessionCookie) {
-              reqHeaders.set('cookie', sessionCookie);
+          if (req.cookies['osessionid']) {
+            const checkCurrentUser = await getCurrentUser(
+              req.cookies['osessionid'],
+              req.cookies['pz-currency'] ?? ''
+            );
+
+            if (checkCurrentUser?.pk) {
+              const sessionCookie = reqHeaders
+                .get('cookie')
+                ?.match(/osessionid=\w+/)?.[0]
+                .replace(/osessionid=/, '');
+              if (sessionCookie) {
+                reqHeaders.set('cookie', sessionCookie);
+              }
+            } else {
+              // Stale session cookie — remove from headers and clear in browser
+              const currentCookies = reqHeaders.get('cookie') || '';
+              const cleanedCookies = currentCookies
+                .split(';')
+                .filter((c) => !c.trim().startsWith('osessionid='))
+                .join(';')
+                .trim();
+              reqHeaders.set('cookie', cleanedCookies);
+
+              const { localeUrlStrategy } = Settings.localization;
+              const fallbackHost =
+                req.headers['x-forwarded-host']?.toString() ||
+                req.headers.host?.toString();
+              const hostname =
+                process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+              const rootHostname =
+                localeUrlStrategy === LocaleUrlStrategy.Subdomain
+                  ? getRootHostname(hostname)
+                  : null;
+              const domainOption = rootHostname
+                ? ` Domain=${rootHostname};`
+                : '';
+              res.setHeader('Set-Cookie', [
+                `osessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;${domainOption}`,
+                `sessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;${domainOption}`
+              ]);
             }
           }
 

package/api/client.ts

@@ -7,6 +7,7 @@ import cookieParser from 'set-cookie-parser';
 import { cookies } from 'next/headers';
 import getRootHostname from '../utils/get-root-hostname';
 import { LocaleUrlStrategy } from '../localization';
+import { fixtureManager, MockMode } from '../lib/fixture-manager';
 
 interface RouteParams {
   params: {
@@ -156,6 +157,28 @@ async function proxyRequest(...args) {
     url += `?${urlSearchParams.toString()}`;
   }
 
+  const mockMode = process.env.PZ_MOCK;
+  const fixtureBody = req.method !== 'GET' ? fetchOptions.body : undefined;
+
+  // Replay mode: serve from fixtures
+  if (mockMode === MockMode.REPLAY) {
+    const { found, fixture } = await fixtureManager.read(req.method, slug, fixtureBody);
+
+    if (found) {
+      return NextResponse.json(
+        options.responseType === 'text'
+          ? { result: fixture.response.body }
+          : fixture.response.body,
+        { status: fixture.response.status }
+      );
+    }
+
+    return NextResponse.json(
+      { error: 'No fixture recorded for this endpoint' },
+      { status: 404 }
+    );
+  }
+
   try {
     const request = await fetch(url, fetchOptions);
 
@@ -181,6 +204,15 @@ async function proxyRequest(...args) {
       );
     }
 
+    // Record mode: save response to fixtures
+    if (mockMode === MockMode.RECORD) {
+      await fixtureManager.write(req.method, slug, fixtureBody, {
+        status: request.status,
+        headers: fixtureManager.extractHeaders(request.headers),
+        body: response
+      });
+    }
+
     const setCookieHeaders = request.headers.getSetCookie();
     const exceptCookieKeys = ['pz-locale', 'pz-currency'];
 

package/components/client-root.tsx

@@ -17,6 +17,7 @@ import {
 } from '../redux/reducers/widget';
 import { LoggerPopup } from './logger-popup';
 import { LoggerProvider } from '../hooks/use-logger-context';
+import { ToastContainer } from './toast';
 import * as Sentry from '@sentry/nextjs';
 import { initSentry } from '../sentry';
 
@@ -150,6 +151,7 @@ export default function ClientRoot({
     <LoggerProvider>
       {children}
       <LoggerPopup />
+      <ToastContainer />
     </LoggerProvider>
   );
 }

package/components/plugin-module.tsx

@@ -27,7 +27,8 @@ enum Plugin {
   MasterpassRest = 'pz-masterpass-rest',
   SimilarProducts = 'pz-similar-products',
   Haso = 'pz-haso',
-  GooglePay = 'pz-google-pay'
+  GooglePay = 'pz-google-pay',
+  ListHoverImage = 'pz-list-hover-image'
 }
 
 export enum Component {
@@ -68,7 +69,8 @@ export enum Component {
   ImageSearchButton = 'ImageSearchButton',
   HeaderImageSearchFeature = 'HeaderImageSearchFeature',
   HasoPaymentGateway = 'HasoPaymentGateway',
-  GooglePay = 'GooglePay'
+  GooglePay = 'GooglePay',
+  ListHoverImage = 'ListHoverImage'
 }
 
 const PluginComponents = new Map([
@@ -122,7 +124,8 @@ const PluginComponents = new Map([
   [Plugin.Hepsipay, [Component.Hepsipay]],
   [Plugin.MasterpassRest, [Component.MasterpassRest]],
   [Plugin.Haso, [Component.HasoPaymentGateway]],
-  [Plugin.GooglePay, [Component.GooglePay]]
+  [Plugin.GooglePay, [Component.GooglePay]],
+  [Plugin.ListHoverImage, [Component.ListHoverImage]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -201,6 +204,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-haso'}`);
             } else if (plugin === Plugin.GooglePay) {
               promise = import(`${'@akinon/pz-google-pay'}`);
+            } else if (plugin === Plugin.ListHoverImage) {
+              promise = import(`${'@akinon/pz-list-hover-image'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/toast.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { twMerge } from 'tailwind-merge'
+import { useAppDispatch, useAppSelector } from '../redux/hooks'
+import {
+  removeToast,
+  Toast as ToastType,
+  ToastPosition
+} from '../redux/reducers/toast'
+import { Icon } from './icon'
+
+type TypeStyles = {
+  container?: string
+  icon?: string
+}
+
+export interface ToastClasses {
+  root?: string
+  item?: string
+  icon?: string
+  message?: string
+  action?: string
+  dismiss?: string
+  animateIn?: string
+  animateOut?: string
+  types?: Partial<Record<ToastType['type'], TypeStyles>>
+  positions?: Partial<Record<ToastPosition, string>>
+}
+
+export interface ToastContainerProps {
+  classes?: ToastClasses
+  icons?: Partial<Record<ToastType['type'], string>>
+  customRender?: (props: {
+    toast: ToastType
+    onDismiss: () => void
+  }) => React.ReactNode
+  onAction?: (actionId: string, toast: ToastType) => void
+}
+
+const builtInTypeStyles: Record<ToastType['type'], TypeStyles> = {
+  success: {
+    container: 'border-l-4 border-l-success bg-white',
+    icon: 'text-success'
+  },
+  error: {
+    container: 'border-l-4 border-l-error bg-white',
+    icon: 'text-error'
+  },
+  warning: {
+    container: 'border-l-4 border-l-[#e89a0c] bg-white',
+    icon: 'text-[#e89a0c]'
+  },
+  info: {
+    container: 'border-l-4 border-l-primary bg-white',
+    icon: 'text-primary'
+  }
+}
+
+const builtInIcons: Record<ToastType['type'], string> = {
+  success: 'check',
+  error: 'close',
+  warning: 'info',
+  info: 'info'
+}
+
+const builtInPositions: Record<ToastPosition, string> = {
+  'top-right': 'fixed top-4 right-4',
+  'top-left': 'fixed top-4 left-4',
+  'top-center': 'fixed top-4 left-1/2 -translate-x-1/2',
+  'bottom-right': 'fixed bottom-4 right-4',
+  'bottom-left': 'fixed bottom-4 left-4',
+  'bottom-center': 'fixed bottom-4 left-1/2 -translate-x-1/2'
+}
+
+const ToastItem = React.memo(function ToastItem({
+  toast,
+  classes,
+  icons,
+  customRender,
+  onAction
+}: {
+  toast: ToastType
+  classes: ToastClasses
+  icons: Record<ToastType['type'], string>
+  customRender?: ToastContainerProps['customRender']
+  onAction?: ToastContainerProps['onAction']
+}) {
+  const dispatch = useAppDispatch()
+  const [exiting, setExiting] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null)
+
+  useEffect(() => {
+    if (toast.duration > 0) {
+      timerRef.current = setTimeout(() => {
+        setExiting(true)
+      }, toast.duration)
+    }
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [toast.duration])
+
+  const handleAnimationEnd = () => {
+    if (exiting) {
+      dispatch(removeToast(toast.id))
+    }
+  }
+
+  const handleDismiss = () => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    setExiting(true)
+  }
+
+  const animIn = classes.animateIn ?? 'animate-toast-in'
+  const animOut = classes.animateOut ?? 'animate-toast-out'
+
+  if (customRender) {
+    return (
+      <div
+        className={twMerge(
+          'pointer-events-auto',
+          exiting ? animOut : animIn
+        )}
+        onAnimationEnd={handleAnimationEnd}
+      >
+        {customRender({ toast, onDismiss: handleDismiss })}
+      </div>
+    )
+  }
+
+  const typeStyle = classes.types?.[toast.type] ?? builtInTypeStyles[toast.type]
+  const iconName = toast.icon ?? icons[toast.type]
+
+  return (
+    <div
+      role="alert"
+      className={twMerge(
+        'flex items-center gap-3 px-4 py-3 rounded shadow-lg min-w-[300px] max-w-[420px]',
+        'pointer-events-auto',
+        exiting ? animOut : animIn,
+        typeStyle.container,
+        classes.item,
+        toast.className
+      )}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <Icon
+        name={iconName}
+        size={18}
+        className={twMerge('shrink-0', typeStyle.icon, classes.icon)}
+      />
+      <p
+        className={twMerge(
+          'flex-1 text-sm text-primary leading-snug',
+          classes.message
+        )}
+      >
+        {toast.message}
+      </p>
+      {toast.action && onAction && (
+        <button
+          type="button"
+          onClick={() => onAction(toast.action.actionId, toast)}
+          className={twMerge(
+            'shrink-0 text-xs font-semibold text-primary underline hover:no-underline transition-colors',
+            classes.action
+          )}
+        >
+          {toast.action.label}
+        </button>
+      )}
+      {toast.dismissible !== false && (
+        <button
+          type="button"
+          onClick={handleDismiss}
+          className={twMerge(
+            'shrink-0 p-1 text-gray-600 hover:text-primary transition-colors',
+            classes.dismiss
+          )}
+          aria-label="Dismiss"
+        >
+          <Icon name="close" size={12} />
+        </button>
+      )}
+    </div>
+  )
+})
+
+const EMPTY_CLASSES: ToastClasses = {}
+
+export function ToastContainer({
+  classes = EMPTY_CLASSES,
+  icons,
+  customRender,
+  onAction
+}: ToastContainerProps = {}) {
+  const toasts = useAppSelector((state) => state.toast.toasts)
+  const [mounted, setMounted] = useState(false)
+
+  const mergedIcons = useMemo(
+    () => ({ ...builtInIcons, ...icons }),
+    [icons]
+  )
+
+  const posStyles = useMemo(
+    () => ({ ...builtInPositions, ...classes.positions }),
+    [classes.positions]
+  )
+
+  const grouped = useMemo(
+    () =>
+      toasts.reduce<Record<string, ToastType[]>>((acc, toast) => {
+        const pos = toast.position ?? 'top-right'
+        if (!acc[pos]) acc[pos] = []
+        acc[pos].push(toast)
+        return acc
+      }, {}),
+    [toasts]
+  )
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted || toasts.length === 0) return null
+
+  return createPortal(
+    <>
+      {Object.entries(grouped).map(([position, items]) => (
+        <div
+          key={position}
+          aria-live="polite"
+          aria-label="Notifications"
+          className={twMerge(
+            'z-[9999] flex flex-col gap-3 pointer-events-none',
+            posStyles[position as ToastPosition],
+            classes.root
+          )}
+        >
+          {items.map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              classes={classes}
+              icons={mergedIcons}
+              customRender={customRender}
+              onAction={onAction}
+            />
+          ))}
+        </div>
+      ))}
+    </>,
+    document.body
+  )
+}

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/eslint.config.base.mjs

@@ -0,0 +1,54 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import nextVitals from 'eslint-config-next/core-web-vitals'
+import nextTs from 'eslint-config-next/typescript'
+import prettier from 'eslint-config-prettier/flat'
+import projectzero from '@akinon/eslint-plugin-projectzero'
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  prettier,
+  {
+    plugins: {
+      '@akinon/projectzero': projectzero
+    },
+    rules: {
+      ...projectzero.configs.core.rules,
+      ...projectzero.configs.recommended.rules,
+      // typescript-eslint v6 → v8 renamed rules (override legacy `recommended` preset).
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        { allowInterfaces: 'never' }
+      ],
+      '@typescript-eslint/no-unused-expressions': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      // react-hooks v7 new strict rules — softened to warn for incremental adoption.
+      'react-hooks/set-state-in-effect': 'warn',
+      'react-hooks/static-components': 'warn',
+      'react-hooks/error-boundaries': 'warn',
+      'react-hooks/preserve-manual-memoization': 'warn',
+      'react-hooks/incompatible-library': 'warn',
+      'react-hooks/immutability': 'warn'
+    }
+  },
+  {
+    files: ['eslint.config.{js,cjs,mjs}', 'middlewares/default.ts'],
+    rules: {
+      '@akinon/projectzero/check-middleware-order': 'error'
+    }
+  },
+  {
+    files: ['redux/middlewares/pre-order/index.ts'],
+    rules: {
+      '@akinon/projectzero/check-pre-order-middleware-order': 'error'
+    }
+  },
+  globalIgnores([
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts'
+  ])
+])

package/hooks/index.ts

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

package/hooks/use-toast.ts

@@ -0,0 +1,56 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useAppDispatch } from '../redux/hooks'
+import {
+  addToast,
+  removeToast,
+  ToastType,
+  ToastInput
+} from '../redux/reducers/toast'
+
+export type ToastOptions = Omit<ToastInput, 'type' | 'message'>
+
+export const useToast = () => {
+  const dispatch = useAppDispatch()
+
+  const toast = useCallback(
+    (type: ToastType, message: string, options?: ToastOptions) => {
+      dispatch(addToast({ type, message, ...options }))
+    },
+    [dispatch]
+  )
+
+  const success = useCallback(
+    (message: string, options?: ToastOptions) =>
+      toast('success', message, options),
+    [toast]
+  )
+
+  const error = useCallback(
+    (message: string, options?: ToastOptions) =>
+      toast('error', message, options),
+    [toast]
+  )
+
+  const warning = useCallback(
+    (message: string, options?: ToastOptions) =>
+      toast('warning', message, options),
+    [toast]
+  )
+
+  const info = useCallback(
+    (message: string, options?: ToastOptions) =>
+      toast('info', message, options),
+    [toast]
+  )
+
+  const dismiss = useCallback(
+    (id: string) => {
+      dispatch(removeToast(id))
+    },
+    [dispatch]
+  )
+
+  return { toast, success, error, warning, info, dismiss }
+}

package/instrumentation/index.ts

@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/nextjs';
 
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./node');
     initSentry('Server');
   }
 

package/instrumentation/node.ts

@@ -1,2 +1,224 @@
-// OpenTelemetry tracing is handled by Sentry.
-// Custom NodeSDK setup removed due to version incompatibility with Sentry 10's OpenTelemetry v2.x requirements.
+import { context, trace, type SpanAttributes } from '@opentelemetry/api';
+import { AsyncLocalStorageContextManager } from '@opentelemetry/context-async-hooks';
+import { ExportResultCode, type ExportResult } from '@opentelemetry/core';
+import {
+  BasicTracerProvider,
+  SimpleSpanProcessor,
+  type ReadableSpan,
+  type SpanExporter
+} from '@opentelemetry/sdk-trace-base';
+
+type OTelAttributeValue =
+  | { stringValue: string }
+  | { intValue: number }
+  | { doubleValue: number }
+  | { boolValue: boolean };
+
+const PZ_DASHBOARD_TRACING_STARTED_KEY = '__pzDashboardTracingStarted__';
+const SERVICE_NAME = 'pz-next-app';
+const DASHBOARD_FALLBACK_URL = 'http://localhost:3005';
+
+type PzDashboardGlobal = typeof globalThis & {
+  [PZ_DASHBOARD_TRACING_STARTED_KEY]?: boolean;
+};
+
+const getDashboardTraceUrl = () => {
+  const baseUrl = process.env.PZ_DASHBOARD_URL ?? DASHBOARD_FALLBACK_URL;
+
+  return `${baseUrl.replace(/\/$/, '')}/api/traces`;
+};
+
+const hrTimeToUnixNano = ([seconds, nanos]: [number, number]) =>
+  (BigInt(seconds) * BigInt(1000000000) + BigInt(nanos)).toString();
+
+const getAttributeValue = (value: unknown): OTelAttributeValue => {
+  if (typeof value === 'string') {
+    return { stringValue: value };
+  }
+
+  if (typeof value === 'number') {
+    return Number.isInteger(value)
+      ? { intValue: value }
+      : { doubleValue: value };
+  }
+
+  if (typeof value === 'boolean') {
+    return { boolValue: value };
+  }
+
+  return { stringValue: JSON.stringify(value ?? '') };
+};
+
+const getAttributes = (attributes: SpanAttributes = {}) =>
+  Object.entries(attributes)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => ({
+      key,
+      value: getAttributeValue(value)
+    }));
+
+const getParentSpanId = (span: ReadableSpan) => {
+  if ('parentSpanId' in span && typeof span.parentSpanId === 'string') {
+    return span.parentSpanId;
+  }
+
+  if (
+    'parentSpanContext' in span &&
+    span.parentSpanContext &&
+    typeof span.parentSpanContext === 'object' &&
+    'spanId' in span.parentSpanContext
+  ) {
+    return String(span.parentSpanContext.spanId);
+  }
+
+  return undefined;
+};
+
+const getResourceAttributes = (span: ReadableSpan) => ({
+  ...(span.resource?.attributes ?? {}),
+  'service.name':
+    process.env.OTEL_SERVICE_NAME ??
+    process.env.NEXT_PUBLIC_APP_NAME ??
+    SERVICE_NAME
+});
+
+const getScope = (span: ReadableSpan) => {
+  const scopedSpan = span as ReadableSpan & {
+    instrumentationLibrary?: {
+      name?: string;
+      version?: string;
+    };
+    instrumentationScope?: {
+      name?: string;
+      version?: string;
+    };
+  };
+  const scope =
+    scopedSpan.instrumentationScope ?? scopedSpan.instrumentationLibrary;
+
+  return {
+    name: scope?.name ?? SERVICE_NAME,
+    version: scope?.version ?? ''
+  };
+};
+
+const getSpanPayload = (span: ReadableSpan) => ({
+  traceId: span.spanContext().traceId,
+  spanId: span.spanContext().spanId,
+  parentSpanId: getParentSpanId(span),
+  name: span.name,
+  kind: span.kind,
+  startTimeUnixNano: hrTimeToUnixNano(span.startTime),
+  endTimeUnixNano: hrTimeToUnixNano(span.endTime),
+  attributes: getAttributes(span.attributes),
+  droppedAttributesCount: span.droppedAttributesCount ?? 0,
+  events:
+    span.events?.map((event) => ({
+      name: event.name,
+      timeUnixNano: hrTimeToUnixNano(event.time),
+      attributes: getAttributes(event.attributes),
+      droppedAttributesCount: event.droppedAttributesCount ?? 0
+    })) ?? [],
+  droppedEventsCount: span.droppedEventsCount ?? 0,
+  status: span.status,
+  links:
+    span.links?.map((link) => ({
+      traceId: link.context.traceId,
+      spanId: link.context.spanId,
+      attributes: getAttributes(link.attributes),
+      droppedAttributesCount: link.droppedAttributesCount ?? 0
+    })) ?? [],
+  droppedLinksCount: span.droppedLinksCount ?? 0
+});
+
+class PzDashboardTraceExporter implements SpanExporter {
+  constructor(private readonly url: string) {}
+
+  export(
+    spans: ReadableSpan[],
+    resultCallback: (result: ExportResult) => void
+  ) {
+    const [firstSpan] = spans;
+
+    if (!firstSpan) {
+      resultCallback({ code: ExportResultCode.SUCCESS });
+      return;
+    }
+
+    void this.sendSpans(spans, firstSpan, resultCallback);
+  }
+
+  private async sendSpans(
+    spans: ReadableSpan[],
+    firstSpan: ReadableSpan,
+    resultCallback: (result: ExportResult) => void
+  ) {
+    try {
+      const response = await fetch(this.url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          resourceSpans: [
+            {
+              resource: {
+                attributes: getAttributes(getResourceAttributes(firstSpan)),
+                droppedAttributesCount: 0
+              },
+              scopeSpans: spans.map((span) => ({
+                scope: getScope(span),
+                spans: [getSpanPayload(span)]
+              }))
+            }
+          ]
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`PZ Dashboard trace export failed: ${response.status}`);
+      }
+
+      resultCallback({ code: ExportResultCode.SUCCESS });
+    } catch (error) {
+      resultCallback({
+        code: ExportResultCode.FAILED,
+        error: error instanceof Error ? error : new Error(String(error))
+      });
+    }
+  }
+
+  shutdown() {
+    return Promise.resolve();
+  }
+}
+
+const startDashboardTracing = () => {
+  const pzDashboardGlobal = globalThis as PzDashboardGlobal;
+
+  if (pzDashboardGlobal[PZ_DASHBOARD_TRACING_STARTED_KEY]) {
+    return;
+  }
+
+  const provider = new BasicTracerProvider({
+    spanProcessors: [
+      new SimpleSpanProcessor(
+        new PzDashboardTraceExporter(getDashboardTraceUrl())
+      )
+    ]
+  });
+
+  context.setGlobalContextManager(
+    new AsyncLocalStorageContextManager().enable()
+  );
+
+  const registered = trace.setGlobalTracerProvider(provider);
+
+  if (!registered) {
+    return;
+  }
+
+  pzDashboardGlobal[PZ_DASHBOARD_TRACING_STARTED_KEY] = true;
+};
+
+if (process.env.NODE_ENV === 'development') {
+  startDashboardTracing();
+}

package/lib/fixture-manager.ts

@@ -0,0 +1,146 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import * as crypto from 'crypto'
+import logger from '../utils/log'
+
+export const MockMode = {
+  RECORD: 'record',
+  REPLAY: 'replay'
+} as const
+
+export type MockMode = (typeof MockMode)[keyof typeof MockMode]
+
+interface FixtureData {
+  request: {
+    method: string
+    url: string
+    body?: any
+  }
+  response: {
+    status: number
+    headers: Record<string, string>
+    body: any
+  }
+  recorded_at: string
+}
+
+const SENSITIVE_HEADERS = [
+  'authorization',
+  'cookie',
+  'set-cookie',
+  'x-csrftoken',
+  'x-forwarded-for'
+]
+
+class FixtureManager {
+  private fixturesDir: string
+  private dirEnsured = false
+
+  constructor() {
+    this.fixturesDir = path.join(process.cwd(), '.pz-fixtures')
+  }
+
+  private ensureDir(): void {
+    if (this.dirEnsured) return
+    fs.mkdirSync(this.fixturesDir, { recursive: true })
+    this.dirEnsured = true
+  }
+
+  generateKey(method: string, url: string, body?: any): string {
+    const normalized = method?.toUpperCase() ?? 'GET'
+    const parts = [normalized, url]
+
+    if (body && normalized !== 'GET') {
+      const bodyStr =
+        typeof body === 'string' ? body : JSON.stringify(body)
+      parts.push(bodyStr)
+    }
+
+    return crypto.createHash('md5').update(parts.join(':')).digest('hex')
+  }
+
+  extractHeaders(headers: Headers): Record<string, string> {
+    const result: Record<string, string> = {}
+    headers.forEach((value, key) => {
+      result[key] = value
+    })
+    return result
+  }
+
+  private stripSensitiveHeaders(
+    headers: Record<string, string>
+  ): Record<string, string> {
+    const cleaned: Record<string, string> = {}
+
+    for (const [key, value] of Object.entries(headers)) {
+      if (!SENSITIVE_HEADERS.includes(key.toLowerCase())) {
+        cleaned[key] = value
+      }
+    }
+
+    return cleaned
+  }
+
+  async write(
+    method: string,
+    url: string,
+    body: any,
+    response: { status: number; headers: Record<string, string>; body: any }
+  ): Promise<void> {
+    try {
+      this.ensureDir()
+
+      const normalized = method?.toUpperCase() ?? 'GET'
+      const key = this.generateKey(normalized, url, body)
+      const fixture: FixtureData = {
+        request: {
+          method: normalized,
+          url
+        },
+        response: {
+          status: response.status,
+          headers: this.stripSensitiveHeaders(response.headers),
+          body: response.body
+        },
+        recorded_at: new Date().toISOString()
+      }
+
+      if (body && normalized !== 'GET') {
+        fixture.request.body = body
+      }
+
+      const filePath = path.join(this.fixturesDir, `${key}.json`)
+      await fs.promises.writeFile(filePath, JSON.stringify(fixture, null, 2))
+
+      logger.debug(`[pz-mock] Recorded fixture: ${normalized} ${url} → ${filePath}`)
+    } catch (error) {
+      logger.error(`[pz-mock] Failed to write fixture`, { url, error })
+    }
+  }
+
+  async read(
+    method: string,
+    url: string,
+    body?: any
+  ): Promise<{ found: boolean; fixture?: FixtureData }> {
+    try {
+      const key = this.generateKey(method, url, body)
+      const filePath = path.join(this.fixturesDir, `${key}.json`)
+
+      const raw = await fs.promises.readFile(filePath, 'utf-8')
+      const fixture = JSON.parse(raw) as FixtureData
+
+      logger.debug(`[pz-mock] Replaying fixture: ${method} ${url} → ${key}`)
+      return { found: true, fixture }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        logger.warn(`[pz-mock] No fixture found: ${method} ${url}`)
+        return { found: false }
+      }
+      logger.error(`[pz-mock] Failed to read fixture`, { url, error })
+      return { found: false }
+    }
+  }
+}
+
+export const fixtureManager = new FixtureManager()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "2.0.6-rc.0",
+  "version": "2.0.6-rc.2",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -19,11 +19,10 @@
   "dependencies": {
     "@mongodb-js/zstd": "^2.0.1",
     "@neshca/cache-handler": "1.9.0",
-    "@opentelemetry/exporter-trace-otlp-http": "0.46.0",
-    "@opentelemetry/resources": "1.19.0",
-    "@opentelemetry/sdk-node": "0.46.0",
-    "@opentelemetry/sdk-trace-node": "1.19.0",
-    "@opentelemetry/semantic-conventions": "1.19.0",
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/context-async-hooks": "^2.5.0",
+    "@opentelemetry/core": "^2.5.0",
+    "@opentelemetry/sdk-trace-base": "^2.5.0",
     "@reduxjs/toolkit": "1.9.7",
     "@sentry/nextjs": "10.39.0",
     "cross-spawn": "7.0.3",
@@ -37,19 +36,17 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.6-rc.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.6-rc.2",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",
     "@types/jest": "29.5.14",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
     "babel-jest": "29.7.0",
-    "eslint": "8.56.0",
+    "eslint": "9.39.4",
     "eslint-config-next": "16.2.4",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "10.1.1",
     "jest": "29.7.0",
     "ts-jest": "29.3.2",
     "typescript": "5.9.3"

package/redux/actions.ts

@@ -3,6 +3,7 @@ export * from './reducers/root';
 export * from './reducers/header';
 export * from './reducers/checkout';
 export * from './reducers/config';
+export * from './reducers/toast';
 
 // Import RTK Query APIs
 import { basketApi } from '../data/client/basket';

package/redux/middlewares/checkout.ts

@@ -26,7 +26,7 @@ import {
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
-import { CheckoutContext, PreOrder } from '../../types';
+import { CheckoutContext, MiddlewareAction, PreOrder } from '../../types';
 import { getCookie } from '../../utils';
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../../localization';
@@ -114,8 +114,15 @@ export const contextListMiddleware: Middleware = ({
     const { isMobileApp, userPhoneNumber } = getState().root;
     const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
+    const act = action as MiddlewareAction;
 
     if (result?.payload?.context_list) {
+      const endpointName = act.meta?.arg?.endpointName;
+      const isBinNumberResponse = endpointName === 'setBinNumber';
+      const hasCardTypeInContextList = result.payload.context_list.some(
+        (ctx) => ctx.page_context.card_type
+      );
+
       result.payload.context_list.forEach((context) => {
         const redirectUrl = context.page_context.redirect_url;
         const isIframe = context.page_context.is_iframe ?? false;
@@ -231,15 +238,24 @@ export const contextListMiddleware: Middleware = ({
 
           if (context.page_context.card_type) {
             dispatch(setCardType(context.page_context.card_type));
-          } else if (isCreditCardPayment) {
+          } else if (
+            isCreditCardPayment &&
+            isBinNumberResponse &&
+            !hasCardTypeInContextList
+          ) {
             dispatch(setCardType(null));
+            dispatch(setInstallmentOptions([]));
           }
 
           if (
             context.page_context.installments &&
             preOrder?.payment_option?.payment_type !== 'masterpass_rest'
           ) {
-            if (!isCreditCardPayment || context.page_context.card_type) {
+            if (
+              !isCreditCardPayment ||
+              context.page_context.card_type ||
+              hasCardTypeInContextList
+            ) {
               dispatch(
                 setInstallmentOptions(context.page_context.installments)
               );

package/redux/reducers/index.ts

@@ -2,6 +2,7 @@ import rootReducer from './root';
 import checkoutReducer from './checkout';
 import configReducer from './config';
 import headerReducer from './header';
+import toastReducer from './toast';
 import widgetReducer from './widget';
 import { api } from '../../data/client/api';
 
@@ -20,6 +21,7 @@ const reducers = {
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
+  toast: toastReducer,
   widget: widgetReducer,
   masterpass: masterpassReducer || fallbackReducer,
   otp: otpReducer || fallbackReducer,

package/redux/reducers/toast.ts

@@ -0,0 +1,70 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export type ToastPosition =
+  | 'top-right'
+  | 'top-left'
+  | 'top-center'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'bottom-center'
+
+export interface Toast {
+  id: string
+  type: ToastType
+  message: string
+  duration?: number
+  position?: ToastPosition
+  icon?: string
+  className?: string
+  dismissible?: boolean
+  action?: {
+    label: string
+    actionId: string
+  }
+}
+
+export type ToastInput = Omit<Toast, 'id'>
+
+export interface ToastState {
+  toasts: Toast[]
+}
+
+const MAX_TOASTS = 5
+
+const initialState: ToastState = {
+  toasts: []
+}
+
+const toastSlice = createSlice({
+  name: 'toast',
+  initialState,
+  reducers: {
+    addToast: {
+      reducer: (state, action: PayloadAction<Toast>) => {
+        state.toasts.push(action.payload)
+        if (state.toasts.length > MAX_TOASTS) {
+          state.toasts.shift()
+        }
+      },
+      prepare: (toast: ToastInput) => ({
+        payload: {
+          ...toast,
+          id: `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+          duration: toast.duration ?? 4000,
+          position: toast.position ?? 'top-right',
+          dismissible: toast.dismissible ?? true
+        }
+      })
+    },
+    removeToast: (state, action: PayloadAction<string>) => {
+      const idx = state.toasts.findIndex((t) => t.id === action.payload)
+      if (idx !== -1) state.toasts.splice(idx, 1)
+    }
+  }
+})
+
+export const { addToast, removeToast } = toastSlice.actions
+
+export default toastSlice.reducer

package/types/commerce/flatpage.ts

@@ -1,7 +1,14 @@
+export interface FlatPagePrettyUrl {
+  pk: number;
+  url: string;
+  language: string;
+}
+
 export interface FlatPage {
   flat_page: {
     url: string;
     title: string;
     content: string;
+    flatpageprettyurl_set?: FlatPagePrettyUrl[];
   };
 }

package/utils/app-fetch.ts

@@ -3,6 +3,7 @@ import logger from '../utils/log';
 import { headers, cookies } from 'next/headers';
 import { ServerVariables } from './server-variables';
 import { notFound } from 'next/navigation';
+import { fixtureManager, MockMode } from '../lib/fixture-manager';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -42,6 +43,23 @@ const appFetch = async <T>({
     }
 
     const requestURL = `${decodeURIComponent(commerceUrl)}${url}`;
+    const mockMode = process.env.PZ_MOCK;
+    const method = init.method?.toUpperCase() ?? 'GET';
+
+    // Replay mode: serve from fixtures without hitting the API
+    if (mockMode === MockMode.REPLAY) {
+      const { found, fixture } = await fixtureManager.read(method, String(url), init.body);
+
+      if (found) {
+        status = fixture.response.status;
+        response = (responseType === FetchResponseType.JSON
+          ? fixture.response.body
+          : JSON.stringify(fixture.response.body)) as T;
+        return response;
+      }
+
+      return undefined;
+    }
 
     init.headers = {
       cookie: nextCookies.toString(),
@@ -67,6 +85,15 @@ const appFetch = async <T>({
       response = (await req.text()) as unknown as T;
     }
 
+    // Record mode: save response to fixtures
+    if (mockMode === MockMode.RECORD) {
+      await fixtureManager.write(method, String(url), init.body, {
+        status: req.status,
+        headers: fixtureManager.extractHeaders(req.headers),
+        body: response
+      });
+    }
+
     logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
     const logType = status === 500 ? 'fatal' : 'error';

package/utils/format-error-message.ts

@@ -0,0 +1,7 @@
+export const formatErrorMessage = (errors: any): string => {
+  if (typeof errors === 'string') return errors
+  if (Array.isArray(errors)) return errors.join(', ')
+  if (typeof errors === 'object' && errors !== null)
+    return Object.values(errors).flat().join(', ')
+  return 'An error occurred'
+}

package/utils/index.ts

@@ -9,6 +9,7 @@ export * from './generate-commerce-search-params';
 export * from './get-currency-label';
 export * from './pz-segments';
 export * from './get-checkout-path';
+export * from './format-error-message';
 
 export function getCookie(name: string) {
   if (typeof document === 'undefined') {
@@ -62,7 +63,13 @@ export function setCookie(
 export function removeCookie(name: string) {
   const date = 'Thu, 01 Jan 1970 00:00:00 UTC';
 
-  document.cookie = `${name}=; expires=${date}; path=/;`;
+  const domain =
+    settings.localization.localeUrlStrategy === LocaleUrlStrategy.Subdomain
+      ? getRootHostname(document.location.href)
+      : null;
+
+  const domainStr = domain ? ` domain=${domain};` : '';
+  document.cookie = `${name}=; expires=${date}; path=/;${domainStr}`;
 }
 
 /**

package/with-pz-config.js

@@ -12,7 +12,8 @@ const defaultConfig = {
   output: 'standalone',
   compress: false,
   env: {
-    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN,
+    ...(process.env.PZ_MOCK && { PZ_MOCK: process.env.PZ_MOCK })
   },
   images: {
     remotePatterns: [