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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @akinon/next
 
+## 2.0.0-beta.18
+
+### 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
+
+## 2.0.0-beta.17
+
+### Minor Changes
+
+- 8218dafa: ZERO-4160: Refactor oauth-login middleware to use fetch for login and callback responses
+- 2a8ddcf6: ZERO-4111: Add total balance field to store credit localization and update related components
+- 8a7fd0f4: ZERO-4065: Add '[segment]' to skipSegments in route generation
+- 36143125: ZERO-3987: Add barcode scanner functionality with modal and button
+- f7e0f646: ZERO-4032: Add bfcache-headers middleware, integrate it into the default chain, and introduce a new environment variable for control.
+- 94a86fcc: ZERO-4065: Expand skipSegments array to include additional segments for route generation
+- bcaad120: ZERO-4158: Add logging for OAuth login and callback redirects
+
 ## 2.0.0-beta.16
 
 ### Minor Changes

package/api/barcode-search.ts

@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Settings from 'settings';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const barcode = searchParams.get('search_text');
+
+    if (!barcode) {
+      return NextResponse.json(
+        { error: 'Missing search_text parameter (barcode)' },
+        { status: 400 }
+      );
+    }
+
+    if (Settings.commerceUrl === 'default') {
+      return NextResponse.json(
+        { error: 'Commerce URL is not configured' },
+        { status: 500 }
+      );
+    }
+
+    const queryParams = new URLSearchParams();
+    queryParams.append('search_text', barcode);
+
+    searchParams.forEach((value, key) => {
+      if (key !== 'search_text') {
+        queryParams.append(key, value);
+      }
+    });
+
+    const apiUrl = `${Settings.commerceUrl}/list/?${queryParams.toString()}`;
+
+    const headers: Record<string, string> = {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    };
+
+    const response = await fetch(apiUrl, {
+      method: 'GET',
+      headers
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `API request failed with status: ${response.status}` },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    return NextResponse.json(
+      { error: (error as Error).message },
+      { status: 500 }
+    );
+  }
+}

package/bin/pz-generate-routes.js

@@ -25,7 +25,17 @@ const generateRoutes = () => {
   const routes = [];
   const excludedDirs = ['api', 'pz-not-found'];
 
-  const skipSegments = ['[pz]', '[commerce]', '[locale]', '[currency]'];
+  const skipSegments = [
+    '[pz]',
+    '[commerce]',
+    '[locale]',
+    '[currency]',
+    '[session]',
+    '[segment]',
+    '[url]',
+    '[theme]',
+    '[member_type]'
+  ];
   const skipCatchAllRoutes = ['[...prettyurl]', '[...not_found]'];
 
   const walkDirectory = (dir, basePath = '') => {

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

@@ -55,6 +55,7 @@ export enum Component {
   SavedCard = 'SavedCardOption',
   VirtualTryOnPlugin = 'VirtualTryOnPlugin',
   BasketVirtualTryOn = 'BasketVirtualTryOn',
+  BarcodeScannerPlugin = 'BarcodeScannerPlugin',
   IyzicoSavedCard = 'IyzicoSavedCardOption',
   Hepsipay = 'Hepsipay',
   FlowPayment = 'FlowPayment',
@@ -117,7 +118,7 @@ const PluginComponents = new Map([
   [Plugin.FlowPayment, [Component.FlowPayment]],
   [
     Plugin.VirtualTryOn,
-    [Component.VirtualTryOnPlugin, Component.BasketVirtualTryOn]
+    [Component.VirtualTryOnPlugin, Component.BasketVirtualTryOn, Component.BarcodeScannerPlugin]
   ],
   [Plugin.Hepsipay, [Component.Hepsipay]],
   [Plugin.MasterpassRest, [Component.MasterpassRest]],

package/data/client/account.ts

@@ -7,6 +7,7 @@ import {
   AccountOrderCancellation,
   AccountOrderCancellationReason,
   ContactFormType,
+  LoyaltyBalanceItem,
   Order,
   Quotations
 } from '../../types';
@@ -220,7 +221,10 @@ const accountApi = api.injectEndpoints({
         method: 'PATCH'
       })
     }),
-    getLoyaltyBalance: builder.query<{ balance: number }, void>({
+    getLoyaltyBalance: builder.query<
+      { balance: number; balances?: LoyaltyBalanceItem[] },
+      void
+    >({
       query: () => buildClientRequestUrl(account.loyaltyBalance)
     }),
     getLoyaltyTransactions: builder.query<LoyaltyTransactions, void>({

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>({