@akinon/next 2.0.0-beta.2 → 2.0.0-beta.20

package/data/server/special-page.ts

@@ -1,6 +1,6 @@
 import { Cache, CacheKey } from '../../lib/cache';
 import { category } from '../urls';
-import { GetCategoryResponse } from '../../types';
+import { GetCategoryResponse, SearchParams } from '../../types';
 import { generateCommerceSearchParams } from '../../utils';
 import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
@@ -9,7 +9,7 @@ const getSpecialPageDataHandler = (
   pk: number,
   locale: string,
   currency: string,
-  searchParams: URLSearchParams,
+  searchParams: SearchParams,
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -42,7 +42,7 @@ export const getSpecialPageData = async ({
   pk: number;
   locale?: string;
   currency?: string;
-  searchParams: URLSearchParams;
+  searchParams: SearchParams;
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
@@ -50,7 +50,8 @@ export const getSpecialPageData = async ({
     locale,
     getSpecialPageDataHandler(pk, locale, currency, searchParams, headers),
     {
-      expire: 300
+      expire: 300,
+      compressed: true
     }
   );
 };

package/data/server/widget.ts

@@ -1,34 +1,119 @@
 import { Cache, CacheKey } from '../../lib/cache';
 import 'server-only';
-import { CacheOptions, WidgetResultType } from '../../types';
+import { CacheOptions, WidgetResultType, WidgetSchemaType } from '../../types';
 import appFetch from '../../utils/app-fetch';
 import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
 
 const getWidgetDataHandler =
-  (slug: string, locale: string, currency: string) => async () => {
+  (
+    slug: string,
+    locale: string,
+    currency: string,
+    headers?: Record<string, string>
+  ) =>
+  async () => {
     if (!slug) {
       return null;
     }
 
-    return await appFetch({ url: widgets.getWidget(slug), locale, currency });
+    return await appFetch({
+      url: widgets.getWidget(slug),
+      locale,
+      currency,
+      init: {
+        headers
+      }
+    });
+  };
+
+const getWidgetSchemaDataHandler =
+  (widgetSlug: string, locale: string, currency: string) => async () => {
+    if (!widgetSlug) {
+      return null;
+    }
+
+    return await appFetch({
+      url: widgets.getWidgetSchema(widgetSlug),
+      locale,
+      currency
+    });
   };
 
 export const getWidgetData = async <T>({
   slug,
   locale = ServerVariables.locale,
   currency = ServerVariables.currency,
-  cacheOptions
+  cacheOptions,
+  headers
 }: {
   slug: string;
   locale?: string;
   currency?: string;
   cacheOptions?: CacheOptions;
+  headers?: Record<string, string>;
 }): Promise<WidgetResultType<T>> => {
   return Cache.wrap(
     CacheKey.Widget(slug),
     locale,
-    getWidgetDataHandler(slug, locale, currency),
+    getWidgetDataHandler(slug, locale, currency, headers),
+    {
+      compressed: true,
+      ...cacheOptions
+    }
+  );
+};
+
+const getCollectionWidgetDataHandler =
+  (slug: string, locale: string, currency: string) => async () => {
+    if (!slug) {
+      return null;
+    }
+
+    return await appFetch({
+      url: widgets.getCollectionWidget(slug),
+      locale,
+      currency
+    });
+  };
+
+export const getCollectionWidgetData = async <T>({
+  slug,
+  locale = ServerVariables.locale,
+  currency = ServerVariables.currency,
+  cacheOptions
+}: {
+  slug: string;
+  locale?: string;
+  currency?: string;
+  cacheOptions?: CacheOptions;
+}): Promise<WidgetResultType<T>> => {
+  return Cache.wrap(
+    CacheKey.Widget(`collection:${slug}`),
+    locale,
+    getCollectionWidgetDataHandler(slug, locale, currency),
+    {
+      compressed: true,
+      ...cacheOptions
+    }
+  );
+};
+
+export const getWidgetSchemaData = async <T>({
+  widgetSlug,
+  locale = ServerVariables.locale,
+  currency = ServerVariables.currency,
+  cacheOptions
+}: {
+  widgetSlug: string;
+  locale?: string;
+  currency?: string;
+  cacheOptions?: CacheOptions;
+}): Promise<WidgetSchemaType<T>> => {
+  return Cache.wrap(
+    CacheKey.WidgetSchema(widgetSlug),
+    locale,
+    getWidgetSchemaDataHandler(widgetSlug, locale, currency),
     cacheOptions
   );
 };

package/data/urls.ts

@@ -74,7 +74,10 @@ export const address = {
 
 export const basket = {
   getBasket: '/baskets/basket/',
+  getMiniBasket: '/baskets/basket/mini/',
   getBasketDetail: (namespace: string) => `/baskets/basket/${namespace}/`,
+  getMiniBasketDetail: (namespace: string) =>
+    `/baskets/basket/${namespace}/mini/`,
   getAllBaskets: '/baskets/basket-list/',
   removeBasket: (pk: number) => `/baskets/basket-list/${pk}/`,
   selectMainBasket: (pk: number) => `/baskets/basket-list/id/${pk}/main/`,
@@ -137,7 +140,10 @@ export const checkout = {
     '/orders/checkout/?page=AttributeBasedShippingOptionSelectionPage',
   deliveryBagsPage: '/orders/checkout/?page=DeliveryBagsPage',
   setOrderSelectionPage: '/orders/checkout/?page=OrderSelectionPage',
-  loyaltyCardPage: '/orders/checkout/?page=LoyaltyCardPage'
+  loyaltyCardPage: '/orders/checkout/?page=LoyaltyCardPage',
+  sendSmsPage: '/orders/checkout/?page=SendSmsPage',
+  verifySmsPage: '/orders/checkout/?page=VerifySmsPage',
+  saveSampleProducts: '/orders/checkout/?page=SampleProductPage'
 };
 
 export const flatpage = {
@@ -160,7 +166,8 @@ export const misc = {
       parent ? `&parent=${parent}` : ''
     }`,
   cmsSeo: (slug: string | string[]) => `/cms/seo/?url=${slug ? slug : '/'}`,
-  setCurrency: '/users/activate-currency/'
+  setCurrency: '/users/activate-currency/',
+  bukalemunImageUrl: (params: string) => `/bukalemun/?${params}`
 };
 
 export const product = {
@@ -174,7 +181,9 @@ export const product = {
   slug: (slug: string) => `/${slug}/`,
   categoryUrl: (pk: number) => `/products/${pk}/category_nodes/?limit=1`,
   breadcrumbUrl: (menuitemmodel: string) =>
-    `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`
+    `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
+  bundleProduct: (productPk: string, queryString: string) =>
+    `/bundle-product/${productPk}/?${queryString}`
 };
 
 export const wishlist = {
@@ -234,11 +243,13 @@ export const b2b = {
 };
 
 export const widgets = {
-  getWidget: (slug: string) => `/widgets/${slug}/`
+  getWidget: (slug: string) => `/widgets/${slug}/`,
+  getWidgetSchema: (widgetSlug: string) => `/widgets/${widgetSlug}/schema/`,
+  getCollectionWidget: (slug: string) => `/product_collection_widgets/${slug}/`
 };
 
 export const form = {
-  getForm: (pk: number) => `/forms/${pk}/generate/`
+  getForm: (pk: number) => `/forms/${pk}/generate`
 };
 
 const URLS = {

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

@@ -1,4 +1,4 @@
-import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
+import { ResolvedLayoutProps, ResolvedPageProps, ResolvedRootLayoutProps } from '../../types';
 import React, { JSX } from 'react';
 
 type SegmentType = 'client-root' | 'layout' | 'page';
@@ -8,7 +8,7 @@ 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[]>,

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,50 @@ 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;
+
+    let componentProps = {
+      ...props,
+      params: resolvedParams,
+      searchParams: resolvedSearchParams,
+      ...('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 +75,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 +97,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 +117,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,3 +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);