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

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/modal.tsx

@@ -4,16 +4,7 @@ import { ReactPortal } from './react-portal';
 import { Icon } from './icon';
 import { twMerge } from 'tailwind-merge';
 import { useEffect } from 'react';
-
-export interface ModalProps {
-  portalId: string;
-  children?: React.ReactNode;
-  open?: boolean;
-  setOpen?: (open: boolean) => void;
-  title?: React.ReactNode;
-  showCloseButton?: React.ReactNode;
-  className?: string;
-}
+import { ModalProps } from '../types';
 
 export const Modal = (props: ModalProps) => {
   const {
@@ -23,7 +14,14 @@ export const Modal = (props: ModalProps) => {
     setOpen,
     title = '',
     showCloseButton = true,
-    className
+    className,
+    overlayClassName,
+    headerWrapperClassName,
+    titleClassName,
+    closeButtonClassName,
+    iconName = 'close',
+    iconSize = 16,
+    iconClassName
   } = props;
 
   useEffect(() => {
@@ -38,7 +36,12 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div
+        className={twMerge(
+          'fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50',
+          overlayClassName
+        )}
+      />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
@@ -46,15 +49,28 @@ export const Modal = (props: ModalProps) => {
         )}
       >
         {(showCloseButton || title) && (
-          <div className="flex px-6 py-4 border-b border-gray-400">
-            {title && <h3 className="text-lg font-light">{title}</h3>}
+          <div
+            className={twMerge(
+              'flex px-6 py-4 border-b border-gray-400',
+              headerWrapperClassName
+            )}
+          >
+            {title && (
+              <h3 className={twMerge('text-lg font-light', titleClassName)}>
+                {title}
+              </h3>
+            )}
             {showCloseButton && (
               <button
                 type="button"
                 onClick={() => setOpen(false)}
-                className="ml-auto"
+                className={twMerge('ml-auto', closeButtonClassName)}
               >
-                <Icon name="close" size={16} />
+                <Icon
+                  name={iconName}
+                  size={iconSize}
+                  className={iconClassName}
+                />
               </button>
             )}
           </div>

package/components/plugin-module.tsx

@@ -20,7 +20,14 @@ enum Plugin {
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
   MultiBasket = 'pz-multi-basket',
-  SavedCard = 'pz-saved-card'
+  SavedCard = 'pz-saved-card',
+  FlowPayment = 'pz-flow-payment',
+  VirtualTryOn = 'pz-virtual-try-on',
+  Hepsipay = 'pz-hepsipay',
+  MasterpassRest = 'pz-masterpass-rest',
+  SimilarProducts = 'pz-similar-products',
+  Haso = 'pz-haso',
+  GooglePay = 'pz-google-pay'
 }
 
 export enum Component {
@@ -45,7 +52,23 @@ export enum Component {
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
   MultiBasket = 'MultiBasket',
-  SavedCard = 'SavedCardOption'
+  SavedCard = 'SavedCardOption',
+  VirtualTryOnPlugin = 'VirtualTryOnPlugin',
+  BasketVirtualTryOn = 'BasketVirtualTryOn',
+  BarcodeScannerPlugin = 'BarcodeScannerPlugin',
+  IyzicoSavedCard = 'IyzicoSavedCardOption',
+  Hepsipay = 'Hepsipay',
+  FlowPayment = 'FlowPayment',
+  MasterpassRest = 'MasterpassRestOption',
+  SimilarProductsModal = 'SimilarProductsModal',
+  SimilarProductsFilterSidebar = 'SimilarProductsFilterSidebar',
+  SimilarProductsResultsGrid = 'SimilarProductsResultsGrid',
+  SimilarProductsPlugin = 'SimilarProductsPlugin',
+  ProductImageSearchFeature = 'ProductImageSearchFeature',
+  ImageSearchButton = 'ImageSearchButton',
+  HeaderImageSearchFeature = 'HeaderImageSearchFeature',
+  HasoPaymentGateway = 'HasoPaymentGateway',
+  GooglePay = 'GooglePay'
 }
 
 const PluginComponents = new Map([
@@ -78,7 +101,29 @@ const PluginComponents = new Map([
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
   [Plugin.MultiBasket, [Component.MultiBasket]],
-  [Plugin.SavedCard, [Component.SavedCard]]
+  [
+    Plugin.SimilarProducts,
+    [
+      Component.SimilarProductsModal,
+      Component.SimilarProductsFilterSidebar,
+      Component.SimilarProductsResultsGrid,
+      Component.SimilarProductsPlugin,
+      Component.ProductImageSearchFeature,
+      Component.ImageSearchButton,
+      Component.HeaderImageSearchFeature
+    ]
+  ],
+  [Plugin.SavedCard, [Component.SavedCard, Component.IyzicoSavedCard]],
+  [Plugin.SavedCard, [Component.SavedCard]],
+  [Plugin.FlowPayment, [Component.FlowPayment]],
+  [
+    Plugin.VirtualTryOn,
+    [Component.VirtualTryOnPlugin, Component.BasketVirtualTryOn, Component.BarcodeScannerPlugin]
+  ],
+  [Plugin.Hepsipay, [Component.Hepsipay]],
+  [Plugin.MasterpassRest, [Component.MasterpassRest]],
+  [Plugin.Haso, [Component.HasoPaymentGateway]],
+  [Plugin.GooglePay, [Component.GooglePay]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -143,6 +188,20 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-multi-basket'}`);
             } else if (plugin === Plugin.SavedCard) {
               promise = import(`${'@akinon/pz-saved-card'}`);
+            } else if (plugin === Plugin.Hepsipay) {
+              promise = import(`${'@akinon/pz-hepsipay'}`);
+            } else if (plugin === Plugin.FlowPayment) {
+              promise = import(`${'@akinon/pz-flow-payment'}`);
+            } else if (plugin === Plugin.VirtualTryOn) {
+              promise = import(`${'@akinon/pz-virtual-try-on'}`);
+            } else if (plugin === Plugin.MasterpassRest) {
+              promise = import(`${'@akinon/pz-masterpass-rest'}`);
+            } else if (plugin === Plugin.SimilarProducts) {
+              promise = import(`${'@akinon/pz-similar-products'}`);
+            } else if (plugin === Plugin.Haso) {
+              promise = import(`${'@akinon/pz-haso'}`);
+            } else if (plugin === Plugin.GooglePay) {
+              promise = import(`${'@akinon/pz-google-pay'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/price.tsx

@@ -55,8 +55,8 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
       : formattedValue;
 
   const currentCurrencyDecimalScale = Settings.localization.currencies.find(
-    (currency) => currency.code === currencyCode_
-  ).decimalScale;
+    (currency) => currency?.code === currencyCode_
+  )?.decimalScale;
 
   return (
     <NumericFormat

package/components/select.tsx

@@ -59,7 +59,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ))}
       </select>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </label>
   );

package/components/selected-payment-option-view.tsx

@@ -16,6 +16,7 @@ const paymentTypeToView = {
   gpay: 'gpay',
   loyalty_money: 'loyalty',
   masterpass: 'credit-card',
+  masterpass_rest: 'masterpass-rest',
   pay_on_delivery: 'pay-on-delivery',
   redirection: 'redirection',
   saved_card: 'saved-card'
@@ -57,6 +58,26 @@ export default function SelectedPaymentOptionView({
           ) {
             const mod = await import('@akinon/pz-apple-pay');
 
+            return typeof mod?.default === 'function'
+              ? mod.default
+              : fallbackView;
+          } else if (
+            payment_option?.payment_type === 'wallet' &&
+            wallet_method === 'cybersource_uc'
+          ) {
+            const mod = await import('@akinon/pz-cybersource-uc');
+
+            return typeof mod?.CyberSourceUcPaymentOption === 'function'
+              ? mod.CyberSourceUcPaymentOption
+              : fallbackView;
+          }
+
+          if (
+            payment_option?.payment_type === 'wallet' &&
+            wallet_method === 'checkout_flow'
+          ) {
+            const mod = await import('@akinon/pz-flow-payment');
+
             return typeof mod?.default === 'function'
               ? mod.default
               : fallbackView;

package/data/client/account.ts

@@ -7,6 +7,7 @@ import {
   AccountOrderCancellation,
   AccountOrderCancellationReason,
   ContactFormType,
+  LoyaltyBalanceItem,
   Order,
   Quotations
 } from '../../types';
@@ -77,6 +78,10 @@ interface LoyaltyTransactions {
   }[];
 }
 
+interface PasswordResetValidateResponse {
+  validlink: boolean;
+}
+
 const accountApi = api.injectEndpoints({
   endpoints: (builder) => ({
     updatePassword: builder.mutation<void, AccountChangePasswordFormType>({
@@ -216,11 +221,20 @@ 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>({
       query: () => buildClientRequestUrl(account.loyaltyTransactions)
+    }),
+    getValidatePasswordResetToken: builder.query<
+      PasswordResetValidateResponse,
+      string
+    >({
+      query: (slug) => buildClientRequestUrl(account.passwordReset(slug))
     })
   }),
   overrideExisting: true
@@ -247,5 +261,6 @@ export const {
   usePasswordResetMutation,
   useAnonymizeMutation,
   useGetLoyaltyBalanceQuery,
-  useGetLoyaltyTransactionsQuery
+  useGetLoyaltyTransactionsQuery,
+  useGetValidatePasswordResetTokenQuery
 } = accountApi;

package/data/client/api.ts

@@ -68,10 +68,12 @@ export const api = createApi({
   tagTypes: [
     'Basket',
     'MultiBasket',
+    'MiniBasket',
     'BasketB2b',
     'DraftsB2b',
     'Product',
     'Checkout',
+    'PaymentOptions',
     'Favorite',
     'Addresses',
     'Profile',

package/data/client/basket.ts

@@ -24,6 +24,26 @@ export const basketApi = api.injectEndpoints({
       transformResponse: (response: { basket: Basket }) => response.basket,
       providesTags: ['Basket']
     }),
+    getMiniBasket: build.query<
+      { pk: number | null; total_quantity: number },
+      void
+    >({
+      query: () =>
+        buildClientRequestUrl(basket.getMiniBasket, {
+          contentType: 'application/json'
+        }),
+      providesTags: ['MiniBasket']
+    }),
+    getMiniBasketDetail: build.query<
+      { pk: number | null; total_quantity: number },
+      { namespace: string }
+    >({
+      query: ({ namespace }) =>
+        buildClientRequestUrl(basket.getMiniBasketDetail(namespace), {
+          contentType: 'application/json'
+        }),
+      providesTags: ['MiniBasket']
+    }),
     getBasketDetail: build.query<Basket, { namespace: string }>({
       query: ({ namespace }) =>
         buildClientRequestUrl(basket.getBasketDetail(namespace)),
@@ -46,7 +66,7 @@ export const basketApi = api.injectEndpoints({
         method: 'DELETE',
         body: { pk }
       }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     selectMainBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -57,7 +77,7 @@ export const basketApi = api.injectEndpoints({
         body: { pk }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     selectNameSpaceMainBasket: build.mutation<Basket, { namespace: string }>({
       query: ({ namespace }) => ({
@@ -71,7 +91,7 @@ export const basketApi = api.injectEndpoints({
         body: { namespace }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
@@ -84,7 +104,46 @@ export const basketApi = api.injectEndpoints({
         method: 'PUT',
         body
       }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      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>({
       query: (body) => ({
@@ -95,7 +154,7 @@ export const basketApi = api.injectEndpoints({
         body
       }),
       transformResponse: (response: { basket: Basket }) => response.basket,
-      invalidatesTags: ['Basket']
+      invalidatesTags: ['Basket', 'MiniBasket', 'MiniBasket']
     }),
     applyVoucherCode: build.mutation<Basket, { voucher_code: string }>({
       query: (body) => ({
@@ -125,6 +184,8 @@ export const basketApi = api.injectEndpoints({
 
 export const {
   useGetBasketQuery,
+  useGetMiniBasketQuery,
+  useGetMiniBasketDetailQuery,
   useLazyGetBasketDetailQuery,
   useGetAllBasketsQuery,
   useRemoveBasketMutation,