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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/next
 
+## 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,40 @@
-#!/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');
-
-let plugins;
 
-try {
-  plugins = require(path.resolve(rootDir, './src/plugins.js'));
-} catch (error) {
-  console.error('No plugins.js file found, skipping plugin installation.');
-  process.exit(0);
+function findBaseDir() {
+  const insideNodeModules = __dirname.includes('node_modules');
+  return insideNodeModules
+    ? path.resolve(__dirname, '../../../../')
+    : path.resolve(__dirname, '../../../apps/projectzeronext');
 }
 
-let installCmd = [];
+const BASE_DIR = findBaseDir();
 
-availablePlugins
-  .filter((p) => plugins?.includes(p))
-  .forEach((name) => {
-    installCmd.push(`@akinon/${name}`);
-  });
+const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
 
-spawn.sync('yarn', ['cache clean']);
+const packageJsonPath = getFullPath('package.json');
+const akinonPackageNumber = require(packageJsonPath).dependencies[
+  '@akinon/next'
+].replace('^', '');
+//just in case
 
-for (const plugin of availablePlugins) {
-  spawn.sync('yarn', ['remove', `@akinon/${plugin}`]);
-}
+const availablePlugins = require('../plugins');
+
+let installCmd = availablePlugins.map(
+  (name) => `@akinon/${name}@${akinonPackageNumber}`
+);
+
+spawn.sync('yarn', ['cache clean'], { stdio: 'inherit', cwd: BASE_DIR });
 
-if (
-  installCmd.length > 0 &&
-  !fs.existsSync(path.resolve(rootDir, '../../turbo.json'))
-) {
-  spawn.sync('yarn', ['add', ...installCmd, '--ignore-scripts'], {
-    stdio: 'inherit'
+availablePlugins.forEach((plugin) => {
+  spawn.sync('yarn', ['remove', `@akinon/${plugin}`], {
+    stdio: 'inherit',
+    cwd: BASE_DIR
   });
+});
+
+if (installCmd.length > 0) {
+  const yarnArgs = ['add', ...installCmd, '--ignore-scripts'];
+
+  spawn.sync('yarn', yarnArgs, { stdio: 'inherit', cwd: BASE_DIR });
 }

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/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

@@ -2,6 +2,7 @@ import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
 import Settings from 'settings';
 import {
   PzNextRequest,
+  withCheckoutProvider,
   withCompleteGpay,
   withCompleteMasterpass,
   withOauthLogin,
@@ -16,6 +17,7 @@ import withLocale from './locale';
 import logger from '../utils/log';
 import { user } from '../data/urls';
 import { getUrlPathWithLocale } from '../utils/localization';
+import { ROUTES } from 'projectzeronext/src/routes';
 
 const withPzDefault =
   (middleware: NextMiddleware) =>
@@ -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.3",
   "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.3",
     "eslint-config-prettier": "8.5.0"
   }
 }

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;
   }
 }
 
@@ -198,7 +201,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/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;