@akinon/next 1.65.0 → 1.66.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @akinon/next
 
+## 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/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/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/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.66.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.66.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

@@ -27,6 +27,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: {
@@ -182,6 +183,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 +202,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();
           }

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);
+    }
+  });
+};