@akinon/next 1.21.0-rc.1 → 1.21.0-rc.10

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @akinon/next
 
+## 1.21.0-rc.10
+
+### Minor Changes
+
+- 0181251: ZERO-2440: move otp popup state to redux
+
+## 1.21.0-rc.9
+
+### Minor Changes
+
+- 8d6caba: ZERO-2434: enhance error handling and logging in appFetch function
+
+## 1.21.0-rc.8
+
+### Minor Changes
+
+- 07cc81a: Add infinite and more types to pagination
+
+## 1.21.0-rc.7
+
+### Minor Changes
+
+- 5ace3508: ZERO-2439: Add anonymous tracking page
+- be04d041: ZERO-2452: UA events converted to be compatible with GA4 and types are declared
+- c75e1e45: ZERO-2452: GA4 support for gtm events
+
+## 1.21.0-rc.6
+
+### Minor Changes
+
+- b4452e9d: ZERO-2463: Refactor Sentry initialization and add Sentry DSN option to settings
+
+## 1.21.0-rc.5
+
+### Patch Changes
+
+- ZERO-2296: Fix ROUTES import
+
+## 1.21.0-rc.4
+
+### Minor Changes
+
+- Revert ZERO-2435
+
+## 1.21.0-rc.3
+
+### Minor Changes
+
+- af8e38e0: ZERO-2247: Add additionalParams to MasterpassProvider and set them in buildPurchaseForm and buildDirectPurchaseForm
+- 16027410: ZERO-2451: Refactor extraHeaders assignment in client.ts
+- 9edd725b: Datalayer init changed to 3rd party script. Declare is the same as next
+
+## 1.21.0-rc.2
+
+### Minor Changes
+
+- 8075006: install plugins check the akinon version
+- 32668ed: ZERO-2296: Implement Checkout Provider Middleware and Enhancements
+- 29191da: ImageLoader supports crop none
+
 ## 1.21.0-rc.1
 
 ### Minor Changes

package/api/auth.ts

@@ -220,6 +220,17 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
     pages: {
       signIn: ROUTES.AUTH,
       error: ROUTES.AUTH
+    },
+    cookies: {
+      sessionToken: {
+        name: `__Secure-next-auth.session-token`,
+        options: {
+          httpOnly: true,
+          sameSite: 'none',
+          path: '/',
+          secure: true
+        }
+      }
     }
   };
 };

package/api/client.ts

@@ -43,13 +43,18 @@ async function proxyRequest(...args) {
       urlSearchParams.append(key, `${searchParams.get(key)}`);
     });
 
-  const extraHeaders = Object.fromEntries(req.headers.entries());
+  const extraHeaders: Record<string, string> = {};
+
+  for (const [key, value] of Array.from(req.headers.entries())) {
+    extraHeaders[key.toLowerCase()] = value;
+  }
 
   [
     'x-forwarded-host',
     'x-forwarded-for',
     'x-forwarded-proto',
     'x-forwarded-port',
+    'x-requested-with',
     'origin',
     'host',
     'referer',

package/bin/pz-install-plugins.js

@@ -1,39 +1,71 @@
-#!/usr/bin/env node
-
 const fs = require('fs');
 const path = require('path');
-const rootDir = path.resolve(process.cwd());
-const spawn = require('cross-spawn');
-const availablePlugins = require('../plugins');
+const { execSync } = require('child_process');
+
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+  return insideNodeModules
+    ? process.cwd()
+    : path.resolve(__dirname, '../../../apps/projectzeronext');
+}
 
-let plugins;
+const BASE_DIR = findBaseDir();
+const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
+
+const packageJsonPath = getFullPath('package.json');
+let packageJson;
 
 try {
-  plugins = require(path.resolve(rootDir, './src/plugins.js'));
+  packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 } catch (error) {
-  console.error('No plugins.js file found, skipping plugin installation.');
-  process.exit(0);
+  console.error('Error reading package.json:', error);
+  process.exit(1);
 }
 
-let installCmd = [];
+const pluginsJsPath = getFullPath('src/plugins.js');
+let installedPlugins;
+
+try {
+  installedPlugins = require(pluginsJsPath);
+} catch (error) {
+  console.error('Error loading installed plugins:', error);
+  process.exit(1);
+}
 
-availablePlugins
-  .filter((p) => plugins?.includes(p))
-  .forEach((name) => {
-    installCmd.push(`@akinon/${name}`);
-  });
+const protectedPackages = ['@akinon/next', 'next'];
 
-spawn.sync('yarn', ['cache clean']);
+const pluginsToRemove = Object.keys(packageJson.dependencies || {}).filter(
+  (dep) =>
+    dep.startsWith('@akinon/') &&
+    !installedPlugins.includes(dep.replace('@akinon/', '')) &&
+    !protectedPackages.includes(dep)
+);
 
-for (const plugin of availablePlugins) {
-  spawn.sync('yarn', ['remove', `@akinon/${plugin}`]);
-}
+pluginsToRemove.forEach((plugin) => {
+  try {
+    execSync(`yarn remove ${plugin}`, { stdio: 'inherit', cwd: BASE_DIR });
+  } catch (error) {
+    console.warn(
+      `Warning: Could not remove ${plugin}. It may not have been installed.`
+    );
+  }
+});
 
-if (
-  installCmd.length > 0 &&
-  !fs.existsSync(path.resolve(rootDir, '../../turbo.json'))
-) {
-  spawn.sync('yarn', ['add', ...installCmd, '--ignore-scripts'], {
-    stdio: 'inherit'
-  });
-}
+installedPlugins.forEach((plugin) => {
+  const packageName = `@akinon/${plugin}`;
+  if (
+    !Object.keys(packageJson.dependencies || {}).includes(packageName) &&
+    !protectedPackages.includes(packageName)
+  ) {
+    try {
+      const version = packageJson.dependencies['@akinon/next'].replace('^', '');
+      const command = `yarn add ${packageName}@${version} --exact --ignore-scripts`;
+      execSync(command, { stdio: 'inherit', cwd: BASE_DIR });
+    } catch (error) {
+      console.warn(
+        '\n\x1b[33m%s\x1b[0m',
+        `Error adding ${packageName}: ${error}`
+      );
+    }
+  }
+});

package/data/client/checkout.ts

@@ -83,12 +83,18 @@ const completeMasterpassPayment = async (
   reduxStore: AppStore
 ) => {
   const state = reduxStore.getState();
-  const { token, order_no } = context.page_context;
+  const { token, order_no, extras } = context.page_context;
   const { endpoints: apiEndpoints } = checkoutApi;
   const { preOrder } = state.checkout ?? {};
 
-  const { isDirectPurchase, referenceNo, credentials, msisdn, selectedCard } =
-    state.masterpass ?? {};
+  const {
+    isDirectPurchase,
+    referenceNo,
+    credentials,
+    msisdn,
+    selectedCard,
+    additionalParams
+  } = state.masterpass ?? {};
 
   const commonFormValues = {
     token,
@@ -96,12 +102,16 @@ const completeMasterpassPayment = async (
     referenceNo,
     merchantId: credentials?.merchant_id ?? null,
     msisdn,
-    amount: preOrder?.unpaid_amount?.replace('.', '') ?? ''
+    amount: preOrder?.unpaid_amount?.replace('.', '') ?? '',
+    additionalParams: additionalParams ?? extras?.additionalParams
   };
 
   const form = isDirectPurchase
     ? await buildDirectPurchaseForm(commonFormValues, params)
-    : await buildPurchaseForm({ ...commonFormValues, selectedCard });
+    : await buildPurchaseForm({
+        ...commonFormValues,
+        selectedCard
+      });
 
   window.MFS?.[
     state.masterpass.isDirectPurchase ? 'directPurchase' : 'purchase'

package/data/client/user.ts

@@ -1,6 +1,6 @@
 import { api } from './api';
 import { user } from '../urls';
-import { ForgotPasswordFormType } from '../../types';
+import { ForgotPasswordFormType, Order } from '../../types';
 import { buildClientRequestUrl } from '../../utils';
 
 interface GetCaptchaResponse {
@@ -84,6 +84,21 @@ const userApi = api.injectEndpoints({
           contentType: 'application/json'
         })
       })
+    }),
+    getAnonymousTracking: build.mutation<
+      Order,
+      { email: string; number: string }
+    >({
+      query: ({ email, number }) => ({
+        url: buildClientRequestUrl(user.anonymousOrderTracking, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          email,
+          number
+        }
+      })
     })
   }),
   overrideExisting: false
@@ -95,5 +110,6 @@ export const {
   useConfirmEmailVerificationQuery,
   useValidateCaptchaMutation,
   useLogoutMutation,
-  useForgotPasswordMutation
+  useForgotPasswordMutation,
+  useGetAnonymousTrackingMutation
 } = userApi;

package/data/client/wishlist.ts

@@ -20,6 +20,8 @@ interface GetStockParams {
 }
 
 interface GetFavoritesResponse {
+  next?: string | null;
+  previous?: string | null;
   count: number;
   results: FavoriteItem[];
 }

package/data/server/category.ts

@@ -15,7 +15,7 @@ function getCategoryDataHandler(
     const params = generateCommerceSearchParams(searchParams);
 
     const rawData = await appFetch<string>(
-      `${category.getCategoryByPk(pk)}${params ? params : ''}`,
+      `${category.getCategoryByPk(pk)}s${params ? params : ''}`,
       {
         headers: {
           Accept: 'application/json',
@@ -39,7 +39,7 @@ function getCategoryDataHandler(
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing category data', {
+      logger.fatal('Error while parsing category data', {
         handler: 'getCategoryDataHandler',
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')
@@ -108,7 +108,7 @@ function getCategoryBySlugDataHandler(slug: string) {
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing category data', {
+      logger.fatal('Error while parsing category data', {
         handler: 'getCategoryBySlugDataHandler',
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')

package/data/server/list.ts

@@ -38,7 +38,7 @@ const getListDataHandler = (
         numberValueParser
       ) as GetCategoryResponse;
     } catch (error) {
-      logger.error('Error while parsing list data', {
+      logger.fatal('Error while parsing list data', {
         error,
         rawData: rawData.startsWith('<!DOCTYPE html>')
           ? `${rawData.substring(0, 50)}...`

package/data/urls.ts

@@ -172,7 +172,8 @@ export const user = {
     `/users/email-set-primary/${token}/`,
   confirmEmailVerification: (token: string) =>
     `/users/registration/account-confirm-email/${token}/`,
-  csrfToken: '/csrf_token/'
+  csrfToken: '/csrf_token/',
+  anonymousOrderTracking: '/users/orders/anonymous'
 };
 
 export const b2b = {

package/hooks/use-pagination.ts

@@ -70,10 +70,6 @@ export default function usePagination(
     dispatch({ type: 'setLimit', payload: limit });
   }, [limit]);
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [state.page, state.limit]);
-
   const setTotal = useCallback(
     (total: number) => {
       dispatch({ type: 'setTotal', payload: total });

package/middlewares/checkout-provider.ts

@@ -0,0 +1,88 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import settings from 'settings';
+import { PzNextRequest } from '.';
+import logger from '../utils/log';
+import { urlLocaleMatcherRegex } from '../utils';
+import { getUrlPathWithLocale } from '../utils/localization';
+
+const withCheckoutProvider =
+  (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,
+      ''
+    );
+    const searchParams = new URLSearchParams(url.search);
+
+    if (pathnameWithoutLocale.startsWith('/orders/checkout-provider/')) {
+      try {
+        const request = await fetch(
+          `${encodeURI(settings.commerceUrl)}${url.pathname.replace(
+            urlLocaleMatcherRegex,
+            ''
+          )}?${searchParams.toString()}`,
+          {
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || '',
+              Accept: 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          }
+        );
+
+        return NextResponse.json(await request.json());
+      } catch (error) {
+        logger.error('withCheckoutProvider error', {
+          error,
+          ip
+        });
+        return NextResponse.next();
+      }
+    }
+
+    if (pathnameWithoutLocale.startsWith('/orders/checkout-provider-cancel')) {
+      try {
+        const request = await fetch(
+          `${settings.commerceUrl}${pathnameWithoutLocale}${url.search}`,
+          {
+            redirect: 'manual',
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || ''
+            }
+          }
+        );
+
+        if (request.headers.get('location')) {
+          const location = request.headers.get('location');
+          const redirectUrl = new URL(
+            request.headers.get('location'),
+            location.startsWith('http') ? '' : process.env.NEXT_PUBLIC_URL
+          );
+
+          redirectUrl.pathname = getUrlPathWithLocale(
+            redirectUrl.pathname,
+            req.middlewareParams.rewrites.locale
+          );
+
+          return Response.redirect(redirectUrl.toString(), request.status);
+        }
+      } catch (error) {
+        logger.error('withCheckoutProvider error', {
+          error,
+          ip
+        });
+      }
+    }
+
+    return middleware(req, event);
+  };
+
+export default withCheckoutProvider;

package/middlewares/default.ts

@@ -1,7 +1,9 @@
 import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
 import Settings from 'settings';
+import { ROUTES } from 'routes';
 import {
   PzNextRequest,
+  withCheckoutProvider,
   withCompleteGpay,
   withCompleteMasterpass,
   withOauthLogin,
@@ -112,6 +114,36 @@ const withPzDefault =
       return NextResponse.redirect(redirectUrlWithLocale, 303);
     }
 
+    if (req.nextUrl.pathname.startsWith('/orders/checkout-provider/')) {
+      try {
+        const data = await req.json();
+
+        const request = await fetch(
+          `${encodeURI(Settings.commerceUrl)}${url.pathname.replace(
+            urlLocaleMatcherRegex,
+            ''
+          )}?${searchParams.toString()}`,
+          {
+            method: 'POST',
+            body: JSON.stringify(data),
+            next: {
+              revalidate: 0
+            },
+            headers: {
+              Cookie: req.headers.get('cookie') || '',
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          }
+        );
+
+        return NextResponse.json(await request.json());
+      } catch (error) {
+        return NextResponse.redirect(ROUTES.BASKET);
+      }
+    }
+
     req.middlewareParams = {
       commerceUrl,
       rewrites: {}
@@ -123,64 +155,82 @@ const withPzDefault =
           withPrettyUrl(
             withRedirectionPayment(
               withThreeDRedirection(
-                withUrlRedirection(
-                  withCompleteGpay(
-                    withCompleteMasterpass(
-                      async (req: PzNextRequest, event: NextFetchEvent) => {
-                        let middlewareResult: NextResponse | void =
-                          NextResponse.next();
-
-                        try {
-                          const { locale, prettyUrl, currency } =
-                            req.middlewareParams.rewrites;
-                          const { defaultLocaleValue } = Settings.localization;
-                          const url = req.nextUrl.clone();
-                          const pathnameWithoutLocale = url.pathname.replace(
-                            urlLocaleMatcherRegex,
-                            ''
-                          );
-
-                          url.basePath = `/${commerceUrl}`;
-                          url.pathname = `/${
-                            locale.length ? `${locale}/` : ''
-                          }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
-
-                          Settings.rewrites.forEach((rewrite) => {
-                            url.pathname = url.pathname.replace(
-                              rewrite.source,
-                              rewrite.destination
+                withCheckoutProvider(
+                  withUrlRedirection(
+                    withCompleteGpay(
+                      withCompleteMasterpass(
+                        async (req: PzNextRequest, event: NextFetchEvent) => {
+                          let middlewareResult: NextResponse | void =
+                            NextResponse.next();
+
+                          try {
+                            const { locale, prettyUrl, currency } =
+                              req.middlewareParams.rewrites;
+                            const { defaultLocaleValue } =
+                              Settings.localization;
+                            const url = req.nextUrl.clone();
+                            const pathnameWithoutLocale = url.pathname.replace(
+                              urlLocaleMatcherRegex,
+                              ''
                             );
-                          });
 
-                          middlewareResult = (await middleware(
-                            req,
-                            event
-                          )) as NextResponse | void;
+                            url.basePath = `/${commerceUrl}`;
+                            url.pathname = `/${
+                              locale.length ? `${locale}/` : ''
+                            }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
+
+                            Settings.rewrites.forEach((rewrite) => {
+                              url.pathname = url.pathname.replace(
+                                rewrite.source,
+                                rewrite.destination
+                              );
+                            });
+
+                            middlewareResult = (await middleware(
+                              req,
+                              event
+                            )) as NextResponse | void;
+
+                            // if middleware.ts has a return value for current url
+                            if (middlewareResult instanceof NextResponse) {
+                              // 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);
+                            }
 
-                          // if middleware.ts has a return value for current url
-                          if (middlewareResult instanceof NextResponse) {
-                            // pz-override-response header is used to prevent 404 page for custom responses.
                             if (
-                              middlewareResult.headers.get(
-                                'pz-override-response'
-                              ) !== 'true'
+                              !url.pathname.startsWith(`/${currency}/orders`)
                             ) {
-                              middlewareResult.headers.set(
-                                'x-middleware-rewrite',
-                                url.href
+                              middlewareResult.cookies.set(
+                                'pz-locale',
+                                locale?.length > 0
+                                  ? locale
+                                  : defaultLocaleValue,
+                                {
+                                  sameSite: 'none',
+                                  secure: true,
+                                  expires: new Date(
+                                    Date.now() + 1000 * 60 * 60 * 24 * 7
+                                  ) // 7 days
+                                }
                               );
                             }
-                          } else {
-                            // if middleware.ts doesn't have a return value.
-                            // e.g. NextResponse.next() doesn't exist in middleware.ts
-
-                            middlewareResult = NextResponse.rewrite(url);
-                          }
-
-                          if (!url.pathname.startsWith(`/${currency}/orders`)) {
                             middlewareResult.cookies.set(
-                              'pz-locale',
-                              locale?.length > 0 ? locale : defaultLocaleValue,
+                              'pz-currency',
+                              currency,
                               {
                                 sameSite: 'none',
                                 secure: true,
@@ -189,74 +239,65 @@ const withPzDefault =
                                 ) // 7 days
                               }
                             );
-                          }
-                          middlewareResult.cookies.set(
-                            'pz-currency',
-                            currency,
-                            {
-                              sameSite: 'none',
-                              secure: true,
-                              expires: new Date(
-                                Date.now() + 1000 * 60 * 60 * 24 * 7
-                              ) // 7 days
-                            }
-                          );
-
-                          if (
-                            req.cookies.get('pz-locale') &&
-                            req.cookies.get('pz-locale').value !== locale
-                          ) {
-                            logger.debug('Locale changed', {
-                              locale,
-                              oldLocale: req.cookies.get('pz-locale')?.value,
-                              ip
-                            });
-                          }
-
-                          middlewareResult.headers.set(
-                            'pz-url',
-                            req.nextUrl.toString()
-                          );
 
-                          if (req.cookies.get('pz-set-currency')) {
-                            middlewareResult.cookies.delete('pz-set-currency');
-                          }
+                            if (
+                              req.cookies.get('pz-locale') &&
+                              req.cookies.get('pz-locale').value !== locale
+                            ) {
+                              logger.debug('Locale changed', {
+                                locale,
+                                oldLocale: req.cookies.get('pz-locale')?.value,
+                                ip
+                              });
+                            }
 
-                          if (process.env.ACC_APP_VERSION) {
                             middlewareResult.headers.set(
-                              'acc-app-version',
-                              process.env.ACC_APP_VERSION
+                              'pz-url',
+                              req.nextUrl.toString()
                             );
-                          }
 
-                          // Set CSRF token if not set
-                          try {
-                            const url = `${Settings.commerceUrl}${user.csrfToken}`;
+                            if (req.cookies.get('pz-set-currency')) {
+                              middlewareResult.cookies.delete(
+                                'pz-set-currency'
+                              );
+                            }
 
-                            if (!req.cookies.get('csrftoken')) {
-                              const { csrf_token } = await (
-                                await fetch(url)
-                              ).json();
-                              middlewareResult.cookies.set(
-                                'csrftoken',
-                                csrf_token
+                            if (process.env.ACC_APP_VERSION) {
+                              middlewareResult.headers.set(
+                                'acc-app-version',
+                                process.env.ACC_APP_VERSION
                               );
                             }
+
+                            // Set CSRF token if not set
+                            try {
+                              const url = `${Settings.commerceUrl}${user.csrfToken}`;
+
+                              if (!req.cookies.get('csrftoken')) {
+                                const { csrf_token } = await (
+                                  await fetch(url)
+                                ).json();
+                                middlewareResult.cookies.set(
+                                  'csrftoken',
+                                  csrf_token
+                                );
+                              }
+                            } catch (error) {
+                              logger.error('CSRF Error', {
+                                error,
+                                ip
+                              });
+                            }
                           } catch (error) {
-                            logger.error('CSRF Error', {
+                            logger.error('withPzDefault Error', {
                               error,
                               ip
                             });
                           }
-                        } catch (error) {
-                          logger.error('withPzDefault Error', {
-                            error,
-                            ip
-                          });
-                        }
 
-                        return middlewareResult;
-                      }
+                          return middlewareResult;
+                        }
+                      )
                     )
                   )
                 )

package/middlewares/index.ts

@@ -7,6 +7,7 @@ import withOauthLogin from './oauth-login';
 import withUrlRedirection from './url-redirection';
 import withCompleteGpay from './complete-gpay';
 import withCompleteMasterpass from './complete-masterpass';
+import withCheckoutProvider from './checkout-provider';
 import { NextRequest } from 'next/server';
 
 export {
@@ -18,7 +19,8 @@ export {
   withOauthLogin,
   withUrlRedirection,
   withCompleteGpay,
-  withCompleteMasterpass
+  withCompleteMasterpass,
+  withCheckoutProvider
 };
 
 export interface PzNextRequest extends NextRequest {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.21.0-rc.1",
+  "version": "1.21.0-rc.10",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -32,7 +32,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.21.0-rc.1",
+    "@akinon/eslint-plugin-projectzero": "1.21.0-rc.10",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.d.ts

@@ -1,3 +1,7 @@
 declare module '@akinon/pz-masterpass' {
   export const masterpassReducer: unknown;
 }
+
+declare module '@akinon/pz-otp' {
+  export const otpReducer: unknown;
+}

package/redux/reducers/index.ts

@@ -6,6 +6,7 @@ import { api } from '../../data/client/api';
 
 // Plugin reducers
 import { masterpassReducer } from '@akinon/pz-masterpass';
+import { otpReducer } from '@akinon/pz-otp';
 
 const reducers = {
   [api.reducerPath]: api.reducer,
@@ -13,7 +14,8 @@ const reducers = {
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
-  masterpass: masterpassReducer
+  masterpass: masterpassReducer,
+  otp: otpReducer
 };
 
 export default reducers;

package/sentry/index.ts

@@ -1,27 +1,33 @@
 import * as Sentry from '@sentry/nextjs';
+import settings from 'settings';
 
 const SENTRY_DSN: string =
-  process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+  settings.sentryDsn ||
+  process.env.SENTRY_DSN ||
+  process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
-  options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
+  options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {
+    dsn: SENTRY_DSN,
+    integrations: [],
+    tracesSampleRate: 1.0
+  }
 ) => {
-  // TODO: Handle options with ESLint rules
-
-  // TODO: Remove Zero Project DSN
-
-  Sentry.init({
-    dsn:
-      SENTRY_DSN ||
-      'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
+  const initOptions = {
+    ...options,
     initialScope: {
       tags: {
+        ...((
+          options.initialScope as {
+            tags?: Record<string, string>;
+          }
+        )?.tags ?? {}),
         APP_TYPE: 'ProjectZeroNext',
         TYPE: type
       }
-    },
-    tracesSampleRate: 1.0,
-    integrations: []
-  });
+    }
+  };
+
+  Sentry.init(initOptions);
 };

package/types/gtm.ts

@@ -14,3 +14,51 @@ export interface GTMUserType {
   gender: string;
   emailAllowed: boolean;
 }
+
+export interface GA4EventItem {
+  item_id: string | number;
+  item_name: string | number;
+  coupon?: string | number;
+  discount?: string | null;
+  index?: number;
+  item_brand?: string;
+  item_category?: string;
+  item_category2?: string;
+  item_category3?: string;
+  item_category4?: string;
+  item_category5?: string;
+  item_list_id?: string;
+  item_list_name?: string;
+  item_variant?: string;
+  price?: string | number;
+  quantity?: number;
+  sale_status?: string;
+  stock_status?: string;
+  discount_percent?: number;
+  discount_price?: string;
+  product_gender?: string;
+  product_size?: string;
+  [key: string]: any;
+}
+
+export interface GA4EventParams {
+  item_list_id?: string;
+  item_list_name?: string;
+  value?: number;
+  currency?: string;
+  shipping_tier?: string;
+  coupon?: string;
+  selected_shipping_option?: string;
+  creative_name?: string;
+  creative_slot?: string;
+  promotion_id?: string;
+  promotion_name?: string;
+  items?: GA4EventItem[];
+  transaction_id?: string;
+  tax?: number;
+  shipping?: number;
+  shipping_country?: string;
+  shipping_city?: string;
+  payment_method?: string;
+  [key: string]: any;
+}

package/types/index.ts

@@ -4,8 +4,11 @@ import { Control, FieldError } from 'react-hook-form';
 import { ReactNode } from 'react';
 
 declare global {
-  export interface Window {
-    dataLayer: Record<string, any>[];
+  interface Window {
+    // we did it like this because declare types needs to be identical, if not it will fail
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dataLayer?: Object[];
+    [key: string]: any;
   }
 }
 
@@ -68,6 +71,12 @@ export interface Currency {
 
 export interface Settings {
   commerceUrl: string;
+  /**
+   * This option allows you to track Sentry events on the client side, in addition to server and edge environments.
+   *
+   * It overrides process.env.NEXT_PUBLIC_SENTRY_DSN and process.env.SENTRY_DSN.
+   */
+  sentryDsn?: string;
   redis: {
     defaultExpirationTime: number;
   };
@@ -198,7 +207,7 @@ export type CDNOptions = {
   width?: number;
   height?: number;
   quality?: number;
-  crop?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  crop?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'none';
   upscale?: boolean;
 };
 

package/utils/app-fetch.ts

@@ -12,7 +12,7 @@ const appFetch = async <T>(
   url: RequestInfo,
   init: RequestInit = {},
   responseType = FetchResponseType.JSON
-) => {
+): Promise<T> => {
   let response: T;
   let status: number;
   let ip = '';
@@ -28,7 +28,7 @@ const appFetch = async <T>(
 
     if (commerceUrl === 'default') {
       logger.error('Commerce URL is not set. Current value is "default"');
-      return undefined;
+      throw new Error('Commerce URL is not set');
     }
 
     const requestURL = `${decodeURIComponent(commerceUrl)}${url}`;
@@ -48,19 +48,30 @@ const appFetch = async <T>(
     status = req.status;
     logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
-    const rawData = await req.text();
+    if (!req.ok) {
+      throw new Error(`Request failed with status ${status}`);
+    }
 
     if (responseType === FetchResponseType.JSON) {
-      response = JSON.parse(rawData);
+      response = (await req.json()) as T;
     } else {
-      response = rawData as unknown as T;
+      response = (await req.text()) as unknown as T;
     }
 
     logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
+    const logType = status === 500 ? 'fatal' : 'error';
+
     if (!url.toString().includes('/cms/seo/')) {
-      logger.error(`FETCH FAILED`, { url, status, error, ip });
+      logger[logType](`FETCH FAILED`, { url, status, error, ip });
     }
+
+    // throw the error if it's fatal, so it can be caught and handled at higher levels
+    if (logType === 'fatal') {
+      throw error;
+    }
+
+    return Promise.reject(error);
   }
 
   return response;

package/utils/image-loader.ts

@@ -19,12 +19,19 @@ export const ImageLoader = ({
   aspectRatio
 }: ImageLoaderParams) => {
   if (src.match(/akinoncdn|akinoncloud|b-cdn\.net/)) {
-    return buildCDNUrl(src, {
+    const height =
+      fill && aspectRatio
+        ? parseInt(String(Number(width) / aspectRatio))
+        : undefined;
+
+    const config: CDNOptions = {
       width,
-      height: fill ? parseInt(String(Number(width) / aspectRatio)) : undefined,
+      height,
       quality,
-      crop
-    });
+      crop: crop !== 'none' ? crop : undefined
+    };
+
+    return buildCDNUrl(src, config);
   }
 
   return src;