@akinon/next 2.0.0-beta.9 → 2.0.0

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

@@ -1,10 +1,20 @@
-import settings from 'settings';
 import { JSX } from 'react';
-import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
+import settings from 'settings';
+import {
+  ResolvedPageProps,
+  ResolvedLayoutProps,
+  ResolvedRootLayoutProps
+} from '../../types';
 import { redirect } from 'next/navigation';
 import { ServerVariables } from '../../utils/server-variables';
 import { ROUTES } from 'routes';
 import logger from '../../utils/log';
+import {
+  decodePzValue,
+  getPzSegmentsConfig,
+  getBuiltInSegments,
+  isLegacyMode
+} from '../../utils/pz-segments';
 
 type SegmentType = 'root-layout' | 'layout' | 'page';
 
@@ -13,27 +23,66 @@ interface SegmentDefaultsOptions {
 }
 
 export const withSegmentDefaults =
-  <T extends PageProps | LayoutProps | RootLayoutProps>(
+  <T extends ResolvedPageProps | ResolvedLayoutProps | ResolvedRootLayoutProps>(
     Component: (
       props?: T
     ) => null | JSX.Element | Promise<JSX.Element> | Promise<JSX.Element[]>,
     options: SegmentDefaultsOptions
   ) =>
-  async (props: T) => {
-    let componentProps = { ...props };
-
-    const { locale, currency } = await props.params;
+  async (props: any) => {
+    const resolvedParams = await props.params;
+    const resolvedSearchParams = props.searchParams
+      ? await props.searchParams
+      : undefined;
+
+    // Normalize Next 16's raw Record<string, string | string[]> shape into a
+    // URLSearchParams instance so v1 brands (which expect URLSearchParams) can
+    // call .get/.has/etc without runtime breakage.
+    const normalizedSearchParams =
+      resolvedSearchParams instanceof URLSearchParams
+        ? resolvedSearchParams
+        : new URLSearchParams(
+            Object.entries(resolvedSearchParams ?? {}).flatMap(([k, v]) =>
+              Array.isArray(v)
+                ? v.map((item): [string, string] => [k, String(item)])
+                : v != null
+                  ? ([[k, String(v)]] as [string, string][])
+                  : []
+            )
+          );
+
+    let componentProps = {
+      ...props,
+      params: resolvedParams,
+      searchParams: normalizedSearchParams,
+      ...('children' in props ? { children: (props as any).children } : {})
+    } as T;
+
+    let localeValue: string;
+    let currencyValue: string;
+
+    if (isLegacyMode(settings)) {
+      localeValue = resolvedParams.locale;
+      currencyValue = resolvedParams.currency;
+    } else {
+      const pzConfig = getPzSegmentsConfig(settings);
+      const parsed = decodePzValue(resolvedParams.pz, pzConfig);
+      const builtIn = getBuiltInSegments(parsed, settings);
+      localeValue = builtIn.locale;
+      currencyValue = builtIn.currency;
+    }
 
     if (options.segmentType === 'root-layout') {
       componentProps = (await addRootLayoutProps(
-        componentProps as RootLayoutProps
+        componentProps as ResolvedRootLayoutProps,
+        localeValue
       )) as T;
 
       checkRedisVariables();
     }
 
-    ServerVariables.locale = await locale;
-    ServerVariables.currency = await currency;
+    ServerVariables.locale = localeValue;
+    ServerVariables.currency = currencyValue;
 
     return await (
       <>
@@ -42,12 +91,21 @@ export const withSegmentDefaults =
     );
   };
 
-const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
-  const params = await componentProps.params;
-
-  if (
-    params.commerce !== encodeURIComponent(decodeURI(settings.commerceUrl)) ||
-    !settings.localization.locales.find((l) => l.value === params.locale)
+const addRootLayoutProps = async (
+  componentProps: ResolvedRootLayoutProps,
+  localeValue: string
+) => {
+  if (isLegacyMode(settings)) {
+    const params = componentProps.params;
+    if (
+      params.commerce !==
+        encodeURIComponent(decodeURI(settings.commerceUrl)) ||
+      !settings.localization.locales.find((l) => l.value === localeValue)
+    ) {
+      return redirect(ROUTES.HOME);
+    }
+  } else if (
+    !settings.localization.locales.find((l) => l.value === localeValue)
   ) {
     return redirect(ROUTES.HOME);
   }
@@ -55,12 +113,12 @@ const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
   const { getTranslations } = settings.useOptimizedTranslations
     ? require('translations')
     : require('../../utils/server-translation');
-  const translations = await getTranslations(params.locale);
+  const translations = await getTranslations(localeValue);
 
   componentProps.translations = translations;
 
   const locale = settings.localization.locales.find(
-    (l) => l.value === params.locale
+    (l) => l.value === localeValue
   );
   const [isoCode] = locale.value.split('-');
 
@@ -75,10 +133,13 @@ const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
 const checkRedisVariables = () => {
   const requiredVariableValues = [
     process.env.CACHE_HOST,
-    process.env.CACHE_PORT,
-    process.env.CACHE_SECRET
+    process.env.CACHE_PORT
   ];
 
+  if (!settings.usePrettyUrlRoute) {
+    requiredVariableValues.push(process.env.CACHE_SECRET);
+  }
+
   if (
     !requiredVariableValues.every((v) => v) &&
     process.env.NODE_ENV === 'production'

package/hooks/index.ts

@@ -10,4 +10,7 @@ export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
 export * from './use-pagination';
 export * from './use-message-listener';
+export * from './use-logger';
+export * from './use-logger-context';
 export * from './use-sentry-uncaught-errors';
+export * from './use-pz-params';

package/hooks/use-localization.ts

@@ -25,19 +25,33 @@ export const useLocalization = () => {
    * @param locale Locale value defined in the settings.
    */
   const setLocale = (locale: string) => {
-    const localePath =
-      locale === defaultLocaleValue &&
-      localeUrlStrategy !== LocaleUrlStrategy.ShowAllLocales
-        ? ''
-        : `/${locale}`;
+    const { protocol, hostname, port, search, pathname } = location;
+    const pathnameWithoutLocale = pathname.replace(urlLocaleMatcherRegex, '');
 
-    const pathnameWithoutLocale = location.pathname.replace(
-      urlLocaleMatcherRegex,
-      ''
-    );
+    let targetUrl;
+
+    if (localeUrlStrategy === LocaleUrlStrategy.Subdomain) {
+      const hostParts = hostname.split('.');
+      const subDomain = hostParts[0];
+      const isSubdomainLocale = locales.some((loc) => loc.value === subDomain);
+      const baseDomain = isSubdomainLocale
+        ? hostParts.slice(1).join('.')
+        : hostname;
+
+      const formattedPort = port ? `:${port}` : '';
+
+      targetUrl = `${protocol}//${locale}.${baseDomain}${formattedPort}${pathnameWithoutLocale}${search}`;
+    } else {
+      const shouldHideLocale =
+        locale === defaultLocaleValue &&
+        localeUrlStrategy !== LocaleUrlStrategy.ShowAllLocales;
+      const localePath = shouldHideLocale ? '' : `/${locale}`;
+
+      targetUrl = `${localePath}${pathnameWithoutLocale}${search}`;
+    }
 
     // router.push is not used because reloading the page also clears the client side cache.
-    location.href = `${localePath}${pathnameWithoutLocale}${location.search}`;
+    location.href = targetUrl;
   };
 
   /**

package/hooks/use-logger-context.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useMemo,
+  useRef,
+  useEffect
+} from 'react';
+import { useLogger, LogEntry, LogLevel } from './use-logger';
+
+const LOG_LEVELS: LogLevel[] = ['info', 'warn', 'error'];
+
+interface LoggerContextType {
+  logs: LogEntry[];
+  isVisible: boolean;
+  toggleVisibility: () => void;
+  clearLogs: () => void;
+  info: (message: string, payload?: any) => string;
+  warn: (message: string, payload?: any) => string;
+  error: (message: string, payload?: any) => string;
+  isDevelopment: boolean;
+  hasError: boolean;
+  hasWarning: boolean;
+}
+
+const LoggerContext = createContext<LoggerContextType | undefined>(undefined);
+
+let globalAddLogFunction:
+  | ((level: string, message: string, payload?: any) => string)
+  | null = null;
+
+// temporary queue for logs generated before the logger is initialized
+const pendingLogs: Array<{ level: string; message: string; payload?: any }> =
+  [];
+
+const createLogFunction =
+  (level: LogLevel) => (message: string, payload?: any) => {
+    if (
+      typeof window !== 'undefined' &&
+      process.env.NODE_ENV === 'development'
+    ) {
+      try {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(level, message, payload);
+        } else {
+          pendingLogs.push({ level, message, payload });
+        }
+      } catch (err) {
+        // prevent errors
+      }
+    }
+
+    return '';
+  };
+
+const stableLogger = LOG_LEVELS.reduce((logger, level) => {
+  logger[level] = createLogFunction(level);
+
+  return logger;
+}, {} as Record<LogLevel, (message: string, payload?: any) => string>);
+
+export const LoggerProvider = ({ children }: { children: ReactNode }) => {
+  const loggerHook = useLogger();
+
+  const addLogRef = useRef<
+    (level: string, message: string, payload?: any) => string
+  >((level, message, payload) => {
+    if (LOG_LEVELS.includes(level as LogLevel)) {
+      return loggerHook[level as LogLevel](message, payload);
+    }
+    return '';
+  });
+
+  useEffect(() => {
+    globalAddLogFunction = addLogRef.current;
+
+    if (pendingLogs.length > 0) {
+      pendingLogs.forEach((log) => {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(log.level, log.message, log.payload);
+        }
+      });
+
+      pendingLogs.length = 0;
+    }
+
+    return () => {
+      globalAddLogFunction = null;
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => loggerHook,
+    [loggerHook.logs, loggerHook.isVisible, loggerHook.isDevelopment] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return (
+    <LoggerContext.Provider value={contextValue}>
+      {children}
+    </LoggerContext.Provider>
+  );
+};
+
+export const useLoggerContext = () => {
+  const context = useContext(LoggerContext);
+  if (context === undefined) {
+    throw new Error('useLoggerContext must be used within a LoggerProvider');
+  }
+  return context;
+};
+
+export const devLogger = stableLogger;

package/hooks/use-logger.ts

@@ -0,0 +1,92 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export interface LogEntry {
+  id: string;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+  payload?: any;
+}
+
+const LOG_LEVELS: LogEntry['level'][] = ['info', 'warn', 'error'];
+
+export function useLogger() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+  const logsRef = useRef<LogEntry[]>([]);
+  const [isDevelopment, setIsDevelopment] = useState(false);
+
+  useEffect(() => {
+    setIsDevelopment(
+      process.env.NODE_ENV === 'development' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1'
+    );
+  }, []);
+
+  useEffect(() => {
+    logsRef.current = logs;
+  }, [logs]);
+
+  const addLog = useCallback(
+    (level: LogEntry['level'], message: string, payload?: any) => {
+      const newLog: LogEntry = {
+        id: Math.random().toString(36).substring(2, 9),
+        level,
+        message,
+        timestamp: new Date(),
+        payload
+      };
+
+      setLogs((prevLogs) => [newLog, ...prevLogs]);
+
+      return newLog.id;
+    },
+    []
+  );
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible((prev) => !prev);
+  }, []);
+
+  const createLogMethod = useCallback(
+    (level: LogEntry['level']) => (message: string, payload?: any) =>
+      addLog(level, message, payload),
+    [addLog]
+  );
+
+  const logMethods = useMemo(
+    () =>
+      LOG_LEVELS.reduce((methods, level) => {
+        methods[level] = createLogMethod(level);
+        return methods;
+      }, {} as Record<LogEntry['level'], (message: string, payload?: any) => string>),
+    [createLogMethod]
+  );
+
+  const hasError = useMemo(
+    () => logs.some((log) => log.level === 'error'),
+    [logs]
+  );
+  const hasWarning = useMemo(
+    () => logs.some((log) => log.level === 'warn'),
+    [logs]
+  );
+
+  return {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    ...logMethods,
+    isDevelopment,
+    hasError,
+    hasWarning
+  };
+}

package/hooks/use-loyalty-availability.ts

@@ -0,0 +1,21 @@
+import { useAppSelector } from '../redux/hooks';
+
+export const useLoyaltyAvailability = () => {
+  const { paymentOptions, unavailablePaymentOptions } = useAppSelector(
+    (state) => state.checkout
+  );
+
+  const hasLoyaltyInAvailable = paymentOptions.some(
+    (option) =>
+      option.payment_type === 'loyalty_money' ||
+      option.payment_type === 'loyalty'
+  );
+
+  const hasLoyaltyInUnavailable = unavailablePaymentOptions.some(
+    (option) =>
+      option.payment_type === 'loyalty_money' ||
+      option.payment_type === 'loyalty'
+  );
+
+  return hasLoyaltyInAvailable || hasLoyaltyInUnavailable;
+};

package/hooks/use-payment-options.ts

@@ -21,7 +21,8 @@ export const usePaymentOptions = () => {
     credit_payment: 'pz-credit-payment',
     masterpass: 'pz-masterpass',
     saved_card: 'pz-saved-card',
-    gpay: 'pz-gpay'
+    gpay: 'pz-gpay',
+    masterpass_rest: 'pz-masterpass-rest'
   };
 
   const isInitialTypeIncluded = (type: string) => initialTypes.has(type);

package/hooks/use-pz-params.ts

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

package/hooks/use-router.ts

@@ -5,6 +5,24 @@ import { urlLocaleMatcherRegex } from '../utils';
 import { useLocalization } from './use-localization';
 import { LocaleUrlStrategy } from '../localization';
 
+const isNavigableHref = (href: string) => {
+  if (!href || typeof href !== 'string') return false;
+
+  const trimmedHref = href.trim();
+  if (!trimmedHref) return false;
+  if (trimmedHref === '#') return true;
+  if (trimmedHref.startsWith('mailto:') || trimmedHref.startsWith('tel:')) {
+    return true;
+  }
+
+  try {
+    new URL(trimmedHref, 'http://localhost');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 export const useRouter = () => {
   const { locale, locales, localeUrlStrategy, defaultLocaleValue } =
     useLocalization();
@@ -16,27 +34,43 @@ export const useRouter = () => {
     href: string,
     options?
   ) => {
-    if (href.startsWith('http')) {
-      return fn(href, options);
+    if (!isNavigableHref(href)) {
+      return fn('#', options);
+    }
+
+    const trimmedHref = href.trim();
+
+    if (
+      trimmedHref.startsWith('http') ||
+      trimmedHref.startsWith('//') ||
+      trimmedHref.startsWith('mailto:') ||
+      trimmedHref.startsWith('tel:') ||
+      trimmedHref.startsWith('#')
+    ) {
+      return fn(trimmedHref, options);
     }
 
-    const url = new URL(href, window.location.origin);
-    const pathnameWithoutLocale = url.pathname.replace(
-      urlLocaleMatcherRegex,
-      ''
-    );
-
-    url.pathname = `${
-      localeUrlStrategy === LocaleUrlStrategy.Subdomain ||
-      (locale === defaultLocale?.value &&
-        [LocaleUrlStrategy.HideDefaultLocale].includes(
-          localeUrlStrategy as LocaleUrlStrategy
-        ))
-        ? ''
-        : `/${locale}`
-    }${pathnameWithoutLocale}`;
-
-    return fn(url.href, options);
+    try {
+      const url = new URL(trimmedHref, window.location.origin);
+      const pathnameWithoutLocale = url.pathname.replace(
+        urlLocaleMatcherRegex,
+        ''
+      );
+
+      url.pathname = `${
+        localeUrlStrategy === LocaleUrlStrategy.Subdomain ||
+        (locale === defaultLocale?.value &&
+          [LocaleUrlStrategy.HideDefaultLocale].includes(
+            localeUrlStrategy as LocaleUrlStrategy
+          ))
+          ? ''
+          : `/${locale}`
+      }${pathnameWithoutLocale}`;
+
+      return fn(url.href, options);
+    } catch {
+      return fn('#', options);
+    }
   };
 
   return {

package/instrumentation/index.ts

@@ -3,7 +3,6 @@ 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,20 +1,2 @@
-import { NodeSDK } from '@opentelemetry/sdk-node';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
-import { Resource } from '@opentelemetry/resources';
-import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
-import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-node';
-
-const sdk = new NodeSDK({
-  resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'pz-next-app'
-  }),
-  spanProcessor: new SimpleSpanProcessor(
-    new OTLPTraceExporter({
-      url: `${
-        process.env.PZ_DASHBOARD_URL ?? 'http://localhost:3005'
-      }/api/traces`
-    })
-  )
-});
-
-sdk.start();
+// OpenTelemetry tracing is handled by Sentry.
+// Custom NodeSDK setup removed due to version incompatibility with Sentry 10's OpenTelemetry v2.x requirements.

package/jest.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const findBaseDir = require('./utils/find-base-dir');
+
+const baseDir = findBaseDir();
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  rootDir: path.resolve(__dirname),
+  testMatch: ['**/*.test.ts'],
+  testPathIgnorePatterns: [],
+  roots: [path.resolve(__dirname)],
+  transformIgnorePatterns: [],
+  moduleNameMapper: {
+    '^settings$': path.resolve(baseDir, 'src/settings.js')
+  },
+  transform: {
+    '^.+\\.(tsx?|jsx?|mjs?)$': [
+      'ts-jest',
+      {
+        tsconfig: path.resolve(__dirname, '__tests__/tsconfig.json')
+      }
+    ]
+  }
+};