@akinon/next 1.42.0 → 1.43.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @akinon/next
 
+## 1.43.0-rc.1
+
+### Minor Changes
+
+- eecb282: ZERO-2607: Update address-related functions to include invalidateTag option
+
+## 1.43.0-rc.0
+
+### Minor Changes
+
+- 90282b5: ZERO-2729: Audit packages for yarn and npm and also update app-template
+- 572d2e8: ZERO-2667: Add iframe support for redirection payment methods
+- a4c8d6a: ZERO-2663: Fix the image url for gif and svgs and return them without options
+- fda5b92: ZERO-2725: fix invalid import
+- 2d9b2b2: ZERO-2816: Add segment to headers
+- c53ea3e: ZERO-2609: Reset additional form fields when selectedFormType is not company
+- 8d9ac9a: ZERO-2794: Add field to order type
+- e9541a1: ZERO-2816: Add headers to url
+- 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.
+- 0d3a913: ZERO-2725: Update decimal scale in Price component
+- 1448a96: ZERO-2612: add errors type in CheckoutState
+- d3474c6: ZERO-2655: Add data source shipping option
+- 75080fd: ZERO-2630: Add max limit to postcode area
+- 91265bb: ZERO-2551: Improve pretty url and caching performance
+- bbe18b9: ZERO-2575: Fix build error
+- d409996: ZERO-2781: Refactor buildClientRequestUrl function to support caching and options
+- 94b6928: ZERO-2551: Add cache handler check in url-redirection middleware
+- 98bb8dc: ZERO-2706: Cache getTranlations method
+- 46b7aad: ZERO-2775: Add condition and logger for menuitemmodel data
+- dcc8a15: ZERO-2694: added build step to RC branch pipeline
+- fad2768: ZERO-2739: add gpay to payment plugin map
+- dff0d59: ZERO-2659: add formData support to proxy api requests
+- beb499e: ZERO-2551: Add new tsconfig paths
+- 146ea39: ZERO-2774: Update imports
+- c47be30: ZERO-2744: Update Order and OrderItem types
+- e9a46ac: ZERO-2738: add CVC input to registered cards in Masterpass
+- f046f8e: ZERO-2575: update version for react-number-format
+- 86d2531: ZERO-2693: resolve dependency collision warning for eslint-config-next
+
 ## 1.42.0
 
 ### Minor Changes

package/api/client.ts

@@ -4,6 +4,7 @@ import settings from 'settings';
 import logger from '../utils/log';
 import formatCookieString from '../utils/format-cookie-string';
 import cookieParser from 'set-cookie-parser';
+import { cookies } from 'next/headers';
 
 interface RouteParams {
   params: {
@@ -74,16 +75,31 @@ async function proxyRequest(...args) {
     }
   } as RequestInit;
 
+  const nextCookies = cookies();
+  const segment = nextCookies.get('pz-segment')?.value;
+  const currency = nextCookies.get('pz-external-currency')?.value;
+
+  if (segment) {
+    fetchOptions.headers['X-Segment-Id'] = segment;
+  }
+
+  if (currency) {
+    fetchOptions.headers = Object.assign({}, fetchOptions.headers, {
+      'x-currency': currency
+    });
+  }
+
   if (options.contentType) {
     fetchOptions.headers['Content-Type'] = options.contentType;
   }
 
+  const isMultipartFormData = req.headers.get('content-type')?.includes('multipart/form-data;');
+
   if (req.method !== 'GET') {
-    const formData = new URLSearchParams();
-    let body = {};
+    let body: Record<string, any> | FormData = {};
 
     try {
-      body = await req.json();
+      body = isMultipartFormData ? await req.formData() : await req.json();
     } catch (error) {
       logger.error(
         `Client Proxy Request - Error while parsing request body to JSON`,
@@ -94,13 +110,21 @@ async function proxyRequest(...args) {
       );
     }
 
-    Object.keys(body ?? {}).forEach((key) => {
-      if (body[key]) {
-        formData.append(key, body[key]);
-      }
-    });
+    if (isMultipartFormData) {
+      fetchOptions.body = body as FormData;
+    } else {
+      const formData = new FormData();
+
+      Object.keys(body ?? {}).forEach((key) => {
+        if (body[key]) {
+          formData.append(key, body[key]);
+        }
+      });
 
-    fetchOptions.body = !options.useFormData ? JSON.stringify(body) : formData;
+      fetchOptions.body = !options.useFormData
+        ? JSON.stringify(body)
+        : formData;
+    }
   }
 
   let url = `${commerceUrl}/${slug.replace(/,/g, '/')}`;

package/assets/styles/index.css

@@ -0,0 +1,49 @@
+.checkout-payment-iframe-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1000;
+  background-color: white;
+}
+.checkout-payment-iframe-wrapper iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}
+.checkout-payment-iframe-wrapper .close-button {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+}
+
+.checkout-payment-redirection-iframe-wrapper {
+  width: 100%;
+  position: relative;
+}
+.checkout-payment-redirection-iframe-wrapper iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}
+.checkout-payment-redirection-iframe-wrapper .close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+}/*# sourceMappingURL=index.css.map */

package/assets/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACE,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;ACCF;ADCE;EACE,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACCJ;ADEE;EACE,eAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ACAJ;;ADIA;EACE,WAAA;EACA,kBAAA;ACDF;ADGE;EACE,WAAA;EACA,YAAA;EACA,YAAA;EACA,uBAAA;ACDJ;ADIE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ACFJ","file":"index.css"}

package/assets/styles/index.scss

@@ -1,29 +1,53 @@
 .checkout-payment-iframe-wrapper {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border: none;
-	z-index: 1000;
-	background-color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1000;
+  background-color: white;
 
-	iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-		background-color: white;
-	}
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: white;
+  }
 
-	.close-button {
-		position: fixed;
-		top: 16px;
-		right: 16px;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1001;
-	}
-}
+  .close-button {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+  }
+}
+
+.checkout-payment-redirection-iframe-wrapper {
+  width: 100%;
+  position: relative;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: white;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+  }
+}

package/components/input.tsx

@@ -1,17 +1,30 @@
 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 +50,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -79,14 +93,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/pagination.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { PaginationProps } from '@theme/components/types';
+import { PaginationProps } from '../types';
 import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
-
 import usePagination from '@akinon/next/hooks/use-pagination';
 import { useLocalization } from '@akinon/next/hooks';
 import { useRouter } from '@akinon/next/hooks';

package/components/price.tsx

@@ -1,11 +1,14 @@
 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';
+import Settings from 'settings';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -27,6 +30,10 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   // TODO: This is very bad practice. It broke decimalScale.
   const _value = value?.toString().replace('.', ',');
 
+  const currentCurrencyDecimalScale = Settings.localization.currencies.find(
+    (currency) => currency.code === currencyCode_
+  ).decimalScale;
+
   const currency = useMemo(
     () =>
       getCurrency({
@@ -39,14 +46,14 @@ export const Price = (props: NumberFormatProps & PriceProps) => {
   );
 
   return (
-    <NumberFormat
+    <NumericFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={decimalScale}
+      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

package/components/selected-payment-option-view.tsx

@@ -6,6 +6,21 @@ import dynamic from 'next/dynamic';
 import { PaymentOptionViews } from 'views/checkout/steps/payment';
 import { useMemo } from 'react';
 
+const fallbackView = () => <div />;
+
+const paymentTypeToView = {
+  bkm_express: 'bkm',
+  credit_card: 'credit-card',
+  credit_payment: 'credit-payment',
+  funds_transfer: 'funds-transfer',
+  gpay: 'gpay',
+  loyalty_money: 'loyalty',
+  masterpass: 'credit-card',
+  pay_on_delivery: 'pay-on-delivery',
+  redirection: 'redirection'
+  // Add other mappings as needed
+};
+
 export default function SelectedPaymentOptionView() {
   const { payment_option } = useAppSelector(
     (state: RootState) => state.checkout.preOrder
@@ -14,7 +29,7 @@ export default function SelectedPaymentOptionView() {
   const Component = useMemo(
     () =>
       dynamic(
-        () => {
+        async () => {
           const customOption = PaymentOptionViews.find(
             (opt) => opt.slug === payment_option.slug
           );
@@ -29,46 +44,19 @@ export default function SelectedPaymentOptionView() {
             });
           }
 
-          let promise: any;
-
-          try {
-            if (payment_option.payment_type === 'credit_card') {
-              promise = import(
-                `views/checkout/steps/payment/options/credit-card`
-              );
-            } else if (payment_option.payment_type === 'funds_transfer') {
-              promise = import(
-                `views/checkout/steps/payment/options/funds-transfer`
-              );
-            } else if (payment_option.payment_type === 'redirection') {
-              promise = import(
-                `views/checkout/steps/payment/options/redirection`
-              );
-            } else if (payment_option.payment_type === 'pay_on_delivery') {
-              promise = import(
-                `views/checkout/steps/payment/options/pay-on-delivery`
-              );
-            } else if (payment_option.payment_type === 'loyalty_money') {
-              promise = import(`views/checkout/steps/payment/options/loyalty`);
-            } else if (payment_option.payment_type === 'masterpass') {
-              promise = import(
-                `views/checkout/steps/payment/options/credit-card`
+          const view = paymentTypeToView[payment_option.payment_type];
+          if (view) {
+            try {
+              const mod = await import(
+                `views/checkout/steps/payment/options/${view}`
               );
+              return mod.default || fallbackView;
+            } catch (error) {
+              return fallbackView;
             }
-            // else if (payment_option.payment_type === 'credit_payment') {
-            //   promise = import(`views/checkout/steps/payment/options/credit-payment`);
-            // }
-            // else if (payment_option.payment_type === 'gpay') {
-            //   promise = import(`views/checkout/steps/payment/options/gpay`);
-            // }
-            // else if (payment_option.payment_type === 'bkm_express') {
-            //   promise = import(`views/checkout/steps/payment/options/bkm`);
-            // }
-          } catch (error) {}
+          }
 
-          return promise
-            ? promise.then((mod) => mod.default).catch(() => () => null)
-            : new Promise<any>((resolve) => resolve(() => null));
+          return fallbackView;
         },
         { ssr: false }
       ),

package/data/client/account.ts

@@ -123,15 +123,16 @@ const accountApi = api.injectEndpoints({
       query: ({ page, status, limit }) =>
         buildClientRequestUrl(account.getQuotations(page, status, limit))
     }),
-    sendContact: builder.mutation<void, ContactFormType>({
-      query: (body) => ({
-        url: buildClientRequestUrl(account.sendContact, {
-          contentType: 'application/json',
-          responseType: 'text'
-        }),
-        method: 'POST',
-        body
-      })
+    sendContact: builder.mutation<void, FormData>({
+      query: (body) => {
+        return {
+          url: buildClientRequestUrl(account.sendContact, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body
+        };
+      }
     }),
     cancelOrder: builder.mutation<void, AccountOrderCancellation>({
       query: ({ id, ...body }) => ({

package/data/client/address.ts

@@ -39,7 +39,10 @@ const addressApi = api.injectEndpoints({
       query: (city) =>
         buildClientRequestUrl(address.getRetailStoreTownships(city))
     }),
-    addAddress: builder.mutation<Address, Partial<Address>>({
+    addAddress: builder.mutation<
+      Address,
+      Partial<Address> & { invalidateTag?: 'Addresses' | 'Checkout' }
+    >({
       query: (body) => ({
         url: buildClientRequestUrl(address.base, {
           contentType: 'application/json'
@@ -50,9 +53,16 @@ const addressApi = api.injectEndpoints({
           type: body.is_corporate === 'true' ? 'corporate' : 'personal'
         }
       }),
-      invalidatesTags: (_, error) => (error ? [] : ['Addresses', 'Checkout'])
+      invalidatesTags: (_, error, arg) => {
+        if (error) return [];
+        if (arg.invalidateTag) return [arg.invalidateTag];
+        return ['Addresses', 'Checkout'];
+      }
     }),
-    editAddress: builder.mutation<Address, Partial<Address>>({
+    editAddress: builder.mutation<
+      Address,
+      Partial<Address> & { invalidateTag?: 'Addresses' | 'Checkout' }
+    >({
       query: ({ pk, ...body }) => ({
         url: buildClientRequestUrl(address.editAddress(pk), {
           contentType: 'application/json'
@@ -64,14 +74,28 @@ const addressApi = api.injectEndpoints({
           type: body.is_corporate === 'true' ? 'corporate' : 'personal'
         }
       }),
-      invalidatesTags: (_, error) => (error ? [] : ['Addresses', 'Checkout']) // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
+      invalidatesTags: (_, error, arg) => {
+        if (error) return [];
+        if (arg.invalidateTag) return [arg.invalidateTag];
+        return ['Addresses', 'Checkout'];
+      }
     }),
-    removeAddress: builder.mutation<void, number>({
-      query: (id) => ({
-        url: buildClientRequestUrl(address.removeAddress(id)),
+    removeAddress: builder.mutation<
+      void,
+      number | { id: number; invalidateTag: 'Addresses' | 'Checkout' }
+    >({
+      query: (arg) => ({
+        url: buildClientRequestUrl(
+          address.removeAddress(typeof arg === 'number' ? arg : arg.id)
+        ),
         method: 'DELETE'
       }),
-      invalidatesTags: (_, error) => (error ? [] : ['Addresses', 'Checkout']) // TODO: Invalidate one of these tags when necessary (e.g. Address page invalidates Addresses tag, Checkout page invalidates Checkout tag)
+      invalidatesTags: (_, error, arg) => {
+        if (error) return [];
+        if (typeof arg === 'object' && arg.invalidateTag)
+          return [arg.invalidateTag];
+        return ['Addresses', 'Checkout'];
+      }
     }),
     setDefaultAddress: builder.mutation<Address, Partial<Address>>({
       query: ({ pk, primary }) => ({

package/data/client/api.ts

@@ -9,7 +9,7 @@ import {
 } from '@reduxjs/toolkit/query/react';
 import settings from 'settings';
 import { getCookie } from '../../utils';
-import { RootState } from '@theme/redux/store';
+import { RootState } from 'redux/store';
 
 interface CustomBaseQueryApi extends BaseQueryApi {
   getState: () => RootState;

package/data/client/checkout.ts

@@ -1,11 +1,11 @@
 import {
   setBankAccounts,
+  setCardType,
   setInstallmentOptions,
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
-  setShippingStepBusy,
-  setCardType
+  setShippingStepBusy
 } from '../../redux/reducers/checkout';
 import {
   CheckoutContext,
@@ -20,6 +20,7 @@ import { AppDispatch, AppStore, store } from 'redux/store';
 import settings from 'settings';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
 import {
+  setCvcRequired,
   setError,
   setOtpModalVisible
 } from '@akinon/pz-masterpass/src/redux/reducer';
@@ -113,7 +114,8 @@ const completeMasterpassPayment = async (
     ? await buildDirectPurchaseForm(commonFormValues, params)
     : await buildPurchaseForm({
         ...commonFormValues,
-        selectedCard
+        selectedCard,
+        cardCvc: params?.card_cvv
       });
 
   window.MFS?.[
@@ -151,6 +153,10 @@ const completeMasterpassPayment = async (
       return;
     }
 
+    if (['5013', '5182'].includes(response.responseCode)) {
+      dispatch(setCvcRequired(true));
+    }
+
     if (
       response.token &&
       (response.responseCode == '0000' || response.responseCode == '')
@@ -373,6 +379,22 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setShippingStepBusy(false));
       }
     }),
+    setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
+      query: (pks) => ({
+        url: buildClientRequestUrl(checkout.setDataSourceShippingOption, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          data_source_shipping_options: JSON.stringify(pks)
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setShippingStepBusy(true));
+        await queryFulfilled;
+        dispatch(setShippingStepBusy(false));
+      }
+    }),
     setRetailStore: build.mutation<CheckoutResponse, SetRetailStoreParams>({
       query: ({ retailStorePk, billingAddressPk }) => ({
         url: buildClientRequestUrl(
@@ -672,6 +694,7 @@ export const {
   useSetDeliveryOptionMutation,
   useSetAddressesMutation,
   useSetShippingOptionMutation,
+  useSetDataSourceShippingOptionsMutation,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,