@akinon/next 1.65.0 → 1.67.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @akinon/next
 
+## 1.67.0
+
+### Minor Changes
+
+- bc2b411: ZERO-2825: Add attribute-based shipping options to checkout page
+- 3d2212a: ZERO-2745: Add multi basket support
+- 8f47cca: ZERO-2829: fix and add nested JSON support for useFormData in api/client route
+- 9e25a64: ZERO-2835: Update category page layout with breadcrumb
+
+## 1.66.0
+
+### Minor Changes
+
+- 572d2e8: ZERO-2667: Add iframe support for redirection payment methods
+- 2e6104d: ZERO-2888:Edit the numbering in the pagination and the visibility of the prev and next buttons
+- 7b05522: ZERO-2905: Fix resend and close button in otp package
+- 29ead87: ZERO-2905: Fix resend and close button in otp package
+- 12a873e: ZERO-2846:Edit the siteKey regex in the response from GetCaptcha
+- f2c325c: ZERO-2838: Move file input component into @akinon/next
+
 ## 1.65.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: {
@@ -80,11 +81,27 @@ 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;');
+  const isMultipartFormData = req.headers
+    .get('content-type')
+    ?.includes('multipart/form-data;');
 
   if (req.method !== 'GET') {
     let body: Record<string, any> | FormData = {};
@@ -108,7 +125,11 @@ async function proxyRequest(...args) {
 
       Object.keys(body ?? {}).forEach((key) => {
         if (body[key]) {
-          formData.append(key, body[key]);
+          if (typeof body[key] === 'object' && body[key] !== null) {
+            formData.append(key, JSON.stringify(body[key]));
+          } else {
+            formData.append(key, body[key]);
+          }
         }
       });
 

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/file-input.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+import { FileInputProps } from '../types/index';
+
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
+  function fileInput(props, ref) {
+    return <input type="file" {...props} ref={ref} />;
+  }
+);

package/components/index.ts

@@ -20,3 +20,4 @@ export * from './trans';
 export * from './link';
 export * from './pagination';
 export * from './live-commerce';
+export * from './file-input';

package/data/client/api.ts

@@ -67,7 +67,7 @@ export const api = createApi({
   baseQuery: customBaseQuery,
   tagTypes: [
     'Basket',
-    'AllBaskets',
+    'MultiBasket',
     'BasketB2b',
     'DraftsB2b',
     'Product',

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

@@ -57,6 +57,7 @@ export interface CompleteCreditCardParams {
   card_month: string;
   card_year: string;
   use_three_d?: boolean;
+  save?: boolean;
 }
 
 interface GetContractResponse {
@@ -228,7 +229,8 @@ export const checkoutApi = api.injectEndpoints({
         card_number,
         card_month,
         card_year,
-        use_three_d = true
+        use_three_d = true,
+        save = undefined
       }) => {
         const paymentOption =
           store.getState().checkout?.preOrder?.payment_option;
@@ -242,20 +244,26 @@ export const checkoutApi = api.injectEndpoints({
           };
         }
 
+        const body: Record<string, string> = {
+          agreement: '1',
+          use_three_d: use_three_d ? '1' : '0',
+          card_cvv,
+          card_holder,
+          card_month,
+          card_number,
+          card_year
+        };
+
+        if (save !== undefined) {
+          body.save = save ? '1' : '0';
+        }
+
         return {
           url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
             useFormData: true
           }),
           method: 'POST',
-          body: {
-            agreement: '1',
-            use_three_d: use_three_d ? '1' : '0',
-            card_cvv,
-            card_holder,
-            card_month,
-            card_number,
-            card_year
-          }
+          body
         };
       },
       async onQueryStarted(args, { dispatch, queryFulfilled }) {
@@ -697,6 +705,25 @@ export const checkoutApi = api.injectEndpoints({
         };
       }
     }),
+    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));
+      }
+    }),
     setOrderSelectionPage: build.mutation<
       CheckoutResponse,
       { extra_field: ExtraField }
@@ -747,5 +774,6 @@ export const {
   usePayWithLoyaltyBalanceMutation,
   useSetOrderNoteMutation,
   useSetDeliveryBagsMutation,
+  useSetAttributeBasedShippingOptionsMutation,
   useSetOrderSelectionPageMutation
 } = 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/urls.ts

@@ -17,16 +17,22 @@ export const account = {
     page,
     limit,
     createdDate,
-    endDate
+    endDate,
+    shipping_option_slug
   }: {
     page?: number;
     limit?: number;
     createdDate?: string;
     endDate?: string;
+    shipping_option_slug?: string;
   }) =>
-    `/users/orders/?page=${page || 1}&limit=${limit || 12} ${
+    `/users/orders/?page=${page || 1}&limit=${limit || 12}${
       createdDate ? `&created_date__gte=${createdDate}` : ''
-    } ${endDate ? `&created_date__lte=${endDate}` : ''}`,
+    }${endDate ? `&created_date__lte=${endDate}` : ''}${
+      shipping_option_slug
+        ? `&shipping_option_slug=${shipping_option_slug}`
+        : ''
+    }`,
   getQuotations: (page?: number, status?: string, limit?: number) =>
     `/b2b/my-quotations/?page=${page || 1}` +
     (status ? `&status=${status}` : '') +
@@ -111,6 +117,8 @@ export const checkout = {
   loyaltyMoneyUsage: '/orders/checkout/?page=LoyaltyMoneyUsagePage',
   setOrderNote: '/orders/checkout/?page=OrderNotePage',
   couponSelectionPage: '/orders/checkout/?page=CouponSelectionPage',
+  setAttributeBasedShippingOption:
+    '/orders/checkout/?page=AttributeBasedShippingOptionSelectionPage',
   deliveryBagsPage: '/orders/checkout/?page=DeliveryBagsPage',
   setOrderSelectionPage: '/orders/checkout/?page=OrderSelectionPage'
 };

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';

package/hooks/use-message-listener.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export const useMessageListener = () => {
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+
+      if (event.data && typeof event.data === 'string') {
+        const messageData = JSON.parse(event.data);
+        if (messageData?.url) {
+          window.location.href = messageData.url;
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+};

package/hooks/use-pagination.ts

@@ -116,7 +116,7 @@ export default function usePagination(
       urlSearchParams.set('page', (Number(state.page) - 1).toString());
       return `${pathname}?${urlSearchParams.toString()}`;
     }
-    return '#';
+    return null;
   }, [state.page, pathname, urlSearchParams]);
 
   const next = useMemo(() => {
@@ -124,7 +124,7 @@ export default function usePagination(
       urlSearchParams.set('page', (Number(state.page) + 1).toString());
       return `${pathname}?${urlSearchParams.toString()}`;
     }
-    return '#';
+    return null;
   }, [state.page, state.last, pathname, urlSearchParams]);
 
   return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.65.0",
+    "@akinon/eslint-plugin-projectzero": "1.67.0",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/plugins.d.ts

@@ -21,6 +21,7 @@ declare module '@akinon/pz-otp' {
 
 declare module '@akinon/pz-otp/src/redux/reducer' {
   export const showPopup: any;
+  export const hidePopup: any;
 }
 
 declare module 'pz-saved-card' {

package/redux/middlewares/checkout.ts

@@ -3,9 +3,12 @@
 import { Middleware } from '@reduxjs/toolkit';
 import {
   setAddressList,
+  setAttributeBasedShippingOptions,
   setBankAccounts,
   setCanGuestPurchase,
   setCardType,
+  setCreditPaymentOptions,
+  setDataSourceShippingOptions,
   setDeliveryOptions,
   setErrors,
   setHasGiftBox,
@@ -16,9 +19,7 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
-  setDataSourceShippingOptions,
-  setShippingStepCompleted,
-  setCreditPaymentOptions
+  setShippingStepCompleted
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
@@ -27,6 +28,7 @@ import { getCookie, setCookie } from '../../utils';
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../../localization';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+import { showRedirectionIframe } from '../../utils/redirection-iframe';
 
 interface CheckoutResult {
   payload: {
@@ -76,7 +78,8 @@ export const preOrderMiddleware: Middleware = ({
       shippingOptions,
       dataSourceShippingOptions,
       paymentOptions,
-      installmentOptions
+      installmentOptions,
+      attributeBasedShippingOptions
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
@@ -144,11 +147,33 @@ export const preOrderMiddleware: Middleware = ({
       );
     }
 
+    if (
+      Object.keys(attributeBasedShippingOptions).length > 0 &&
+      !preOrder.attribute_based_shipping_options
+    ) {
+      const initialSelectedOptions: Record<string, number> = Object.fromEntries(
+        Object.entries(attributeBasedShippingOptions).map(([key, options]) => [
+          key,
+          options.attribute_based_shipping_options[0].pk
+        ])
+      );
+
+      dispatch(
+        apiEndpoints.setAttributeBasedShippingOptions.initiate(
+          initialSelectedOptions
+        )
+      );
+    }
+
     if (!preOrder.payment_option && paymentOptions.length > 0) {
       dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
     }
 
-    if (!preOrder.installment && installmentOptions.length > 0) {
+    if (
+      !preOrder.installment &&
+      preOrder.payment_option?.payment_type !== 'saved_card' &&
+      installmentOptions.length > 0
+    ) {
       dispatch(
         apiEndpoints.setInstallmentOption.initiate(installmentOptions[0].pk)
       );
@@ -182,6 +207,8 @@ export const contextListMiddleware: Middleware = ({
     if (result?.payload?.context_list) {
       result.payload.context_list.forEach((context) => {
         const redirectUrl = context.page_context.redirect_url;
+        const isIframe = context.page_context.is_frame ?? false;
+
         if (redirectUrl) {
           const currentLocale = getCookie('pz-locale');
 
@@ -199,16 +226,19 @@ export const contextListMiddleware: Middleware = ({
           }
 
           const urlObj = new URL(url, window.location.origin);
+          const isMobileDevice =
+            isMobileApp ||
+            /iPad|iPhone|iPod|Android/i.test(navigator.userAgent);
+          const isIframePaymentOptionExcluded =
+            settings.checkout?.iframeExcludedPaymentOptions?.includes(
+              result.payload?.pre_order?.payment_option?.slug
+            );
           urlObj.searchParams.set('t', new Date().getTime().toString());
 
-          if (
-            (isMobileApp ||
-              /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
-            !settings.checkout?.iframeExcludedPaymentOptions?.includes(
-              result.payload?.pre_order?.payment_option?.slug
-            )
-          ) {
+          if (isMobileDevice && !isIframePaymentOptionExcluded) {
             showMobile3dIframe(urlObj.toString());
+          } else if (isIframe && !isIframePaymentOptionExcluded) {
+            showRedirectionIframe(urlObj.toString());
           } else {
             window.location.href = urlObj.toString();
           }
@@ -244,6 +274,14 @@ export const contextListMiddleware: Middleware = ({
           );
         }
 
+        if (context.page_context.attribute_based_shipping_options) {
+          dispatch(
+            setAttributeBasedShippingOptions(
+              context.page_context.attribute_based_shipping_options
+            )
+          );
+        }
+
         if (context.page_context.payment_options) {
           dispatch(setPaymentOptions(context.page_context.payment_options));
         }

package/redux/reducers/checkout.ts

@@ -15,7 +15,8 @@ import {
   PreOrder,
   RetailStore,
   ShippingOption,
-  DataSource
+  DataSource,
+  AttributeBasedShippingOption
 } from '../../types';
 
 export interface CheckoutState {
@@ -48,6 +49,8 @@ export interface CheckoutState {
   selectedBankAccountPk: number;
   loyaltyBalance?: string;
   retailStores: RetailStore[];
+  attributeBasedShippingOptions: AttributeBasedShippingOption[];
+  selectedShippingOptions: Record<string, number>;
 }
 
 const initialState: CheckoutState = {
@@ -78,7 +81,9 @@ const initialState: CheckoutState = {
   installmentOptions: [],
   bankAccounts: [],
   selectedBankAccountPk: null,
-  retailStores: []
+  retailStores: [],
+  attributeBasedShippingOptions: [],
+  selectedShippingOptions: {}
 };
 
 const checkoutSlice = createSlice({
@@ -156,6 +161,12 @@ const checkoutSlice = createSlice({
     },
     setRetailStores(state, { payload }) {
       state.retailStores = payload;
+    },
+    setAttributeBasedShippingOptions(state, { payload }) {
+      state.attributeBasedShippingOptions = payload;
+    },
+    setSelectedShippingOptions: (state, { payload }) => {
+      state.selectedShippingOptions = payload;
     }
   }
 });
@@ -184,7 +195,9 @@ export const {
   setBankAccounts,
   setSelectedBankAccountPk,
   setLoyaltyBalance,
-  setRetailStores
+  setRetailStores,
+  setAttributeBasedShippingOptions,
+  setSelectedShippingOptions
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/types/commerce/checkout.ts

@@ -86,6 +86,7 @@ export interface PreOrder {
   total_amount?: string;
   total_amount_with_interest?: string;
   unpaid_amount?: string;
+  notes?: string;
   user_phone_number?: string;
   loyalty_money?: string;
   currency_type_label?: string;
@@ -97,6 +98,7 @@ export interface PreOrder {
   gift_box?: GiftBox;
   credit_payment_option?: CheckoutCreditPaymentOption;
   data_source_shipping_options: any;
+  attribute_based_shipping_options: any;
   bags?: Product[];
   bags_fee?: string;
   extra_field?: ExtraField;
@@ -141,6 +143,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    attribute_based_shipping_options?: AttributeBasedShippingOption[];
     [key: string]: any;
   };
 }
@@ -166,3 +169,13 @@ export interface BankAccount {
   pk: number;
   sort_order: number;
 }
+
+export interface AttributeBasedShippingOption {
+  pk: number;
+  shipping_amount: string | null;
+  shipping_option_name: string | null;
+  shipping_option_logo: string | null;
+  attribute_value: string | null;
+  attribute_key: string;
+  [key: string]: any;
+}

package/types/index.ts

@@ -269,6 +269,8 @@ export interface ButtonProps
   appearance?: 'filled' | 'outlined' | 'ghost';
 }
 
+export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+
 export interface PriceProps {
   currencyCode?: string;
   useCurrencySymbol?: boolean;

package/utils/redirection-iframe.ts

@@ -0,0 +1,85 @@
+const iframeURLChange = (iframe, callback) => {
+  iframe.addEventListener('load', () => {
+    setTimeout(() => {
+      if (iframe?.contentWindow?.location) {
+        callback(iframe.contentWindow.location);
+      }
+    }, 0);
+  });
+};
+
+const removeIframe = async () => {
+  const iframeSelector = document.querySelector(
+    '.checkout-payment-redirection-iframe-wrapper'
+  );
+
+  const redirectionPaymentWrapper = document.querySelector(
+    '.checkout-redirection-payment-wrapper'
+  );
+
+  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;
+
+  if (!iframeSelector) {
+    return;
+  }
+
+  iframeSelector.remove();
+
+  if (form) {
+    form.style.display = 'block';
+  }
+
+  location.reload();
+};
+
+export const showRedirectionIframe = (redirectUrl: string) => {
+  const iframeWrapper = document.createElement('div');
+  const iframe = document.createElement('iframe');
+  const closeButton = document.createElement('div');
+  const redirectionPaymentWrapper = document.querySelector(
+    '.checkout-redirection-payment-wrapper'
+  );
+  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;
+
+  iframeWrapper.className = 'checkout-payment-redirection-iframe-wrapper';
+  closeButton.className = 'close-button';
+
+  iframe.setAttribute('src', redirectUrl);
+  closeButton.innerHTML = '&#x2715';
+  closeButton.addEventListener('click', removeIframe);
+
+  iframeWrapper.append(iframe, closeButton);
+
+  if (form) {
+    form.style.display = 'none';
+  }
+
+  redirectionPaymentWrapper.appendChild(iframeWrapper);
+
+  iframeURLChange(iframe, (location) => {
+    if (location.origin !== window.location.origin) {
+      return false;
+    }
+
+    const searchParams = new URLSearchParams(location.search);
+    const isOrderCompleted = location.href.includes('/orders/completed');
+
+    if (isOrderCompleted) {
+      (window.parent as any)?.postMessage?.(
+        JSON.stringify({
+          url: location.pathname
+        })
+      );
+    }
+
+    if (
+      searchParams.has('success') ||
+      isOrderCompleted ||
+      location.href.includes('/orders/checkout')
+    ) {
+      setTimeout(() => {
+        removeIframe();
+      }, 0);
+    }
+  });
+};