@akinon/next 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @akinon/next
 
+## 1.6.0
+
+### Minor Changes
+
+- ZERO-2286: Find custom payment option view by slug instead of pk
+- ZERO-2169: Add OTP plugin module support
+- ZERO-2250: Show checkout iframe on mobile web
+- ZERO-2288: Allow custom response in middleware.ts
+- ZERO-2272: Add confirm email services
+- ZERO-2250: Add expire date to currency and locale cookies
+
+### Patch Changes
+
+- Fix Metadata type
+
+## 1.5.0
+
+### Patch Changes
+
+- Support GPay plugin
+- Extend Next Metadata type
+
 ## 1.4.0
 
 ### Minor Changes

package/api/auth.ts

@@ -130,7 +130,7 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
           }
 
           if (!response.key) {
-            let errors = [] as AuthError[];
+            const errors = [] as AuthError[];
 
             const fieldErrors = Object.keys(response ?? {})
               .filter((key) => key !== 'non_field_errors')
@@ -150,6 +150,10 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
                 email: credentials.email,
                 formType: credentials.formType
               });
+            } else if (apiRequest.status === 202) {
+              errors.push({
+                type: 'otp'
+              });
             } else if (fieldErrors.length) {
               errors.push({
                 type: 'field_errors',

package/assets/styles/index.scss

@@ -1,12 +1,17 @@
 .checkout-payment-iframe-wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+	z-index: 1000;
+	background-color: white;
+
 	iframe {
-		position: fixed;
-		top: 0;
-		left: 0;
 		width: 100%;
 		height: 100%;
 		border: none;
-		z-index: 1000;
 		background-color: white;
 	}
 

package/components/client-root.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
-import { useAppSelector } from '../redux/hooks';
+import { useMobileIframeHandler } from '../hooks';
 
 export default function ClientRoot({
   children,
@@ -10,17 +9,9 @@ export default function ClientRoot({
   children: React.ReactNode;
   sessionId?: string;
 }) {
-  const pathname = usePathname();
-  const { isMobileApp } = useAppSelector((state) => state.root);
-
-  if (isMobileApp && pathname.includes('/orders/completed')) {
-    ((window.parent || window) as any)?.ReactNativeWebView?.postMessage?.(
-      JSON.stringify({
-        url: pathname,
-        sessionId
-      })
-    );
+  const { preventPageRender } = useMobileIframeHandler({ sessionId });
 
+  if (preventPageRender) {
     return null;
   }
 

package/components/mobile-app-toggler.tsx

@@ -1,15 +1,26 @@
 'use client';
 
 import { useAppSelector } from '../redux/hooks';
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
 
 export default function MobileAppToggler({
   children
 }: {
   children: React.ReactNode;
 }) {
+  const searchParams = useSearchParams();
   const { isMobileApp } = useAppSelector((state) => state.root);
+  const [isInIframe, setIsInIframe] = useState(false);
 
-  if (isMobileApp) return null;
+  useEffect(() => {
+    if (window.frameElement) {
+      setIsInIframe(true);
+    }
+  }, []);
+
+  if (isMobileApp || isInIframe || searchParams.get('iframe') === 'true')
+    return null;
 
   return <>{children}</>;
 }

package/components/plugin-module.tsx

@@ -8,7 +8,9 @@ enum Plugin {
   ClickCollect = 'pz-click-collect',
   OneClickCheckout = 'pz-one-click-checkout',
   PayOnDelivery = 'pz-pay-on-delivery',
-  CheckoutGiftPack = 'pz-checkout-gift-pack'
+  CheckoutGiftPack = 'pz-checkout-gift-pack',
+  GPay = 'pz-gpay',
+  Otp = 'pz-otp'
 }
 
 export enum Component {
@@ -16,7 +18,9 @@ export enum Component {
   ClickCollect = 'ClickCollect',
   OneClickCheckoutButtons = 'OneClickCheckoutButtons',
   PayOnDelivery = 'PayOnDelivery',
-  CheckoutGiftPack = 'CheckoutGiftPack'
+  CheckoutGiftPack = 'CheckoutGiftPack',
+  GPay = 'GPayOption',
+  Otp = 'Otp'
 }
 
 const PluginComponents = new Map([
@@ -24,11 +28,13 @@ const PluginComponents = new Map([
   [Plugin.ClickCollect, [Component.ClickCollect]],
   [Plugin.OneClickCheckout, [Component.OneClickCheckoutButtons]],
   [Plugin.PayOnDelivery, [Component.PayOnDelivery]],
-  [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]]
+  [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
+  [Plugin.GPay, [Component.GPay]],
+  [Plugin.Otp, [Component.Otp]]
 ]);
 
 const getPlugin = (component: Component) => {
-  for (let [key, value] of Array.from(PluginComponents.entries())) {
+  for (const [key, value] of Array.from(PluginComponents.entries())) {
     if (value.includes(component)) return key;
   }
 
@@ -65,6 +71,10 @@ export default function PluginModule({
               promise = import(`${'pz-pay-on-delivery'}`);
             } else if (plugin === Plugin.CheckoutGiftPack) {
               promise = import(`${'pz-checkout-gift-pack'}`);
+            } else if (plugin === Plugin.GPay) {
+              promise = import(`${'pz-gpay'}`);
+            } else if (plugin === Plugin.Otp) {
+              promise = import(`${'pz-otp'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/redirect-three-d/content/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { useRouter } from '@akinon/next/hooks';
 import { useEffect, useState } from 'react';
 import { ROUTES } from 'routes';
 import { useGet3dRedirectFormQuery } from '@akinon/next/data/client/checkout';
 import { LoaderSpinner } from 'components';
 import { useLocalization } from '../../../hooks/use-localization';
+import { getUrlPathWithLocale } from '../../../utils/localization';
+import { useSearchParams } from 'next/navigation';
 
 interface RedirectThreeDContentProps {
   sessionId: string;
@@ -14,9 +15,9 @@ interface RedirectThreeDContentProps {
 export default function RedirectThreeDContent({
   sessionId
 }: RedirectThreeDContentProps) {
+  const searchParams = useSearchParams();
   const { data } = useGet3dRedirectFormQuery();
   const [error, setError] = useState(null);
-  const router = useRouter();
   const { locale } = useLocalization();
 
   useEffect(() => {
@@ -31,7 +32,16 @@ export default function RedirectThreeDContent({
         setError('Redirecting to checkout page. Please wait...');
 
         setTimeout(() => {
-          router.replace(ROUTES.CHECKOUT);
+          let checkoutUrl = `${ROUTES.CHECKOUT}`;
+
+          // iframe param is used to prevent header and footer rendering
+          if (searchParams.get('iframe') === 'true') {
+            checkoutUrl = `${checkoutUrl}?iframe=true`;
+          }
+
+          // Use `window.location.href` instead of `router.push`
+          // to capture the url change event in iframe
+          location.href = getUrlPathWithLocale(checkoutUrl, locale);
         }, 3000);
         return;
       }

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

@@ -16,7 +16,7 @@ export default function SelectedPaymentOptionView() {
       dynamic(
         () => {
           const customOption = PaymentOptionViews.find(
-            (opt) => opt.pk == payment_option.pk
+            (opt) => opt.slug === payment_option.slug
           );
 
           if (customOption) {

package/data/client/checkout.ts

@@ -42,6 +42,7 @@ interface CompleteCreditCardParams {
   card_number: string;
   card_month: string;
   card_year: string;
+  use_three_d?: boolean;
 }
 
 interface GetContractResponse {
@@ -96,7 +97,8 @@ export const checkoutApi = api.injectEndpoints({
         card_cvv,
         card_number,
         card_month,
-        card_year
+        card_year,
+        use_three_d = true
       }) => ({
         url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
           useFormData: true
@@ -104,7 +106,7 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           agreement: '1',
-          use_three_d: '1',
+          use_three_d: use_three_d ? '1' : '0',
           card_cvv,
           card_holder,
           card_month,

package/data/client/user.ts

@@ -78,6 +78,13 @@ const userApi = api.injectEndpoints({
         })
       })
     }),
+    confirmEmailVerification: build.query<void, string>({
+      query: (token) => ({
+        url: buildClientRequestUrl(user.confirmEmailVerification(token), {
+          contentType: 'application/json'
+        })
+      })
+    })
   }),
   overrideExisting: false
 });
@@ -85,6 +92,7 @@ const userApi = api.injectEndpoints({
 export const {
   useGetCaptchaQuery,
   useChangeEmailVerificationQuery,
+  useConfirmEmailVerificationQuery,
   useValidateCaptchaMutation,
   useLogoutMutation,
   useForgotPasswordMutation

package/data/urls.ts

@@ -143,6 +143,7 @@ export const user = {
   profiles: '/users/profile',
   forgotPassword: '/users/password/reset',
   changeEmailVerification: (token: string) => `/users/email-set-primary/${token}`,
+  confirmEmailVerification: (token: string) => `/users/registration/account-confirm-email/${token}`,
   csrfToken: '/csrf_token'
 };
 

package/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './use-common-product-attributes';
 export * from './use-debounce';
 export * from './use-media-query';
 export * from './use-on-click-outside';
+export * from './use-mobile-iframe-handler';

package/hooks/use-mobile-iframe-handler.ts

@@ -0,0 +1,23 @@
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useAppSelector } from '../redux/hooks';
+
+export function useMobileIframeHandler({ sessionId }: { sessionId: string }) {
+  const pathname = usePathname();
+  const { isMobileApp } = useAppSelector((state) => state.root);
+  const [preventPageRender, setPreventPageRender] = useState(false);
+
+  useEffect(() => {
+    if (
+      pathname.includes('/orders/completed') &&
+      (isMobileApp || /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
+      window.frameElement // Check if the page is inside an iframe
+    ) {
+      setPreventPageRender(true);
+    }
+  }, [pathname]);
+
+  return {
+    preventPageRender
+  };
+}

package/middlewares/default.ts

@@ -130,12 +130,23 @@ const withPzDefault =
                         event
                       )) as NextResponse | void;
 
+                      // if middleware.ts has a return value for current url
                       if (middlewareResult instanceof NextResponse) {
-                        middlewareResult.headers.set(
-                          'x-middleware-rewrite',
-                          url.href
-                        );
+                        // pz-override-response header is used to prevent 404 page for custom responses.
+                        if (
+                          middlewareResult.headers.get(
+                            'pz-override-response'
+                          ) !== 'true'
+                        ) {
+                          middlewareResult.headers.set(
+                            'x-middleware-rewrite',
+                            url.href
+                          );
+                        }
                       } else {
+                        // if middleware.ts doesn't have a return value.
+                        // e.g. NextResponse.next() doesn't exist in middleware.ts
+
                         middlewareResult = NextResponse.rewrite(url);
                       }
 
@@ -145,13 +156,17 @@ const withPzDefault =
                           locale?.length > 0 ? locale : defaultLocaleValue,
                           {
                             sameSite: 'none',
-                            secure: true
+                            secure: true,
+                            expires: new Date(
+                              Date.now() + 1000 * 60 * 60 * 24 * 7
+                            ) // 7 days
                           }
                         );
                       }
                       middlewareResult.cookies.set('pz-currency', currency, {
                         sameSite: 'none',
-                        secure: true
+                        secure: true,
+                        expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7) // 7 days
                       });
 
                       if (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "private": false,
   "license": "MIT",
   "bin": {

package/plugins.js

@@ -4,5 +4,6 @@ module.exports = [
   'pz-one-click-checkout',
   'pz-pay-on-delivery',
   'pz-checkout-gift-pack',
-  'pz-gpay'
+  'pz-gpay',
+  'pz-otp'
 ];

package/redux/middlewares/checkout.ts

@@ -164,7 +164,10 @@ export const contextListMiddleware: Middleware = ({
                 : `/${currentLocale}${redirectUrl}`;
           }
 
-          if (isMobileApp) {
+          if (
+            isMobileApp ||
+            /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)
+          ) {
             showMobile3dIframe(url);
           } else {
             window.location.href = url;

package/types/commerce/checkout.ts

@@ -41,7 +41,8 @@ export interface CheckoutAddressType {
 }
 
 export interface CheckoutPaymentOption {
-  pk: number;
+  pk?: number;
+  slug?: string;
   view?: (...args) => JSX.Element;
   viewProps?: any;
 }

package/types/index.ts

@@ -9,6 +9,7 @@ declare global {
 
 export * from './commerce';
 export * from './gtm';
+export * from './metadata';
 
 export interface Locale {
   label: string;

package/types/metadata.ts

@@ -0,0 +1,7 @@
+import { Metadata as NextMetaData } from 'next';
+
+export interface Metadata extends NextMetaData {
+  alternates?: NextMetaData['alternates'] & {
+    languages?: Record<string, string>;
+  };
+}

package/utils/mobile-3d-iframe.ts

@@ -18,6 +18,7 @@ const removeIframe = async () => {
   }
 
   iframeSelector.remove();
+  document.body.style.overflow = 'auto';
 };
 
 export const showMobile3dIframe = (redirectUrl: string) => {
@@ -27,12 +28,20 @@ export const showMobile3dIframe = (redirectUrl: string) => {
 
   iframeWrapper.className = 'checkout-payment-iframe-wrapper';
   closeButton.className = 'close-button';
-  iframe.setAttribute('src', redirectUrl);
+
+  // iframe param is used to prevent header and footer rendering
+  iframe.setAttribute(
+    'src',
+    redirectUrl.match(new RegExp(`^/orders/redirect-three-d/$`))
+      ? `${redirectUrl}?iframe=true`
+      : redirectUrl
+  );
   closeButton.innerHTML = '&#x2715';
   closeButton.addEventListener('click', removeIframe);
 
   iframeWrapper.append(iframe, closeButton);
   document.body.appendChild(iframeWrapper);
+  document.body.style.overflow = 'hidden';
 
   iframeURLChange(iframe, (location) => {
     if (location.origin !== window.location.origin) {
@@ -41,18 +50,28 @@ export const showMobile3dIframe = (redirectUrl: string) => {
 
     const searchParams = new URLSearchParams(location.search);
     const isOrderCompleted = location.href.includes('/orders/completed');
-    const data = {
-      url: location.pathname
-    };
-
-    if (searchParams.has('success') || isOrderCompleted) {
-      removeIframe();
-    }
 
     if (isOrderCompleted) {
       (window.parent as any)?.ReactNativeWebView?.postMessage?.(
-        JSON.stringify(data)
+        JSON.stringify({
+          url: location.pathname
+        })
       );
+
+      if (localStorage.isMobileApp !== 'true') {
+        window.location.href = location.pathname;
+        return;
+      }
+    }
+
+    if (
+      searchParams.has('success') ||
+      isOrderCompleted ||
+      location.href.includes('/orders/checkout')
+    ) {
+      setTimeout(() => {
+        removeIframe();
+      }, 0);
     }
   });
 };