@akinon/next 1.41.0 → 1.42.0-rc.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @akinon/next
 
+## 1.42.0-rc.1
+
+## 1.42.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
+- c53ea3e: ZERO-2609: Reset additional form fields when selectedFormType is not company
+- 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
+- 98bb8dc: ZERO-2706: Cache getTranlations method
+- 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
+- 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.41.0
 
 ### Minor Changes

package/api/client.ts

@@ -78,12 +78,13 @@ async function proxyRequest(...args) {
     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 +95,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,29 @@
 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 +49,7 @@ export const Input = forwardRef<
     ),
     props.className
   );
+
   const inputProps: any = {
     id,
     ref,
@@ -79,14 +92,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/price.tsx

@@ -1,11 +1,13 @@
 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 '@theme/settings';
 
-export const Price = (props: NumberFormatProps & PriceProps) => {
+export const Price = (props: NumericFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -27,6 +29,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 +45,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/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,

package/data/server/category.ts

@@ -8,7 +8,7 @@ import logger from '../../utils/log';
 
 function getCategoryDataHandler(
   pk: number,
-  searchParams?: URLSearchParams,
+  searchParams?: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) {
   return async function () {
@@ -78,7 +78,7 @@ export const getCategoryData = ({
   headers
 }: {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/list.ts

@@ -7,7 +7,7 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 
 const getListDataHandler = (
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -54,7 +54,7 @@ export const getListData = async ({
   searchParams,
   headers
 }: {
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/server/product.ts

@@ -9,7 +9,7 @@ import appFetch from '../../utils/app-fetch';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -74,10 +74,7 @@ export const getProductData = async ({
   groupProduct
 }: GetProduct) => {
   return Cache.wrap(
-    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
-      pk,
-      searchParams ?? new URLSearchParams()
-    ),
+    CacheKey[groupProduct ? 'GroupProduct' : 'Product'](pk, searchParams ?? {}),
     getProductDataHandler({ pk, searchParams, groupProduct }),
     {
       expire: 300

package/data/server/special-page.ts

@@ -7,7 +7,7 @@ import header from '../../redux/reducers/header';
 
 const getSpecialPageDataHandler = (
   pk: number,
-  searchParams: URLSearchParams,
+  searchParams: { [key: string]: string | string[] | undefined },
   headers?: Record<string, string>
 ) => {
   return async function () {
@@ -34,7 +34,7 @@ export const getSpecialPageData = async ({
   headers
 }: {
   pk: number;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(

package/data/urls.ts

@@ -79,6 +79,8 @@ export const checkout = {
   setDeliveryOption: '/orders/checkout/?page=DeliveryOptionSelectionPage',
   setAddresses: '/orders/checkout/?page=AddressSelectionPage',
   setShippingOption: '/orders/checkout/?page=ShippingOptionSelectionPage',
+  setDataSourceShippingOption:
+    '/orders/checkout/?page=DataSourceShippingOptionSelectionPage',
   setPaymentOption: '/orders/checkout/?page=PaymentOptionSelectionPage',
   setBinNumber: '/orders/checkout/?page=BinNumberPage',
   setMasterpassBinNumber: '/orders/checkout/?page=MasterpassBinNumberPage',

package/hocs/server/with-segment-defaults.tsx

@@ -2,7 +2,7 @@ import settings from 'settings';
 import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
 import { redirect } from 'next/navigation';
 import { ServerVariables } from '../../utils/server-variables';
-import { getTranslations } from '../../utils/server-translation';
+import { getCachedTranslations } from '../../utils/server-translation';
 import { ROUTES } from 'routes';
 import logger from '../../utils/log';
 
@@ -50,7 +50,7 @@ const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
     return redirect(ROUTES.HOME);
   }
 
-  const translations = await getTranslations(params.locale);
+  const translations = await getCachedTranslations(params.locale);
   componentProps.translations = translations;
 
   const locale = settings.localization.locales.find(

package/hooks/index.ts

@@ -8,4 +8,5 @@ export * from './use-media-query';
 export * from './use-on-click-outside';
 export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
-export * from './use-pagination';
+export * from './use-pagination';
+export * from './use-message-listener';