@akinon/next 1.42.0-rc.9 → 1.42.0

package/CHANGELOG.md

@@ -1,63 +1,10 @@
 # @akinon/next
 
-## 1.42.0-rc.9
-
-## 1.42.0-rc.8
-
-### Minor Changes
-
-- d409996: ZERO-2781: Refactor buildClientRequestUrl function to support caching and options
-
-## 1.42.0-rc.7
-
-## 1.42.0-rc.6
-
-### Minor Changes
-
-- 146ea39: ZERO-2774: Update imports
-
-## 1.42.0-rc.5
-
-## 1.42.0-rc.4
-
-### Minor Changes
-
-- 46b7aad: ZERO-2775: Add condition and logger for menuitemmodel data
-
-## 1.42.0-rc.3
-
-### Minor Changes
-
-- fda5b92: ZERO-2725: fix invalid import
-
-## 1.42.0-rc.2
-
-## 1.42.0-rc.1
-
-## 1.42.0-rc.0
+## 1.42.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
+- 5ea00a6: ZERO-2761: Add multi basket package
 
 ## 1.41.0
 

package/api/client.ts

@@ -78,13 +78,12 @@ 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') {
-    let body: Record<string, any> | FormData = {};
+    const formData = new URLSearchParams();
+    let body = {};
 
     try {
-      body = isMultipartFormData ? await req.formData() : await req.json();
+      body = await req.json();
     } catch (error) {
       logger.error(
         `Client Proxy Request - Error while parsing request body to JSON`,
@@ -95,21 +94,13 @@ async function proxyRequest(...args) {
       );
     }
 
-    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]);
-        }
-      });
+    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.scss

@@ -1,53 +1,29 @@
 .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;
-  }
-}
-
-.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;
-  }
-}
+	.close-button {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+	}
+}

package/components/input.tsx

@@ -1,30 +1,17 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState, Ref } from 'react';
+import { forwardRef, FocusEvent, useState } from 'react';
 import { Controller } from 'react-hook-form';
-
-// @ts-ignore
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } 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<
-      PatternFormatProps,
-      'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    > & {
-      format?: string;
-      defaultValue?: string;
-      type?: string;
-    }
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -50,7 +37,6 @@ export const Input = forwardRef<
     ),
     props.className
   );
-
   const inputProps: any = {
     id,
     ref,
@@ -93,14 +79,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
+              defaultValue={false}
               render={({ field }) => (
-                <PatternFormatWithRef
+                <NumberFormat
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
-                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/components/link.tsx

@@ -10,32 +10,28 @@ type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof NextLinkProps
 > &
-  NextLinkProps & {
-    href: string;
-  };
+  NextLinkProps;
 
 export const Link = ({ children, href, ...rest }: LinkProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
   const formattedHref = useMemo(() => {
-    if (!href) {
-      return '#';
+    if (typeof href !== 'string' || href.startsWith('http')) {
+      return href;
     }
 
-    if (typeof href === 'string' && !href.startsWith('http')) {
-      const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+    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,9 +1,10 @@
 'use client';
 
 import { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { PaginationProps } from '../types';
+import { PaginationProps } from '@theme/components/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/plugin-module.tsx

@@ -18,7 +18,8 @@ enum Plugin {
   CreditPayment = 'pz-credit-payment',
   Masterpass = 'pz-masterpass',
   B2B = 'pz-b2b',
-  Akifast = 'pz-akifast'
+  Akifast = 'pz-akifast',
+  MultiBasket = 'pz-multi-basket'
 }
 
 export enum Component {
@@ -41,7 +42,8 @@ export enum Component {
   MyQuotationsB2B = 'AccountMyQuotations',
   BasketB2B = 'BasketB2b',
   AkifastQuickLoginButton = 'QuickLoginButton',
-  AkifastCheckoutButton = 'CheckoutButton'
+  AkifastCheckoutButton = 'CheckoutButton',
+  MultiBasket = 'MultiBasket'
 }
 
 const PluginComponents = new Map([
@@ -72,7 +74,8 @@ const PluginComponents = new Map([
   [
     Plugin.Akifast,
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
-  ]
+  ],
+  [Plugin.MultiBasket, [Component.MultiBasket]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -133,6 +136,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-b2b'}`);
             } else if (plugin === Plugin.Akifast) {
               promise = import(`${'@akinon/pz-akifast'}`);
+            } else if (plugin === Plugin.MultiBasket) {
+              promise = import('@akinon/pz-multi-basket');
             }
           } catch (error) {
             logger.error(error);

package/components/price.tsx

@@ -1,14 +1,11 @@
 import { useMemo } from 'react';
-
-// @ts-ignore
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } 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: NumericFormatProps & PriceProps) => {
+export const Price = (props: NumberFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -30,10 +27,6 @@ export const Price = (props: NumericFormatProps & 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({
@@ -46,14 +39,14 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
   );
 
   return (
-    <NumericFormat
+    <NumberFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
+      decimalScale={decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

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

@@ -6,21 +6,6 @@ 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
@@ -29,7 +14,7 @@ export default function SelectedPaymentOptionView() {
   const Component = useMemo(
     () =>
       dynamic(
-        async () => {
+        () => {
           const customOption = PaymentOptionViews.find(
             (opt) => opt.slug === payment_option.slug
           );
@@ -44,19 +29,46 @@ export default function SelectedPaymentOptionView() {
             });
           }
 
-          const view = paymentTypeToView[payment_option.payment_type];
-          if (view) {
-            try {
-              const mod = await import(
-                `views/checkout/steps/payment/options/${view}`
+          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`
               );
-              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 fallbackView;
+          return promise
+            ? promise.then((mod) => mod.default).catch(() => () => null)
+            : new Promise<any>((resolve) => resolve(() => null));
         },
         { ssr: false }
       ),

package/data/client/account.ts

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

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 'redux/store';
+import { RootState } from '@theme/redux/store';
 
 interface CustomBaseQueryApi extends BaseQueryApi {
   getState: () => RootState;
@@ -67,6 +67,7 @@ export const api = createApi({
   baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
+    'AllBaskets',
     'BasketB2b',
     'DraftsB2b',
     'Product',

package/data/client/basket.ts

@@ -24,6 +24,44 @@ export const basketApi = api.injectEndpoints({
       transformResponse: (response: { basket: Basket }) => response.basket,
       providesTags: ['Basket']
     }),
+    getBasketDetail: build.mutation<Basket, { namespace: string }>({
+      query: ({ namespace }) => ({
+        url: buildClientRequestUrl(basket.getBasketDetail(namespace), {
+          contentType: 'application/json'
+        }),
+        method: 'GET'
+      }),
+      invalidatesTags: ['AllBaskets']
+    }),
+    getAllBaskets: build.query<Basket[], void>({
+      query: () =>
+        buildClientRequestUrl(basket.getAllBaskets, {
+          contentType: 'application/json'
+        }),
+      transformResponse: (response: { baskets: Basket[] }) => response.baskets,
+      providesTags: ['AllBaskets']
+    }),
+    removeBasket: build.mutation<Basket, { pk: number }>({
+      query: ({ pk }) => ({
+        url: buildClientRequestUrl(basket.removeBasket(pk), {
+          contentType: 'application/json'
+        }),
+        method: 'DELETE',
+        body: { pk }
+      }),
+      invalidatesTags: ['AllBaskets', 'Basket']
+    }),
+    selectMainBasket: build.mutation<Basket, { pk: number }>({
+      query: ({ pk }) => ({
+        url: buildClientRequestUrl(basket.selectMainBasket(pk), {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body: { pk }
+      }),
+      transformResponse: (response: { baskets: Basket }) => response.baskets,
+      invalidatesTags: ['AllBaskets', 'Basket']
+    }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
       UpdateQuantityRequest
@@ -75,6 +113,10 @@ export const basketApi = api.injectEndpoints({
 
 export const {
   useGetBasketQuery,
+  useGetBasketDetailMutation,
+  useGetAllBasketsQuery,
+  useRemoveBasketMutation,
+  useSelectMainBasketMutation,
   useUpdateQuantityMutation,
   useClearBasketMutation,
   useApplyVoucherCodeMutation,

package/data/client/checkout.ts

@@ -1,11 +1,11 @@
 import {
   setBankAccounts,
-  setCardType,
   setInstallmentOptions,
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
-  setShippingStepBusy
+  setShippingStepBusy,
+  setCardType
 } from '../../redux/reducers/checkout';
 import {
   CheckoutContext,
@@ -20,7 +20,6 @@ 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';
@@ -114,8 +113,7 @@ const completeMasterpassPayment = async (
     ? await buildDirectPurchaseForm(commonFormValues, params)
     : await buildPurchaseForm({
         ...commonFormValues,
-        selectedCard,
-        cardCvc: params?.card_cvv
+        selectedCard
       });
 
   window.MFS?.[
@@ -153,10 +151,6 @@ const completeMasterpassPayment = async (
       return;
     }
 
-    if (['5013', '5182'].includes(response.responseCode)) {
-      dispatch(setCvcRequired(true));
-    }
-
     if (
       response.token &&
       (response.responseCode == '0000' || response.responseCode == '')
@@ -379,22 +373,6 @@ 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(
@@ -694,7 +672,6 @@ 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?: { [key: string]: string | string[] | undefined },
+  searchParams?: URLSearchParams,
   headers?: Record<string, string>
 ) {
   return async function () {
@@ -78,7 +78,7 @@ export const getCategoryData = ({
   headers
 }: {
   pk: number;
-  searchParams?: { [key: string]: string | string[] | undefined };
+  searchParams?: URLSearchParams;
   headers?: Record<string, string>;
 }) => {
   return Cache.wrap(