@akinon/next 1.45.0 → 1.47.0-rc.0

package/data/server/product.ts

@@ -1,15 +1,12 @@
 import { Cache, CacheKey } from '../../lib/cache';
 import { product } from '../urls';
-import {
-  BreadcrumbResultType,
-  ProductCategoryResult,
-  ProductResult
-} from '../../types';
+import { ProductCategoryResult, ProductResult } from '../../types';
 import appFetch from '../../utils/app-fetch';
+import logger from '../../utils/log';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -50,9 +47,17 @@ const getProductDataHandler = ({
       }
     );
 
-    const breadcrumbUrl = product.breadcrumbUrl(
-      productCategoryData.results[0].menuitemmodel
-    );
+    const menuItemModel = productCategoryData?.results[0]?.menuitemmodel;
+
+    if (!menuItemModel) {
+      logger.warn('menuItemModel is undefined, skipping breadcrumbData fetch', {
+        handler: 'getProductDataHandler',
+        pk
+      });
+      return { data, breadcrumbData: undefined };
+    }
+
+    const breadcrumbUrl = product.breadcrumbUrl(menuItemModel);
 
     const breadcrumbData = await appFetch<any>(breadcrumbUrl, {
       headers: {
@@ -74,10 +79,7 @@ export const getProductData = async ({
   groupProduct
 }: GetProduct) => {
   return Cache.wrap(
-    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
-      pk,
-      searchParams ?? new URLSearchParams()
-    ),
+    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](pk, searchParams ?? {}),
     getProductDataHandler({ pk, searchParams, groupProduct }),
     {
       expire: 300

package/data/server/special-page.ts

@@ -7,7 +7,7 @@ import header from '../../redux/reducers/header';
 
 const getSpecialPageDataHandler = (
   pk: number,
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -34,7 +34,7 @@ export const getSpecialPageData = async ({
   headers
 }: {
   pk: number;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/urls.ts

@@ -83,6 +83,8 @@ export const checkout = {
   setDeliveryOption: '/orders/checkout/?page=DeliveryOptionSelectionPage',
   setAddresses: '/orders/checkout/?page=AddressSelectionPage',
   setShippingOption: '/orders/checkout/?page=ShippingOptionSelectionPage',
+  setDataSourceShippingOption:
+    '/orders/checkout/?page=DataSourceShippingOptionSelectionPage',
   setPaymentOption: '/orders/checkout/?page=PaymentOptionSelectionPage',
   setBinNumber: '/orders/checkout/?page=BinNumberPage',
   setMasterpassBinNumber: '/orders/checkout/?page=MasterpassBinNumberPage',
@@ -108,7 +110,9 @@ export const checkout = {
   completeLoyaltyPayment: '/orders/checkout/?page=LoyaltyPaymentSelectedPage',
   loyaltyMoneyUsage: '/orders/checkout/?page=LoyaltyMoneyUsagePage',
   setOrderNote: '/orders/checkout/?page=OrderNotePage',
-  couponSelectionPage: '/orders/checkout/?page=CouponSelectionPage'
+  couponSelectionPage: '/orders/checkout/?page=CouponSelectionPage',
+  setAttributeBasedShippingOption:
+    '/orders/checkout/?page=AttributeBasedShippingOptionSelectionPage'
 };
 
 export const flatpage = {
@@ -161,7 +165,14 @@ export const wishlist = {
     page?: number;
     limit?: number;
   }) => `/wishlists/product-alerts/?limit=${limit}&page=${page}`,
-  deleteStockAlert: (pk: number) => `/wishlists/product-alerts/${pk}/`
+  deleteStockAlert: (pk: number) => `/wishlists/product-alerts/${pk}/`,
+  setCollection: () => '/wishlists/user-collections/',
+  setCollectionItems: '/wishlists/user-collection-items/',
+  getCollections: (search?: string, product_id?: number) =>
+    `/wishlists/user-collections/?search=${search ? search : ''}&product_id=${
+      product_id ? product_id : ''
+    }`,
+  deleteCollection: (pk: number) => `/wishlists/user-collections/${pk}/`
 };
 
 export const user = {
@@ -187,7 +198,10 @@ export const b2b = {
   draftBaskets: '/b2b/basket/drafts/',
   divisions: '/b2b/my-divisions/',
   myQuotations: '/b2b/my-quotations/',
-  loadBasket: (id) => `/b2b/basket/${id}/load/`
+  loadBasket: (id) => `/b2b/basket/${id}/load/`,
+  statusBasket: (cacheKey) => `/b2b/basket/?status_cache_key=${cacheKey}`,
+  basketExport: (queryString) => `/b2b/basket/?upload=true&${queryString}`,
+  basketImport: '/b2b/basket/bulk-import/'
 };
 
 export const widgets = {

package/hooks/index.ts

@@ -8,4 +8,5 @@ export * from './use-media-query';
 export * from './use-on-click-outside';
 export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
-export * from './use-pagination';
+export * from './use-pagination';
+export * from './use-message-listener';

package/hooks/use-message-listener.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export const useMessageListener = () => {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data && typeof event.data === 'string') {
+        const messageData = JSON.parse(event.data);
+        if (messageData?.url) {
+          window.location.href = messageData.url;
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+};

package/hooks/use-payment-options.ts

@@ -18,7 +18,8 @@ export const usePaymentOptions = () => {
     pay_on_delivery: 'pz-pay-on-delivery',
     bkm_express: 'pz-bkm',
     credit_payment: 'pz-credit-payment',
-    masterpass: 'pz-masterpass'
+    masterpass: 'pz-masterpass',
+    gpay: 'pz-gpay'
   };
 
   const isInitialTypeIncluded = (type: string) => initialTypes.has(type);

package/lib/cache-handler.mjs

@@ -0,0 +1,33 @@
+import { CacheHandler } from '@neshca/cache-handler';
+import createLruHandler from '@neshca/cache-handler/local-lru';
+import createRedisHandler from '@neshca/cache-handler/redis-stack';
+import { createClient } from 'redis';
+
+CacheHandler.onCreation(async () => {
+  const redisUrl = `redis://${process.env.CACHE_HOST}:${
+    process.env.CACHE_PORT
+  }/${process.env.CACHE_BUCKET ?? '0'}`;
+
+  const client = createClient({
+    url: redisUrl
+  });
+
+  client.on('error', (error) => {
+    console.error('Redis client error', { redisUrl, error });
+  });
+
+  await client.connect();
+
+  const redisHandler = await createRedisHandler({
+    client,
+    timeoutMs: 5000
+  });
+
+  const localHandler = createLruHandler();
+
+  return {
+    handlers: [redisHandler, localHandler]
+  };
+});
+
+export default CacheHandler;

package/lib/cache.ts

@@ -20,13 +20,16 @@ const hashCacheKey = (object?: Record<string, string>) => {
   return `_${encodeURIComponent(cacheKey)}`;
 };
 export const CacheKey = {
-  List: (searchParams: URLSearchParams, headers?: Record<string, string>) =>
+  List: (
+    searchParams: { [key: string]: string | string[] | undefined },
+    headers?: Record<string, string>
+  ) =>
     `list_${encodeURIComponent(JSON.stringify(searchParams))}${hashCacheKey(
       headers
     )}`,
   Category: (
     pk: number,
-    searchParams?: URLSearchParams,
+    searchParams?: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `category_${pk}_${encodeURIComponent(
@@ -35,15 +38,20 @@ export const CacheKey = {
   CategorySlug: (slug: string) => `category_${slug}`,
   SpecialPage: (
     pk: number,
-    searchParams: URLSearchParams,
+    searchParams: { [key: string]: string | string[] | undefined },
     headers?: Record<string, string>
   ) =>
     `special_page_${pk}_${encodeURIComponent(
       JSON.stringify(searchParams)
     )}${hashCacheKey(headers)}`,
-  Product: (pk: number, searchParams: URLSearchParams) =>
-    `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
-  GroupProduct: (pk: number, searchParams: URLSearchParams) =>
+  Product: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) => `product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
+  GroupProduct: (
+    pk: number,
+    searchParams: { [key: string]: string | string[] | undefined }
+  ) =>
     `group_product_${pk}_${encodeURIComponent(JSON.stringify(searchParams))}`,
   FlatPage: (pk: number) => `flat_page_${pk}`,
   LandingPage: (pk: number) => `landing_page_${pk}`,
@@ -158,6 +166,10 @@ export class Cache {
     handler: () => Promise<T>,
     options?: CacheOptions
   ): Promise<T> {
+    if (Settings.usePrettyUrlRoute) {
+      return await handler();
+    }
+
     const requiredVariables = [
       process.env.CACHE_HOST,
       process.env.CACHE_PORT,

package/middlewares/default.ts

@@ -69,6 +69,10 @@ const withPzDefault =
       return NextResponse.json({ status: 'ok' });
     }
 
+    if (url.pathname.startsWith('/metrics')) {
+      return new NextResponse(null, { status: 200 });
+    }
+
     if (req.nextUrl.pathname.startsWith('/.well-known')) {
       const url = new URL(`${Settings.commerceUrl}${req.nextUrl.pathname}`);
       const req_ = await fetch(url.toString());
@@ -84,14 +88,44 @@ const withPzDefault =
       req.nextUrl.pathname.includes('/orders/hooks/') ||
       req.nextUrl.pathname.includes('/orders/checkout-with-token/')
     ) {
-      return NextResponse.rewrite(
+      const segment = url.searchParams.get('segment');
+      const currency = url.searchParams.get('currency')?.toLowerCase();
+
+      const headers = {};
+
+      if (segment) {
+        headers['X-Segment-Id'] = segment;
+      }
+
+      if (currency) {
+        headers['x-currency'] = currency;
+      }
+
+      const response = NextResponse.rewrite(
         new URL(
           `${Settings.commerceUrl}${req.nextUrl.pathname.replace(
             urlLocaleMatcherRegex,
             ''
           )}`
-        )
+        ),
+        {
+          headers
+        }
       );
+
+      if (segment) {
+        response.cookies.set('pz-segment', segment);
+      }
+
+      if (currency) {
+        response.cookies.set('pz-currency', currency, {
+          sameSite: 'none',
+          secure: true,
+          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7) // 7 days
+        });
+      }
+
+      return response;
     }
 
     if (req.nextUrl.pathname.startsWith('/orders/redirection/')) {
@@ -203,6 +237,20 @@ const withPzDefault =
                               );
                             }
 
+                            if (
+                              Settings.usePrettyUrlRoute &&
+                              url.searchParams.toString().length > 0 &&
+                              !Object.entries(ROUTES).find(([, value]) =>
+                                new RegExp(`^${value}/?$`).test(
+                                  pathnameWithoutLocale
+                                )
+                              )
+                            ) {
+                              url.pathname =
+                                url.pathname +
+                                `searchparams|${url.searchParams.toString()}`;
+                            }
+
                             Settings.rewrites.forEach((rewrite) => {
                               url.pathname = url.pathname.replace(
                                 rewrite.source,

package/middlewares/locale.ts

@@ -5,22 +5,6 @@ import { LocaleUrlStrategy } from '../localization';
 import { urlLocaleMatcherRegex } from '../utils';
 import logger from '../utils/log';
 
-const getMatchedLocale = (pathname: string) => {
-  let matchedLocale = pathname.match(urlLocaleMatcherRegex)?.[0] ?? '';
-  matchedLocale = matchedLocale.replace('/', '');
-
-  if (!matchedLocale.length) {
-    if (
-      settings.localization.localeUrlStrategy !==
-      LocaleUrlStrategy.ShowAllLocales
-    ) {
-      matchedLocale = settings.localization.defaultLocaleValue;
-    }
-  }
-
-  return matchedLocale;
-};
-
 const withLocale =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
@@ -28,12 +12,12 @@ const withLocale =
 
     try {
       const url = req.nextUrl.clone();
-      const matchedLocale = getMatchedLocale(url.pathname);
-      let { localeUrlStrategy, defaultLocaleValue, redirectToDefaultLocale } =
-        settings.localization;
-
-      localeUrlStrategy =
-        localeUrlStrategy ?? LocaleUrlStrategy.HideDefaultLocale;
+      const {
+        locales,
+        localeUrlStrategy,
+        defaultLocaleValue,
+        redirectToDefaultLocale
+      } = settings.localization;
 
       if (!defaultLocaleValue) {
         logger.error('Default locale value is not defined in settings.', {
@@ -45,16 +29,34 @@ const withLocale =
       }
 
       if (
-        !matchedLocale?.length &&
-        localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales &&
-        redirectToDefaultLocale &&
-        req.method === 'GET'
+        locales.length === 1 &&
+        localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales
       ) {
-        url.pathname = `/${defaultLocaleValue}${url.pathname}`;
-        return NextResponse.redirect(url);
-      }
+        const singleLocale = locales[0].value;
+        const pathParts = url.pathname.split('/').filter(Boolean);
 
-      req.middlewareParams.rewrites.locale = matchedLocale;
+        if (pathParts[0] === singleLocale) {
+          url.pathname = '/' + pathParts.slice(1).join('/');
+          return NextResponse.redirect(url);
+        }
+
+        req.middlewareParams.rewrites.locale = singleLocale;
+      } else {
+        const matchedLocale =
+          url.pathname.match(urlLocaleMatcherRegex)?.[0]?.replace('/', '') ||
+          '';
+        if (
+          !matchedLocale &&
+          localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales &&
+          redirectToDefaultLocale &&
+          req.method === 'GET'
+        ) {
+          url.pathname = `/${defaultLocaleValue}${url.pathname}`;
+          return NextResponse.redirect(url);
+        }
+        req.middlewareParams.rewrites.locale =
+          matchedLocale || defaultLocaleValue;
+      }
     } catch (error) {
       logger.error('withLocale error', {
         error,

package/middlewares/pretty-url.ts

@@ -56,6 +56,10 @@ const resolvePrettyUrl = async (pathname: string, ip: string | null) => {
 const withPrettyUrl =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    if (Settings.usePrettyUrlRoute) {
+      return middleware(req, event);
+    }
+
     const url = req.nextUrl.clone();
     const matchedLanguagePrefix = url.pathname.match(
       urlLocaleMatcherRegex

package/middlewares/url-redirection.ts

@@ -11,6 +11,10 @@ import { ROUTES } from 'routes';
 const withUrlRedirection =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    if (settings.usePrettyUrlRoute) {
+      return middleware(req, event);
+    }
+
     const url = req.nextUrl.clone();
     const ip = req.headers.get('x-forwarded-for') ?? '';
     const pathnameWithoutLocale = url.pathname.replace(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.45.0",
+  "version": "1.47.0-rc.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -20,21 +20,22 @@
     "@opentelemetry/sdk-trace-node": "1.19.0",
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
+    "@neshca/cache-handler": "1.5.1",
     "cross-spawn": "7.0.3",
     "generic-pool": "3.9.0",
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
-    "redis": "4.5.1",
-    "semver": "7.5.4",
+    "redis": "4.6.13",
+    "semver": "7.6.2",
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
+    "@akinon/eslint-plugin-projectzero": "1.47.0-rc.0",
     "@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",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.45.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.d.ts

@@ -12,6 +12,7 @@ declare module '@akinon/pz-masterpass/src/utils' {
 declare module '@akinon/pz-masterpass/src/redux/reducer' {
   export const setError: any;
   export const setOtpModalVisible: any;
+  export const setCvcRequired: any;
 }
 
 declare module '@akinon/pz-otp' {

package/redux/middlewares/checkout.ts

@@ -16,8 +16,10 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
+  setDataSourceShippingOptions,
   setShippingStepCompleted,
-  setCreditPaymentOptions
+  setCreditPaymentOptions,
+  setAttributeBasedShippingOptions
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
@@ -26,10 +28,11 @@ import { getCookie, setCookie } from '../../utils';
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../../localization';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+import { showRedirectionIframe } from '../../utils/redirection-iframe';
 
 interface CheckoutResult {
   payload: {
-    errors?: any;
+    errors?: Record<string, string[]>;
     pre_order?: PreOrder;
     context_list?: CheckoutContext[];
   };
@@ -73,8 +76,10 @@ export const preOrderMiddleware: Middleware = ({
       deliveryOptions,
       addressList: addresses,
       shippingOptions,
+      dataSourceShippingOptions,
       paymentOptions,
-      installmentOptions
+      installmentOptions,
+      attributeBasedShippingOptions
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
@@ -125,6 +130,40 @@ export const preOrderMiddleware: Middleware = ({
       dispatch(apiEndpoints.setShippingOption.initiate(shippingOptions[0].pk));
     }
 
+    if (
+      dataSourceShippingOptions.length > 0 &&
+      !preOrder.data_source_shipping_options
+    ) {
+      const selectedDataSourceShippingOptionsPks =
+        dataSourceShippingOptions.map(
+          (opt) => opt.data_source_shipping_options[0].pk
+        );
+
+      dispatch(
+        apiEndpoints.setDataSourceShippingOptions.initiate(
+          selectedDataSourceShippingOptionsPks
+        )
+      );
+    }
+
+    if (
+      Object.keys(attributeBasedShippingOptions).length > 0 &&
+      !preOrder.attribute_based_shipping_options
+    ) {
+      const initialSelectedOptions: Record<string, number> = Object.fromEntries(
+        Object.entries(attributeBasedShippingOptions).map(([key, options]) => [
+          key,
+          options[0].pk
+        ])
+      );
+
+      dispatch(
+        apiEndpoints.setAttributeBasedShippingOptions.initiate(
+          initialSelectedOptions
+        )
+      );
+    }
+
     if (!preOrder.payment_option && paymentOptions.length > 0) {
       dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
     }
@@ -163,6 +202,7 @@ export const contextListMiddleware: Middleware = ({
     if (result?.payload?.context_list) {
       result.payload.context_list.forEach((context) => {
         const redirectUrl = context.page_context.redirect_url;
+        const isIframe = context.page_context.is_frame ?? false;
 
         if (redirectUrl) {
           const currentLocale = getCookie('pz-locale');
@@ -181,16 +221,19 @@ export const contextListMiddleware: Middleware = ({
           }
 
           const urlObj = new URL(url, window.location.origin);
-          urlObj.searchParams.set('t', new Date().getTime().toString());
-
-          if (
-            (isMobileApp ||
-              /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
+          const isMobileDevice =
+            isMobileApp ||
+            /iPad|iPhone|iPod|Android/i.test(navigator.userAgent);
+          const isIframePaymentOptionExcluded =
             !settings.checkout?.iframeExcludedPaymentOptions?.includes(
               result.payload?.pre_order?.payment_option?.slug
-            )
-          ) {
+            );
+          urlObj.searchParams.set('t', new Date().getTime().toString());
+
+          if (isMobileDevice && !isIframePaymentOptionExcluded) {
             showMobile3dIframe(urlObj.toString());
+          } else if (isIframe && !isIframePaymentOptionExcluded) {
+            showRedirectionIframe(urlObj.toString());
           } else {
             window.location.href = urlObj.toString();
           }
@@ -220,12 +263,28 @@ export const contextListMiddleware: Middleware = ({
           dispatch(setShippingOptions(context.page_context.shipping_options));
         }
 
+        if (context.page_context.data_sources) {
+          dispatch(
+            setDataSourceShippingOptions(context.page_context.data_sources)
+          );
+        }
+
+        if (context.page_context.attribute_based_shipping_options) {
+          dispatch(
+            setAttributeBasedShippingOptions(
+              context.page_context.attribute_based_shipping_options
+            )
+          );
+        }
+
         if (context.page_context.payment_options) {
           dispatch(setPaymentOptions(context.page_context.payment_options));
         }
 
         if (context.page_context.credit_payment_options) {
-          dispatch(setCreditPaymentOptions(context.page_context.credit_payment_options));
+          dispatch(
+            setCreditPaymentOptions(context.page_context.credit_payment_options)
+          );
         }
 
         if (context.page_context.payment_choices) {