@akinon/next 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @akinon/next
 
+## 1.7.0
+
+### Minor Changes
+
+- Reset pre-order is_redirected state
+- Show IP addresses in logs
+
+## 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

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

@@ -9,7 +9,8 @@ enum Plugin {
   OneClickCheckout = 'pz-one-click-checkout',
   PayOnDelivery = 'pz-pay-on-delivery',
   CheckoutGiftPack = 'pz-checkout-gift-pack',
-  GPay = 'pz-gpay'
+  GPay = 'pz-gpay',
+  Otp = 'pz-otp'
 }
 
 export enum Component {
@@ -18,7 +19,8 @@ export enum Component {
   OneClickCheckoutButtons = 'OneClickCheckoutButtons',
   PayOnDelivery = 'PayOnDelivery',
   CheckoutGiftPack = 'CheckoutGiftPack',
-  GPay = 'GPayOption'
+  GPay = 'GPayOption',
+  Otp = 'Otp'
 }
 
 const PluginComponents = new Map([
@@ -27,11 +29,12 @@ const PluginComponents = new Map([
   [Plugin.OneClickCheckout, [Component.OneClickCheckoutButtons]],
   [Plugin.PayOnDelivery, [Component.PayOnDelivery]],
   [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
-  [Plugin.GPay, [Component.GPay]]
+  [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;
   }
 
@@ -70,6 +73,8 @@ export default function PluginModule({
               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/currency.ts

@@ -20,6 +20,8 @@ const resetBasket = async (req: PzNextRequest) => {
 const withCurrency =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
     try {
       const { currencies, defaultCurrencyCode, defaultLocaleValue } =
         settings.localization;
@@ -27,7 +29,9 @@ const withCurrency =
       const url = req.nextUrl.clone();
 
       if (!defaultCurrencyCode) {
-        logger.error('Default currency code is not defined in settings.');
+        logger.error('Default currency code is not defined in settings.', {
+          ip
+        });
         throw new Error(
           'Default currency code is not defined. Use `defaultCurrencyCode` property in `localization` object in `settings.js` file.'
         );
@@ -57,7 +61,10 @@ const withCurrency =
         !currencies.find((c) => c.code === activeCurrency)
       ) {
         logger.warn(
-          `Currency ${activeCurrency} is not defined in settings. Using default currency ${defaultCurrencyCode} instead.`
+          `Currency ${activeCurrency} is not defined in settings. Using default currency ${defaultCurrencyCode} instead.`,
+          {
+            ip
+          }
         );
         activeCurrency = defaultCurrencyCode;
       }
@@ -72,7 +79,8 @@ const withCurrency =
         logger.info('Currency changed. Resetting basket...', {
           sessionid: req.cookies.get('osessionid')?.value ?? '',
           oldCurrency: req.cookies.get('pz-currency')?.value,
-          newCurrency: activeCurrency
+          newCurrency: activeCurrency,
+          ip
         });
 
         resetBasket(req);
@@ -80,7 +88,10 @@ const withCurrency =
 
       req.middlewareParams.rewrites.currency = activeCurrency;
     } catch (error) {
-      logger.error('withCurrency error', error);
+      logger.error('withCurrency error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/middlewares/default.ts

@@ -13,6 +13,7 @@ import withCurrency from './currency';
 import withLocale from './locale';
 import logger from '../utils/log';
 import { user } from '../data/urls';
+import { getUrlPathWithLocale } from '../utils/localization';
 
 const withPzDefault =
   (middleware: NextMiddleware) =>
@@ -20,10 +21,12 @@ const withPzDefault =
     const url = req.nextUrl.clone();
     const commerceUrl = encodeURIComponent(decodeURI(Settings.commerceUrl)); // encodeURI doesn't work as expected in middleware
     const searchParams = new URLSearchParams(url.search);
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     logger.debug('withPzDefault', {
       url: url.href,
-      middlewareParams: req.middlewareParams
+      middlewareParams: req.middlewareParams,
+      ip
     });
 
     // Support legacy ?format=json query param
@@ -50,7 +53,10 @@ const withPzDefault =
 
         return NextResponse.json(await request.json());
       } catch (error) {
-        logger.error('?format=json error', error);
+        logger.error('?format=json error', {
+          error,
+          ip
+        });
         return NextResponse.next();
       }
     }
@@ -87,6 +93,23 @@ const withPzDefault =
       );
     }
 
+    // If commerce redirects to /orders/checkout/ without locale
+    if (
+      req.nextUrl.pathname.match(new RegExp('^/orders/checkout/$')) &&
+      req.nextUrl.searchParams.size === 0 &&
+      getUrlPathWithLocale(
+        '/orders/checkout/',
+        req.cookies.get('pz-locale')?.value
+      ) !== req.nextUrl.pathname
+    ) {
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        '/orders/checkout/',
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      return NextResponse.redirect(redirectUrlWithLocale, 303);
+    }
+
     req.middlewareParams = {
       commerceUrl,
       rewrites: {}
@@ -130,12 +153,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 +179,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 (
@@ -160,7 +198,8 @@ const withPzDefault =
                       ) {
                         logger.debug('Locale changed', {
                           locale,
-                          oldLocale: req.cookies.get('pz-locale')?.value
+                          oldLocale: req.cookies.get('pz-locale')?.value,
+                          ip
                         });
                       }
 
@@ -191,10 +230,16 @@ const withPzDefault =
                           middlewareResult.cookies.set('csrftoken', csrf_token);
                         }
                       } catch (error) {
-                        logger.error('CSRF Error', error);
+                        logger.error('CSRF Error', {
+                          error,
+                          ip
+                        });
                       }
                     } catch (error) {
-                      logger.error('withPzDefault Error', error);
+                      logger.error('withPzDefault Error', {
+                        error,
+                        ip
+                      });
                     }
 
                     return middlewareResult;

package/middlewares/locale.ts

@@ -24,6 +24,8 @@ const getMatchedLocale = (pathname: string) => {
 const withLocale =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
     try {
       const url = req.nextUrl.clone();
       const matchedLocale = getMatchedLocale(url.pathname);
@@ -34,7 +36,9 @@ const withLocale =
         localeUrlStrategy ?? LocaleUrlStrategy.HideDefaultLocale;
 
       if (!defaultLocaleValue) {
-        logger.error('Default locale value is not defined in settings.');
+        logger.error('Default locale value is not defined in settings.', {
+          ip
+        });
         throw new Error(
           'Default locale value is not defined. Use `defaultLocaleValue` property in `localization` object in `settings.js` file.'
         );
@@ -52,7 +56,10 @@ const withLocale =
 
       req.middlewareParams.rewrites.locale = matchedLocale;
     } catch (error) {
-      logger.error('withLocale error', error);
+      logger.error('withLocale error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/middlewares/pretty-url.ts

@@ -12,40 +12,41 @@ type PrettyUrlResult = {
   path?: string;
 };
 
-const resolvePrettyUrlHandler = (pathname: string) => async () => {
-  let results = <{ old_path: string }[]>[];
-  let prettyUrlResult: PrettyUrlResult = {
-    matched: false
-  };
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = <{ old_path: string }[]>[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
 
-  try {
-    const requestUrl = URLS.misc.prettyUrls(pathname);
+    try {
+      const requestUrl = URLS.misc.prettyUrls(pathname);
 
-    logger.debug(`Resolving pretty url`, { pathname, requestUrl });
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
 
-    const apiResponse = await fetch(requestUrl);
-    const data = await apiResponse.json();
-    ({ results } = data);
+      const apiResponse = await fetch(requestUrl);
+      const data = await apiResponse.json();
+      ({ results } = data);
 
-    const matched = results.length > 0;
-    const [{ old_path: path } = { old_path: '' }] = results;
-    prettyUrlResult = {
-      matched,
-      path
-    };
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      prettyUrlResult = {
+        matched,
+        path
+      };
 
-    logger.trace('Pretty url result', prettyUrlResult);
-  } catch (error) {
-    logger.error('Error resolving pretty url', { error, pathname });
-  }
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
 
-  return prettyUrlResult;
-};
+    return prettyUrlResult;
+  };
 
-const resolvePrettyUrl = async (pathname: string) => {
+const resolvePrettyUrl = async (pathname: string, ip: string | null) => {
   return Cache.wrap(
     CacheKey.PrettyUrl(pathname),
-    resolvePrettyUrlHandler(pathname),
+    resolvePrettyUrlHandler(pathname, ip),
     {
       useProxy: true
     }
@@ -68,6 +69,7 @@ const withPrettyUrl =
         )
       );
     };
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     if (
       !isValidPrettyUrlPath(prettyUrlPathname) ||
@@ -81,14 +83,16 @@ const withPrettyUrl =
         prettyUrlPathname
       )
         ? url.pathname
-        : prettyUrlPathname
+        : prettyUrlPathname,
+      ip
     );
 
     if (prettyUrlResult.matched) {
       req.middlewareParams.rewrites.prettyUrl = prettyUrlResult.path;
       logger.debug('Resolved pretty url', {
         source: prettyUrlPathname,
-        dest: prettyUrlResult.path
+        dest: prettyUrlResult.path,
+        ip
       });
 
       return middleware(req, event);

package/middlewares/redirection-payment.ts

@@ -38,81 +38,106 @@ const withRedirectionPayment =
       ''
     );
     const searchParams = new URLSearchParams(url.search);
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
-    if (
-      !pathnameWithoutLocale.startsWith('/orders') ||
-      searchParams.get('page') !== 'RedirectionPageCompletePage' ||
-      req.method !== 'POST'
-    ) {
+    if (searchParams.get('page') !== 'RedirectionPageCompletePage') {
       return middleware(req, event);
     }
 
-    const body = await streamToString(req.body);
     const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: req.headers.get('cookie') ?? '',
+      'x-currency': req.cookies.get('pz-currency')?.value ?? ''
+    };
 
-    const request = await fetch(requestUrl, {
-      method: 'POST',
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/x-www-form-urlencoded',
-        Cookie: req.headers.get('cookie') ?? '',
-        'x-currency': req.cookies.get('pz-currency')?.value ?? ''
-      },
-      body
-    });
-
-    logger.info('Complete redirection payment request', {
-      requestUrl,
-      status: request.status
-    });
-
-    const response = await request.json();
-
-    const { context_list: contextList } = response;
-    const redirectionContext = contextList?.find(
-      (context) => context.page_context?.redirect_url
-    );
-    const redirectUrl = redirectionContext?.page_context?.redirect_url;
+    try {
+      const body = await streamToString(req.body);
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete redirection payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
 
-    if (!redirectUrl) {
       logger.info('Order success page context list', {
         middleware: 'redirection-payment',
-        contextList
+        contextList,
+        ip
       });
 
-      logger.warn(
-        'No redirection url for order success page found in page_context',
-        { middleware: 'redirection-payment' }
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context',
+          {
+            middleware: 'redirection-payment',
+            requestHeaders,
+            response: JSON.stringify(response),
+            ip
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
+
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      logger.info('Redirecting to order success page', {
+        middleware: 'redirection-payment',
+        redirectUrlWithLocale,
+        ip
+      });
+
+      // Using POST method while redirecting causes an error,
+      // So we use 303 status code to change the method to GET
+      const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
+
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
       );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing redirection payment', {
+        middleware: 'redirection-payment',
+        error,
+        requestHeaders,
+        ip
+      });
+
       return NextResponse.redirect(
         `${url.origin}${getUrlPathWithLocale(
-          `/orders/checkout?${searchParams.toString()}`,
+          '/orders/checkout/',
           req.cookies.get('pz-locale')?.value
         )}`,
         303
       );
     }
-
-    const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
-      redirectUrl,
-      req.cookies.get('pz-locale')?.value
-    )}`;
-
-    logger.info('Redirecting to order success page', {
-      middleware: 'redirection-payment',
-      redirectUrlWithLocale
-    });
-
-    // Using POST method while redirecting causes an error,
-    // So we use 303 status code to change the method to GET
-    const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
-
-    nextResponse.headers.set(
-      'Set-Cookie',
-      request.headers.get('set-cookie') ?? ''
-    );
-
-    return nextResponse;
   };
 
 export default withRedirectionPayment;

package/middlewares/three-d-redirection.ts

@@ -32,6 +32,7 @@ const withThreeDRedirection =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
 
     if (url.search.indexOf('CreditCardThreeDSecurePage') === -1) {
       return middleware(req, event);
@@ -57,7 +58,8 @@ const withThreeDRedirection =
       logger.info('Complete 3D payment request', {
         requestUrl,
         status: request.status,
-        requestHeaders
+        requestHeaders,
+        ip
       });
 
       const response = await request.json();
@@ -70,7 +72,8 @@ const withThreeDRedirection =
 
       logger.info('Order success page context list', {
         middleware: 'three-d-redirection',
-        contextList
+        contextList,
+        ip
       });
 
       if (!redirectUrl) {
@@ -79,7 +82,8 @@ const withThreeDRedirection =
           {
             middleware: 'three-d-redirection',
             requestHeaders,
-            response: JSON.stringify(response)
+            response: JSON.stringify(response),
+            ip
           }
         );
 
@@ -98,7 +102,8 @@ const withThreeDRedirection =
 
       logger.info('Redirecting to order success page', {
         middleware: 'three-d-redirection',
-        redirectUrlWithLocale
+        redirectUrlWithLocale,
+        ip
       });
 
       // Using POST method while redirecting causes an error,
@@ -115,7 +120,8 @@ const withThreeDRedirection =
       logger.error('Error while completing 3D payment', {
         middleware: 'three-d-redirection',
         error,
-        requestHeaders
+        requestHeaders,
+        ip
       });
 
       return NextResponse.redirect(

package/middlewares/url-redirection.ts

@@ -12,6 +12,7 @@ const withUrlRedirection =
   (middleware: NextMiddleware) =>
   async (req: PzNextRequest, event: NextFetchEvent) => {
     const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
     const pathnameWithoutLocale = url.pathname.replace(
       urlLocaleMatcherRegex,
       ''
@@ -52,7 +53,10 @@ const withUrlRedirection =
         return Response.redirect(redirectUrl.toString(), request.status);
       }
     } catch (error) {
-      logger.error('withUrlRedirection error', error);
+      logger.error('withUrlRedirection error', {
+        error,
+        ip
+      });
     }
 
     return middleware(req, event);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.5.0",
+  "version": "1.7.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

@@ -77,6 +77,21 @@ export const preOrderMiddleware: Middleware = ({
     } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
+    if (preOrder.is_redirected) {
+      const contextList = result?.payload?.context_list;
+
+      if (
+        contextList.find(
+          (ctx) => ctx.page_name === 'RedirectionPaymentSelectedPage'
+        )
+      ) {
+        dispatch(
+          apiEndpoints.setPaymentOption.initiate(preOrder.payment_option?.pk)
+        );
+        return;
+      }
+    }
+
     dispatch(setPreOrder(preOrder));
 
     if (!preOrder.delivery_option && deliveryOptions.length > 0) {
@@ -164,7 +179,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;
 }
@@ -71,6 +72,7 @@ export interface PreOrder {
   currency_type_label?: string;
   is_guest?: boolean;
   is_post_order?: boolean;
+  is_redirected?: boolean;
   installment: InstallmentOption;
   retail_store?: RetailStore;
   gift_box?: GiftBox;

package/types/metadata.ts

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

package/utils/app-fetch.ts

@@ -1,6 +1,7 @@
 import Settings from 'settings';
 import { ServerVariables } from './server-variables';
 import logger from '../utils/log';
+import { headers } from 'next/headers';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -14,8 +15,12 @@ const appFetch = async <T>(
 ) => {
   let response: T;
   let status: number;
+  let ip = '';
 
   try {
+    const nextHeaders = headers();
+    ip = nextHeaders.get('x-forwarded-for') ?? '';
+
     const commerceUrl = Settings.commerceUrl;
     const currentLocale = Settings.localization.locales.find(
       (locale) => locale.value === ServerVariables.locale
@@ -38,10 +43,10 @@ const appFetch = async <T>(
       revalidate: 60
     };
 
-    logger.debug(`FETCH START ${url}`, { requestURL, init });
+    logger.debug(`FETCH START ${url}`, { requestURL, init, ip });
     const req = await fetch(requestURL, init);
     status = req.status;
-    logger.debug(`FETCH END ${url}`, { status: req.status });
+    logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
     const rawData = await req.text();
 
@@ -51,9 +56,9 @@ const appFetch = async <T>(
       response = rawData as unknown as T;
     }
 
-    logger.trace(`FETCH RESPONSE`, { url, response });
+    logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
-    logger.error(`FETCH FAILED`, { url, status, error });
+    logger.error(`FETCH FAILED`, { url, status, error, ip });
   }
 
   return response;

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