@akinon/next 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 1.5.0
+
+### Patch Changes
+
+- Support GPay plugin
+- Extend Next Metadata type
+
+## 1.4.0
+
+### Minor Changes
+
+- Fix basket reset on mobile app checkout page
+- Upgrade typescript to v5 and remove ts-expect-error lines
+- Fix 3D payment with different currencies
+- Support tailwind theming
+
 ## 1.3.0
 
 ### Minor Changes

package/api/auth.ts

@@ -8,13 +8,16 @@ import { urlLocaleMatcherRegex } from '../utils';
 import logger from '@akinon/next/utils/log';
 import { AuthError } from '../types';
 
-async function getCurrentUser(sessionId: string) {
+async function getCurrentUser(sessionId: string, currency = '') {
+  const headers = {
+    'Content-Type': 'application/json',
+    Cookie: `osessionid=${sessionId}`,
+    'x-currency': currency
+  };
+
   const currentUser = await (
     await fetch(URLS.user.currentUser, {
-      headers: {
-        'Content-Type': 'application/json',
-        Cookie: `osessionid=${sessionId}`
-      }
+      headers
     })
   ).json();
 
@@ -51,7 +54,10 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
             return null;
           }
 
-          const currentUser = await getCurrentUser(sessionId);
+          const currentUser = await getCurrentUser(
+            sessionId,
+            req.cookies['pz-currency'] ?? ''
+          );
           return currentUser;
         }
       }),
@@ -78,6 +84,7 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
           headers.set('Content-Type', 'application/json');
           headers.set('cookie', `${req.headers.cookie}`);
           headers.set('Accept-Language', `${language}`);
+          headers.set('x-currency', req.cookies['pz-currency'] ?? '');
 
           logger.debug('Trying to login/register', {
             formType: credentials.formType
@@ -160,7 +167,10 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
             }
           }
 
-          const currentUser = await getCurrentUser(sessionId);
+          const currentUser = await getCurrentUser(
+            sessionId,
+            req.cookies['pz-currency'] ?? ''
+          );
           return currentUser;
         }
       })

package/bin/pz-install-theme.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const BASE_DIR =
+  path.resolve(__dirname, '../../../apps/projectzeropwa') || process.cwd();
+const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
+
+const theme = require(getFullPath('src/theme.js'));
+
+try {
+  const spawn = require('cross-spawn');
+  const tsConfigPath = getFullPath('tsconfig.json');
+
+  if (!fs.existsSync(tsConfigPath)) {
+    throw new Error(`tsconfig.json not found at ${tsConfigPath}`);
+  }
+
+  const tsConfigContent = fs.readFileSync(tsConfigPath, 'utf8');
+  const themePaths = ['"./*"'];
+
+  if (theme !== 'default') {
+    themePaths.splice(0, 0, `"themes/${theme}/*"`);
+  }
+
+  const newContent = tsConfigContent.replace(
+    /"@theme\/\*":\s\[.+\]/,
+    `"@theme/*": [${themePaths.join(', ')}]`
+  );
+
+  fs.writeFileSync(tsConfigPath, newContent);
+
+  if (fs.existsSync(getFullPath('../../turbo.json'))) {
+    spawn.sync('turbo', ['clean'], {
+      stdio: 'inherit'
+    });
+  }
+} catch (error) {
+  console.error('Error:', error.message);
+}

package/bin/pz-postbuild.js

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/bin/pz-postdev.js

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/bin/pz-postinstall.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+const spawn = require('cross-spawn');
+
+spawn.sync('pz-install-plugins', [], { stdio: 'inherit' });

package/bin/pz-poststart.js

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/bin/pz-prebuild.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+const spawn = require('cross-spawn');
+
+spawn.sync('pz-install-theme', [], { stdio: 'inherit' });

package/bin/pz-predev.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+const spawn = require('cross-spawn');
+
+spawn.sync('pz-install-theme', [], { stdio: 'inherit' });

package/bin/pz-prestart.js

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/components/plugin-module.tsx

@@ -1,13 +1,15 @@
 import dynamic from 'next/dynamic';
 import plugins from 'plugins';
 import logger from '../utils/log';
+import { useMemo } from 'react';
 
 enum Plugin {
   BasketGiftPack = 'pz-basket-gift-pack',
   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'
 }
 
 export enum Component {
@@ -15,7 +17,8 @@ export enum Component {
   ClickCollect = 'ClickCollect',
   OneClickCheckoutButtons = 'OneClickCheckoutButtons',
   PayOnDelivery = 'PayOnDelivery',
-  CheckoutGiftPack = 'CheckoutGiftPack'
+  CheckoutGiftPack = 'CheckoutGiftPack',
+  GPay = 'GPayOption'
 }
 
 const PluginComponents = new Map([
@@ -23,7 +26,8 @@ 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]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -47,31 +51,37 @@ export default function PluginModule({
     return null;
   }
 
-  const Component = dynamic(
-    () => {
-      let promise: any;
+  const Component = useMemo(
+    () =>
+      dynamic(
+        () => {
+          let promise: any;
 
-      try {
-        if (plugin === Plugin.BasketGiftPack) {
-          promise = import(`${'pz-basket-gift-pack'}`);
-        } else if (plugin === Plugin.ClickCollect) {
-          promise = import(`${'pz-click-collect'}`);
-        } else if (plugin === Plugin.OneClickCheckout) {
-          promise = import(`${'pz-one-click-checkout'}`);
-        } else if (plugin === Plugin.PayOnDelivery) {
-          promise = import(`${'pz-pay-on-delivery'}`);
-        } else if (plugin === Plugin.CheckoutGiftPack) {
-          promise = import(`${'pz-checkout-gift-pack'}`);
-        }
-      } catch (error) {
-        logger.error(error);
-      }
+          try {
+            if (plugin === Plugin.BasketGiftPack) {
+              promise = import(`${'pz-basket-gift-pack'}`);
+            } else if (plugin === Plugin.ClickCollect) {
+              promise = import(`${'pz-click-collect'}`);
+            } else if (plugin === Plugin.OneClickCheckout) {
+              promise = import(`${'pz-one-click-checkout'}`);
+            } else if (plugin === Plugin.PayOnDelivery) {
+              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'}`);
+            }
+          } catch (error) {
+            logger.error(error);
+          }
 
-      return promise
-        ? promise.then((mod) => mod[component]).catch(() => () => null)
-        : new Promise<any>((resolve) => resolve(() => null));
-    },
-    { ssr: false }
+          return promise
+            ? promise.then((mod) => mod[component]).catch(() => () => null)
+            : new Promise<any>((resolve) => resolve(() => null));
+        },
+        { ssr: false }
+      ),
+    [plugin]
   );
 
   return <Component {...props} />;

package/data/client/user.ts

@@ -70,13 +70,21 @@ const userApi = api.injectEndpoints({
         method: 'POST',
         body
       })
-    })
+    }),
+    changeEmailVerification: build.query<void, string>({
+      query: (token) => ({
+        url: buildClientRequestUrl(user.changeEmailVerification(token), {
+          contentType: 'application/json'
+        })
+      })
+    }),
   }),
   overrideExisting: false
 });
 
 export const {
   useGetCaptchaQuery,
+  useChangeEmailVerificationQuery,
   useValidateCaptchaMutation,
   useLogoutMutation,
   useForgotPasswordMutation

package/data/urls.ts

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

package/hocs/client/with-segment-defaults.tsx

@@ -15,11 +15,10 @@ export const withSegmentDefaults =
     options: SegmentDefaultsOptions
   ) =>
   (props: T) => {
-    let componentProps = { ...props };
+    const componentProps = { ...props };
 
     return (
       <>
-        {/* @ts-expect-error Server Component */}
         <Component {...componentProps} />
       </>
     );

package/hocs/server/with-segment-defaults.tsx

@@ -35,7 +35,6 @@ export const withSegmentDefaults =
 
     return await (
       <>
-        {/* @ts-expect-error Server Component */}
         <Component {...componentProps} />
       </>
     );

package/middlewares/currency.ts

@@ -3,6 +3,7 @@ import settings from 'settings';
 import { PzNextRequest } from '.';
 import logger from '../utils/log';
 import { basket } from '../data/urls';
+import { urlLocaleMatcherRegex } from '../utils';
 
 const resetBasket = async (req: PzNextRequest) => {
   await fetch(`${settings.commerceUrl}${basket.getBasket}`, {
@@ -23,6 +24,7 @@ const withCurrency =
       const { currencies, defaultCurrencyCode, defaultLocaleValue } =
         settings.localization;
       const locale = req.middlewareParams.rewrites.locale ?? defaultLocaleValue;
+      const url = req.nextUrl.clone();
 
       if (!defaultCurrencyCode) {
         logger.error('Default currency code is not defined in settings.');
@@ -60,7 +62,19 @@ const withCurrency =
         activeCurrency = defaultCurrencyCode;
       }
 
-      if (req.cookies.get('pz-currency')?.value !== activeCurrency) {
+      if (
+        req.cookies.get('pz-currency') &&
+        req.cookies.get('pz-currency')?.value !== activeCurrency &&
+        url.pathname.match(urlLocaleMatcherRegex) &&
+        !url.search.includes('mobile_app=true') &&
+        !url.search.includes('page=CreditCardThreeDSecurePage')
+      ) {
+        logger.info('Currency changed. Resetting basket...', {
+          sessionid: req.cookies.get('osessionid')?.value ?? '',
+          oldCurrency: req.cookies.get('pz-currency')?.value,
+          newCurrency: activeCurrency
+        });
+
         resetBasket(req);
       }
 

package/middlewares/oauth-login.ts

@@ -18,7 +18,8 @@ const withOauthLogin =
 
     const headers = {
       'x-forwarded-host':
-        req.headers.get('x-forwarded-host') || req.headers.get('host') || ''
+        req.headers.get('x-forwarded-host') || req.headers.get('host') || '',
+      'x-currency': req.cookies.get('pz-currency')?.value ?? ''
     };
 
     if (loginUrlMatcherRegex.test(url.pathname)) {

package/middlewares/redirection-payment.ts

@@ -55,7 +55,8 @@ const withRedirectionPayment =
       headers: {
         'X-Requested-With': 'XMLHttpRequest',
         'Content-Type': 'application/x-www-form-urlencoded',
-        Cookie: req.headers.get('cookie') ?? ''
+        Cookie: req.headers.get('cookie') ?? '',
+        'x-currency': req.cookies.get('pz-currency')?.value ?? ''
       },
       body
     });

package/middlewares/three-d-redirection.ts

@@ -37,67 +37,95 @@ const withThreeDRedirection =
       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: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`,
+      '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: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`
-      },
-      body
-    });
-
-    logger.info('Complete 3D 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;
-
-    logger.info('Order success page context list', {
-      middleware: 'three-d-redirection',
-      contextList
-    });
-
-    if (!redirectUrl) {
-      logger.warn(
-        'No redirection url for order success page found in page_context',
-        {
-          middleware: 'three-d-redirection'
-        }
+    try {
+      const body = await streamToString(req.body);
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete 3D payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
       );
-      return middleware(req, event);
-    }
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
 
-    const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
-      redirectUrl,
-      req.cookies.get('pz-locale')?.value
-    )}`;
+      logger.info('Order success page context list', {
+        middleware: 'three-d-redirection',
+        contextList
+      });
 
-    logger.info('Redirecting to order success page', {
-      middleware: 'three-d-redirection',
-      redirectUrlWithLocale
-    });
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'three-d-redirection',
+            requestHeaders,
+            response: JSON.stringify(response)
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
 
-    // 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);
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
 
-    nextResponse.headers.set(
-      'Set-Cookie',
-      request.headers.get('set-cookie') ?? ''
-    );
+      logger.info('Redirecting to order success page', {
+        middleware: 'three-d-redirection',
+        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);
 
-    return nextResponse;
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
+      );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing 3D payment', {
+        middleware: 'three-d-redirection',
+        error,
+        requestHeaders
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
   };
 
 export default withThreeDRedirection;

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "private": false,
   "license": "MIT",
   "bin": {
-    "pz-install-plugins": "bin/pz-install-plugins.js"
+    "pz-postbuild": "bin/pz-postbuild.js",
+    "pz-prebuild": "bin/pz-prebuild.js",
+    "pz-postinstall": "bin/pz-postinstall.js",
+    "pz-prestart": "bin/pz-prestart.js",
+    "pz-poststart": "bin/pz-poststart.js",
+    "pz-predev": "bin/pz-predev.js",
+    "pz-postdev": "bin/pz-postdev.js"
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.2",

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?: {
+    languages: Record<string, string>;
+  };
+}