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

package/components/link.tsx

@@ -19,26 +19,56 @@ export const Link = ({ children, href, ...rest }: LinkProps) => {
       return '#';
     }
 
-    if (
-      typeof href !== 'string' ||
-      urlSchemes.some((scheme) => href.startsWith(scheme))
-    ) {
-      return href;
-    }
+    if (typeof href === 'string') {
+      const trimmedHref = href.trim();
+      if (!trimmedHref) {
+        return '#';
+      }
+
+      if (urlSchemes.some((scheme) => trimmedHref.startsWith(scheme))) {
+        if (
+          trimmedHref.startsWith('mailto:') ||
+          trimmedHref.startsWith('tel:')
+        ) {
+          return trimmedHref;
+        }
+
+        try {
+          new URL(trimmedHref);
+          return trimmedHref;
+        } catch {
+          return '#';
+        }
+      }
 
-    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
-    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+      try {
+        new URL(trimmedHref, 'http://localhost');
+      } catch {
+        return '#';
+      }
 
-    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
-      return hrefWithLocale;
-    } else if (
-      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
-      locale !== defaultLocaleValue
-    ) {
-      return hrefWithLocale;
+      const pathnameWithoutLocale = trimmedHref.replace(
+        urlLocaleMatcherRegex,
+        ''
+      );
+      const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+
+      if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+        return hrefWithLocale;
+      } else if (
+        localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+        locale !== defaultLocaleValue
+      ) {
+        return hrefWithLocale;
+      }
+
+      return trimmedHref || '#';
     }
 
-    return href || '#';
+    if (typeof href !== 'string') {
+      return href;
+    }
+    return '#';
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
   return (

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/components/theme-editor/blocks/accordion-block.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import ThemeBlock from '../theme-block';
+
+const AccordionBlock: React.FC<BlockRendererProps> = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}) => {
+  const childBlocks = block.blocks || [];
+
+  const defaultOpen = block.properties?.defaultOpen === true;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const headingBlock = childBlocks.find((b) => b.label === 'Accordion Heading');
+  const contentBlock = childBlocks.find((b) => b.label === 'Accordion Content');
+
+  if (!headingBlock && !contentBlock) {
+    return (
+      <div className="p-4 text-gray-400 border border-dashed border-gray-300 rounded">
+        No accordion content
+      </div>
+    );
+  }
+
+  const renderHeading = () => {
+    if (!headingBlock) return null;
+
+    return headingBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        const modifiedBlock =
+          childBlock.type === 'icon'
+            ? {
+                ...childBlock,
+                styles: {
+                  ...childBlock.styles,
+                  transform: {
+                    desktop: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    mobile: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+                  },
+                  transition: {
+                    desktop: 'transform 0.3s ease-in-out',
+                    mobile: 'transform 0.3s ease-in-out'
+                  }
+                }
+              }
+            : childBlock;
+
+        return (
+          <ThemeBlock
+            key={childBlock.id || `heading-block-${index}`}
+            block={modifiedBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const renderContent = () => {
+    if (!contentBlock) return null;
+
+    return contentBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        return (
+          <ThemeBlock
+            key={childBlock.id || `content-block-${index}`}
+            block={childBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const toggleAccordion = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest('[data-action-toolbar]') ||
+        target.closest('button') ||
+        target.closest('input')
+      ) {
+        return;
+      }
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div style={{ cursor: 'pointer' }} onClick={toggleAccordion}>
+        {renderHeading()}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows 0.3s ease-in-out'
+        }}
+      >
+        <div style={{ overflow: 'hidden' }}>{renderContent()}</div>
+      </div>
+    </>
+  );
+};
+
+export default AccordionBlock;