@akinon/next 2.0.0-beta.9 → 2.0.0

package/utils/index.ts

@@ -1,11 +1,14 @@
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../localization';
-import { CDNOptions, ClientRequestOptions, Locale } 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 ?? '/'}`);
+
+  if (options.secure) {
+    cookieParts.push('secure');
+  }
 
-  document.cookie =
-    name + '=' + value + '; expires=' + date.toUTCString() + '; path=/';
+  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,23 +181,28 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
   return `${rootWithoutOptions}${options}${fileExtension}`;
 }
 
-const { locales, localeUrlStrategy, defaultLocaleValue } =
-  settings.localization;
-
-const isLocaleExcluded = (locale: Locale) =>
-  ![LocaleUrlStrategy.ShowAllLocales, LocaleUrlStrategy.Subdomain].includes(
-    localeUrlStrategy
-  ) && locale.value !== defaultLocaleValue;
-
 export const urlLocaleMatcherRegex = new RegExp(
-  `^/(${locales
-    .filter((l) => !isLocaleExcluded(l))
+  `^/(${settings.localization.locales
+    .filter((l) =>
+      ![LocaleUrlStrategy.ShowAllLocales, LocaleUrlStrategy.Subdomain].includes(
+        settings.localization.localeUrlStrategy
+      )
+        ? l.value !== settings.localization.defaultLocaleValue
+        : l
+    )
     .map((l) => l.value)
     .join('|')})(?=/|$)`
 );
 
 export const getPosError = () => {
-  const error = JSON.parse(getCookie('pz-pos-error') ?? '{}');
+  const cookieValue = getCookie('pz-pos-error');
+  let decoded: string;
+  try {
+    decoded = cookieValue ? decodeURIComponent(cookieValue) : '{}';
+  } catch {
+    decoded = cookieValue ?? '{}';
+  }
+  const error = JSON.parse(decoded);
 
   // delete 'pz-pos-error' cookie when refreshing or closing page
   window.addEventListener('beforeunload', () => {
@@ -178,6 +212,23 @@ export const getPosError = () => {
   return error;
 };
 
+export const checkPaymentWillRedirect = (response: {
+  context_list?: Array<{
+    page_name: string;
+    page_context?: { context_data?: { redirect_url?: string } };
+  }>;
+  redirect_url?: string;
+  errors?: unknown;
+}): boolean => {
+  if (!response) return false;
+
+  const hasThankYouPage = response.context_list?.some(
+    (c) => c.page_name === 'ThankYouPage'
+  );
+
+  return Boolean(hasThankYouPage || response.redirect_url);
+};
+
 export const urlSchemes = [
   'http',
   'tel:',

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

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

package/utils/override-middleware.ts

@@ -10,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
+  };
+}

package/utils/redirect-ignore.ts

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

package/utils/redirect.ts

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

package/utils/redirection-iframe.ts

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

package/utils/widget-styles.ts

@@ -0,0 +1,107 @@
+const kebabize = (str: string) => {
+  return str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? '-' : '') + $.toLowerCase()
+  );
+};
+
+const formatCssValue = (value: string | number) => {
+  return /^\d+$/.test(value.toString()) ? `${value}px` : value;
+};
+
+interface NodeProperties {
+  style?: Record<string, any>;
+  parent_id?: string;
+  type?: string;
+  tag?: string;
+  breakpoints?: any[];
+  dataSources?: any[];
+  is_slider?: boolean;
+  iteratingNode?: string;
+  iteratorValue?: string;
+  selectedDataSourceId?: string;
+  order?: number;
+}
+
+interface Node {
+  key: string;
+  properties: NodeProperties;
+  label?: string;
+  data_type?: string;
+}
+
+const processNode = (node: Node, selector = '', styles: string[] = []) => {
+  const { key, properties } = node;
+  const { style } = properties;
+
+  if (key && style) {
+    const baseStyles: Record<string, any> = {};
+    const breakpointStyles: Record<string, Record<string, any>> = {};
+
+    Object.entries(style).forEach(([prop, val]) => {
+      if (typeof val === 'object') {
+        breakpointStyles[prop] = val;
+      } else {
+        baseStyles[prop] = val;
+      }
+    });
+
+    const baseCssRules = Object.entries(baseStyles)
+      .map(([prop, val]) => `${kebabize(prop)}: ${formatCssValue(val)};`)
+      .join(' ');
+
+    if (baseCssRules) {
+      styles.push(`${selector} { ${baseCssRules} }`);
+    }
+
+    Object.keys(breakpointStyles)
+      .map((bp) => parseInt(bp, 10))
+      .sort((a, b) => a - b)
+      .forEach((bp) => {
+        const bpCssRules = Object.entries(breakpointStyles[bp])
+          .map(([prop, val]) => `${kebabize(prop)}: ${formatCssValue(val)};`)
+          .join(' ');
+
+        if (bpCssRules) {
+          styles.push(
+            `@media only screen and (min-width: ${bp}px) { ${selector} { ${bpCssRules} } }`
+          );
+        }
+      });
+  }
+
+  return styles;
+};
+
+const componentToCss = (components: Record<string, Node>) => {
+  const styles: string[] = [];
+  const componentsById: Record<string, Node> = {};
+
+  Object.values(components).forEach((component) => {
+    componentsById[component.key] = component;
+  });
+
+  const addStylesForComponent = (component: Node) => {
+    const selector = `[data-id="${component.key}"]`;
+    processNode(component, selector, styles);
+
+    Object.values(componentsById)
+      .filter((child) => child.properties.parent_id === component.key)
+      .forEach(addStylesForComponent);
+  };
+
+  Object.values(componentsById)
+    .filter((component) => !component.properties?.parent_id)
+    .forEach(addStylesForComponent);
+
+  return styles.join(' ');
+};
+
+export const generateWidgetStyles = (widgetSchemas: Record<string, Node>[]) => {
+  return widgetSchemas
+    .filter((schema) => Object.keys(schema).length > 0)
+    .map((data) => componentToCss(data))
+    .join('\n');
+};
+
+export type { Node, NodeProperties };

package/with-pz-config.js

@@ -1,19 +1,22 @@
+const path = require('path');
 const pzPlugins = require('./plugins');
 const deepMerge = require('./utils/deep-merge');
 
 /** @type {import('next').NextConfig} */
 const defaultConfig = {
-  experimental: { instrumentationHook: true },
   reactStrictMode: true,
-  transpilePackages: ['@akinon/next', ...pzPlugins.map((p) => `@akinon/${p}`)],
+  transpilePackages: ['@akinon/next', '@akinon/pz-theme', ...pzPlugins.map((p) => `@akinon/${p}`)],
   skipTrailingSlashRedirect: true,
   poweredByHeader: false,
   cacheMaxMemorySize: 0,
+  output: 'standalone',
+  compress: false,
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
   },
   images: {
     remotePatterns: [
+      //It has to be like this for security reasons
       {
         protocol: 'https',
         hostname: '**.akinoncloud.com'
@@ -46,13 +49,19 @@ const defaultConfig = {
           {
             key: 'Content-Security-Policy',
             value:
-              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com"
+              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com http://localhost:5174 localhost:5174"
           }
         ]
       }
     ];
   },
   webpack: (config, options) => {
+    // Alias 'redux/store' to the app's local redux/store module to prevent
+    // collision with the npm 'redux' package's exports field
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'redux/store': path.resolve(process.cwd(), 'src/redux/store')
+    };
     config.resolve.fallback = {
       ...config.resolve.fallback,
       ...pzPlugins.reduce((acc, plugin) => {
@@ -61,11 +70,15 @@ const defaultConfig = {
       }, {}),
       translations: false
     };
+    // Ensure webpack can resolve deps from the app's node_modules when
+    // compiling transpiled packages (e.g. @akinon/next) whose imports
+    // may not be hoisted to the monorepo root.
+    const appNodeModules = path.resolve(process.cwd(), 'node_modules');
+    if (!config.resolve.modules.includes(appNodeModules)) {
+      config.resolve.modules.push(appNodeModules);
+    }
     return config;
-  },
-  sentry: {
-    hideSourceMaps: true
-  } // TODO: This section will be reviewed again in the Sentry 8 update.
+  }
 };
 
 const withPzConfig = (