@akinon/next 1.47.0 → 1.48.0-rc.0

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;
@@ -67,7 +67,7 @@ export const api = createApi({
   baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
-    'AllBaskets',
+    'MultiBasket',
     'BasketB2b',
     'DraftsB2b',
     'Product',

package/data/client/b2b.ts

@@ -12,7 +12,9 @@ import {
   SaveBasketParams,
   UpdateProductParams,
   DeleteProductParams,
-  CreateQuotationParams
+  CreateQuotationParams,
+  BasketStatusResponse,
+  ExportBasketResponse
 } from '../../types';
 
 const b2bApi = api.injectEndpoints({
@@ -89,6 +91,34 @@ const b2bApi = api.injectEndpoints({
       }),
       invalidatesTags: ['BasketB2b', 'DraftsB2b']
     }),
+    exportBasket: build.mutation<ExportBasketResponse, string>({
+      query: (queryString) => {
+        return {
+          url: buildClientRequestUrl(b2b.basketExport(queryString)),
+          method: 'GET'
+        };
+      }
+    }),
+    getBasketStatus: build.mutation<BasketStatusResponse, string>({
+      query: (cacheKey) => {
+        return {
+          url: buildClientRequestUrl(b2b.statusBasket(cacheKey)),
+          method: 'GET'
+        };
+      }
+    }),
+    uploadFile: build.mutation<void, FormData>({
+      query: (body) => {
+        return {
+          url: buildClientRequestUrl(b2b.basketImport, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body
+        };
+      },
+      invalidatesTags: ['BasketB2b']
+    })
   }),
   overrideExisting: true
 });
@@ -102,5 +132,8 @@ export const {
   useLoadBasketMutation,
   useUpdateProductMutation,
   useDeleteProductMutation,
-  useCreateQuotationMutation
+  useCreateQuotationMutation,
+  useGetBasketStatusMutation,
+  useExportBasketMutation,
+  useUploadFileMutation
 } = b2bApi;

package/data/client/basket.ts

@@ -28,7 +28,7 @@ export const basketApi = api.injectEndpoints({
       query: ({ namespace }) =>
         buildClientRequestUrl(basket.getBasketDetail(namespace)),
       transformResponse: (response: { basket: Basket }) => response.basket,
-      providesTags: ['AllBaskets']
+      providesTags: ['MultiBasket']
     }),
     getAllBaskets: build.query<Basket[], void>({
       query: () =>
@@ -36,7 +36,7 @@ export const basketApi = api.injectEndpoints({
           contentType: 'application/json'
         }),
       transformResponse: (response: { baskets: Basket[] }) => response.baskets,
-      providesTags: ['AllBaskets']
+      providesTags: ['MultiBasket']
     }),
     removeBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -46,7 +46,7 @@ export const basketApi = api.injectEndpoints({
         method: 'DELETE',
         body: { pk }
       }),
-      invalidatesTags: ['AllBaskets', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     selectMainBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -57,7 +57,7 @@ export const basketApi = api.injectEndpoints({
         body: { pk }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['AllBaskets', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
@@ -69,7 +69,8 @@ export const basketApi = api.injectEndpoints({
         }),
         method: 'PUT',
         body
-      })
+      }),
+      invalidatesTags: ['MultiBasket', 'Basket']
     }),
     clearBasket: build.mutation<Basket, void>({
       query: (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(
@@ -654,6 +676,25 @@ export const checkoutApi = api.injectEndpoints({
           notes
         }
       })
+    }),
+    setAttributeBasedShippingOptions: build.mutation<
+      CheckoutResponse,
+      Record<string, number>
+    >({
+      query: (options) => ({
+        url: buildClientRequestUrl(checkout.setAttributeBasedShippingOption, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          attribute_based_shipping_options: JSON.stringify(options)
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setShippingStepBusy(true));
+        await queryFulfilled;
+        dispatch(setShippingStepBusy(false));
+      }
     })
   }),
   overrideExisting: false
@@ -672,6 +713,7 @@ export const {
   useSetDeliveryOptionMutation,
   useSetAddressesMutation,
   useSetShippingOptionMutation,
+  useSetDataSourceShippingOptionsMutation,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,
@@ -688,5 +730,6 @@ export const {
   useCompleteLoyaltyPaymentMutation,
   useGetCheckoutLoyaltyBalanceQuery,
   usePayWithLoyaltyBalanceMutation,
-  useSetOrderNoteMutation
+  useSetOrderNoteMutation,
+  useSetAttributeBasedShippingOptionsMutation
 } = checkoutApi;

package/data/client/user.ts

@@ -22,11 +22,12 @@ const userApi = api.injectEndpoints({
     getCaptcha: build.query<GetCaptchaResponse, void>({
       query: () => buildClientRequestUrl(user.captcha),
       transformResponse: (response: { html: string }) => {
-        const siteKeyMatch = response.html.match(/sitekey=["|'][^"']+/gi);
+        const siteKey = response.html.match(/data-sitekey="([^"]+)"/i)[1];
+
         const csrfTokenMatch = response.html.match(
           /name=['|"]csrfmiddlewaretoken['|"] value=['|"][^'"]+/gi
         );
-        const siteKey = siteKeyMatch?.[0].replace(/sitekey=["|']/, '') || '';
+
         const csrfToken =
           csrfTokenMatch?.[0].replace(
             /name=['|"]csrfmiddlewaretoken['|"] value=['|"]/gi,

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

@@ -1,15 +1,12 @@
 import { Cache, CacheKey } from '../../lib/cache';
 import { product } from '../urls';
-import {
-  BreadcrumbResultType,
-  ProductCategoryResult,
-  ProductResult
-} from '../../types';
+import { ProductCategoryResult, ProductResult } from '../../types';
 import appFetch from '../../utils/app-fetch';
+import logger from '../../utils/log';
 
 type GetProduct = {
   pk: number;
-  searchParams?: URLSearchParams;
+  searchParams?: { [key: string]: string | string[] | undefined };
   groupProduct?: boolean;
 };
 
@@ -50,9 +47,17 @@ const getProductDataHandler = ({
       }
     );
 
-    const breadcrumbUrl = product.breadcrumbUrl(
-      productCategoryData.results[0].menuitemmodel
-    );
+    const menuItemModel = productCategoryData?.results[0]?.menuitemmodel;
+
+    if (!menuItemModel) {
+      logger.warn('menuItemModel is undefined, skipping breadcrumbData fetch', {
+        handler: 'getProductDataHandler',
+        pk
+      });
+      return { data, breadcrumbData: undefined };
+    }
+
+    const breadcrumbUrl = product.breadcrumbUrl(menuItemModel);
 
     const breadcrumbData = await appFetch<any>(breadcrumbUrl, {
       headers: {
@@ -74,10 +79,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