@akinon/next 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @akinon/next
 
+## 1.8.0
+
+### Minor Changes
+
+- ZERO-2302: withPzConfig
+
+## 1.7.0
+
+### Minor Changes
+
+- Reset pre-order is_redirected state
+- Show IP addresses in logs
+
 ## 1.6.0
 
 ### Minor Changes

package/middlewares/currency.ts

@@ -20,6 +20,8 @@ const resetBasket = async (req: PzNextRequest) => {
 const withCurrency =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
     try {
       const { currencies, defaultCurrencyCode, defaultLocaleValue } =
         settings.localization;
@@ -27,7 +29,9 @@ const withCurrency =
       const url = req.nextUrl.clone();
 
       if (!defaultCurrencyCode) {
-        logger.error('Default currency code is not defined in settings.');
+        logger.error('Default currency code is not defined in settings.', {
+          ip
+        });
         throw new Error(
           'Default currency code is not defined. Use `defaultCurrencyCode` property in `localization` object in `settings.js` file.'
         );
@@ -57,7 +61,10 @@ const withCurrency =
         !currencies.find((c) => c.code === activeCurrency)
       ) {
         logger.warn(
-          `Currency ${activeCurrency} is not defined in settings. Using default currency ${defaultCurrencyCode} instead.`
+          `Currency ${activeCurrency} is not defined in settings. Using default currency ${defaultCurrencyCode} instead.`,
+          {
+            ip
+          }
         );
         activeCurrency = defaultCurrencyCode;
       }
@@ -72,7 +79,8 @@ const withCurrency =
         logger.info('Currency changed. Resetting basket...', {
           sessionid: req.cookies.get('osessionid')?.value ?? '',
           oldCurrency: req.cookies.get('pz-currency')?.value,
-          newCurrency: activeCurrency
+          newCurrency: activeCurrency,
+          ip
         });
 
         resetBasket(req);
@@ -80,7 +88,10 @@ const withCurrency =
 
       req.middlewareParams.rewrites.currency = activeCurrency;
     } catch (error) {
-      logger.error('withCurrency error', error);
+      logger.error('withCurrency error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/middlewares/default.ts

@@ -13,6 +13,7 @@ import withCurrency from './currency';
 import withLocale from './locale';
 import logger from '../utils/log';
 import { user } from '../data/urls';
+import { getUrlPathWithLocale } from '../utils/localization';
 
 const withPzDefault =
   (middleware: NextMiddleware) =>
@@ -20,10 +21,12 @@ const withPzDefault =
     const url = req.nextUrl.clone();
     const commerceUrl = encodeURIComponent(decodeURI(Settings.commerceUrl)); // encodeURI doesn't work as expected in middleware
     const searchParams = new URLSearchParams(url.search);
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     logger.debug('withPzDefault', {
       url: url.href,
-      middlewareParams: req.middlewareParams
+      middlewareParams: req.middlewareParams,
+      ip
     });
 
     // Support legacy ?format=json query param
@@ -50,7 +53,10 @@ const withPzDefault =
 
         return NextResponse.json(await request.json());
       } catch (error) {
-        logger.error('?format=json error', error);
+        logger.error('?format=json error', {
+          error,
+          ip
+        });
         return NextResponse.next();
       }
     }
@@ -87,6 +93,23 @@ const withPzDefault =
       );
     }
 
+    // If commerce redirects to /orders/checkout/ without locale
+    if (
+      req.nextUrl.pathname.match(new RegExp('^/orders/checkout/$')) &&
+      req.nextUrl.searchParams.size === 0 &&
+      getUrlPathWithLocale(
+        '/orders/checkout/',
+        req.cookies.get('pz-locale')?.value
+      ) !== req.nextUrl.pathname
+    ) {
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        '/orders/checkout/',
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      return NextResponse.redirect(redirectUrlWithLocale, 303);
+    }
+
     req.middlewareParams = {
       commerceUrl,
       rewrites: {}
@@ -175,7 +198,8 @@ const withPzDefault =
                       ) {
                         logger.debug('Locale changed', {
                           locale,
-                          oldLocale: req.cookies.get('pz-locale')?.value
+                          oldLocale: req.cookies.get('pz-locale')?.value,
+                          ip
                         });
                       }
 
@@ -206,10 +230,16 @@ const withPzDefault =
                           middlewareResult.cookies.set('csrftoken', csrf_token);
                         }
                       } catch (error) {
-                        logger.error('CSRF Error', error);
+                        logger.error('CSRF Error', {
+                          error,
+                          ip
+                        });
                       }
                     } catch (error) {
-                      logger.error('withPzDefault Error', error);
+                      logger.error('withPzDefault Error', {
+                        error,
+                        ip
+                      });
                     }
 
                     return middlewareResult;

package/middlewares/locale.ts

@@ -24,6 +24,8 @@ const getMatchedLocale = (pathname: string) => {
 const withLocale =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
     try {
       const url = req.nextUrl.clone();
       const matchedLocale = getMatchedLocale(url.pathname);
@@ -34,7 +36,9 @@ const withLocale =
         localeUrlStrategy ?? LocaleUrlStrategy.HideDefaultLocale;
 
       if (!defaultLocaleValue) {
-        logger.error('Default locale value is not defined in settings.');
+        logger.error('Default locale value is not defined in settings.', {
+          ip
+        });
         throw new Error(
           'Default locale value is not defined. Use `defaultLocaleValue` property in `localization` object in `settings.js` file.'
         );
@@ -52,7 +56,10 @@ const withLocale =
 
       req.middlewareParams.rewrites.locale = matchedLocale;
     } catch (error) {
-      logger.error('withLocale error', error);
+      logger.error('withLocale error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/middlewares/pretty-url.ts

@@ -12,40 +12,41 @@ type PrettyUrlResult = {
   path?: string;
 };
 
-const resolvePrettyUrlHandler = (pathname: string) => async () => {
-  let results = <{ old_path: string }[]>[];
-  let prettyUrlResult: PrettyUrlResult = {
-    matched: false
-  };
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = <{ old_path: string }[]>[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
 
-  try {
-    const requestUrl = URLS.misc.prettyUrls(pathname);
+    try {
+      const requestUrl = URLS.misc.prettyUrls(pathname);
 
-    logger.debug(`Resolving pretty url`, { pathname, requestUrl });
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
 
-    const apiResponse = await fetch(requestUrl);
-    const data = await apiResponse.json();
-    ({ results } = data);
+      const apiResponse = await fetch(requestUrl);
+      const data = await apiResponse.json();
+      ({ results } = data);
 
-    const matched = results.length > 0;
-    const [{ old_path: path } = { old_path: '' }] = results;
-    prettyUrlResult = {
-      matched,
-      path
-    };
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      prettyUrlResult = {
+        matched,
+        path
+      };
 
-    logger.trace('Pretty url result', prettyUrlResult);
-  } catch (error) {
-    logger.error('Error resolving pretty url', { error, pathname });
-  }
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
 
-  return prettyUrlResult;
-};
+    return prettyUrlResult;
+  };
 
-const resolvePrettyUrl = async (pathname: string) => {
+const resolvePrettyUrl = async (pathname: string, ip: string | null) => {
   return Cache.wrap(
     CacheKey.PrettyUrl(pathname),
-    resolvePrettyUrlHandler(pathname),
+    resolvePrettyUrlHandler(pathname, ip),
     {
       useProxy: true
     }
@@ -68,6 +69,7 @@ const withPrettyUrl =
         )
       );
     };
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     if (
       !isValidPrettyUrlPath(prettyUrlPathname) ||
@@ -81,14 +83,16 @@ const withPrettyUrl =
         prettyUrlPathname
       )
         ? url.pathname
-        : prettyUrlPathname
+        : prettyUrlPathname,
+      ip
     );
 
     if (prettyUrlResult.matched) {
       req.middlewareParams.rewrites.prettyUrl = prettyUrlResult.path;
       logger.debug('Resolved pretty url', {
         source: prettyUrlPathname,
-        dest: prettyUrlResult.path
+        dest: prettyUrlResult.path,
+        ip
       });
 
       return middleware(req, event);

package/middlewares/redirection-payment.ts

@@ -38,81 +38,106 @@ const withRedirectionPayment =
       ''
     );
     const searchParams = new URLSearchParams(url.search);
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
-    if (
-      !pathnameWithoutLocale.startsWith('/orders') ||
-      searchParams.get('page') !== 'RedirectionPageCompletePage' ||
-      req.method !== 'POST'
-    ) {
+    if (searchParams.get('page') !== 'RedirectionPageCompletePage') {
       return middleware(req, event);
     }
 
-    const body = await streamToString(req.body);
     const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: req.headers.get('cookie') ?? '',
+      'x-currency': req.cookies.get('pz-currency')?.value ?? ''
+    };
 
-    const request = await fetch(requestUrl, {
-      method: 'POST',
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Cookie: req.headers.get('cookie') ?? '',
-        'x-currency': req.cookies.get('pz-currency')?.value ?? ''
-      },
-      body
-    });
-
-    logger.info('Complete redirection payment request', {
-      requestUrl,
-      status: request.status
-    });
-
-    const response = await request.json();
-
-    const { context_list: contextList } = response;
-    const redirectionContext = contextList?.find(
-      (context) => context.page_context?.redirect_url
-    );
-    const redirectUrl = redirectionContext?.page_context?.redirect_url;
+    try {
+      const body = await streamToString(req.body);
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete redirection payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
 
-    if (!redirectUrl) {
       logger.info('Order success page context list', {
         middleware: 'redirection-payment',
-        contextList
+        contextList,
+        ip
       });
 
-      logger.warn(
-        'No redirection url for order success page found in page_context',
-        { middleware: 'redirection-payment' }
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context',
+          {
+            middleware: 'redirection-payment',
+            requestHeaders,
+            response: JSON.stringify(response),
+            ip
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
+
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      logger.info('Redirecting to order success page', {
+        middleware: 'redirection-payment',
+        redirectUrlWithLocale,
+        ip
+      });
+
+      // Using POST method while redirecting causes an error,
+      // So we use 303 status code to change the method to GET
+      const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
+
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
       );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing redirection payment', {
+        middleware: 'redirection-payment',
+        error,
+        requestHeaders,
+        ip
+      });
+
       return NextResponse.redirect(
         `${url.origin}${getUrlPathWithLocale(
-          `/orders/checkout?${searchParams.toString()}`,
+          '/orders/checkout/',
           req.cookies.get('pz-locale')?.value
         )}`,
         303
       );
     }
-
-    const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
-      redirectUrl,
-      req.cookies.get('pz-locale')?.value
-    )}`;
-
-    logger.info('Redirecting to order success page', {
-      middleware: 'redirection-payment',
-      redirectUrlWithLocale
-    });
-
-    // Using POST method while redirecting causes an error,
-    // So we use 303 status code to change the method to GET
-    const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
-
-    nextResponse.headers.set(
-      'Set-Cookie',
-      request.headers.get('set-cookie') ?? ''
-    );
-
-    return nextResponse;
   };
 
 export default withRedirectionPayment;

package/middlewares/three-d-redirection.ts

@@ -32,6 +32,7 @@ const withThreeDRedirection =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     if (url.search.indexOf('CreditCardThreeDSecurePage') === -1) {
       return middleware(req, event);
@@ -57,7 +58,8 @@ const withThreeDRedirection =
       logger.info('Complete 3D payment request', {
         requestUrl,
         status: request.status,
-        requestHeaders
+        requestHeaders,
+        ip
       });
 
       const response = await request.json();
@@ -70,7 +72,8 @@ const withThreeDRedirection =
 
       logger.info('Order success page context list', {
         middleware: 'three-d-redirection',
-        contextList
+        contextList,
+        ip
       });
 
       if (!redirectUrl) {
@@ -79,7 +82,8 @@ const withThreeDRedirection =
           {
             middleware: 'three-d-redirection',
             requestHeaders,
-            response: JSON.stringify(response)
+            response: JSON.stringify(response),
+            ip
           }
         );
 
@@ -98,7 +102,8 @@ const withThreeDRedirection =
 
       logger.info('Redirecting to order success page', {
         middleware: 'three-d-redirection',
-        redirectUrlWithLocale
+        redirectUrlWithLocale,
+        ip
       });
 
       // Using POST method while redirecting causes an error,
@@ -115,7 +120,8 @@ const withThreeDRedirection =
       logger.error('Error while completing 3D payment', {
         middleware: 'three-d-redirection',
         error,
-        requestHeaders
+        requestHeaders,
+        ip
       });
 
       return NextResponse.redirect(

package/middlewares/url-redirection.ts

@@ -12,6 +12,7 @@ const withUrlRedirection =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
     const pathnameWithoutLocale = url.pathname.replace(
       urlLocaleMatcherRegex,
       ''
@@ -52,7 +53,10 @@ const withUrlRedirection =
         return Response.redirect(redirectUrl.toString(), request.status);
       }
     } catch (error) {
-      logger.error('withUrlRedirection error', error);
+      logger.error('withUrlRedirection error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "private": false,
   "license": "MIT",
   "bin": {

package/redux/middlewares/checkout.ts

@@ -77,6 +77,21 @@ export const preOrderMiddleware: Middleware = ({
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
+    if (preOrder.is_redirected) {
+      const contextList = result?.payload?.context_list;
+
+      if (
+        contextList.find(
+          (ctx) => ctx.page_name === 'RedirectionPaymentSelectedPage'
+        )
+      ) {
+        dispatch(
+          apiEndpoints.setPaymentOption.initiate(preOrder.payment_option?.pk)
+        );
+        return;
+      }
+    }
+
     dispatch(setPreOrder(preOrder));
 
     if (!preOrder.delivery_option && deliveryOptions.length > 0) {

package/types/commerce/checkout.ts

@@ -72,6 +72,7 @@ export interface PreOrder {
   currency_type_label?: string;
   is_guest?: boolean;
   is_post_order?: boolean;
+  is_redirected?: boolean;
   installment: InstallmentOption;
   retail_store?: RetailStore;
   gift_box?: GiftBox;

package/utils/app-fetch.ts

@@ -1,6 +1,7 @@
 import Settings from 'settings';
 import { ServerVariables } from './server-variables';
 import logger from '../utils/log';
+import { headers } from 'next/headers';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -14,8 +15,12 @@ const appFetch = async <T>(
 ) => {
   let response: T;
   let status: number;
+  let ip = '';
 
   try {
+    const nextHeaders = headers();
+    ip = nextHeaders.get('x-forwarded-for') ?? '';
+
     const commerceUrl = Settings.commerceUrl;
     const currentLocale = Settings.localization.locales.find(
       (locale) => locale.value === ServerVariables.locale
@@ -38,10 +43,10 @@ const appFetch = async <T>(
       revalidate: 60
     };
 
-    logger.debug(`FETCH START ${url}`, { requestURL, init });
+    logger.debug(`FETCH START ${url}`, { requestURL, init, ip });
     const req = await fetch(requestURL, init);
     status = req.status;
-    logger.debug(`FETCH END ${url}`, { status: req.status });
+    logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
     const rawData = await req.text();
 
@@ -51,9 +56,9 @@ const appFetch = async <T>(
       response = rawData as unknown as T;
     }
 
-    logger.trace(`FETCH RESPONSE`, { url, response });
+    logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
-    logger.error(`FETCH FAILED`, { url, status, error });
+    logger.error(`FETCH FAILED`, { url, status, error, ip });
   }
 
   return response;

package/utils/deep-merge.js

@@ -0,0 +1,24 @@
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return deepMerge(target, ...sources);
+}
+
+module.exports = deepMerge;

package/with-pz-config.js

@@ -0,0 +1,94 @@
+const pzPlugins = require('./plugins');
+const deepMerge = require('./utils/deep-merge');
+
+/** @type {import('next').NextConfig} */
+const defaultConfig = {
+  experimental: { serverActions: true },
+  reactStrictMode: true,
+  transpilePackages: ['@akinon/next', ...pzPlugins],
+  skipTrailingSlashRedirect: true,
+  poweredByHeader: false,
+  env: {
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.akinoncloud.com'
+      },
+      {
+        protocol: 'https',
+        hostname: '**.akinoncdn.com'
+      }
+    ]
+  },
+  modularizeImports: {
+    components: {
+      transform: 'components/{{ kebabCase member }}',
+      skipDefaultConversion: true
+    }
+  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff'
+          },
+          {
+            key: 'Strict-Transport-Security',
+            value: 'max-age=63072000; includeSubDomains; preload'
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'SAMEORIGIN'
+          }
+        ]
+      }
+    ];
+  },
+  webpack: (config, options) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      ...pzPlugins.reduce((acc, plugin) => {
+        acc[plugin] = false;
+        return acc;
+      }, {})
+    };
+    return config;
+  }
+};
+
+const withPzConfig = (myNextConfig = {}) => {
+  let extendedConfig = deepMerge({}, defaultConfig, myNextConfig);
+
+  const originalPzHeadersFunction = defaultConfig.headers;
+  extendedConfig.headers = async () => {
+    const pzHeaders = (await originalPzHeadersFunction?.()) ?? [];
+    const myHeaders = (await myNextConfig.headers?.()) ?? [];
+    return [...pzHeaders, ...myHeaders];
+  };
+
+  const originalPzWebpack = defaultConfig.webpack;
+  extendedConfig.webpack = (config, options) => {
+    let modifiedConfig = originalPzWebpack(config, options);
+    if (myNextConfig.webpack) {
+      modifiedConfig = myNextConfig.webpack(modifiedConfig, options);
+    }
+    return modifiedConfig;
+  };
+
+  const originalPzRewrites = defaultConfig.rewrites;
+  extendedConfig.rewrites = async () => {
+    const pzRewrites = (await originalPzRewrites?.()) ?? [];
+    const myRewrites = (await myNextConfig.rewrites?.()) ?? [];
+    return [...pzRewrites, ...myRewrites];
+  };
+
+  return extendedConfig;
+};
+
+module.exports = withPzConfig;