@akinon/next 1.59.0 → 1.60.0-rc.7

package/middlewares/saved-card-redirection.ts

@@ -0,0 +1,179 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import Settings from 'settings';
+import { Buffer } from 'buffer';
+import logger from '../utils/log';
+import { getUrlPathWithLocale } from '../utils/localization';
+import { PzNextRequest } from '.';
+
+const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
+  if (stream) {
+    const chunks = [];
+    let result = '';
+
+    try {
+      for await (const chunk of stream as any) {
+        chunks.push(Buffer.from(chunk));
+      }
+
+      result = Buffer.concat(chunks).toString('utf-8');
+    } catch (error) {
+      logger.error('Error while reading body stream', {
+        middleware: 'saved-card-redirection',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withSavedCardRedirection =
+  (middleware: NextMiddleware) =>
+  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('SavedCardThreeDSecurePage') === -1) {
+      return middleware(req, event);
+    }
+
+    const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`,
+      '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: 'saved-card-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,
+        body
+      });
+
+      logger.info('Complete 3D payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList, errors } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
+
+      if (errors && Object.keys(errors).length) {
+        logger.error('Error while completing 3D payment', {
+          middleware: 'saved-card-redirection',
+          errors,
+          requestHeaders,
+          ip
+        });
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          {
+            status: 303,
+            headers: {
+              'Set-Cookie': `pz-pos-error=${JSON.stringify(errors)}; path=/;`
+            }
+          }
+        );
+      }
+
+      logger.info('Order success page context list', {
+        middleware: 'saved-card-redirection',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'saved-card-redirection',
+            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: 'saved-card-redirection',
+        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 3D payment', {
+        middleware: 'saved-card-redirection',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withSavedCardRedirection;

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.59.0",
+  "version": "1.60.0-rc.7",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -20,16 +20,17 @@
     "@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",
+    "redis": "4.6.13",
     "semver": "7.6.2",
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.59.0",
+    "@akinon/eslint-plugin-projectzero": "1.60.0-rc.7",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/plugins.d.ts

@@ -21,4 +21,10 @@ declare module '@akinon/pz-otp' {
 
 declare module '@akinon/pz-otp/src/redux/reducer' {
   export const showPopup: any;
+  export const hidePopup: any;
+}
+
+declare module '@akinon/pz-saved-card' {
+  export const savedCardReducer: any;
+  export const SavedCardOption: any;
 }

package/plugins.js

@@ -12,5 +12,6 @@ module.exports = [
   'pz-b2b',
   'pz-akifast',
   'pz-multi-basket',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-saved-card'
 ];

package/redux/middlewares/checkout.ts

@@ -3,9 +3,12 @@
 import { Middleware } from '@reduxjs/toolkit';
 import {
   setAddressList,
+  setAttributeBasedShippingOptions,
   setBankAccounts,
   setCanGuestPurchase,
   setCardType,
+  setCreditPaymentOptions,
+  setDataSourceShippingOptions,
   setDeliveryOptions,
   setErrors,
   setHasGiftBox,
@@ -16,16 +19,16 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
-  setShippingStepCompleted,
-  setCreditPaymentOptions
+  setShippingStepCompleted
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
 import { CheckoutContext, PreOrder } from '../../types';
-import { getCookie, setCookie } from '../../utils';
+import { getCookie } 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: {
@@ -73,8 +76,10 @@ export const preOrderMiddleware: Middleware = ({
       deliveryOptions,
       addressList: addresses,
       shippingOptions,
+      dataSourceShippingOptions,
       paymentOptions,
-      installmentOptions
+      installmentOptions,
+      attributeBasedShippingOptions
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
@@ -107,7 +112,8 @@ export const preOrderMiddleware: Middleware = ({
     if (
       (!preOrder.shipping_address || !preOrder.billing_address) &&
       addresses.length > 0 &&
-      preOrder.delivery_option?.delivery_option_type === 'customer'
+      (!preOrder.delivery_option ||
+        preOrder.delivery_option.delivery_option_type === 'customer')
     ) {
       dispatch(
         apiEndpoints.setAddresses.initiate({
@@ -125,11 +131,49 @@ 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));
     }
 
-    if (!preOrder.installment && installmentOptions.length > 0) {
+    if (
+      !preOrder.installment &&
+      preOrder.payment_option.payment_type !== 'saved_card' &&
+      installmentOptions.length > 0
+    ) {
       dispatch(
         apiEndpoints.setInstallmentOption.initiate(installmentOptions[0].pk)
       );
@@ -163,6 +207,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 +226,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 +268,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) {

package/redux/reducers/checkout.ts

@@ -14,7 +14,9 @@ import {
   CheckoutCreditPaymentOption,
   PreOrder,
   RetailStore,
-  ShippingOption
+  ShippingOption,
+  DataSource,
+  AttributeBasedShippingOption
 } from '../../types';
 
 export interface CheckoutState {
@@ -36,6 +38,7 @@ export interface CheckoutState {
   addressList: Address[];
   deliveryOptions: DeliveryOption[];
   shippingOptions: ShippingOption[];
+  dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
@@ -46,6 +49,8 @@ export interface CheckoutState {
   selectedBankAccountPk: number;
   loyaltyBalance?: string;
   retailStores: RetailStore[];
+  attributeBasedShippingOptions: AttributeBasedShippingOption[];
+  selectedShippingOptions: Record<string, number>;
 }
 
 const initialState: CheckoutState = {
@@ -67,6 +72,7 @@ const initialState: CheckoutState = {
   addressList: [],
   deliveryOptions: [],
   shippingOptions: [],
+  dataSourceShippingOptions: [],
   paymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
@@ -75,7 +81,9 @@ const initialState: CheckoutState = {
   installmentOptions: [],
   bankAccounts: [],
   selectedBankAccountPk: null,
-  retailStores: []
+  retailStores: [],
+  attributeBasedShippingOptions: [],
+  selectedShippingOptions: {}
 };
 
 const checkoutSlice = createSlice({
@@ -121,6 +129,9 @@ const checkoutSlice = createSlice({
     setShippingOptions(state, { payload }) {
       state.shippingOptions = payload;
     },
+    setDataSourceShippingOptions(state, { payload }) {
+      state.dataSourceShippingOptions = payload;
+    },
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
@@ -150,6 +161,12 @@ const checkoutSlice = createSlice({
     },
     setRetailStores(state, { payload }) {
       state.retailStores = payload;
+    },
+    setAttributeBasedShippingOptions(state, { payload }) {
+      state.attributeBasedShippingOptions = payload;
+    },
+    setSelectedShippingOptions: (state, { payload }) => {
+      state.selectedShippingOptions = payload;
     }
   }
 });
@@ -168,6 +185,7 @@ export const {
   setAddressList,
   setDeliveryOptions,
   setShippingOptions,
+  setDataSourceShippingOptions,
   setPaymentOptions,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,
@@ -177,7 +195,9 @@ export const {
   setBankAccounts,
   setSelectedBankAccountPk,
   setLoyaltyBalance,
-  setRetailStores
+  setRetailStores,
+  setAttributeBasedShippingOptions,
+  setSelectedShippingOptions
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/redux/reducers/index.ts

@@ -7,6 +7,7 @@ import { api } from '../../data/client/api';
 // Plugin reducers
 import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
+import { savedCardReducer } from '@akinon/pz-saved-card';
 
 const reducers = {
   [api.reducerPath]: api.reducer,
@@ -15,7 +16,8 @@ const reducers = {
   config: configReducer,
   header: headerReducer,
   masterpass: masterpassReducer,
-  otp: otpReducer
+  otp: otpReducer,
+  savedCard: savedCardReducer
 };
 
 export default reducers;