@akinon/next 2.0.6-rc.1 → 2.0.6

package/CHANGELOG.md

@@ -1,35 +1,13 @@
 # @akinon/next
 
-## 2.0.6-rc.1
+## 2.0.6
 
 ### Patch Changes
 
-- 51ea0688: ZERO-4377: Fix checkout card type state being cleared after valid bin number responses.
-
-## 2.0.6-rc.0
-
-### Patch Changes
-
-- 0cf9ea23: BRDG-16491: Prevent redirect when iframe payment is active
-- 324f97d5: ZERO-4219: replace masterpass-rest-complete with masterpass-rest-callback
-- ZERO-4160: Enhance oauth-login middleware with improved request handling and logging
-- b55acb768: 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
-- 7889b08f: ZERO-4276: Enhance route generation by adding .env loading and custom skip segments support
-- 9f8cd3bc5: 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
-- 57d7eb30: ZERO-4276: Refactor route generation logic by removing environment loading and simplifying skip segments handling
-- d99a6a7d: ZERO-3457_1: Fixed the settings prop and made sure everything is customizable.
-- 9db81a71: ZERO-4365: Remove brand `@theme/*` alias imports from library packages
-- 591e345e: ZERO-3855: Enhance credit card payment handling in checkout middlewares
-- 4de5303c5: ZERO-2504: add cookie filter to api client request
-- 95b139dc: ZERO-3795: Remove duplicate entry for SavedCard in PluginComponents map
-- 1d00f2d0: BRDG-16664: Set secure flag for CSRF token cookies in useCaptcha and default middleware
-- 4ac7b2a1: ZERO-4219: fix masterpass-rest callback route format and double-encoded error cookie
-- 4998a963: ZERO-4168: Add server-side payload optimization
-- 3909d322: Edit the duplicate Plugin.SimilarProducts in the plugin-module.
-- e18836b2: ZERO-4160: Restore scope in Sentry addon configuration in akinon.json
+- 89deabe5: ZERO-4392: Remove deprecated dependencies and update package versions in yarn.lock
+- 1a345c47: ZERO-4234: Add Global Toast Notification System
+- 1f1ae44e: ZERO-4230: Add Commerce API mock/replay mode for development
+- 8d8fefbe: ZERO-4398: Enhance SEO metadata generation for flat pages and update FlatPage interface to include localized URLs
 
 ## 2.0.5
 

package/api/auth.ts

@@ -154,18 +154,49 @@ const getDefaultAuthConfig = () => {
             userIp
           });
 
-          const checkCurrentUser = await getCurrentUser(
-            cookieStore.get('osessionid')?.value ?? '',
-            cookieStore.get('pz-currency')?.value ?? ''
-          );
-
-          if (checkCurrentUser?.pk) {
-            const sessionCookie = reqHeaders
-              .get('cookie')
-              ?.match(/osessionid=\w+/)?.[0]
-              .replace(/osessionid=/, '');
-            if (sessionCookie) {
-              reqHeaders.set('cookie', sessionCookie);
+          const existingSessionId = cookieStore.get('osessionid')?.value;
+
+          if (existingSessionId) {
+            const checkCurrentUser = await getCurrentUser(
+              existingSessionId,
+              cookieStore.get('pz-currency')?.value ?? ''
+            );
+
+            if (checkCurrentUser?.pk) {
+              const sessionCookie = reqHeaders
+                .get('cookie')
+                ?.match(/osessionid=\w+/)?.[0]
+                .replace(/osessionid=/, '');
+              if (sessionCookie) {
+                reqHeaders.set('cookie', sessionCookie);
+              }
+            } else {
+              // Stale session cookie — remove from headers and clear in browser
+              const currentCookies = reqHeaders.get('cookie') || '';
+              const cleanedCookies = currentCookies
+                .split(';')
+                .filter((c) => !c.trim().startsWith('osessionid='))
+                .join(';')
+                .trim();
+              reqHeaders.set('cookie', cleanedCookies);
+
+              const { localeUrlStrategy } = Settings.localization;
+              const fallbackHost =
+                headerStore.get('x-forwarded-host') ||
+                headerStore.get('host');
+              const hostname =
+                process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+              const rootHostname =
+                localeUrlStrategy === LocaleUrlStrategy.Subdomain
+                  ? getRootHostname(hostname)
+                  : null;
+              const expireOptions = {
+                path: '/',
+                maxAge: 0,
+                ...(rootHostname ? { domain: rootHostname } : {})
+              };
+              cookieStore.set('osessionid', '', expireOptions);
+              cookieStore.set('sessionid', '', expireOptions);
             }
           }
 
@@ -393,18 +424,47 @@ const defaultNextAuthOptionsV4 = (req: any, res: any) => {
             userIp
           });
 
-          const checkCurrentUser = await getCurrentUser(
-            req.cookies['osessionid'] ?? '',
-            req.cookies['pz-currency'] ?? ''
-          );
-
-          if (checkCurrentUser?.pk) {
-            const sessionCookie = reqHeaders
-              .get('cookie')
-              ?.match(/osessionid=\w+/)?.[0]
-              .replace(/osessionid=/, '');
-            if (sessionCookie) {
-              reqHeaders.set('cookie', sessionCookie);
+          if (req.cookies['osessionid']) {
+            const checkCurrentUser = await getCurrentUser(
+              req.cookies['osessionid'],
+              req.cookies['pz-currency'] ?? ''
+            );
+
+            if (checkCurrentUser?.pk) {
+              const sessionCookie = reqHeaders
+                .get('cookie')
+                ?.match(/osessionid=\w+/)?.[0]
+                .replace(/osessionid=/, '');
+              if (sessionCookie) {
+                reqHeaders.set('cookie', sessionCookie);
+              }
+            } else {
+              // Stale session cookie — remove from headers and clear in browser
+              const currentCookies = reqHeaders.get('cookie') || '';
+              const cleanedCookies = currentCookies
+                .split(';')
+                .filter((c) => !c.trim().startsWith('osessionid='))
+                .join(';')
+                .trim();
+              reqHeaders.set('cookie', cleanedCookies);
+
+              const { localeUrlStrategy } = Settings.localization;
+              const fallbackHost =
+                req.headers['x-forwarded-host']?.toString() ||
+                req.headers.host?.toString();
+              const hostname =
+                process.env.NEXT_PUBLIC_URL || `https://${fallbackHost}`;
+              const rootHostname =
+                localeUrlStrategy === LocaleUrlStrategy.Subdomain
+                  ? getRootHostname(hostname)
+                  : null;
+              const domainOption = rootHostname
+                ? ` Domain=${rootHostname};`
+                : '';
+              res.setHeader('Set-Cookie', [
+                `osessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;${domainOption}`,
+                `sessionid=; Path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;${domainOption}`
+              ]);
             }
           }
 

package/api/client.ts

@@ -7,6 +7,7 @@ import cookieParser from 'set-cookie-parser';
 import { cookies } from 'next/headers';
 import getRootHostname from '../utils/get-root-hostname';
 import { LocaleUrlStrategy } from '../localization';
+import { fixtureManager, MockMode } from '../lib/fixture-manager';
 
 interface RouteParams {
   params: {
@@ -156,6 +157,28 @@ async function proxyRequest(...args) {
     url += `?${urlSearchParams.toString()}`;
   }
 
+  const mockMode = process.env.PZ_MOCK;
+  const fixtureBody = req.method !== 'GET' ? fetchOptions.body : undefined;
+
+  // Replay mode: serve from fixtures
+  if (mockMode === MockMode.REPLAY) {
+    const { found, fixture } = await fixtureManager.read(req.method, slug, fixtureBody);
+
+    if (found) {
+      return NextResponse.json(
+        options.responseType === 'text'
+          ? { result: fixture.response.body }
+          : fixture.response.body,
+        { status: fixture.response.status }
+      );
+    }
+
+    return NextResponse.json(
+      { error: 'No fixture recorded for this endpoint' },
+      { status: 404 }
+    );
+  }
+
   try {
     const request = await fetch(url, fetchOptions);
 
@@ -181,6 +204,15 @@ async function proxyRequest(...args) {
       );
     }
 
+    // Record mode: save response to fixtures
+    if (mockMode === MockMode.RECORD) {
+      await fixtureManager.write(req.method, slug, fixtureBody, {
+        status: request.status,
+        headers: fixtureManager.extractHeaders(request.headers),
+        body: response
+      });
+    }
+
     const setCookieHeaders = request.headers.getSetCookie();
     const exceptCookieKeys = ['pz-locale', 'pz-currency'];
 

package/bin/pz-generate-routes.js

@@ -6,7 +6,6 @@ const findBaseDir = require('../utils/find-base-dir');
 
 const generateRoutes = () => {
   const baseDir = findBaseDir();
-
   const srcDir = path.join(baseDir, 'src');
   const appDir = path.join(srcDir, 'app');
 
@@ -35,10 +34,8 @@ const generateRoutes = () => {
     '[segment]',
     '[url]',
     '[theme]',
-    '[member_type]',
-    '[clienttype]'
+    '[member_type]'
   ];
-
   const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
 
   const walkDirectory = (dir, basePath = '') => {

package/components/client-root.tsx

@@ -17,6 +17,7 @@ import {
 } from '../redux/reducers/widget';
 import { LoggerPopup } from './logger-popup';
 import { LoggerProvider } from '../hooks/use-logger-context';
+import { ToastContainer } from './toast';
 import * as Sentry from '@sentry/nextjs';
 import { initSentry } from '../sentry';
 
@@ -150,6 +151,7 @@ export default function ClientRoot({
     <LoggerProvider>
       {children}
       <LoggerPopup />
+      <ToastContainer />
     </LoggerProvider>
   );
 }

package/components/plugin-module.tsx

@@ -27,7 +27,8 @@ enum Plugin {
   MasterpassRest = 'pz-masterpass-rest',
   SimilarProducts = 'pz-similar-products',
   Haso = 'pz-haso',
-  GooglePay = 'pz-google-pay'
+  GooglePay = 'pz-google-pay',
+  ListHoverImage = 'pz-list-hover-image'
 }
 
 export enum Component {
@@ -68,7 +69,8 @@ export enum Component {
   ImageSearchButton = 'ImageSearchButton',
   HeaderImageSearchFeature = 'HeaderImageSearchFeature',
   HasoPaymentGateway = 'HasoPaymentGateway',
-  GooglePay = 'GooglePay'
+  GooglePay = 'GooglePay',
+  ListHoverImage = 'ListHoverImage'
 }
 
 const PluginComponents = new Map([
@@ -114,6 +116,7 @@ const PluginComponents = new Map([
     ]
   ],
   [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
+  [Plugin.SavedCard, [Component.SavedCard]],
   [Plugin.FlowPayment, [Component.FlowPayment]],
   [
     Plugin.VirtualTryOn,
@@ -122,7 +125,8 @@ const PluginComponents = new Map([
   [Plugin.Hepsipay, [Component.Hepsipay]],
   [Plugin.MasterpassRest, [Component.MasterpassRest]],
   [Plugin.Haso, [Component.HasoPaymentGateway]],
-  [Plugin.GooglePay, [Component.GooglePay]]
+  [Plugin.GooglePay, [Component.GooglePay]],
+  [Plugin.ListHoverImage, [Component.ListHoverImage]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -201,6 +205,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-haso'}`);
             } else if (plugin === Plugin.GooglePay) {
               promise = import(`${'@akinon/pz-google-pay'}`);
+            } else if (plugin === Plugin.ListHoverImage) {
+              promise = import(`${'@akinon/pz-list-hover-image'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/toast.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { twMerge } from 'tailwind-merge'
+import { useAppDispatch, useAppSelector } from '../redux/hooks'
+import {
+  removeToast,
+  Toast as ToastType,
+  ToastPosition
+} from '../redux/reducers/toast'
+import { Icon } from './icon'
+
+type TypeStyles = {
+  container?: string
+  icon?: string
+}
+
+export interface ToastClasses {
+  root?: string
+  item?: string
+  icon?: string
+  message?: string
+  action?: string
+  dismiss?: string
+  animateIn?: string
+  animateOut?: string
+  types?: Partial<Record<ToastType['type'], TypeStyles>>
+  positions?: Partial<Record<ToastPosition, string>>
+}
+
+export interface ToastContainerProps {
+  classes?: ToastClasses
+  icons?: Partial<Record<ToastType['type'], string>>
+  customRender?: (props: {
+    toast: ToastType
+    onDismiss: () => void
+  }) => React.ReactNode
+  onAction?: (actionId: string, toast: ToastType) => void
+}
+
+const builtInTypeStyles: Record<ToastType['type'], TypeStyles> = {
+  success: {
+    container: 'border-l-4 border-l-success bg-white',
+    icon: 'text-success'
+  },
+  error: {
+    container: 'border-l-4 border-l-error bg-white',
+    icon: 'text-error'
+  },
+  warning: {
+    container: 'border-l-4 border-l-[#e89a0c] bg-white',
+    icon: 'text-[#e89a0c]'
+  },
+  info: {
+    container: 'border-l-4 border-l-primary bg-white',
+    icon: 'text-primary'
+  }
+}
+
+const builtInIcons: Record<ToastType['type'], string> = {
+  success: 'check',
+  error: 'close',
+  warning: 'info',
+  info: 'info'
+}
+
+const builtInPositions: Record<ToastPosition, string> = {
+  'top-right': 'fixed top-4 right-4',
+  'top-left': 'fixed top-4 left-4',
+  'top-center': 'fixed top-4 left-1/2 -translate-x-1/2',
+  'bottom-right': 'fixed bottom-4 right-4',
+  'bottom-left': 'fixed bottom-4 left-4',
+  'bottom-center': 'fixed bottom-4 left-1/2 -translate-x-1/2'
+}
+
+const ToastItem = React.memo(function ToastItem({
+  toast,
+  classes,
+  icons,
+  customRender,
+  onAction
+}: {
+  toast: ToastType
+  classes: ToastClasses
+  icons: Record<ToastType['type'], string>
+  customRender?: ToastContainerProps['customRender']
+  onAction?: ToastContainerProps['onAction']
+}) {
+  const dispatch = useAppDispatch()
+  const [exiting, setExiting] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null)
+
+  useEffect(() => {
+    if (toast.duration > 0) {
+      timerRef.current = setTimeout(() => {
+        setExiting(true)
+      }, toast.duration)
+    }
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [toast.duration])
+
+  const handleAnimationEnd = () => {
+    if (exiting) {
+      dispatch(removeToast(toast.id))
+    }
+  }
+
+  const handleDismiss = () => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    setExiting(true)
+  }
+
+  const animIn = classes.animateIn ?? 'animate-toast-in'
+  const animOut = classes.animateOut ?? 'animate-toast-out'
+
+  if (customRender) {
+    return (
+      <div
+        className={twMerge(
+          'pointer-events-auto',
+          exiting ? animOut : animIn
+        )}
+        onAnimationEnd={handleAnimationEnd}
+      >
+        {customRender({ toast, onDismiss: handleDismiss })}
+      </div>
+    )
+  }
+
+  const typeStyle = classes.types?.[toast.type] ?? builtInTypeStyles[toast.type]
+  const iconName = toast.icon ?? icons[toast.type]
+
+  return (
+    <div
+      role="alert"
+      className={twMerge(
+        'flex items-center gap-3 px-4 py-3 rounded shadow-lg min-w-[300px] max-w-[420px]',
+        'pointer-events-auto',
+        exiting ? animOut : animIn,
+        typeStyle.container,
+        classes.item,
+        toast.className
+      )}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <Icon
+        name={iconName}
+        size={18}
+        className={twMerge('shrink-0', typeStyle.icon, classes.icon)}
+      />
+      <p
+        className={twMerge(
+          'flex-1 text-sm text-primary leading-snug',
+          classes.message
+        )}
+      >
+        {toast.message}
+      </p>
+      {toast.action && onAction && (
+        <button
+          type="button"
+          onClick={() => onAction(toast.action.actionId, toast)}
+          className={twMerge(
+            'shrink-0 text-xs font-semibold text-primary underline hover:no-underline transition-colors',
+            classes.action
+          )}
+        >
+          {toast.action.label}
+        </button>
+      )}
+      {toast.dismissible !== false && (
+        <button
+          type="button"
+          onClick={handleDismiss}
+          className={twMerge(
+            'shrink-0 p-1 text-gray-600 hover:text-primary transition-colors',
+            classes.dismiss
+          )}
+          aria-label="Dismiss"
+        >
+          <Icon name="close" size={12} />
+        </button>
+      )}
+    </div>
+  )
+})
+
+const EMPTY_CLASSES: ToastClasses = {}
+
+export function ToastContainer({
+  classes = EMPTY_CLASSES,
+  icons,
+  customRender,
+  onAction
+}: ToastContainerProps = {}) {
+  const toasts = useAppSelector((state) => state.toast.toasts)
+  const [mounted, setMounted] = useState(false)
+
+  const mergedIcons = useMemo(
+    () => ({ ...builtInIcons, ...icons }),
+    [icons]
+  )
+
+  const posStyles = useMemo(
+    () => ({ ...builtInPositions, ...classes.positions }),
+    [classes.positions]
+  )
+
+  const grouped = useMemo(
+    () =>
+      toasts.reduce<Record<string, ToastType[]>>((acc, toast) => {
+        const pos = toast.position ?? 'top-right'
+        if (!acc[pos]) acc[pos] = []
+        acc[pos].push(toast)
+        return acc
+      }, {}),
+    [toasts]
+  )
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted || toasts.length === 0) return null
+
+  return createPortal(
+    <>
+      {Object.entries(grouped).map(([position, items]) => (
+        <div
+          key={position}
+          aria-live="polite"
+          aria-label="Notifications"
+          className={twMerge(
+            'z-[9999] flex flex-col gap-3 pointer-events-none',
+            posStyles[position as ToastPosition],
+            classes.root
+          )}
+        >
+          {items.map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              classes={classes}
+              icons={mergedIcons}
+              customRender={customRender}
+              onAction={onAction}
+            />
+          ))}
+        </div>
+      ))}
+    </>,
+    document.body
+  )
+}

package/data/client/checkout.ts

@@ -738,6 +738,7 @@ export const checkoutApi = api.injectEndpoints({
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
+        dispatch(setCardType(arg));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }

package/data/server/category.ts

@@ -7,8 +7,6 @@ import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { headers as nHeaders } from 'next/headers';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 function getCategoryDataHandler(
   pk: number,
@@ -82,7 +80,7 @@ function getCategoryDataHandler(
   };
 }
 
-export const getCategoryData = async ({
+export const getCategoryData = ({
   pk,
   searchParams,
   headers,
@@ -95,7 +93,7 @@ export const getCategoryData = async ({
   searchParams?: SearchParams;
   headers?: Record<string, string>;
 }) => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.Category(pk, searchParams, headers),
     locale,
     getCategoryDataHandler(pk, locale, currency, searchParams, headers),
@@ -104,16 +102,6 @@ export const getCategoryData = async ({
       compressed: true
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result?.data) {
-    try {
-      return { ...result, data: optimizeCategoryResponse(result.data, settings.payloadOptimization) };
-    } catch (e) {
-      logger.error('Payload optimization failed for category', { pk, error: (e as Error).message });
-    }
-  }
-
-  return result;
 };
 
 function getCategoryBySlugDataHandler(

package/data/server/list.ts

@@ -6,8 +6,6 @@ import appFetch, { FetchResponseType } from '../../utils/app-fetch';
 import { parse } from 'lossless-json';
 import logger from '../../utils/log';
 import { ServerVariables } from '../../utils/server-variables';
-import { optimizeCategoryResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 const getListDataHandler = (
   locale,
@@ -68,7 +66,7 @@ export const getListData = async ({
   searchParams: SearchParams;
   headers?: Record<string, string>;
 }) => {
-  const result = await Cache.wrap(
+  return Cache.wrap(
     CacheKey.List(searchParams, headers),
     locale,
     getListDataHandler(locale, currency, searchParams, headers),
@@ -77,14 +75,4 @@ export const getListData = async ({
       compressed: true
     }
   );
-
-  if (settings.payloadOptimization?.enabled && result) {
-    try {
-      return optimizeCategoryResponse(result, settings.payloadOptimization);
-    } catch (e) {
-      logger.error('Payload optimization failed for list', { error: (e as Error).message });
-    }
-  }
-
-  return result;
 };

package/data/server/product.ts

@@ -4,8 +4,6 @@ import { ProductCategoryResult, ProductResult, SearchParams } from '../../types'
 import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
 import logger from '../../utils/log';
-import { optimizeProductResponse } from '../../utils/payload-optimizer';
-import settings from 'settings';
 
 type GetProduct = {
   pk: number | string;
@@ -165,13 +163,5 @@ export const getProductData = async ({
     throw error;
   }
 
-  if (settings.payloadOptimization?.enabled && result?.data) {
-    try {
-      return { ...result, data: optimizeProductResponse(result.data, settings.payloadOptimization) };
-    } catch (e) {
-      logger.error('Payload optimization failed for product', { pk, error: (e as Error).message });
-    }
-  }
-
   return result;
 };