@akinon/next 1.43.0-rc.9 → 1.44.0

package/CHANGELOG.md

@@ -1,125 +1,12 @@
 # @akinon/next
 
-## 1.43.0-rc.9
+## 1.44.0
 
-### Minor Changes
-
-- bc2b411: ZERO-2825: Add attribute-based shipping options to checkout page
-
-## 1.43.0-rc.8
-
-### Minor Changes
-
-- 70279e7: ZERO-2817: Add metrics endpoint in default middleware
-- 9d94f7e: ZERO-2820: update parent pk usage for menu generator
-
-## 1.43.0-rc.7
-
-### Minor Changes
-
-- 7bd3d99: ZERO-2801: Refactor locale middleware to handle single locale configuration
-
-## 1.43.0-rc.6
+## 1.43.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.
-- 64699d3: ZERO-2761: Fix invalid import for plugin module
-- 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
-- 17f8752: ZERO-2816: Make the incoming currency lowercase
-- 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
-- eecb282: ZERO-2607: Update address-related functions to include invalidateTag option
 - 4a163f2: ZERO-2761: Add condition for basket summary
-- beb499e: ZERO-2551: Add new tsconfig paths
-- 146ea39: ZERO-2774: Update imports
-- f2c92d5: ZERO-2816: Update cookie name
-- 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
-- 3f9b8d7: ZERO-2761: Update plugins.js for akinon-next
-
-## 1.43.0-rc.5
-
-### Minor Changes
-
-- 17f8752: ZERO-2816: Make the incoming currency lowercase
-
-## 1.43.0-rc.4
-
-### Minor Changes
-
-- 3f9b8d7: ZERO-2761: Update plugins.js for akinon-next
-
-## 1.43.0-rc.3
-
-### Minor Changes
-
-- 64699d3: ZERO-2761: Fix invalid import for plugin module
-
-## 1.43.0-rc.2
-
-### Minor Changes
-
-- f2c92d5: ZERO-2816: Update cookie name
-
-## 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
 

package/api/client.ts

@@ -4,7 +4,6 @@ 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: {
@@ -75,31 +74,16 @@ 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') {
-    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`,
@@ -110,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/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/address.ts

@@ -39,10 +39,7 @@ const addressApi = api.injectEndpoints({
       query: (city) =>
         buildClientRequestUrl(address.getRetailStoreTownships(city))
     }),
-    addAddress: builder.mutation<
-      Address,
-      Partial<Address> & { invalidateTag?: 'Addresses' | 'Checkout' }
-    >({
+    addAddress: builder.mutation<Address, Partial<Address>>({
       query: (body) => ({
         url: buildClientRequestUrl(address.base, {
           contentType: 'application/json'
@@ -53,16 +50,9 @@ const addressApi = api.injectEndpoints({
           type: body.is_corporate === 'true' ? 'corporate' : 'personal'
         }
       }),
-      invalidatesTags: (_, error, arg) => {
-        if (error) return [];
-        if (arg.invalidateTag) return [arg.invalidateTag];
-        return ['Addresses', 'Checkout'];
-      }
+      invalidatesTags: (_, error) => (error ? [] : ['Addresses', 'Checkout'])
     }),
-    editAddress: builder.mutation<
-      Address,
-      Partial<Address> & { invalidateTag?: 'Addresses' | 'Checkout' }
-    >({
+    editAddress: builder.mutation<Address, Partial<Address>>({
       query: ({ pk, ...body }) => ({
         url: buildClientRequestUrl(address.editAddress(pk), {
           contentType: 'application/json'
@@ -74,28 +64,14 @@ const addressApi = api.injectEndpoints({
           type: body.is_corporate === 'true' ? 'corporate' : 'personal'
         }
       }),
-      invalidatesTags: (_, error, arg) => {
-        if (error) return [];
-        if (arg.invalidateTag) return [arg.invalidateTag];
-        return ['Addresses', 'Checkout'];
-      }
+      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)
     }),
-    removeAddress: builder.mutation<
-      void,
-      number | { id: number; invalidateTag: 'Addresses' | 'Checkout' }
-    >({
-      query: (arg) => ({
-        url: buildClientRequestUrl(
-          address.removeAddress(typeof arg === 'number' ? arg : arg.id)
-        ),
+    removeAddress: builder.mutation<void, number>({
+      query: (id) => ({
+        url: buildClientRequestUrl(address.removeAddress(id)),
         method: 'DELETE'
       }),
-      invalidatesTags: (_, error, arg) => {
-        if (error) return [];
-        if (typeof arg === 'object' && arg.invalidateTag)
-          return [arg.invalidateTag];
-        return ['Addresses', 'Checkout'];
-      }
+      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)
     }),
     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 'redux/store';
+import { RootState } from '@theme/redux/store';
 
 interface CustomBaseQueryApi extends BaseQueryApi {
   getState: () => RootState;