@akinon/next 1.34.0 → 1.36.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @akinon/next
 
+## 1.36.0-rc.0
+
+### Minor Changes
+
+- a4c8d6a: ZERO-2663: Fix the image url for gif and svgs and return them without options
+- 8e6e8cf: ZERO-2524: Removed cli from projectzero so that build works as expected
+- c53ef7b: ZERO-2668: The Link component has been updated to improve the logic for handling href values. Previously, if the href was not a string or started with 'http', it would return the href as is. Now, if the href is not provided, it will default to '#' to prevent any potential errors. Additionally, if the href is a string and does not start with 'http', it will be formatted with the locale and pathname, based on the localeUrlStrategy and defaultLocaleValue. This ensures that the correct href is generated based on the localization settings.
+- ebb63ce: ZERO-2525: Fix category facet removal bug and add close icon to active filters
+- 7cebe87: ZERO-2524: Add check monorepo utility function
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+- bbe18b9: ZERO-2575: Fix build error
+- 3420416: ZERO-2533: extend eslint config from @akinon/next
+- beb499e: ZERO-2551: Add new tsconfig paths
+- 40ad73e: ZERO-2504: add cookie filter to api client request
+- 495d155: ZERO-2524: Zero-cli dist checks for changes and renders it to the terminal.
+- f046f8e: ZERO-2575: update version for react-number-format
+- 3e68768: ZERO-2578: Add osessionid check in middleware
+
+### Patch Changes
+
+- 616690d: ZERO-2635: remove maxRetries from redux
+- 59fb7c3: ZERO-2504: get set-cookie headers from commerce request
+
+## 1.35.0
+
+### Minor Changes
+
+- d09b677: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
+- 6d4aadb: ZERO-2476: Auto install recommendenent extension
+- f0c23bc: ZERO-2135: add custom not found page
+- f488ea8: ZERO-2505: findBaseDir function is united and move on to the utils
+- 6b2972b: ZERO-2514: Fix handling of status 204 and return Commerce status code in client proxy API.
+
 ## 1.34.0
 
 ## 1.33.2

package/api/client.ts

@@ -2,6 +2,8 @@ import { ClientRequestOptions } from '../types';
 import { NextResponse } from 'next/server';
 import settings from 'settings';
 import logger from '../utils/log';
+import formatCookieString from '../utils/format-cookie-string';
+import cookieParser from 'set-cookie-parser';
 
 interface RouteParams {
   params: {
@@ -113,6 +115,14 @@ async function proxyRequest(...args) {
 
   try {
     const request = await fetch(url, fetchOptions);
+
+    // Using NextResponse.json with status 204 will cause an error
+    if (request.status === 204) {
+      return new Response(null, {
+        status: 204
+      });
+    }
+
     let response = {} as any;
 
     try {
@@ -131,20 +141,26 @@ async function proxyRequest(...args) {
       );
     }
 
-    const setCookieHeader = request.headers.get('set-cookie');
+    const setCookieHeaders = request.headers.getSetCookie();
+    const exceptCookieKeys = ['pz-locale', 'pz-currency'];
+
+    const isExcludedCookie = (name: string) => exceptCookieKeys.includes(name);
+
+    const filteredCookies = cookieParser
+      .parse(setCookieHeaders)
+      .filter((cookie) => !isExcludedCookie(cookie.name));
+
     const responseHeaders: any = {};
 
-    if (setCookieHeader) {
-      responseHeaders['set-cookie'] = setCookieHeader;
+    if (filteredCookies.length > 0) {
+      responseHeaders['set-cookie'] = filteredCookies
+        .map(formatCookieString)
+        .join(', ');
     }
 
-    const statusCode = new RegExp(/^20./).test(request.status.toString())
-      ? 200
-      : request.status;
-
     return NextResponse.json(
       options.responseType === 'text' ? { result: response } : response,
-      { status: statusCode, headers: responseHeaders }
+      { status: request.status, headers: responseHeaders }
     );
   } catch (error) {
     logger.error('Client proxy request failed', error);

package/bin/pz-install-extensions.js

@@ -0,0 +1,27 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+function findBaseDir() {
+  let currentDir = __dirname;
+  while (currentDir !== path.resolve(currentDir, '..')) {
+    if (fs.existsSync(path.join(currentDir, 'turbo.json'))) {
+      return currentDir;
+    }
+    currentDir = path.resolve(currentDir, '..');
+  }
+  return null;
+}
+
+const BASE_DIR = findBaseDir();
+
+if (BASE_DIR) {
+  const extensions = ['bilal-akinon.pznext'];
+  extensions.forEach((extension) => {
+    try {
+      execSync(`code --install-extension ${extension}`, { stdio: 'inherit' });
+    } catch (error) {
+      console.error(`Error installing ${extension}:`);
+    }
+  });
+}

package/bin/pz-install-plugins.js

@@ -1,13 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
-
-function findBaseDir() {
-  const insideNodeModules = __dirname.includes('node_modules');
-  return insideNodeModules
-    ? process.cwd()
-    : path.resolve(__dirname, '../../../apps/projectzeronext');
-}
+const findBaseDir = require('../utils/find-base-dir');
 
 const BASE_DIR = findBaseDir();
 const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);

package/bin/pz-install-theme.js

@@ -3,16 +3,7 @@
 const fs = require('fs');
 const path = require('path');
 const spawn = require('cross-spawn');
-
-function findBaseDir() {
-  const insideNodeModules = __dirname.includes('node_modules');
-
-  if (insideNodeModules) {
-    return path.resolve(__dirname, '../../../../');
-  } else {
-    return path.resolve(__dirname, '../../../apps/projectzeronext');
-  }
-}
+const findBaseDir = require('../utils/find-base-dir');
 
 const BASE_DIR = findBaseDir();
 

package/bin/pz-pre-check-dist.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+const hashDirectory = require('../utils/hash-directory');
+const checkMonorepo = require('../utils/check-monorepo');
+
+const BASE_DIR = checkMonorepo();
+
+if (!BASE_DIR) {
+  process.exit(0);
+}
+
+const packageDistPath = path.join(
+  __dirname,
+  '../../../packages/projectzero/dist/commands'
+);
+
+const hash = hashDirectory(packageDistPath);
+fs.writeFileSync(
+  path.join(__dirname, '../../../packages/projectzero/dist/dist-hash.txt'),
+  hash
+);

package/bin/pz-prebuild.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
 
 const runScript = require('./run-script');
+
 runScript('pz-install-theme.js');
+runScript('pz-pre-check-dist.js');

package/bin/pz-predev.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
 const runScript = require('./run-script');
+
+runScript('pz-install-extensions.js');
 runScript('pz-check-env.js');
 runScript('pz-install-theme.js');

package/components/input.tsx

@@ -1,17 +1,29 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState } from 'react';
+import { forwardRef, FocusEvent, useState, Ref } from 'react';
 import { Controller } from 'react-hook-form';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+// @ts-ignore
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
 import { InputProps } from '../types';
 import { twMerge } from 'tailwind-merge';
 
+const PatternFormatWithRef = forwardRef(
+  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
+    return <PatternFormat {...props} getInputRef={ref} />;
+  }
+);
+PatternFormatWithRef.displayName = 'PatternFormatWithRef';
+
 export const Input = forwardRef<
   HTMLInputElement,
   InputProps &
     Pick<
-      NumberFormatProps,
-      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    >
+      PatternFormatProps,
+      'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    > & {
+      format?: string;
+      defaultValue?: string;
+      type?: string;
+    }
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -37,6 +49,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -79,14 +92,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
-              defaultValue={false}
               render={({ field }) => (
-                <NumberFormat
+                <PatternFormatWithRef
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
+                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/components/link.tsx

@@ -10,28 +10,32 @@ type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
-  NextLinkProps;
+  NextLinkProps & {
+    href: string;
+  };
 
 export const Link = ({ children, href, ...rest }: LinkProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
   const formattedHref = useMemo(() => {
-    if (typeof href !== 'string' || href.startsWith('http')) {
-      return href;
+    if (!href) {
+      return '#';
     }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+    if (typeof href === 'string' && !href.startsWith('http')) {
+      const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
     }
 
-    return href || '#';
+    return href;
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (

package/components/price.tsx

@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+// @ts-ignore
+import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 
 import { useLocalization } from '@akinon/next/hooks';
 import { PriceProps } from '../types';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -39,7 +40,7 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency

package/data/client/api.ts

@@ -1,7 +1,6 @@
 import {
   createApi,
   fetchBaseQuery,
-  retry,
   BaseQueryFn,
   FetchBaseQueryError,
   FetchBaseQueryMeta,
@@ -65,7 +64,7 @@ const customBaseQuery: BaseQueryFn<
 
 export const api = createApi({
   reducerPath: 'api',
-  baseQuery: retry(customBaseQuery, { maxRetries: 3 }),
+  baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
     'BasketB2b',

package/data/server/category.ts

@@ -8,7 +8,7 @@ import logger from '../../utils/log';
 
 function getCategoryDataHandler(
   pk: number,
-  searchParams?: URLSearchParams,
+  searchParams?: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) {
   return async function () {
@@ -78,7 +78,7 @@ export const getCategoryData = ({
   headers
 }: {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/list.ts

@@ -7,7 +7,7 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 
 const getListDataHandler = (
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -54,7 +54,7 @@ export const getListData = async ({
   searchParams,
   headers
 }: {
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/product.ts

@@ -9,7 +9,7 @@ import appFetch from '../../utils/app-fetch';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -74,10 +74,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/{.eslintrc.js → eslint.config.js}

@@ -5,7 +5,6 @@ module.exports = {
     es2021: true
   },
   extends: [
-    'eslint:recommended',
     'next/core-web-vitals',
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -18,7 +17,7 @@ module.exports = {
       env: {
         node: true
       },
-      files: ['.eslintrc.{js,cjs}', 'middlewares/default.ts'],
+      files: ['eslint.config.{js,cjs}', 'middlewares/default.ts'],
       rules: {
         '@akinon/projectzero/check-middleware-order': 'error'
       },

package/hooks/use-pagination.ts

@@ -28,7 +28,11 @@ function reducer(state: InitialState, action: ACTIONTYPE) {
     case 'setPage':
       return { ...state, page: action.payload };
     case 'setLimit':
-      return { ...state, limit: action.payload };
+      return {
+        ...state,
+        limit: action.payload,
+        last: Math.ceil(state.total / action.payload)
+      };
     default:
       throw new Error();
   }
@@ -46,10 +50,11 @@ export default function usePagination(
     () => new URLSearchParams(searchParams.toString()),
     [searchParams]
   );
+
   const { page, limit } = useMemo(
     () => ({
       page: _page || Number(searchParams.get('page')) || 1,
-      limit: _limit || Number(searchParams.get('limit'))
+      limit: _limit || Number(searchParams.get('limit')) || 12
     }),
     [searchParams, _page, _limit]
   );
@@ -60,6 +65,7 @@ export default function usePagination(
     last: _last || Math.ceil(_total / limit) || 1,
     total: _total
   };
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
@@ -93,23 +99,24 @@ export default function usePagination(
     [dispatch]
   );
 
-  const pageList = useMemo(() => {
-    return Array.from({ length: state.last }, (_, i) => {
-      urlSearchParams.set('page', (i + 1).toString());
-
-      return {
-        page: i + 1,
-        url: `${pathname}?${urlSearchParams.toString()}`
-      };
-    });
-  }, [state.last, pathname, urlSearchParams]);
+  const pageList = useMemo(
+    () =>
+      Array.from({ length: state.last }, (_, i) => {
+        urlSearchParams.set('page', (i + 1).toString());
+        return {
+          page: i + 1,
+          url: `${pathname}?${urlSearchParams.toString()}`
+        };
+      }),
+    [state.last, pathname, urlSearchParams]
+  );
 
   const prev = useMemo(() => {
     if (state.page > 1) {
       urlSearchParams.set('page', (Number(state.page) - 1).toString());
       return `${pathname}?${urlSearchParams.toString()}`;
     }
-    return null;
+    return '#';
   }, [state.page, pathname, urlSearchParams]);
 
   const next = useMemo(() => {
@@ -117,7 +124,7 @@ export default function usePagination(
       urlSearchParams.set('page', (Number(state.page) + 1).toString());
       return `${pathname}?${urlSearchParams.toString()}`;
     }
-    return null;
+    return '#';
   }, [state.page, state.last, pathname, urlSearchParams]);
 
   return {

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/complete-gpay.ts

@@ -33,6 +33,7 @@ const withCompleteGpay =
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
     const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
 
     if (url.search.indexOf('GPayCompletePage') === -1) {
       return middleware(req, event);
@@ -50,6 +51,24 @@ const withCompleteGpay =
     try {
       const body = await streamToString(req.body);
 
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'complete-masterpass',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
       const request = await fetch(requestUrl, {
         method: 'POST',
         headers: requestHeaders,

package/middlewares/complete-masterpass.ts

@@ -33,6 +33,7 @@ const withCompleteMasterpass =
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
     const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
 
     if (url.search.indexOf('MasterpassCompletePage') === -1) {
       return middleware(req, event);
@@ -50,6 +51,24 @@ const withCompleteMasterpass =
     try {
       const body = await streamToString(req.body);
 
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'complete-masterpass',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
       const request = await fetch(requestUrl, {
         method: 'POST',
         headers: requestHeaders,

package/middlewares/default.ts

@@ -153,6 +153,7 @@ const withPzDefault =
 
     req.middlewareParams = {
       commerceUrl,
+      found: true,
       rewrites: {}
     };
 
@@ -186,6 +187,28 @@ const withPzDefault =
                               locale.length ? `${locale}/` : ''
                             }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
 
+                            if (
+                              !req.middlewareParams.found &&
+                              Settings.customNotFoundEnabled
+                            ) {
+                              let pathname = url.pathname
+                                .replace(/\/+$/, '')
+                                .split('/');
+                              url.pathname = url.pathname.replace(
+                                pathname.pop(),
+                                'pz-not-found'
+                              );
+                            }
+
+                            if (
+                              Settings.usePrettyUrlRoute &&
+                              url.searchParams.toString().length > 0
+                            ) {
+                              url.pathname =
+                                url.pathname +
+                                `searchparams|${url.searchParams.toString()}`;
+                            }
+
                             Settings.rewrites.forEach((rewrite) => {
                               url.pathname = url.pathname.replace(
                                 rewrite.source,

package/middlewares/index.ts

@@ -26,6 +26,7 @@ export {
 export interface PzNextRequest extends NextRequest {
   middlewareParams: {
     commerceUrl: string;
+    found: boolean;
     rewrites: {
       locale?: string;
       prettyUrl?: string;

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
@@ -98,6 +102,8 @@ const withPrettyUrl =
       return middleware(req, event);
     }
 
+    req.middlewareParams.found = false;
+
     return middleware(req, event);
   };
 

package/middlewares/redirection-payment.ts

@@ -34,6 +34,7 @@ const withRedirectionPayment =
     const url = req.nextUrl.clone();
     const searchParams = new URLSearchParams(url.search);
     const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
 
     if (searchParams.get('page') !== 'RedirectionPageCompletePage') {
       return middleware(req, event);
@@ -46,12 +47,29 @@ const withRedirectionPayment =
       Cookie: req.headers.get('cookie') ?? '',
       'x-currency': req.cookies.get('pz-currency')?.value ?? '',
       'x-forwarded-for': ip
-
     };
 
     try {
       const body = await streamToString(req.body);
 
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'redirection-payment',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
       const request = await fetch(requestUrl, {
         method: 'POST',
         headers: requestHeaders,

package/middlewares/three-d-redirection.ts

@@ -33,6 +33,7 @@ const withThreeDRedirection =
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
     const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
 
     if (url.search.indexOf('CreditCardThreeDSecurePage') === -1) {
       return middleware(req, event);
@@ -50,6 +51,24 @@ const withThreeDRedirection =
     try {
       const body = await streamToString(req.body);
 
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'three-d-redirection',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
       const request = await fetch(requestUrl, {
         method: 'POST',
         headers: requestHeaders,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.34.0",
+  "version": "1.36.0-rc.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -20,19 +20,22 @@
     "@opentelemetry/sdk-trace-node": "1.19.0",
     "@opentelemetry/semantic-conventions": "1.19.0",
     "@reduxjs/toolkit": "1.9.7",
+    "@neshca/cache-handler": "1.0.7",
     "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.5.4",
+    "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
     "@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.34.0",
+    "@akinon/eslint-plugin-projectzero": "1.36.0-rc.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/routes/pretty-url.tsx

@@ -0,0 +1,194 @@
+import { URLS } from '@akinon/next/data/urls';
+import { Metadata, PageProps } from '@akinon/next/types';
+import logger from '@akinon/next/utils/log';
+import { notFound } from 'next/navigation';
+
+type PrettyUrlResult = {
+  matched: boolean;
+  path?: string;
+  pk?: number;
+};
+
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = [] as { old_path: string }[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
+
+    try {
+      const requestUrl = URLS.misc.prettyUrls(`/${pathname}/`);
+
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
+
+      const start = Date.now();
+      const apiResponse = await fetch(requestUrl, {
+        next: {
+          revalidate: 0
+        }
+      });
+      const data = await apiResponse.json();
+      ({ results } = data);
+      const end = Date.now();
+      console.warn('Pretty url response time', end - start, requestUrl);
+
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      let pk;
+
+      if (matched) {
+        const pkRegex = /\/(\d+)\/$/;
+        const match = path.match(pkRegex);
+        pk = match ? parseInt(match[1]) : undefined;
+      }
+
+      prettyUrlResult = {
+        matched,
+        path,
+        pk
+      };
+
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
+
+    return prettyUrlResult;
+  };
+
+export async function generateMetadata({ params }: PageProps) {
+  let result: Metadata = {};
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const searchParams = Object.fromEntries(
+    new URLSearchParams(
+      decodeURIComponent(
+        prettyurl
+          .find((x) => x.startsWith('searchparams'))
+          ?.replace('searchparams%7C', '')
+      ) ?? {}
+    ).entries()
+  );
+
+  const prettyUrlResult = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!prettyUrlResult.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: prettyUrlResult.pk
+    },
+    searchParams
+  };
+
+  try {
+    if (prettyUrlResult.path.startsWith('/product/')) {
+      await import('@product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/group-product/')) {
+      await import('@group-product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/category/')) {
+      await import('@category/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/special-page/')) {
+      await import('@special-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/flat-page/')) {
+      await import('@flat-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 300;
+
+export default async function Page({ params }) {
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const urlSearchParams = new URLSearchParams(
+    decodeURIComponent(
+      prettyurl
+        .find((x) => x.startsWith('searchparams'))
+        ?.replace('searchparams%7C', '')
+    ) ?? {}
+  );
+
+  const searchParams = {};
+
+  for (const [key, value] of urlSearchParams.entries() as unknown as Array<
+    [string, string]
+  >) {
+    if (!searchParams[key]) {
+      searchParams[key] = [];
+    }
+    searchParams[key].push(value);
+  }
+
+  const result = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!result.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: result.pk
+    },
+    searchParams
+  };
+
+  if (result.path.startsWith('/category/')) {
+    const CategoryPage = (await import('@category/[pk]/page')).default;
+    return <CategoryPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/product/')) {
+    const ProductPage = (await import('@product/[pk]/page')).default;
+    return <ProductPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/group-product/')) {
+    const GroupProduct = (await import('@group-product/[pk]/page')).default;
+    return <GroupProduct {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/special-page/')) {
+    const SpecialPage = (await import('@special-page/[pk]/page')).default;
+    return <SpecialPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/flat-page/')) {
+    const FlatPage = (await import('@flat-page/[pk]/page')).default;
+    return <FlatPage {...commonProps} />;
+  }
+
+  return null;
+}

package/types/commerce/category.ts

@@ -36,6 +36,7 @@ export type FacetChoice = {
   quantity: number;
   is_selected: boolean;
   url?: string;
+  real_depth?: string;
   [key: string]: any;
 };
 

package/types/index.ts

@@ -70,6 +70,7 @@ export interface Currency {
 }
 
 export interface Settings {
+  usePrettyUrlRoute?: boolean;
   commerceUrl: string;
   redis: {
     defaultExpirationTime: number;
@@ -181,6 +182,7 @@ export interface Settings {
     extraPaymentTypes?: string[];
     masterpassJsUrl?: string;
   };
+  customNotFoundEnabled: boolean;
 }
 
 export interface CacheOptions {
@@ -213,7 +215,7 @@ export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
   params: T;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {

package/utils/app-fetch.ts

@@ -41,7 +41,7 @@ const appFetch = async <T>(
     };
 
     init.next = {
-      revalidate: 60
+      revalidate: Settings.usePrettyUrlRoute ? 0 : 60
     };
 
     logger.debug(`FETCH START ${url}`, { requestURL, init, ip });

package/utils/check-monorepo.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+
+function checkMonorepo() {
+  let currentDir = __dirname;
+  while (currentDir !== path.resolve(currentDir, '..')) {
+    if (fs.existsSync(path.join(currentDir, 'turbo.json'))) {
+      return currentDir;
+    }
+    currentDir = path.resolve(currentDir, '..');
+  }
+  return null;
+}
+
+module.exports = checkMonorepo;

package/utils/find-base-dir.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+
+  if (insideNodeModules) {
+    return path.resolve(__dirname, '../../../../');
+  } else {
+    return path.resolve(__dirname, '../../../apps/projectzeronext');
+  }
+}
+
+module.exports = findBaseDir;

package/utils/format-cookie-string.ts

@@ -0,0 +1,27 @@
+export default function formatCookieString(cookieObj: Record<string, any>) {
+  const cookieParts = [`${cookieObj.name}=${cookieObj.value}`];
+
+  if (cookieObj.expires) {
+    cookieParts.push(`Expires=${cookieObj.expires.toUTCString()}`);
+  }
+  if (cookieObj.maxAge) {
+    cookieParts.push(`Max-Age=${cookieObj.maxAge}`);
+  }
+  if (cookieObj.path) {
+    cookieParts.push(`Path=${cookieObj.path}`);
+  }
+  if (cookieObj.domain) {
+    cookieParts.push(`Domain=${cookieObj.domain}`);
+  }
+  if (cookieObj.secure) {
+    cookieParts.push('Secure');
+  }
+  if (cookieObj.httpOnly) {
+    cookieParts.push('HttpOnly');
+  }
+  if (cookieObj.sameSite) {
+    cookieParts.push(`SameSite=${cookieObj.sameSite}`);
+  }
+
+  return cookieParts.join('; ');
+}

package/utils/generate-commerce-search-params.ts

@@ -1,11 +1,15 @@
 import logger from './log';
 
-export const generateCommerceSearchParams = (searchParams?: URLSearchParams) => {
+export const generateCommerceSearchParams = (searchParams?: {
+  [key: string]: string | string[] | undefined;
+}) => {
   if (!searchParams) {
     return null;
   }
 
-  const urlSerchParams = new URLSearchParams(searchParams);
+  const urlSerchParams = new URLSearchParams(
+    searchParams as Record<string, string>
+  );
 
   Object.entries(searchParams).forEach(([key, value]) => {
     if (typeof value === 'object') {

package/utils/hash-directory.js

@@ -0,0 +1,18 @@
+const { createHash } = require('crypto');
+const fs = require('fs');
+const path = require('path');
+
+function hashDirectory(directory) {
+  const files = fs.readdirSync(directory).sort();
+  const hash = createHash('sha256');
+  files.forEach((file) => {
+    const filePath = path.join(directory, file);
+    if (fs.statSync(filePath).isFile()) {
+      const fileBuffer = fs.readFileSync(filePath);
+      hash.update(fileBuffer);
+    }
+  });
+  return hash.digest('hex');
+}
+
+module.exports = hashDirectory;

package/utils/index.ts

@@ -102,6 +102,12 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
     ''
   );
 
+  const noOptionFileExtension = url?.split('.').pop()?.toLowerCase() ?? '';
+
+  if (noOptionFileExtension === 'svg' || noOptionFileExtension === 'gif') {
+    return url;
+  }
+
   let options = '';
 
   if (config) {

package/with-pz-config.js

@@ -8,6 +8,7 @@ const defaultConfig = {
   transpilePackages: ['@akinon/next', ...pzPlugins.map((p) => `@akinon/${p}`)],
   skipTrailingSlashRedirect: true,
   poweredByHeader: false,
+  cacheMaxMemorySize: 0,
   env: {
     NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
   },
@@ -65,7 +66,12 @@ const defaultConfig = {
   }
 };
 
-const withPzConfig = (myNextConfig = {}) => {
+const withPzConfig = (
+  myNextConfig = {},
+  options = {
+    useCacheHandler: false
+  }
+) => {
   let extendedConfig = deepMerge({}, defaultConfig, myNextConfig);
 
   const originalPzHeadersFunction = defaultConfig.headers;
@@ -91,6 +97,10 @@ const withPzConfig = (myNextConfig = {}) => {
     return [...pzRewrites, ...myRewrites];
   };
 
+  if (options.useCacheHandler) {
+    extendedConfig.cacheHandler = require.resolve('./lib/cache-handler.mjs');
+  }
+
   return extendedConfig;
 };