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

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

@@ -1,15 +1,16 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { CheckoutResult } from '../../../types';
+import { CheckoutResult, MiddlewareAction } from '../../../types';
 
 export const preOrderValidationMiddleware: Middleware = () => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
+    const act = action as MiddlewareAction;
 
     if (
       !preOrder ||
       ['guestLogin', 'getCheckoutLoyaltyBalance'].includes(
-        action?.meta?.arg?.endpointName
+        act?.meta?.arg?.endpointName
       )
     ) {
       return result;
@@ -18,3 +19,7 @@ export const preOrderValidationMiddleware: Middleware = () => {
     return result;
   };
 };
+
+Object.defineProperty(preOrderValidationMiddleware, 'name', {
+  value: 'preOrderValidationMiddleware'
+});

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

@@ -1,12 +1,12 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { MiddlewareParams } from '../../../types';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
 import { checkoutApi } from '../../../data/client/checkout';
 
 export const redirectionMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {
@@ -26,9 +26,15 @@ export const redirectionMiddleware: Middleware = ({
             preOrder.payment_option?.pk
           )
         );
+
+        return null;
       }
     }
 
     return result;
   };
 };
+
+Object.defineProperty(redirectionMiddleware, 'name', {
+  value: 'redirectionMiddleware'
+});

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

@@ -1,12 +1,12 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { MiddlewareParams } from '../../../types';
+import { CheckoutResult, MiddlewareParams } from '../../../types';
 import { setPreOrder } from '../../../redux/reducers/checkout';
 
 export const setPreOrderMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (preOrder) {
@@ -16,3 +16,7 @@ export const setPreOrderMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(setPreOrderMiddleware, 'name', {
+  value: 'setPreOrderMiddleware'
+});

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

@@ -7,7 +7,7 @@ export const shippingOptionMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {
@@ -30,9 +30,15 @@ export const shippingOptionMiddleware: Middleware = ({
         dispatch(
           apiEndpoints.setShippingOption.initiate(defaultShippingOption)
         );
+
+        return null;
       }
     }
 
     return result;
   };
 };
+
+Object.defineProperty(shippingOptionMiddleware, 'name', {
+  value: 'shippingOptionMiddleware'
+});

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

@@ -7,7 +7,7 @@ export const shippingStepMiddleware: Middleware = ({
   dispatch
 }: MiddlewareParams) => {
   return (next) => (action) => {
-    const result: CheckoutResult = next(action);
+    const result = next(action) as CheckoutResult;
     const preOrder = result?.payload?.pre_order;
 
     if (!preOrder) {
@@ -32,3 +32,7 @@ export const shippingStepMiddleware: Middleware = ({
     return result;
   };
 };
+
+Object.defineProperty(shippingStepMiddleware, 'name', {
+  value: 'shippingStepMiddleware'
+});

package/redux/reducers/checkout.ts

@@ -9,6 +9,7 @@ import {
   CreditCardType,
   DeliveryOption,
   InstallmentOption,
+  LoyaltyBalanceItem,
   PaymentChoice,
   PaymentOption,
   CheckoutCreditPaymentOption,
@@ -40,6 +41,7 @@ export interface CheckoutState {
   shippingOptions: ShippingOption[];
   dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
+  unavailablePaymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
   paymentChoices: PaymentChoice[];
@@ -48,6 +50,7 @@ export interface CheckoutState {
   bankAccounts: BankAccount[];
   selectedBankAccountPk: number;
   loyaltyBalance?: string;
+  loyaltyBalances?: LoyaltyBalanceItem[];
   retailStores: RetailStore[];
   attributeBasedShippingOptions: AttributeBasedShippingOption[];
   selectedShippingOptions: Record<string, number>;
@@ -60,6 +63,8 @@ export interface CheckoutState {
       countryCode: string;
       currencyCode: string;
       version: string;
+      public_key: string;
+      [key: string]: any;
     };
     detail: {
       label: string;
@@ -70,6 +75,7 @@ export interface CheckoutState {
     };
     supportedMethods: string;
   };
+  payOnDeliveryOtpModalActive: boolean;
 }
 
 const initialState: CheckoutState = {
@@ -93,6 +99,7 @@ const initialState: CheckoutState = {
   shippingOptions: [],
   dataSourceShippingOptions: [],
   paymentOptions: [],
+  unavailablePaymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
   paymentChoices: [],
@@ -103,7 +110,8 @@ const initialState: CheckoutState = {
   retailStores: [],
   attributeBasedShippingOptions: [],
   selectedShippingOptions: {},
-  hepsipayAvailability: false
+  hepsipayAvailability: false,
+  payOnDeliveryOtpModalActive: false
 };
 
 const checkoutSlice = createSlice({
@@ -155,6 +163,9 @@ const checkoutSlice = createSlice({
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
+    setUnavailablePaymentOptions(state, { payload }) {
+      state.unavailablePaymentOptions = payload;
+    },
     setPaymentChoices(state, { payload }) {
       state.paymentChoices = payload;
     },
@@ -179,6 +190,9 @@ const checkoutSlice = createSlice({
     setLoyaltyBalance(state, { payload }) {
       state.loyaltyBalance = payload;
     },
+    setLoyaltyBalances(state, { payload }) {
+      state.loyaltyBalances = payload;
+    },
     setRetailStores(state, { payload }) {
       state.retailStores = payload;
     },
@@ -193,6 +207,9 @@ const checkoutSlice = createSlice({
     },
     setWalletPaymentData(state, { payload }) {
       state.walletPaymentData = payload;
+    },
+    setPayOnDeliveryOtpModalActive(state, { payload }) {
+      state.payOnDeliveryOtpModalActive = payload;
     }
   }
 });
@@ -213,19 +230,22 @@ export const {
   setShippingOptions,
   setDataSourceShippingOptions,
   setPaymentOptions,
+  setUnavailablePaymentOptions,
+  setPaymentChoices,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,
-  setPaymentChoices,
   setCardType,
   setInstallmentOptions,
   setBankAccounts,
   setSelectedBankAccountPk,
   setLoyaltyBalance,
+  setLoyaltyBalances,
   setRetailStores,
   setAttributeBasedShippingOptions,
   setSelectedShippingOptions,
   setHepsipayAvailability,
-  setWalletPaymentData
+  setWalletPaymentData,
+  setPayOnDeliveryOtpModalActive
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/redux/reducers/index.ts

@@ -2,12 +2,17 @@ import rootReducer from './root';
 import checkoutReducer from './checkout';
 import configReducer from './config';
 import headerReducer from './header';
+import widgetReducer from './widget';
 import { api } from '../../data/client/api';
 
 // Plugin reducers
 import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
 import { savedCardReducer } from '@akinon/pz-saved-card';
+import cyberSourceUcReducer from '@akinon/pz-cybersource-uc/src/redux/reducer';
+import { masterpassRestReducer } from '@akinon/pz-masterpass-rest';
+
+const fallbackReducer = (state = {}) => state;
 
 const reducers = {
   [api.reducerPath]: api.reducer,
@@ -15,9 +20,12 @@ const reducers = {
   checkout: checkoutReducer,
   config: configReducer,
   header: headerReducer,
-  masterpass: masterpassReducer,
-  otp: otpReducer,
-  savedCard: savedCardReducer
+  widget: widgetReducer,
+  masterpass: masterpassReducer || fallbackReducer,
+  otp: otpReducer || fallbackReducer,
+  savedCard: savedCardReducer || fallbackReducer,
+  cybersource_uc: cyberSourceUcReducer || fallbackReducer,
+  masterpassRest: masterpassRestReducer || 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/redux/reducers/widget.ts

@@ -0,0 +1,80 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { WidgetComponentData, WidgetDataSource } from '../../types/widget';
+
+export interface WidgetState {
+  designMode: boolean;
+  responsive: string;
+  components: WidgetComponentData[];
+  placeholders: {
+    slug: string;
+    widgetSlugs: string[];
+  }[];
+  selectedPlaceholder?: string;
+  selectedWidget?: string;
+  selectedComponentId?: string;
+  draggingActive?: boolean;
+  dataSources: WidgetDataSource[];
+}
+
+const initialState: WidgetState = {
+  designMode: true,
+  responsive: 'mobile',
+  components: [],
+  placeholders: [],
+  selectedPlaceholder: undefined,
+  selectedWidget: undefined,
+  selectedComponentId: undefined,
+  draggingActive: false,
+  dataSources: []
+};
+
+const widgetSlice = createSlice({
+  name: 'widget',
+  initialState,
+  reducers: {
+    setDesignMode(state, { payload }: PayloadAction<boolean>) {
+      state.designMode = payload;
+    },
+    setResponsive(state, { payload }: PayloadAction<string>) {
+      state.responsive = payload;
+    },
+    setComponents(state, { payload }: PayloadAction<WidgetComponentData[]>) {
+      state.components = payload;
+    },
+    setPlaceholders(
+      state,
+      { payload }: PayloadAction<WidgetState['placeholders']>
+    ) {
+      state.placeholders = payload;
+    },
+    setSelectedPlaceholder(state, { payload }: PayloadAction<string>) {
+      state.selectedPlaceholder = payload;
+    },
+    setSelectedWidget(state, { payload }: PayloadAction<string>) {
+      state.selectedWidget = payload;
+    },
+    setSelectedComponentId(state, { payload }: PayloadAction<string>) {
+      state.selectedComponentId = payload;
+    },
+    setDraggingActive(state, { payload }: PayloadAction<boolean>) {
+      state.draggingActive = payload;
+    },
+    setDataSources(state, { payload }: PayloadAction<WidgetDataSource[]>) {
+      state.dataSources = payload;
+    }
+  }
+});
+
+export const {
+  setDesignMode,
+  setResponsive,
+  setComponents,
+  setPlaceholders,
+  setSelectedPlaceholder,
+  setSelectedWidget,
+  setSelectedComponentId,
+  setDraggingActive,
+  setDataSources
+} = widgetSlice.actions;
+
+export default widgetSlice.reducer;

package/sentry/index.ts

@@ -1,29 +1,85 @@
 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
+];
+
+const isNetworkError = (exception: unknown): boolean => {
+  if (!(exception instanceof Error)) return false;
+
+  const networkErrorPatterns = [
+    'networkerror',
+    'failed to fetch',
+    'network request failed',
+    'network error',
+    'loading chunk',
+    'chunk load failed'
+  ];
+
+  if (exception.name === 'NetworkError') return true;
+
+  if (exception.name === 'TypeError') {
+    return networkErrorPatterns.some((pattern) =>
+      exception.message.toLowerCase().includes(pattern)
+    );
+  }
+
+  return networkErrorPatterns.some((pattern) =>
+    exception.message.toLowerCase().includes(pattern)
+  );
+};
+
 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
 
+  const baseConfig = {
+    dsn:
+      SENTRY_DSN ||
+      options.dsn ||
+      'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
+    initialScope: {
+      tags: {
+        APP_TYPE: 'ProjectZeroNext',
+        TYPE: type,
+        ...((options.initialScope as any)?.tags || {})
+      }
+    },
+    tracesSampleRate: 0,
+    integrations: []
+  };
+
   if (type === 'Server' || type === 'Edge') {
+    Sentry.init(baseConfig);
+  } else if (type === 'Client') {
     Sentry.init({
-      dsn:
-        SENTRY_DSN ||
-        'https://d8558ef8997543deacf376c7d8d7cf4b@o64293.ingest.sentry.io/4504338423742464',
-      initialScope: {
-        tags: {
-          APP_TYPE: 'ProjectZeroNext',
-          TYPE: type
+      ...baseConfig,
+      beforeSend: (event, hint) => {
+        if (
+          !ALLOWED_CLIENT_LOG_TYPES.includes(
+            event.tags?.LOG_TYPE as ClientLogType
+          )
+        ) {
+          return null;
         }
-      },
-      tracesSampleRate: 1.0,
-      integrations: []
+
+        if (isNetworkError(hint?.originalException)) {
+          return null;
+        }
+
+        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;
 };

package/types/commerce/checkout.ts

@@ -1,9 +1,9 @@
+import type { JSX } from 'react';
 import { Address } from './address';
 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 {
@@ -68,6 +68,18 @@ export interface CheckoutPaymentOption {
   viewProps?: any;
 }
 
+export interface LoyaltyBalanceItem {
+  label_id: number | null;
+  label: string | null;
+  balance: string;
+  currency?: string;
+}
+
+export interface AccountUsage {
+  label_id: number | null;
+  amount: number;
+}
+
 export interface GiftBox {
   note: string;
   gift_video: boolean;
@@ -91,6 +103,7 @@ export interface PreOrder {
   notes?: string;
   user_phone_number?: string;
   loyalty_money?: string;
+  loyalty_account_usages?: AccountUsage[];
   currency_type_label?: string;
   is_guest?: boolean;
   is_post_order?: boolean;
@@ -108,6 +121,8 @@ export interface PreOrder {
   context_extras?: ExtraField;
   token?: string;
   agreement_confirmed?: boolean;
+  phone_number?: string;
+  number?: string;
 }
 
 export type ExtraField = Record<string, any>;
@@ -149,6 +164,8 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    balances?: LoyaltyBalanceItem[];
+    accounts?: LoyaltyBalanceItem[];
     attribute_based_shipping_options?: AttributeBasedShippingOption[];
     paymentData?: any;
     paymentMethod?: string;
@@ -200,3 +217,20 @@ export interface MiddlewareParams {
   getState: () => RootState;
   dispatch: TypedDispatch;
 }
+
+export interface MiddlewareAction {
+  type: string;
+  payload?: { status?: number; [key: string]: unknown };
+  meta?: {
+    arg?: { endpointName?: string };
+    baseQueryMeta?: { request?: { url?: string } };
+  };
+}
+
+export type SendSmsType = {
+  phone_number: string;
+};
+
+export type VerifySmsType = {
+  verify_code: string;
+};

package/types/commerce/widget.ts

@@ -26,3 +26,36 @@ export type WidgetResultType<T> = {
   slug?: string;
   template?: string;
 };
+
+export type WidgetSchemaType<T> = {
+  pk?: number;
+  name?: string;
+  schema?: T;
+};
+
+export type DynamicWidgetResultType = WidgetResultType<{
+  [key: string]: {
+    value: string;
+    kwargs: {
+      data_type: string;
+      value?: string;
+      url?: string;
+    };
+  };
+}>;
+
+export type DynamicWidgetSchemaType = WidgetSchemaType<{
+  [key: string]: {
+    key: string;
+    data_type: string;
+    label: string;
+    properties: {
+      parent_id?: string;
+      style?: {
+        [key: string]: any;
+      };
+      tag?: string;
+      type?: string;
+    };
+  };
+}>;