@akinon/next 2.0.0-beta.1 → 2.0.0-beta.11

package/redux/middlewares/index.ts

@@ -5,11 +5,14 @@ import { ROUTES } from 'routes';
 import type { Middleware } from '@reduxjs/toolkit';
 import {
   errorMiddleware,
+  redirectUrlMiddleware,
   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 +51,8 @@ const middlewares = [
   rtkQueryResponseHandler,
   rtkQueryErrorHandler,
   errorMiddleware,
-  preOrderMiddleware,
+  redirectUrlMiddleware,
+  ...preOrderMiddlewares,
   contextListMiddleware,
   hepsiPayMiddleware,
   walletPaymentMiddleware,

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

@@ -0,0 +1,50 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
+import { checkoutApi } from '../../../data/client/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 null;
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(setAddressMiddleware, 'name', {
+  value: 'setAddressMiddleware'
+});

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

@@ -0,0 +1,46 @@
+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 null;
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(attributeBasedShippingOptionMiddleware, 'name', {
+  value: 'attributeBasedShippingOptionMiddleware'
+});

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

@@ -0,0 +1,43 @@
+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 null;
+      }
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(dataSourceShippingOptionMiddleware, 'name', {
+  value: 'dataSourceShippingOptionMiddleware'
+});

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

@@ -0,0 +1,40 @@
+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 null;
+      }
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(deliveryOptionMiddleware, 'name', {
+  value: 'deliveryOptionMiddleware'
+});

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

@@ -0,0 +1,29 @@
+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';
+
+// ⚠️ WARNING: Redux Toolkit applies middlewares in reverse order (from last to first).
+// This list is written **in reverse execution order** to ensure they run in the correct sequence.  
+// If you add a new middleware, make sure to insert it **in reverse order** based on execution priority.
+
+export const preOrderMiddlewares = [
+  shippingStepMiddleware,
+  installmentOptionMiddleware,
+  paymentOptionMiddleware,
+  attributeBasedShippingOptionMiddleware,
+  dataSourceShippingOptionMiddleware,
+  shippingOptionMiddleware,
+  setAddressMiddleware,
+  deliveryOptionMiddleware,
+  setPreOrderMiddleware,
+  redirectionMiddleware,
+  preOrderValidationMiddleware
+];

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

@@ -0,0 +1,42 @@
+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 null;
+      }
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(installmentOptionMiddleware, 'name', {
+  value: 'installmentOptionMiddleware'
+});

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

@@ -0,0 +1,34 @@
+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 null;
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(paymentOptionMiddleware, 'name', {
+  value: 'paymentOptionMiddleware'
+});

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

@@ -0,0 +1,24 @@
+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;
+  };
+};
+
+Object.defineProperty(preOrderValidationMiddleware, 'name', {
+  value: 'preOrderValidationMiddleware'
+});

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

@@ -0,0 +1,40 @@
+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 null;
+      }
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(redirectionMiddleware, 'name', {
+  value: 'redirectionMiddleware'
+});

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

@@ -0,0 +1,22 @@
+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;
+  };
+};
+
+Object.defineProperty(setPreOrderMiddleware, 'name', {
+  value: 'setPreOrderMiddleware'
+});

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

@@ -0,0 +1,44 @@
+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 null;
+      }
+    }
+
+    return result;
+  };
+};
+
+Object.defineProperty(shippingOptionMiddleware, 'name', {
+  value: 'shippingOptionMiddleware'
+});

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

@@ -0,0 +1,38 @@
+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;
+  };
+};
+
+Object.defineProperty(shippingStepMiddleware, 'name', {
+  value: 'shippingStepMiddleware'
+});

package/redux/reducers/checkout.ts

@@ -70,6 +70,7 @@ export interface CheckoutState {
     };
     supportedMethods: string;
   };
+  payOnDeliveryOtpModalActive: boolean;
 }
 
 const initialState: CheckoutState = {
@@ -103,7 +104,8 @@ const initialState: CheckoutState = {
   retailStores: [],
   attributeBasedShippingOptions: [],
   selectedShippingOptions: {},
-  hepsipayAvailability: false
+  hepsipayAvailability: false,
+  payOnDeliveryOtpModalActive: false
 };
 
 const checkoutSlice = createSlice({
@@ -193,6 +195,9 @@ const checkoutSlice = createSlice({
     },
     setWalletPaymentData(state, { payload }) {
       state.walletPaymentData = payload;
+    },
+    setPayOnDeliveryOtpModalActive(state, { payload }) {
+      state.payOnDeliveryOtpModalActive = payload;
     }
   }
 });
@@ -225,7 +230,8 @@ export const {
   setAttributeBasedShippingOptions,
   setSelectedShippingOptions,
   setHepsipayAvailability,
-  setWalletPaymentData
+  setWalletPaymentData,
+  setPayOnDeliveryOtpModalActive
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/redux/reducers/index.ts

@@ -9,15 +9,17 @@ import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
 import { savedCardReducer } from '@akinon/pz-saved-card';
 
+const fallbackReducer = (state = {}) => state;
+
 const reducers = {
   [api.reducerPath]: api.reducer,
   root: rootReducer,
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
-  masterpass: masterpassReducer,
-  otp: otpReducer,
-  savedCard: savedCardReducer
+  masterpass: masterpassReducer || fallbackReducer,
+  otp: otpReducer || fallbackReducer,
+  savedCard: savedCardReducer || fallbackReducer
 };
 
 export default reducers;

package/redux/reducers/root.ts

@@ -14,7 +14,8 @@ const initialState = {
     open: false,
     title: null,
     content: null
-  }
+  },
+  userPhoneNumber: null
 };
 
 const rootSlice = createSlice({
@@ -45,6 +46,9 @@ const rootSlice = createSlice({
       state.rootModal.open = false;
       state.rootModal.title = null;
       state.rootModal.content = null;
+    },
+    setUserPhoneNumber(state, { payload }) {
+      state.userPhoneNumber = payload;
     }
   }
 });
@@ -55,7 +59,8 @@ export const {
   toggleMiniBasket,
   setHighlightedItem,
   openRootModal,
-  closeRootModal
+  closeRootModal,
+  setUserPhoneNumber
 } = rootSlice.actions;
 
 export default rootSlice.reducer;

package/sentry/index.ts

@@ -1,29 +1,48 @@
 import * as Sentry from '@sentry/nextjs';
 
-const SENTRY_DSN: string =
+const SENTRY_DSN: string | undefined =
   process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
 
+export enum ClientLogType {
+  UNCAUGHT_ERROR_PAGE = 'UNCAUGHT_ERROR_PAGE',
+  CHECKOUT = 'CHECKOUT'
+}
+
+const ALLOWED_CLIENT_LOG_TYPES: ClientLogType[] = [
+  ClientLogType.UNCAUGHT_ERROR_PAGE,
+  ClientLogType.CHECKOUT
+];
+
 export const initSentry = (
   type: 'Server' | 'Client' | 'Edge',
   options: Sentry.BrowserOptions | Sentry.NodeOptions | Sentry.EdgeOptions = {}
 ) => {
   // TODO: Handle options with ESLint rules
 
-  // TODO: Remove Zero Project DSN
+  Sentry.init({
+    dsn:
+      options.dsn ||
+      SENTRY_DSN ||
+      'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
+    initialScope: {
+      tags: {
+        APP_TYPE: 'ProjectZeroNext',
+        TYPE: type
+      }
+    },
+    tracesSampleRate: 0,
+    integrations: [],
+    beforeSend: (event, hint) => {
+      if (
+        type === 'Client' &&
+        !ALLOWED_CLIENT_LOG_TYPES.includes(
+          event.tags?.LOG_TYPE as ClientLogType
+        )
+      ) {
+        return null;
+      }
 
-  if (type === 'Server' || type === 'Edge') {
-    Sentry.init({
-      dsn:
-        SENTRY_DSN ||
-        'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
-      initialScope: {
-        tags: {
-          APP_TYPE: 'ProjectZeroNext',
-          TYPE: type
-        }
-      },
-      tracesSampleRate: 1.0,
-      integrations: []
-    });
-  }
+      return event;
+    }
+  });
 };

package/tailwind/content.js

@@ -0,0 +1,16 @@
+const defaultPlugins = require('../plugins');
+
+const getAkinonNextContent = (plugins = defaultPlugins) => {
+  return [
+    `./node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    `../../node_modules/@akinon/next/components/**/*.{js,ts,jsx,tsx}`,
+    ...plugins
+      .map((plugin) => [
+        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
+        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
+      ])
+      .flat()
+  ];
+};
+
+module.exports = getAkinonNextContent;

package/types/commerce/account.ts

@@ -19,6 +19,10 @@ export type AccountOrderCancellation = {
     description: string;
     order_item: string;
     reason: string;
+    cancellation_request_image_set?: Array<{
+      image: string;
+      description: string;
+    }>;
   }>;
 };
 
@@ -61,5 +65,5 @@ export type ContactFormType = {
   order?: string;
   country_code?: string;
   order_needed?: boolean;
-  file?: FileList
+  file?: FileList;
 };