@akinon/next 2.0.0-beta.0 → 2.0.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @akinon/next
 
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- dd69cc6: ZERO-3079: Modularize pre-order middleware
+
+## 2.0.0-beta.1
+
+### Minor Changes
+
+- ZERO-3091: Upgrade Next.js to v15 and React to v19
+
 ## 2.0.0-beta.0
 
 ### Major Changes

package/api/client.ts

@@ -14,6 +14,7 @@ interface RouteParams {
 
 async function proxyRequest(...args) {
   const [req, { params }] = args as [req: Request, params: RouteParams];
+  const resolvedParams = await params;
   const { searchParams } = new URL(req.url);
   const commerceUrl = settings.commerceUrl;
 
@@ -32,7 +33,7 @@ async function proxyRequest(...args) {
     responseType: 'json'
   };
 
-  const slug = `${params.slug.join('/')}/`;
+  const slug = `${resolvedParams.slug.join('/')}/`;
   const options_ = JSON.parse(
     decodeURIComponent((searchParams.get('options') as string) ?? '{}')
   );
@@ -85,7 +86,7 @@ async function proxyRequest(...args) {
     }
   } as RequestInit;
 
-  const nextCookies = cookies();
+  const nextCookies = await cookies();
   const segment = nextCookies.get('pz-segment')?.value;
   const currency = nextCookies.get('pz-external-currency')?.value;
 

package/components/pz-root.tsx

@@ -14,7 +14,7 @@ export default async function PzRoot({
   children: React.ReactNode;
   locale?: string;
 }) {
-  const nextCookies = cookies();
+  const nextCookies = await cookies();
   const sessionid = nextCookies.get('osessionid')?.value;
 
   if (!translations) {

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

@@ -4,7 +4,7 @@ import { RootState } from 'redux/store';
 import { useAppSelector } from '../redux/hooks';
 import dynamic, { DynamicOptionsLoadingProps } from 'next/dynamic';
 import { PaymentOptionViews } from 'views/checkout/steps/payment';
-import { useMemo } from 'react';
+import { JSX, useMemo } from 'react';
 
 const fallbackView = () => <></>;
 

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

@@ -1,5 +1,5 @@
 import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
-import React from 'react';
+import React, { JSX } from 'react';
 
 type SegmentType = 'client-root' | 'layout' | 'page';
 

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

@@ -1,4 +1,5 @@
 import settings from 'settings';
+import { JSX } from 'react';
 import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
 import { redirect } from 'next/navigation';
 import { ServerVariables } from '../../utils/server-variables';
@@ -21,6 +22,8 @@ export const withSegmentDefaults =
   async (props: T) => {
     let componentProps = { ...props };
 
+    const { locale, currency } = await props.params;
+
     if (options.segmentType === 'root-layout') {
       componentProps = (await addRootLayoutProps(
         componentProps as RootLayoutProps
@@ -29,8 +32,8 @@ export const withSegmentDefaults =
       checkRedisVariables();
     }
 
-    ServerVariables.locale = props.params.locale;
-    ServerVariables.currency = props.params.currency;
+    ServerVariables.locale = await locale;
+    ServerVariables.currency = await currency;
 
     return await (
       <>
@@ -40,7 +43,7 @@ export const withSegmentDefaults =
   };
 
 const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
-  const params = componentProps.params;
+  const params = await componentProps.params;
 
   if (
     params.commerce !== encodeURIComponent(decodeURI(settings.commerceUrl)) ||

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,13 +30,13 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.2",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.2.3",
-    "eslint-config-prettier": "8.5.0"
+    "@typescript-eslint/eslint-plugin": "8.18.2",
+    "@typescript-eslint/parser": "8.18.2",
+    "eslint": "9.17.0",
+    "eslint-config-next": "15.1.2",
+    "eslint-config-prettier": "9.1.0"
   }
 }

package/redux/middlewares/index.ts

@@ -6,10 +6,12 @@ import type { Middleware } from '@reduxjs/toolkit';
 import {
   errorMiddleware,
   contextListMiddleware,
-  preOrderMiddleware,
   hepsiPayMiddleware,
   walletPaymentMiddleware
 } from './checkout';
+
+import { preOrderMiddlewares } from './pre-order';
+
 import { api } from '../../data/client/api';
 import logger from '@akinon/next/utils/log';
 
@@ -48,7 +50,7 @@ const middlewares = [
   rtkQueryResponseHandler,
   rtkQueryErrorHandler,
   errorMiddleware,
-  preOrderMiddleware,
+  ...preOrderMiddlewares,
   contextListMiddleware,
   hepsiPayMiddleware,
   walletPaymentMiddleware,

package/redux/middlewares/pre-order/address.ts

@@ -0,0 +1,45 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+import { setPreOrder } from '../../../redux/reducers/checkout';
+
+export const setAddressMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { addressList: addresses } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    const hasNoAddresses =
+      !preOrder?.shipping_address || !preOrder?.billing_address;
+    const isCustomerDelivery =
+      !preOrder?.delivery_option ||
+      preOrder.delivery_option.delivery_option_type === 'customer';
+
+    const firstAddressPk = addresses?.[0]?.pk;
+
+    if (
+      hasNoAddresses &&
+      addresses?.length > 0 &&
+      isCustomerDelivery &&
+      firstAddressPk
+    ) {
+      dispatch(
+        apiEndpoints.setAddresses.initiate({
+          shippingAddressPk: firstAddressPk,
+          billingAddressPk: firstAddressPk
+        })
+      );
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/attribute-based-shipping-option.ts

@@ -0,0 +1,40 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const attributeBasedShippingOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { attributeBasedShippingOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (
+      Object.keys(attributeBasedShippingOptions).length > 0 &&
+      !preOrder.attribute_based_shipping_options
+    ) {
+      const initialSelectedOptions: Record<string, number> = Object.fromEntries(
+        Object.entries(attributeBasedShippingOptions).map(([key, options]) => [
+          key,
+          options.attribute_based_shipping_options[0].pk
+        ])
+      );
+
+      dispatch(
+        apiEndpoints.setAttributeBasedShippingOptions.initiate(
+          initialSelectedOptions
+        )
+      );
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/data-source-shipping-option.ts

@@ -0,0 +1,37 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const dataSourceShippingOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { dataSourceShippingOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (
+      dataSourceShippingOptions?.length > 0 &&
+      !preOrder?.data_source_shipping_options
+    ) {
+      const selectedPks = dataSourceShippingOptions
+        .map((opt) => opt.data_source_shipping_options?.[0]?.pk)
+        .filter((pk) => pk);
+
+      if (selectedPks.length > 0) {
+        dispatch(
+          apiEndpoints.setDataSourceShippingOptions.initiate(selectedPks)
+        );
+      }
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/delivery-option.ts

@@ -0,0 +1,34 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const deliveryOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { deliveryOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (!preOrder?.delivery_option && deliveryOptions?.length > 0) {
+      const customerDeliveryOption = deliveryOptions.find(
+        (opt) => opt.delivery_option_type === 'customer'
+      )?.pk;
+
+      if (customerDeliveryOption) {
+        dispatch(
+          apiEndpoints.setDeliveryOption.initiate(customerDeliveryOption)
+        );
+      }
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/index.ts

@@ -0,0 +1,25 @@
+import { preOrderValidationMiddleware } from './pre-order-validation';
+import { redirectionMiddleware } from './redirection';
+import { setPreOrderMiddleware } from './set-pre-order';
+import { deliveryOptionMiddleware } from './delivery-option';
+import { setAddressMiddleware } from './address';
+import { shippingOptionMiddleware } from './shipping-option';
+import { dataSourceShippingOptionMiddleware } from './data-source-shipping-option';
+import { attributeBasedShippingOptionMiddleware } from './attribute-based-shipping-option';
+import { paymentOptionMiddleware } from './payment-option';
+import { installmentOptionMiddleware } from './installment-option';
+import { shippingStepMiddleware } from './shipping-step';
+
+export const preOrderMiddlewares = [
+  preOrderValidationMiddleware,
+  redirectionMiddleware,
+  setPreOrderMiddleware,
+  deliveryOptionMiddleware,
+  setAddressMiddleware,
+  shippingOptionMiddleware,
+  dataSourceShippingOptionMiddleware,
+  attributeBasedShippingOptionMiddleware,
+  paymentOptionMiddleware,
+  installmentOptionMiddleware,
+  shippingStepMiddleware
+];

package/redux/middlewares/pre-order/installment-option.ts

@@ -0,0 +1,36 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const installmentOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { installmentOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (
+      !preOrder?.installment &&
+      preOrder?.payment_option?.payment_type !== 'saved_card' &&
+      installmentOptions.length > 0
+    ) {
+      const firstInstallmentOptionPk = installmentOptions[0]?.pk;
+
+      if (firstInstallmentOptionPk) {
+        dispatch(
+          apiEndpoints.setInstallmentOption.initiate(firstInstallmentOptionPk)
+        );
+      }
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/payment-option.ts

@@ -0,0 +1,28 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const paymentOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { paymentOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (!preOrder?.payment_option && paymentOptions.length > 0) {
+      const firstPaymentOptionPk = paymentOptions[0]?.pk;
+
+      dispatch(apiEndpoints.setPaymentOption.initiate(firstPaymentOptionPk));
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/pre-order-validation.ts

@@ -0,0 +1,20 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult } from '../../../types';
+
+export const preOrderValidationMiddleware: Middleware = () => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (
+      !preOrder ||
+      ['guestLogin', 'getCheckoutLoyaltyBalance'].includes(
+        action?.meta?.arg?.endpointName
+      )
+    ) {
+      return result;
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/redirection.ts

@@ -0,0 +1,34 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const redirectionMiddleware: Middleware = ({
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    if (preOrder?.is_redirected) {
+      const contextList = result?.payload?.context_list;
+
+      if (
+        contextList?.find(
+          (ctx) => ctx.page_name === 'RedirectionPaymentSelectedPage'
+        )
+      ) {
+        dispatch(
+          checkoutApi.endpoints.setPaymentOption.initiate(
+            preOrder.payment_option?.pk
+          )
+        );
+      }
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/set-pre-order.ts

@@ -0,0 +1,18 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { MiddlewareParams } from '../../../types';
+import { setPreOrder } from '../../../redux/reducers/checkout';
+
+export const setPreOrderMiddleware: Middleware = ({
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (preOrder) {
+      dispatch(setPreOrder(preOrder));
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/shipping-option.ts

@@ -0,0 +1,38 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/checkout';
+
+export const shippingOptionMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { shippingOptions } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    const hasShippingOptions = shippingOptions?.length > 0;
+
+    const isShippingOptionValid = preOrder?.shipping_option
+      ? shippingOptions.some((opt) => opt.pk === preOrder.shipping_option.pk)
+      : false;
+
+    if (hasShippingOptions && !isShippingOptionValid) {
+      const defaultShippingOption = shippingOptions[0]?.pk;
+
+      if (defaultShippingOption) {
+        dispatch(
+          apiEndpoints.setShippingOption.initiate(defaultShippingOption)
+        );
+      }
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/pre-order/shipping-step.ts

@@ -0,0 +1,34 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { setShippingStepCompleted } from '../../reducers/checkout';
+
+export const shippingStepMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (!preOrder) {
+      return result;
+    }
+
+    const { addressList: addresses } = getState().checkout;
+
+    if (preOrder) {
+      const stepCompleted = [
+        preOrder.delivery_option?.delivery_option_type === 'retail_store'
+          ? true
+          : preOrder.shipping_address?.pk,
+        preOrder.billing_address?.pk,
+        preOrder.shipping_option?.pk,
+        addresses.length > 0
+      ].every(Boolean);
+
+      dispatch(setShippingStepCompleted(stepCompleted));
+    }
+
+    return result;
+  };
+};

package/types/commerce/checkout.ts

@@ -3,6 +3,8 @@ import { Basket } from './basket';
 import { RetailStore } from './misc';
 import { PaymentOption } from './order';
 import { Product } from './product';
+import { JSX } from 'react';
+import { RootState, TypedDispatch } from 'redux/store';
 
 export enum CheckoutStep {
   Shipping = 'shipping',
@@ -185,3 +187,16 @@ export interface AttributeBasedShippingOption {
   attribute_key: string;
   [key: string]: any;
 }
+
+export interface CheckoutResult {
+  payload: {
+    errors?: Record<string, string[]>;
+    pre_order?: PreOrder;
+    context_list?: CheckoutContext[];
+  };
+}
+
+export interface MiddlewareParams {
+  getState: () => RootState;
+  dispatch: TypedDispatch;
+}

package/types/index.ts

@@ -239,8 +239,8 @@ export type ImageOptions = CDNOptions & {
 export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
-  params: T & { locale: string; currency: string };
-  searchParams: URLSearchParams;
+  params: Promise<T & { locale: string; currency: string }>;
+  searchParams: Promise<URLSearchParams>;
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {

package/utils/app-fetch.ts

@@ -26,8 +26,8 @@ const appFetch = async <T>({
   let ip = '';
 
   try {
-    const nextHeaders = headers();
-    const nextCookies = cookies();
+    const nextHeaders = await headers();
+    const nextCookies = await cookies();
     ip = nextHeaders.get('x-forwarded-for') ?? '';
 
     const commerceUrl = Settings.commerceUrl;

package/utils/override-middleware.ts

@@ -0,0 +1,31 @@
+import { Middleware } from '@reduxjs/toolkit';
+
+export enum MiddlewareNames {
+  PreOrderValidationMiddleware = 'preOrderValidationMiddleware',
+  RedirectionMiddleware = 'redirectionMiddleware',
+  SetPreOrderMiddleware = 'setPreOrderMiddleware',
+  DeliveryOptionMiddleware = 'deliveryOptionMiddleware',
+  SetAddressMiddleware = 'setAddressMiddleware',
+  ShippingOptionMiddleware = 'shippingOptionMiddleware',
+  DataSourceShippingOptionMiddleware = 'dataSourceShippingOptionMiddleware',
+  AttributeBasedShippingOptionMiddleware = 'attributeBasedShippingOptionMiddleware',
+  PaymentOptionMiddleware = 'paymentOptionMiddleware',
+  InstallmentOptionMiddleware = 'installmentOptionMiddleware',
+  ShippingStepMiddleware = 'shippingStepMiddleware'
+}
+
+export const overrideMiddleware = (
+  middlewares: Middleware[],
+  updates: { name: MiddlewareNames; middleware: Middleware }[]
+): void => {
+  const updatesMap = new Map(
+    updates.map(({ name, middleware }) => [name, middleware])
+  );
+
+  middlewares.forEach((mw, index) => {
+    const updatedMiddleware = updatesMap.get(mw.name as MiddlewareNames);
+    if (updatedMiddleware) {
+      middlewares[index] = updatedMiddleware;
+    }
+  });
+};

package/utils/redirect.ts

@@ -4,8 +4,8 @@ import { headers } from 'next/headers';
 import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
 
-export const redirect = (path: string, type?: RedirectType) => {
-  const nextHeaders = headers();
+export const redirect = async (path: string, type?: RedirectType) => {
+  const nextHeaders = await headers();
   const pageUrl = new URL(
     nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
   );