@akinon/next 1.33.1 → 1.34.0-rc.0

package/CHANGELOG.md

@@ -1,10 +1,21 @@
 # @akinon/next
 
-## 1.33.1
+## 1.34.0-rc.0
 
-### Patch Changes
+### Minor Changes
 
-- 10123f9: ZERO-2632: rename projectzero-cli to projectzero
+- d09b677: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
+- 6d4aadb: ZERO-2476: Auto install recommendenent extension
+- ebb63ce: ZERO-2525: Fix category facet removal bug and add close icon to active filters
+- 7cebe87: ZERO-2524: Add check monorepo utility function
+- f0c23bc: ZERO-2135: add custom not found page
+- 3420416: ZERO-2533: extend eslint config from @akinon/next
+- 495d155: ZERO-2505: findBaseDir function is united and move on to the utils
+- 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
+- 6b2972b: ZERO-2514: Fix handling of status 204 and return Commerce status code in client proxy API.
+- 3e68768: ZERO-2578: Add osessionid check in middleware
 
 ## 1.33.0
 

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 = req.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-copy-template.js

@@ -7,7 +7,7 @@ const projectZeroNextDir = path.join(
 
 const templatesDir = path.join(
   __dirname,
-  '../../../packages/projectzero/app-template'
+  '../../../packages/projectzero-cli/app-template'
 );
 
 if (fs.existsSync(templatesDir)) {

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-cli/dist/commands'
+);
+
+const hash = hashDirectory(packageDistPath);
+fs.writeFileSync(
+  path.join(__dirname, '../../../packages/projectzero-cli/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,28 @@
 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';
+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 +48,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -79,14 +91,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/price.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
+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 +39,7 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency

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/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,19 @@ 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'
+                              );
+                            }
+
                             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

@@ -98,6 +98,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.33.1",
+  "version": "1.34.0-rc.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -25,14 +25,16 @@
     "react-redux": "8.1.3",
     "react-string-replace": "1.1.1",
     "redis": "4.5.1",
-    "semver": "7.5.4"
+    "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.33.1",
+    "@akinon/eslint-plugin-projectzero": "1.34.0-rc.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

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

@@ -181,6 +181,7 @@ export interface Settings {
     extraPaymentTypes?: string[];
     masterpassJsUrl?: string;
   };
+  customNotFoundEnabled: boolean;
 }
 
 export interface CacheOptions {

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/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;