@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.22

package/app-template/src/views/header/action-menu.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { ReactNode, useMemo, useRef, useCallback, CSSProperties } from 'react';
-import { useRouter } from '@akinon/next/hooks';
+import { ReactNode, useMemo, useRef, useCallback } from 'react';
 import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
@@ -15,104 +14,8 @@ import { ROUTES } from '@theme/routes';
 import MiniBasket from './mini-basket';
 import { Badge, Icon, Link } from '@theme/components';
 import { useOnClickOutside } from '@akinon/next/hooks';
-import { useSession } from 'next-auth/react';
-import { useHeaderIconSettings } from './use-header-icons';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  HeaderMiniBasketProvider,
-  useHeaderMiniBasket
-} from './header-mini-basket-context';
-import {
-  HeaderIconsProvider,
-  useHeaderIconsDesigner,
-  HEADER_ICONS_PLACEHOLDER_ID,
-  HEADER_ICONS_SECTION_ID,
-  HEADER_ICON_BLOCKS
-} from './header-icons-context';
-
-/**
- * Convert block styles to CSS properties
- */
-function convertBlockStylesToCSS(
-  styles: Record<string, unknown> | undefined
-): CSSProperties {
-  if (!styles) return {};
-
-  const result: Record<string, string | number> = {};
-
-  const styleMap: Record<string, string> = {
-    'margin-top': 'marginTop',
-    'margin-right': 'marginRight',
-    'margin-bottom': 'marginBottom',
-    'margin-left': 'marginLeft',
-    'background-color': 'backgroundColor'
-  };
-
-  Object.entries(styles).forEach(([key, value]) => {
-    const cssKey = styleMap[key] || key;
-    // Extract desktop value if responsive
-    if (value && typeof value === 'object' && 'desktop' in value) {
-      result[cssKey] = (value as Record<string, string>).desktop;
-    } else if (typeof value === 'string' || typeof value === 'number') {
-      result[cssKey] = value;
-    }
-  });
-
-  return result as CSSProperties;
-}
-import { HeaderIconSettings } from './server-settings-parser';
-import { useHeaderLayout } from './header-layout-registrar';
-
-// Inline selectable wrapper for header icons - doesn't add extra wrapper div
-function SelectableIcon({
-  blockId,
-  blockType,
-  blockLabel,
-  isDesigner,
-  isSelected,
-  children
-}: {
-  blockId: string;
-  blockType: string;
-  blockLabel: string;
-  isDesigner: boolean;
-  isSelected: boolean;
-  children: React.ReactElement;
-}) {
-  const { handleClick } = useDesignerFeatures({
-    blockId,
-    placeholderId: HEADER_ICONS_PLACEHOLDER_ID,
-    sectionId: HEADER_ICONS_SECTION_ID,
-    isDesigner,
-    blockInfo: {
-      id: blockId,
-      type: blockType,
-      label: blockLabel
-    }
-  });
-
-  if (!isDesigner) {
-    return children;
-  }
-
-  // Clone child and inject onClick and selection styles
-  return (
-    <span
-      data-block-id={blockId}
-      onClick={handleClick}
-      className={clsx(
-        'relative cursor-pointer',
-        isSelected && 'ring-2 ring-blue-500 ring-offset-1 rounded'
-      )}
-      style={{ display: 'inline-flex', alignItems: 'center' }}
-    >
-      {children}
-    </span>
-  );
-}
 
 interface MenuItem {
-  id: 'search' | 'profile' | 'cart';
   label: string;
   url?: string;
   action?: () => void;
@@ -121,49 +24,10 @@ interface MenuItem {
   badge?: ReactNode;
   miniBasket?: ReactNode;
   dataTestId?: string;
-  blockId: string;
-}
-
-interface ActionMenuContentProps {
-  initialIconSettings?: HeaderIconSettings;
 }
 
-/**
- * Inner ActionMenu component that uses the designer context
- */
-function ActionMenuContent({ initialIconSettings }: ActionMenuContentProps) {
-  const router = useRouter();
+export default function ActionMenu() {
   const dispatch = useAppDispatch();
-  const { status } = useSession();
-  const iconSettings = useHeaderIconSettings(initialIconSettings);
-  const { isDesigner, selectedBlockId, getBlockStyles, getBlockProperties } =
-    useHeaderIconsDesigner();
-  const { layout } = useHeaderLayout();
-  const { sectionProperties } = useHeaderMiniBasket();
-
-  // Extract visibility value from section properties (handles responsive format)
-  const extractVisibility = useCallback((visibilityProp: unknown): string => {
-    if (!visibilityProp) return 'show';
-    if (typeof visibilityProp === 'string') return visibilityProp;
-    if (typeof visibilityProp === 'object' && visibilityProp !== null) {
-      const obj = visibilityProp as Record<string, string>;
-      return obj.desktop || obj.mobile || Object.values(obj)[0] || 'show';
-    }
-    return 'show';
-  }, []);
-
-  // Check if mini basket should be shown based on theme editor settings
-  const shouldShowMiniBasket = useMemo(() => {
-    const miniBasketVisibility = extractVisibility(
-      sectionProperties?.visibility
-    );
-    const shouldShow = miniBasketVisibility === 'show';
-
-    return shouldShow;
-  }, [sectionProperties, extractVisibility]);
-
-  // Hide search icon when inline search is visible (two-row layout)
-  const hideSearchIcon = layout === 'two-row';
 
   const { data: miniBasket } = useGetMiniBasketQuery();
   const totalQuantity = useMemo(
@@ -182,171 +46,75 @@ function ActionMenuContent({ initialIconSettings }: ActionMenuContentProps) {
 
   const MenuItems: MenuItem[] = [
     {
-      id: 'search',
-      blockId: HEADER_ICON_BLOCKS.SEARCH.id,
       label: 'Search',
       action: () => {
-        if (!isDesigner) dispatch(openSearch());
+        dispatch(openSearch());
       },
       icon: 'search',
+      className: 'sm:hidden',
       dataTestId: 'header-search'
     },
     {
-      id: 'profile',
-      blockId: HEADER_ICON_BLOCKS.PROFILE.id,
-      label: 'Profile',
-      url: `${status === 'authenticated' ? ROUTES.ACCOUNT : ROUTES.AUTH}`,
-      icon: 'person',
-      dataTestId: 'header-profile'
+      label: 'Favourite Products',
+      url: ROUTES.ACCOUNT_WISHLIST,
+      icon: 'heart-stroke',
+      dataTestId: 'header-favourite'
     },
     {
-      id: 'cart',
-      blockId: HEADER_ICON_BLOCKS.CART.id,
       label: 'Basket',
-      action: () => {
-        if (shouldShowMiniBasket) {
-          dispatch(toggleMiniBasket());
-        } else if (!isDesigner) {
-          // Only navigate to basket page when not in designer mode
-          router.push(ROUTES.BASKET);
-        }
+      action() {
+        dispatch(toggleMiniBasket());
       },
       icon: 'cart',
       dataTestId: 'header-basket',
-      className: 'pl-2.5',
       badge: (
         <Badge
           className={clsx(
-            'w-4 bg-primary text-white -bottom-1 -right-1 top-auto'
+            'w-4',
+            totalQuantity === 0
+              ? 'bg-primary text-gray-500'
+              : 'bg-secondary-500 text-white'
           )}
         >
           <span data-testid="header-basket-count">{totalQuantity}</span>
         </Badge>
       ),
-      miniBasket: shouldShowMiniBasket ? <MiniBasket /> : null
+      miniBasket: <MiniBasket />
     }
   ];
 
-  const renderIconContent = (
-    menu: MenuItem,
-    settings: { size: number; color: string }
-  ) => {
-    // Get custom icon from block properties
-    const blockProps = getBlockProperties(menu.blockId);
-    const customIcon = blockProps?.icon as
-      | string
-      | { desktop?: string }
-      | undefined;
-
-    // Handle responsive object format
-    const iconValue =
-      typeof customIcon === 'object' && customIcon !== null
-        ? customIcon.desktop
-        : customIcon;
-
-    // Check if we have a custom SVG icon
-    const hasCustomSvgIcon =
-      iconValue && typeof iconValue === 'string' && iconValue.includes('<svg');
-
-    return (
-      <>
-        {hasCustomSvgIcon ? (
-          <div
-            className="flex items-center justify-center"
-            style={{
-              width: settings.size,
-              height: settings.size,
-              color:
-                settings.color !== 'currentColor' ? settings.color : undefined
-            }}
-            dangerouslySetInnerHTML={{ __html: iconValue }}
-          />
-        ) : (
-          <Icon
-            name={menu.icon}
-            size={settings.size}
-            style={{
-              color:
-                settings.color !== 'currentColor' ? settings.color : undefined
-            }}
-          />
-        )}
-        {menu.badge}
-      </>
-    );
-  };
-
   return (
-    <ul className="flex items-center">
-      {MenuItems.map((menu, index) => {
-        // Hide search icon when inline search input is visible
-        if (menu.id === 'search' && hideSearchIcon) {
-          return null;
-        }
-
-        const settings = iconSettings[menu.id];
-
-        const iconElement = menu.action ? (
-          <button onClick={menu.action} data-testid={menu.dataTestId}>
-            {renderIconContent(menu, settings)}
-          </button>
-        ) : (
-          <Link
-            href={isDesigner ? '#' : menu.url ?? '#'}
-            passHref={true}
-            onClick={(event) => {
-              if (isDesigner) {
-                event.preventDefault();
-                return;
-              }
-            }}
-            data-testid={menu.dataTestId}
-          >
-            {renderIconContent(menu, settings)}
-          </Link>
-        );
-
-        // Get block styles for margins
-        const blockStyles = getBlockStyles(menu.blockId);
-        const iconContainerStyles = convertBlockStylesToCSS(blockStyles);
-
-        return (
-          <li
-            key={index}
-            className={clsx('flex items-center relative', menu.className)}
-            style={iconContainerStyles}
-            ref={menu.miniBasket ? miniBasketRef : null}
-          >
-            <SelectableIcon
-              blockId={menu.blockId}
-              blockType="icon-button"
-              blockLabel={menu.label}
-              isDesigner={isDesigner}
-              isSelected={selectedBlockId === menu.blockId}
+    <ul className="flex items-center space-x-3 lg:space-x-10">
+      {MenuItems.map((menu, index) => (
+        <li
+          key={index}
+          className={clsx('flex items-center relative', menu.className)}
+          ref={menu.miniBasket ? miniBasketRef : null}
+        >
+          {menu.action ? (
+            <button onClick={menu.action} data-testid={menu.dataTestId}>
+              <Icon name={menu.icon} size={24} />
+              {menu.badge}
+            </button>
+          ) : (
+            <Link
+              href={menu.url ?? '#'}
+              passHref={true}
+              onClick={(event) => {
+                if (menu.action) {
+                  event.preventDefault();
+                  menu.action();
+                }
+              }}
+              data-testid={menu.dataTestId}
             >
-              {iconElement}
-            </SelectableIcon>
-            {menu.miniBasket}
-          </li>
-        );
-      })}
+              <Icon name={menu.icon} size={24} />
+              {menu.badge}
+            </Link>
+          )}
+          {menu.miniBasket}
+        </li>
+      ))}
     </ul>
   );
 }
-
-/**
- * ActionMenu with HeaderIcons and HeaderMiniBasket Provider wrappers
- */
-interface ActionMenuProps {
-  initialIconSettings?: HeaderIconSettings;
-}
-
-export default function ActionMenu({ initialIconSettings }: ActionMenuProps) {
-  return (
-    <HeaderIconsProvider>
-      <HeaderMiniBasketProvider>
-        <ActionMenuContent initialIconSettings={initialIconSettings} />
-      </HeaderMiniBasketProvider>
-    </HeaderIconsProvider>
-  );
-}

package/app-template/src/views/header/band.tsx

@@ -6,12 +6,27 @@ import ActionMenu from './action-menu';
 import HeaderBandText from '@theme/widgets/header-band-text';
 import { LanguageSelect } from '@theme/components';
 import { CurrencySelect } from 'components/currency-select';
-import { HeaderIconSettings } from './server-settings-parser';
 
-interface HeaderBandProps {
-  initialIconSettings?: HeaderIconSettings;
-}
+export default function HeaderBand() {
+  return (
+    <div className="contents text-xs">
+      <div className="hidden justify-start sm:inline-flex sm:gap-x-5 sm:header-grid-area-band-l">
+        <LanguageSelect className="bg-transparent w-11 px-0 text-sm" />
+        <CurrencySelect className="bg-transparent w-12 px-0 text-sm" />
+      </div>
+
+      <div className="header-grid-area-nav bg-gray-100 h-auto p-3 sm:header-grid-area-band-m sm:h-9 sm:py-0">
+        <div className="text-center overflow-ellipsis line-clamp-2 h-full flex items-center justify-center">
+          <HeaderBandText />
+        </div>
+      </div>
 
-export default function HeaderBand({ initialIconSettings }: HeaderBandProps) {
-  return <ActionMenu initialIconSettings={initialIconSettings} />;
+      <div className="header-grid-area-main-r h-full pr-4 sm:header-grid-area-band-r sm:pr-0">
+        <div className="flex items-center justify-end h-full">
+          <UserMenu isMobile={false} />
+          <ActionMenu />
+        </div>
+      </div>
+    </div>
+  );
 }

package/app-template/src/views/header/index.tsx

@@ -1,128 +1,66 @@
 import 'server-only';
 
+import { Link } from '@theme/components';
+import clsx from 'clsx';
+import { ROUTES } from '@theme/routes';
 import { menuGenerator } from '@akinon/next/utils';
 
 import HeaderBand from './band';
 import MobileHamburgerButton from './mobile-hamburger-button';
 import MobileMenu from './mobile-menu';
 import Navbar from './navbar';
-import HeaderLogo from './header-logo';
-import HeaderLayoutRegistrar from './header-layout-registrar';
-import HeaderContent from './header-content';
 import { getMenu } from '@akinon/next/data/server';
-import { getThemeSettings } from '@theme/data/server/theme';
-import { getWidgetData } from '@akinon/next/data/server/widget';
-import {
-  parseServerIconSettings,
-  parseServerLogoSettings,
-  parseServerNavbarMenuSettings,
-  parseServerLayoutSettings,
-  parseServerSearchSettings,
-  parseServerLanguageSettings,
-  parseServerCurrencySettings,
-  parseServerTextSliderSettings,
-  parseServerAnnouncementSettings
-} from './server-settings-parser';
+import { Image } from '@akinon/next/components/image';
 
 export default async function Header() {
   const response = await getMenu({ depth: 3 });
   const menu = menuGenerator(response);
-  const themeSettings = await getThemeSettings();
-
-  // Fetch native widget settings server-side to avoid flash
-  const [
-    iconSettingsWidget,
-    logoSettingsWidget,
-    navSettingsWidget,
-    layoutSettingsWidget,
-    searchSettingsWidget,
-    languageSettingsWidget,
-    currencySettingsWidget,
-    textSliderSettingsWidget,
-    announcementSettingsWidget
-  ] = await Promise.all([
-    getWidgetData({ slug: 'header-icon-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-logo-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-nav-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-layout-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-search-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-language-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-currency-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-text-slider-settings-2' }).catch(() => null),
-    getWidgetData({ slug: 'header-announcement-bar-settings-2' }).catch(
-      () => null
-    )
-  ]);
-
-  const initialIconSettings = parseServerIconSettings(iconSettingsWidget);
-  const initialLogoSettings = parseServerLogoSettings(
-    logoSettingsWidget,
-    themeSettings.logo
-  );
-  const initialNavSettings = parseServerNavbarMenuSettings(navSettingsWidget);
-  const initialLayoutSettings = parseServerLayoutSettings(layoutSettingsWidget);
-  const initialSearchSettings = parseServerSearchSettings(searchSettingsWidget);
-  const initialLanguageSettings = parseServerLanguageSettings(
-    languageSettingsWidget
-  );
-  const initialCurrencySettings = parseServerCurrencySettings(
-    currencySettingsWidget
-  );
-  const initialTextSliderSettings = parseServerTextSliderSettings(
-    textSliderSettingsWidget
-  );
-  const initialAnnouncementSettings = parseServerAnnouncementSettings(
-    announcementSettingsWidget
-  );
-
-  // Use layout settings for sticky, fallback to theme settings
-  const isSticky = initialLayoutSettings.sticky;
-  const position = isSticky ? 'sticky' : 'relative';
-  const top = isSticky ? '0' : 'auto';
-  const zIndex = isSticky ? '40' : 'auto';
 
   return (
-    <header
-      className="relative"
-      style={{
-        position:
-          `var(--theme-header-position, ${position})` as React.CSSProperties['position'],
-        top: `var(--theme-header-top, ${top})`,
-        zIndex:
-          `var(--theme-header-z-index, ${zIndex})` as React.CSSProperties['zIndex'],
-        width: '100%',
-        backgroundColor: 'var(--theme-background, #fff)'
-      }}
-    >
-      {/* Register Layout section and provide layout context */}
-      <HeaderLayoutRegistrar
-        initialLayout={initialLayoutSettings.layout}
-        initialMenuPosition={initialLayoutSettings.menuPosition}
-        initialSearchPosition={initialLayoutSettings.searchPosition}
-        initialUtilityPosition={initialLayoutSettings.utilityPosition}
-        initialSticky={initialLayoutSettings.sticky}
-        initialBlockStyles={initialLayoutSettings.blockStyles}
+    <header className="relative">
+      <div
+        className={clsx([
+          'grid',
+          'mx-auto',
+          'header-m-template-cols',
+          'header-grid-template-areas',
+          'border-b',
+          'border-gray-100',
+          'before:hidden',
+          'before:absolute',
+          'before:top-0',
+          'before:left-0',
+          'before:w-full',
+          'before:bg-gray-100',
+          'before:h-9',
+          'before:z-[-1]',
+          'before:content-[""]',
+          'sm:grid-cols-3',
+          'sm:container',
+          'sm:before:block'
+        ])}
       >
-        <HeaderContent
-          logo={
-            <HeaderLogo
-              fallbackSrc={themeSettings.logo || '/logo.svg'}
-              initialSettings={initialLogoSettings}
-            />
-          }
-          navbar={
-            <Navbar menu={menu} initialNavSettings={initialNavSettings} />
-          }
-          icons={<HeaderBand initialIconSettings={initialIconSettings} />}
-          mobileHamburger={<MobileHamburgerButton />}
-          mobileMenu={<MobileMenu menu={menu} />}
-          initialSearchSettings={initialSearchSettings}
-          initialLanguageSettings={initialLanguageSettings}
-          initialCurrencySettings={initialCurrencySettings}
-          initialTextSliderSettings={initialTextSliderSettings}
-          initialAnnouncementSettings={initialAnnouncementSettings}
-        />
-      </HeaderLayoutRegistrar>
+        <HeaderBand />
+        <MobileHamburgerButton />
+        <Link
+          href={ROUTES.HOME}
+          passHref={true}
+          className="self-center block w-40 pl-3 header-grid-area-main-m sm:mt-9 sm:w-72 sm:justify-self-center sm:p-0"
+          aria-label="Homepage"
+        >
+          <Image
+            src="/logo.svg"
+            alt="Project Zero"
+            width={285}
+            height={27}
+            className="block w-full"
+            style={{ height: 'auto', width: '100%' }}
+            unoptimized
+          />
+        </Link>
+        <MobileMenu menu={menu} />
+        <Navbar menu={menu} />
+      </div>
     </header>
   );
 }