@akinon/next 1.124.0-rc.0 → 1.124.0

package/CHANGELOG.md

@@ -1,22 +1,14 @@
 # @akinon/next
 
-## 1.124.0-rc.0
-
-### Minor Changes
-
-- ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
-- b55acb76: ZERO-2577: Fix pagination bug and update usePagination hook and ensure pagination controls rendering correctly
-- 760258c1: ZERO-4160: Enhance oauth-login middleware to handle fetch errors and improve response handling
-- 143be2b9: ZERO-3457: Crop styles are customizable and logic improved for rendering similar products modal
-- cd68a97a: ZERO-4126: Enhance error handling in appFetch and related data handlers to throw notFound on 404 and 422 errors
-- 9f8cd3bc: ZERO-3449: AI Search Active Filters & Crop Style changes have been implemented
-- bfafa3f4: ZERO-4160: Refactor oauth-login middleware to use fetchCommerce for API calls and improve cookie handling
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
-- 591e345e: ZERO-3855: Enhance credit card payment handling in checkout middlewares
-- 4de5303c: ZERO-2504: add cookie filter to api client request
-- 95b139dc: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
-- 3909d322: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
-- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
+## 1.124.0
+
+### Minor Changes
+
+- 929374c5: ZERO-3278: refactor variable names for better readability and consistency
+- 71f8011d: ZERO-3271: remove code repetition in logger functions using closures
+- 9be2c081: ZERO-3243: Improve basket update query handling with optimistic updates
+- bd431e36: ZERO-3278: improve checkout validation error messages for better user guidance
+- 54eac86b: ZERO-3271: add development logger system
 
 ## 1.123.0
 

package/components/client-root.tsx

@@ -1,6 +1,9 @@
 'use client';
 
+import React from 'react';
 import { useMobileIframeHandler } from '../hooks';
+import { LoggerPopup } from './logger-popup';
+import { LoggerProvider } from '../hooks/use-logger-context';
 import * as Sentry from '@sentry/nextjs';
 import { initSentry } from '../sentry';
 import { useEffect } from 'react';
@@ -12,7 +15,9 @@ export default function ClientRoot({
   children: React.ReactNode;
   sessionId?: string;
 }) {
-  const { preventPageRender } = useMobileIframeHandler({ sessionId });
+  const { preventPageRender } = useMobileIframeHandler({
+    sessionId: sessionId || ''
+  });
 
   const initializeSentry = async () => {
     const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
@@ -35,5 +40,10 @@ export default function ClientRoot({
     return null;
   }
 
-  return <>{children}</>;
+  return (
+    <LoggerProvider>
+      {children}
+      <LoggerPopup />
+    </LoggerProvider>
+  );
 }

package/components/index.ts

@@ -21,3 +21,4 @@ export * from './link';
 export * from './pagination';
 export * from './live-commerce';
 export * from './file-input';
+export * from './logger-popup';

package/components/logger-popup.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import React, { useState, useCallback, memo, useMemo } from 'react';
+import { LogEntry } from '../hooks/use-logger';
+import { useLoggerContext } from '../hooks/use-logger-context';
+
+const LoggerAnimations = ({ color = '#dc2626' }: { color?: string }) => (
+  <style jsx global>{`
+    @keyframes pulse {
+      0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}80;
+      }
+
+      70% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px ${color}00;
+      }
+
+      100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 ${color}00;
+      }
+    }
+  `}</style>
+);
+
+const LogLevelColors = {
+  warn: '#ff9800', // orange
+  error: '#f44336' // red
+};
+
+const LoggerTrigger = memo(
+  ({
+    onClick,
+    logCount = 0,
+    currentColor
+  }: {
+    onClick: () => void;
+    logCount?: number;
+    currentColor: string;
+  }) => {
+    return (
+      <button
+        onClick={onClick}
+        className="fixed bottom-4 right-4 w-14 h-14 border border-white rounded-full flex items-center justify-center shadow-lg z-[9999] hover:opacity-90 transition-colors"
+        aria-label="Open Logger"
+        style={{
+          backgroundColor: currentColor,
+          ...(logCount > 0 && {
+            animation: 'pulse 2s infinite'
+          })
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="text-white size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+          />
+        </svg>
+
+        {logCount > 0 && (
+          <span
+            className="absolute w-5 h-5 -bottom-[5px] p-1 -left-[5px] border-2 border-white rounded-full flex items-center justify-center text-[8px] text-white font-bold"
+            style={{
+              backgroundColor: currentColor
+            }}
+          >
+            {logCount > 99 ? '99+' : logCount}
+          </span>
+        )}
+      </button>
+    );
+  }
+);
+
+LoggerTrigger.displayName = 'LoggerTrigger';
+
+const LogItem = memo(({ log }: { log: LogEntry }) => {
+  const [expanded, setExpanded] = useState(false);
+  const hasPayload = log.payload && Object.keys(log.payload).length > 0;
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  return (
+    <div className="border-b border-gray-200 py-2">
+      <div className="relative">
+        <div
+          className="absolute top-0 left-0 w-3 h-3 rounded-full mt-1.5 mr-2 flex-shrink-0"
+          style={{
+            backgroundColor: LogLevelColors[log.level],
+            boxShadow: `0 0 5px ${LogLevelColors[log.level]}`
+          }}
+        />
+        <div className="ml-6">
+          <div className="flex justify-between">
+            <span
+              className="font-medium capitalize"
+              style={{
+                color: LogLevelColors[log.level]
+              }}
+            >
+              {log.level}
+            </span>
+            <span className="text-xs text-gray-500">
+              {log.timestamp.toLocaleTimeString()}
+            </span>
+          </div>
+          <p className="text-sm">{log.message}</p>
+          {hasPayload && (
+            <button
+              onClick={toggleExpanded}
+              className="text-xs text-blue-500 mt-1 hover:text-blue-700 transition-colors"
+            >
+              {expanded ? 'Hide Details' : 'Show Details'}
+            </button>
+          )}
+          {expanded && hasPayload && (
+            <pre className="text-xs bg-gray-100 p-2 mt-1 rounded overflow-auto max-h-96 max-w-full">
+              {JSON.stringify(log.payload, null, 2)}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LogItem.displayName = 'LogItem';
+
+export const LoggerPopup = () => {
+  const {
+    logs,
+    isVisible,
+    toggleVisibility,
+    clearLogs,
+    isDevelopment,
+    hasError,
+    hasWarning
+  } = useLoggerContext();
+
+  const currentColor = useMemo(() => {
+    if (logs.length === 0) return '#b5afaf';
+    if (hasError) return '#dc2626';
+    if (hasWarning) return '#ff9800';
+
+    return '#b5afaf';
+  }, [logs.length, hasError, hasWarning]);
+
+  if (!isDevelopment) {
+    return null;
+  }
+
+  if (!isVisible) {
+    return (
+      <>
+        <LoggerAnimations color={currentColor} />
+        <LoggerTrigger
+          onClick={toggleVisibility}
+          logCount={logs.length}
+          currentColor={currentColor}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <LoggerAnimations color={currentColor} />
+      <LoggerTrigger
+        onClick={toggleVisibility}
+        logCount={logs.length}
+        currentColor={currentColor}
+      />
+      <div className="fixed bottom-20 right-4 w-96 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-xl z-50 border-2 border-gray-200 max-h-[70vh] flex flex-col">
+        <div className="flex items-center justify-between p-3 border-b border-gray-200">
+          <h3 className="font-bold flex items-center">Development Logger</h3>
+          <div className="flex space-x-2">
+            <button
+              onClick={clearLogs}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Clear
+            </button>
+            <button
+              onClick={toggleVisibility}
+              className="text-xs bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+        <div className="overflow-y-auto flex-grow p-3">
+          {logs.length === 0 ? (
+            <p className="text-gray-500 text-center py-4">No logs yet</p>
+          ) : (
+            logs.map((log) => <LogItem key={log.id} log={log} />)
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

package/components/plugin-module.tsx

@@ -114,6 +114,7 @@ const PluginComponents = new Map([
     ]
   ],
   [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
+  [Plugin.SavedCard, [Component.SavedCard]],
   [Plugin.FlowPayment, [Component.FlowPayment]],
   [
     Plugin.VirtualTryOn,

package/data/client/basket.ts

@@ -104,6 +104,45 @@ export const basketApi = api.injectEndpoints({
         method: 'PUT',
         body
       }),
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+
+          dispatch(
+            basketApi.util.updateQueryData(
+              'getBasket',
+              undefined,
+              () => data.basket
+            )
+          );
+
+          if (data.basket.namespace) {
+            dispatch(
+              basketApi.util.updateQueryData(
+                'getBasketDetail',
+                { namespace: data.basket.namespace },
+                () => data.basket
+              )
+            );
+          }
+
+          dispatch(
+            basketApi.util.updateQueryData(
+              'getAllBaskets',
+              undefined,
+              (baskets) => {
+                if (!baskets) return baskets;
+
+                return baskets.map((basket) =>
+                  basket.pk === data.basket.pk ? data.basket : basket
+                );
+              }
+            )
+          );
+        } catch (error) {
+          console.error('Error updating quantity:', error);
+        }
+      },
       invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     clearBasket: build.mutation<Basket, void>({

package/data/client/checkout.ts

@@ -33,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');
@@ -49,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;
@@ -195,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>({
@@ -381,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>({
@@ -398,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>({
@@ -414,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[]>({
@@ -467,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<

package/data/urls.ts

@@ -183,11 +183,7 @@ export const product = {
   breadcrumbUrl: (menuitemmodel: string) =>
     `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`,
   bundleProduct: (productPk: string, queryString: string) =>
-    `/bundle-product/${productPk}/?${queryString}`,
-  similarProducts: (params?: string) =>
-    `/similar-products${params ? `?${params}` : ''}`,
-  similarProductsList: (params?: string) =>
-    `/similar-product-list${params ? `?${params}` : ''}`
+    `/bundle-product/${productPk}/?${queryString}`
 };
 
 export const wishlist = {

package/hooks/index.ts

@@ -10,4 +10,6 @@ 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';

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.124.0-rc.0",
+  "version": "1.124.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -35,7 +35,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.124.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.124.0",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/plugins.d.ts

@@ -37,16 +37,6 @@ declare module '@akinon/pz-cybersource-uc/src/redux/middleware' {
   export default middleware as any;
 }
 
-declare module '@akinon/pz-apple-pay' {}
-
-declare module '@akinon/pz-similar-products' {
-  export const SimilarProductsModal: any;
-  export const SimilarProductsFilterSidebar: any;
-  export const SimilarProductsResultsGrid: any;
-  export const SimilarProductsPlugin: any;
-  export const SimilarProductsButtonPlugin: any;
-}
-
 declare module '@akinon/pz-cybersource-uc/src/redux/reducer' {
   export default reducer as any;
 }

package/plugins.js

@@ -16,7 +16,6 @@ module.exports = [
   'pz-tabby-extension',
   'pz-apple-pay',
   'pz-tamara-extension',
-  'pz-similar-products',
   'pz-cybersource-uc',
   'pz-hepsipay',
   'pz-flow-payment',

package/redux/middlewares/checkout.ts

@@ -209,25 +209,15 @@ export const contextListMiddleware: Middleware = ({
             (ctx) => ctx.page_name === 'DeliveryOptionSelectionPage'
           )
         ) {
-          const isCreditCardPayment =
-            preOrder?.payment_option?.payment_type === 'credit_card' ||
-            preOrder?.payment_option?.payment_type === 'masterpass';
-
           if (context.page_context.card_type) {
             dispatch(setCardType(context.page_context.card_type));
-          } else if (isCreditCardPayment) {
-            dispatch(setCardType(null));
           }
 
           if (
             context.page_context.installments &&
             preOrder?.payment_option?.payment_type !== 'masterpass_rest'
           ) {
-            if (!isCreditCardPayment || context.page_context.card_type) {
-              dispatch(
-                setInstallmentOptions(context.page_context.installments)
-              );
-            }
+            dispatch(setInstallmentOptions(context.page_context.installments));
           }
         }
 

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

@@ -14,17 +14,9 @@ export const installmentOptionMiddleware: Middleware = ({
       return result;
     }
 
-    const { installmentOptions, cardType } = getState().checkout;
+    const { installmentOptions } = getState().checkout;
     const { endpoints: apiEndpoints } = checkoutApi;
 
-    const isCreditCardPayment =
-      preOrder?.payment_option?.payment_type === 'credit_card' ||
-      preOrder?.payment_option?.payment_type === 'masterpass';
-
-    if (isCreditCardPayment && !cardType) {
-      return result;
-    }
-
     if (
       !preOrder?.installment &&
       preOrder?.payment_option?.payment_type !== 'saved_card' &&

package/types/index.ts

@@ -83,12 +83,6 @@ export interface Settings {
   };
   usePrettyUrlRoute?: boolean;
   commerceUrl: string;
-  /**
-   * This option allows you to track Sentry events on the client side, in addition to server and edge environments.
-   *
-   * It overrides process.env.NEXT_PUBLIC_SENTRY_DSN and process.env.SENTRY_DSN.
-   */
-  sentryDsn?: string;
   redis: {
     defaultExpirationTime: number;
   };

package/utils/app-fetch.ts

@@ -2,7 +2,6 @@ import Settings from 'settings';
 import logger from '../utils/log';
 import { headers, cookies } from 'next/headers';
 import { ServerVariables } from './server-variables';
-import { notFound } from 'next/navigation';
 
 export enum FetchResponseType {
   JSON = 'json',
@@ -61,15 +60,13 @@ const appFetch = async <T>({
     status = req.status;
     logger.debug(`FETCH END ${url}`, { status: req.status, ip });
 
-    if (req.ok) {
-      if (responseType === FetchResponseType.JSON) {
-        response = (await req.json()) as T;
-      } else {
-        response = (await req.text()) as unknown as T;
-      }
-
-      logger.trace(`FETCH RESPONSE`, { url, response, ip });
+    if (responseType === FetchResponseType.JSON) {
+      response = (await req.json()) as T;
+    } else {
+      response = (await req.text()) as unknown as T;
     }
+
+    logger.trace(`FETCH RESPONSE`, { url, response, ip });
   } catch (error) {
     const logType = status === 500 ? 'fatal' : 'error';
 
@@ -78,10 +75,6 @@ const appFetch = async <T>({
     }
   }
 
-  if (status === 422) {
-    notFound();
-  }
-
   return response;
 };