@akinon/next 1.60.0 → 1.61.0-rc.23

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: 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: '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/three-d-redirection.ts

@@ -43,7 +43,7 @@ const withThreeDRedirection =
     const requestHeaders = {
       'X-Requested-With': 'XMLHttpRequest',
       'Content-Type': 'application/x-www-form-urlencoded',
-      Cookie: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`,
+      Cookie: req.headers.get('cookie') ?? '',
       'x-currency': req.cookies.get('pz-currency')?.value ?? '',
       'x-forwarded-for': ip
     };

package/middlewares/url-redirection.ts

@@ -1,4 +1,4 @@
-import { NextFetchEvent, NextMiddleware } from 'next/server';
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
 import settings from 'settings';
 import { PzNextRequest } from '.';
 import logger from '../utils/log';
@@ -58,7 +58,19 @@ const withUrlRedirection =
           req.middlewareParams.rewrites.locale
         );
 
-        return Response.redirect(redirectUrl.toString(), request.status);
+        const setCookies = request.headers.getSetCookie();
+
+        const response = NextResponse.redirect(redirectUrl.toString(), {
+          status: request.status
+        });
+
+        if (setCookies && setCookies.length > 0) {
+          for (const cookie of setCookies) {
+            response.headers.append('Set-Cookie', cookie);
+          }
+        }
+
+        return response;
       }
     } catch (error) {
       logger.error('withUrlRedirection error', {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.60.0",
+  "version": "1.61.0-rc.23",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.60.0",
+    "@akinon/eslint-plugin-projectzero": "1.61.0-rc.23",
     "@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,8 +19,7 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
-  setShippingStepCompleted,
-  setCreditPaymentOptions
+  setShippingStepCompleted
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
@@ -26,6 +28,7 @@ import { getCookie, setCookie } from '../../utils';
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../../localization';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+import { showRedirectionIframe } from '../../utils/redirection-iframe';
 
 interface CheckoutResult {
   payload: {
@@ -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.attribute_based_shipping_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);
+          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 (
-            (isMobileApp ||
-              /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
-            !settings.checkout?.iframeExcludedPaymentOptions?.includes(
-              result.payload?.pre_order?.payment_option?.slug
-            )
-          ) {
+          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;

package/routes/pretty-url.tsx

@@ -63,14 +63,12 @@ export async function generateMetadata({ params }: PageProps) {
     .filter((x) => !x.startsWith('searchparams'))
     .join('/');
 
-  const searchParams = Object.fromEntries(
-    new URLSearchParams(
-      decodeURIComponent(
-        prettyurl
-          .find((x) => x.startsWith('searchparams'))
-          ?.replace('searchparams%7C', '')
-      ) ?? {}
-    ).entries()
+  const searchParams = new URLSearchParams(
+    decodeURIComponent(
+      prettyurl
+        .find((x) => x.startsWith('searchparams'))
+        ?.replace('searchparams%7C', '')
+    ) ?? {}
   );
 
   const prettyUrlResult = await resolvePrettyUrlHandler(pageSlug, null)();
@@ -162,7 +160,7 @@ export default async function Page({ params }) {
       ...params,
       pk: result.pk
     },
-    searchParams
+    searchParams: new URLSearchParams(searchParams)
   };
 
   if (result.path.startsWith('/category/')) {

package/types/commerce/address.ts

@@ -17,7 +17,7 @@ export type AddressFormType = {
   line: string;
   postcode: string;
   company_name?: string;
-  tax_no?: number;
+  tax_no?: string;
   tax_office?: string;
   e_bill_taxpayer?: boolean;
   country_code?: string;

package/types/commerce/b2b.ts

@@ -72,7 +72,7 @@ export type BasketItemType = {
   divisions: BasketItemDivision[];
   product: ProductB2b;
   product_remote_id: number;
-}
+};
 
 export type BasketParams = {
   division: string;
@@ -91,7 +91,7 @@ export type CreateQuotationParams = {
 export type UpdateProductParams = {
   product_remote_id: number;
   division: number;
-  quantity: number
+  quantity: number;
 };
 
 export type DeleteProductParams = {
@@ -115,3 +115,13 @@ export type DraftResponse = {
   total_amount: number;
   total_quantity: number;
 };
+
+export type BasketStatusResponse = {
+  is_ready: boolean;
+  status: string;
+  url: string;
+};
+
+export type ExportBasketResponse = {
+  cache_key: string;
+};

package/types/commerce/checkout.ts

@@ -34,6 +34,23 @@ export interface ShippingOption {
   slug: string;
 }
 
+export interface DataSource {
+  pk: number;
+  name: string;
+  data_source_shipping_options: DataSourceShippingOption[];
+}
+
+export interface DataSourceShippingOption {
+  pk: number;
+  shipping_amount: string;
+  shipping_option_name: string;
+  shipping_option_logo: string | null;
+  data_source: {
+    pk: number;
+    title: string | null;
+  };
+}
+
 export interface CheckoutAddressType {
   label: string;
   text: string;
@@ -69,6 +86,7 @@ export interface PreOrder {
   total_amount?: string;
   total_amount_with_interest?: string;
   unpaid_amount?: string;
+  notes?: string;
   user_phone_number?: string;
   loyalty_money?: string;
   currency_type_label?: string;
@@ -79,6 +97,8 @@ export interface PreOrder {
   retail_store?: RetailStore;
   gift_box?: GiftBox;
   credit_payment_option?: CheckoutCreditPaymentOption;
+  data_source_shipping_options: any;
+  attribute_based_shipping_options?: AttributeBasedShippingOption[];
   bags?: Product[];
   bags_fee?: string;
   extra_field?: ExtraField;
@@ -123,6 +143,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    attribute_based_shipping_options?: AttributeBasedShippingOption[];
     [key: string]: any;
   };
 }
@@ -148,3 +169,13 @@ export interface BankAccount {
   pk: number;
   sort_order: number;
 }
+
+export interface AttributeBasedShippingOption {
+  pk: number;
+  shipping_amount: string | null;
+  shipping_option_name: string | null;
+  shipping_option_logo: string | null;
+  attribute_value: string | null;
+  attribute_key: string;
+  [key: string]: any;
+}

package/types/commerce/order.ts

@@ -114,6 +114,7 @@ export interface Order {
     pk: number;
     name: string;
     slug: string;
+    logo: string;
     [key: string]: any;
   };
 }