@akinon/next 2.0.0-beta.16 → 2.0.0-beta.18

package/data/client/checkout.ts

@@ -10,6 +10,7 @@ import {
 } from '../../redux/reducers/checkout';
 import {
   CheckoutContext,
+  AccountUsage,
   ExtraField,
   GuestLoginFormParams,
   Order,
@@ -32,6 +33,16 @@ import {
   buildDirectPurchaseForm,
   buildPurchaseForm
 } from '@akinon/pz-masterpass/src/utils';
+import { devLogger } from '@akinon/next/hooks/use-logger-context';
+import { LogLevel } from '@akinon/next/hooks/use-logger';
+
+const getLatestState = async (getState: () => any): Promise<any> => {
+  await new Promise((resolve) => setTimeout(resolve, 250));
+
+  return getState();
+};
+
+const recentLogMessages = new Map<string, number>();
 
 const getStore = async (): Promise<AppStore> => {
   const { store } = await import('redux/store');
@@ -48,6 +59,53 @@ interface CheckoutResponse {
   redirect_url?: string;
 }
 
+const validateCheckoutState = (
+  state: any,
+  validations: Array<{
+    condition: (state: any) => boolean;
+    errorMessage: string;
+    severity?: LogLevel;
+    data?: any;
+    action?: () => void;
+  }>
+) => {
+  validations.forEach(
+    ({
+      condition,
+      errorMessage,
+      severity = 'error',
+      data: logData,
+      action
+    }) => {
+      if (condition(state)) {
+        const now = Date.now();
+        const lastLogged = recentLogMessages.get(errorMessage) || 0;
+
+        if (now - lastLogged > 2000) {
+          recentLogMessages.set(errorMessage, now);
+
+          switch (severity) {
+            case 'error':
+              devLogger.error(
+                errorMessage,
+                logData || state.checkout?.preOrder
+              );
+              action?.();
+              break;
+            case 'warn':
+              devLogger.warn(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+              break;
+            default:
+              devLogger.info(errorMessage, logData || state.checkout?.preOrder);
+              action?.();
+          }
+        }
+      }
+    }
+  );
+};
+
 interface SetAddressesParams {
   shippingAddressPk: number;
   billingAddressPk: number;
@@ -194,6 +252,20 @@ const completeMasterpassPayment = async (
   });
 };
 
+let checkoutAbortController = new AbortController();
+
+export const getCheckoutAbortSignal = () => {
+  if (checkoutAbortController.signal.aborted) {
+    checkoutAbortController = new AbortController();
+  }
+  return checkoutAbortController.signal;
+};
+
+const abortCheckout = () => {
+  checkoutAbortController.abort();
+  checkoutAbortController = new AbortController();
+};
+
 export const checkoutApi = api.injectEndpoints({
   endpoints: (build) => ({
     fetchCheckout: build.query<CheckoutResponse, void>({
@@ -380,12 +452,33 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           delivery_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return preOrder?.basket?.basketitem_set?.length === 0;
+            },
+            errorMessage:
+              'Your shopping basket is empty. Please add items to your basket before selecting a delivery option.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setAddresses: build.mutation<CheckoutResponse, SetAddressesParams>({
@@ -397,12 +490,36 @@ export const checkoutApi = api.injectEndpoints({
         body: {
           shipping_address: String(shippingAddressPk),
           billing_address: String(billingAddressPk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const deliveryOptions = state.checkout?.deliveryOptions;
+              const preOrder = state.checkout?.preOrder;
+
+              return deliveryOptions?.length > 0
+                ? preOrder && !preOrder.delivery_option?.pk
+                : false;
+            },
+            errorMessage:
+              'You need to select a delivery option before setting your addresses. Dispatch setAddresses action after delivery option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setShippingOption: build.mutation<CheckoutResponse, number>({
@@ -413,12 +530,43 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           shipping_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setShippingStepBusy(true));
-        await queryFulfilled;
-        dispatch(setShippingStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.billing_address;
+            },
+            errorMessage:
+              'You need to provide a billing address before selecting a shipping option. Dispatch setShippingOption action after billing address selection.',
+            action: () => abortCheckout()
+          },
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_address;
+            },
+            errorMessage:
+              'You need to provide a shipping address before selecting a shipping option. Dispatch setShippingOption action after shipping address selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setShippingStepBusy(false));
+        } catch (error) {
+          dispatch(setShippingStepBusy(false));
+        }
       }
     }),
     setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
@@ -466,16 +614,37 @@ export const checkoutApi = api.injectEndpoints({
         method: 'POST',
         body: {
           payment_option: String(pk)
-        }
+        },
+        signal: getCheckoutAbortSignal()
       }),
-      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled, getState }) {
         dispatch(setPaymentStepBusy(true));
         dispatch(setInstallmentOptions([]));
         dispatch(setBankAccounts([]));
         dispatch(setSelectedBankAccountPk(null));
         dispatch(setCardType(null));
-        await queryFulfilled;
-        dispatch(setPaymentStepBusy(false));
+
+        const state = await getLatestState(getState);
+
+        validateCheckoutState(state, [
+          {
+            condition: (state) => {
+              const preOrder = state.checkout?.preOrder;
+
+              return !preOrder?.shipping_option?.pk;
+            },
+            errorMessage:
+              'You need to select a shipping option before choosing a payment method. Dispatch setPaymentOption action after shipping option selection.',
+            action: () => abortCheckout()
+          }
+        ]);
+
+        try {
+          await queryFulfilled;
+          dispatch(setPaymentStepBusy(false));
+        } catch (error) {
+          dispatch(setPaymentStepBusy(false));
+        }
       }
     }),
     setWalletSelectionPage: build.mutation<
@@ -776,16 +945,28 @@ export const checkoutApi = api.injectEndpoints({
         url: buildCheckoutRequestUrl(checkout.loyaltyMoneyUsage)
       })
     }),
-    payWithLoyaltyBalance: build.mutation<any, string>({
-      query: (amount) => ({
-        url: buildCheckoutRequestUrl(checkout.loyaltyMoneyUsage, {
-          useFormData: true
-        }),
-        method: 'POST',
-        body: {
-          loyalty_amount_to_use: amount
-        }
-      }),
+    payWithLoyaltyBalance: build.mutation<
+      any,
+      string | { account_usages: AccountUsage[] }
+    >({
+      query: (params) => {
+        const isAccountUsages =
+          typeof params === 'object' && 'account_usages' in params;
+
+        return {
+          url: buildCheckoutRequestUrl(checkout.loyaltyMoneyUsage, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body: isAccountUsages
+            ? {
+                account_usages: JSON.stringify(params.account_usages)
+              }
+            : {
+                loyalty_amount_to_use: params
+              }
+        };
+      },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
         dispatch(setPaymentOptions([]));

package/hooks/index.ts

@@ -10,5 +10,7 @@ export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
 export * from './use-pagination';
 export * from './use-message-listener';
+export * from './use-logger';
+export * from './use-logger-context';
 export * from './use-sentry-uncaught-errors';
 export * from './use-pz-params';

package/hooks/use-logger-context.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useMemo,
+  useRef,
+  useEffect
+} from 'react';
+import { useLogger, LogEntry, LogLevel } from './use-logger';
+
+const LOG_LEVELS: LogLevel[] = ['info', 'warn', 'error'];
+
+interface LoggerContextType {
+  logs: LogEntry[];
+  isVisible: boolean;
+  toggleVisibility: () => void;
+  clearLogs: () => void;
+  info: (message: string, payload?: any) => string;
+  warn: (message: string, payload?: any) => string;
+  error: (message: string, payload?: any) => string;
+  isDevelopment: boolean;
+  hasError: boolean;
+  hasWarning: boolean;
+}
+
+const LoggerContext = createContext<LoggerContextType | undefined>(undefined);
+
+let globalAddLogFunction:
+  | ((level: string, message: string, payload?: any) => string)
+  | null = null;
+
+// temporary queue for logs generated before the logger is initialized
+const pendingLogs: Array<{ level: string; message: string; payload?: any }> =
+  [];
+
+const createLogFunction =
+  (level: LogLevel) => (message: string, payload?: any) => {
+    if (
+      typeof window !== 'undefined' &&
+      process.env.NODE_ENV === 'development'
+    ) {
+      try {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(level, message, payload);
+        } else {
+          pendingLogs.push({ level, message, payload });
+        }
+      } catch (err) {
+        // prevent errors
+      }
+    }
+
+    return '';
+  };
+
+const stableLogger = LOG_LEVELS.reduce((logger, level) => {
+  logger[level] = createLogFunction(level);
+
+  return logger;
+}, {} as Record<LogLevel, (message: string, payload?: any) => string>);
+
+export const LoggerProvider = ({ children }: { children: ReactNode }) => {
+  const loggerHook = useLogger();
+
+  const addLogRef = useRef<
+    (level: string, message: string, payload?: any) => string
+  >((level, message, payload) => {
+    if (LOG_LEVELS.includes(level as LogLevel)) {
+      return loggerHook[level as LogLevel](message, payload);
+    }
+    return '';
+  });
+
+  useEffect(() => {
+    globalAddLogFunction = addLogRef.current;
+
+    if (pendingLogs.length > 0) {
+      pendingLogs.forEach((log) => {
+        if (globalAddLogFunction) {
+          globalAddLogFunction(log.level, log.message, log.payload);
+        }
+      });
+
+      pendingLogs.length = 0;
+    }
+
+    return () => {
+      globalAddLogFunction = null;
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => loggerHook,
+    [loggerHook.logs, loggerHook.isVisible, loggerHook.isDevelopment] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return (
+    <LoggerContext.Provider value={contextValue}>
+      {children}
+    </LoggerContext.Provider>
+  );
+};
+
+export const useLoggerContext = () => {
+  const context = useContext(LoggerContext);
+  if (context === undefined) {
+    throw new Error('useLoggerContext must be used within a LoggerProvider');
+  }
+  return context;
+};
+
+export const devLogger = stableLogger;

package/hooks/use-logger.ts

@@ -0,0 +1,92 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+
+export type LogLevel = 'info' | 'warn' | 'error';
+
+export interface LogEntry {
+  id: string;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+  payload?: any;
+}
+
+const LOG_LEVELS: LogEntry['level'][] = ['info', 'warn', 'error'];
+
+export function useLogger() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+  const logsRef = useRef<LogEntry[]>([]);
+  const [isDevelopment, setIsDevelopment] = useState(false);
+
+  useEffect(() => {
+    setIsDevelopment(
+      process.env.NODE_ENV === 'development' ||
+        window.location.hostname === 'localhost' ||
+        window.location.hostname === '127.0.0.1'
+    );
+  }, []);
+
+  useEffect(() => {
+    logsRef.current = logs;
+  }, [logs]);
+
+  const addLog = useCallback(
+    (level: LogEntry['level'], message: string, payload?: any) => {
+      const newLog: LogEntry = {
+        id: Math.random().toString(36).substring(2, 9),
+        level,
+        message,
+        timestamp: new Date(),
+        payload
+      };
+
+      setLogs((prevLogs) => [newLog, ...prevLogs]);
+
+      return newLog.id;
+    },
+    []
+  );
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible((prev) => !prev);
+  }, []);
+
+  const createLogMethod = useCallback(
+    (level: LogEntry['level']) => (message: string, payload?: any) =>
+      addLog(level, message, payload),
+    [addLog]
+  );
+
+  const logMethods = useMemo(
+    () =>
+      LOG_LEVELS.reduce((methods, level) => {
+        methods[level] = createLogMethod(level);
+        return methods;
+      }, {} as Record<LogEntry['level'], (message: string, payload?: any) => string>),
+    [createLogMethod]
+  );
+
+  const hasError = useMemo(
+    () => logs.some((log) => log.level === 'error'),
+    [logs]
+  );
+  const hasWarning = useMemo(
+    () => logs.some((log) => log.level === 'warn'),
+    [logs]
+  );
+
+  return {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    ...logMethods,
+    isDevelopment,
+    hasError,
+    hasWarning
+  };
+}

package/middlewares/bfcache-headers.ts

@@ -0,0 +1,18 @@
+import { NextMiddleware } from 'next/server';
+
+const withBfcacheHeaders = (middleware: NextMiddleware): NextMiddleware => {
+  return async (req, event) => {
+    const response = await middleware(req, event);
+
+    if (process.env.BF_CACHE === 'true' && response) {
+      response.headers.set(
+        'Cache-Control',
+        'private, no-cache, max-age=0, must-revalidate'
+      );
+    }
+
+    return response;
+  };
+};
+
+export default withBfcacheHeaders;

package/middlewares/default.ts

@@ -14,7 +14,8 @@ import {
   withUrlRedirection,
   withCompleteWallet,
   withWalletCompleteRedirection,
-  withMasterpassRestCallback
+  withMasterpassRestCallback,
+  withBfcacheHeaders
 } from '.';
 import { urlLocaleMatcherRegex } from '../utils';
 import { getPzSegmentsConfig, encodePzValue, isLegacyMode } from '../utils/pz-segments';
@@ -256,10 +257,11 @@ const withPzDefault =
                           withCompleteWallet(
                             withWalletCompleteRedirection(
                               withMasterpassRestCallback(
-                                async (
-                                  req: PzNextRequest,
-                                  event: NextFetchEvent
-                                ) => {
+                                withBfcacheHeaders(
+                                  async (
+                                    req: PzNextRequest,
+                                    event: NextFetchEvent
+                                  ) => {
                                   let middlewareResult: NextResponse | void =
                                     NextResponse.next();
 
@@ -563,7 +565,7 @@ const withPzDefault =
                                   }
 
                                   return middlewareResult;
-                                }
+                                })
                               )
                             )
                           )

package/middlewares/index.ts

@@ -12,6 +12,7 @@ import withSavedCardRedirection from './saved-card-redirection';
 import withCompleteWallet from './complete-wallet';
 import withWalletCompleteRedirection from './wallet-complete-redirection';
 import withMasterpassRestCallback from './masterpass-rest-callback';
+import withBfcacheHeaders from './bfcache-headers';
 import { NextRequest } from 'next/server';
 
 export {
@@ -28,7 +29,8 @@ export {
   withSavedCardRedirection,
   withCompleteWallet,
   withWalletCompleteRedirection,
-  withMasterpassRestCallback
+  withMasterpassRestCallback,
+  withBfcacheHeaders
 };
 
 export interface PzNextRequest extends NextRequest {