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

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { ReactNode, useMemo, useRef, useCallback } from 'react';
+import { ReactNode, useMemo, useRef, useCallback, CSSProperties } from 'react';
+import { useRouter } from '@akinon/next/hooks';
 import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
@@ -14,8 +15,104 @@ 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;
@@ -24,10 +121,49 @@ interface MenuItem {
   badge?: ReactNode;
   miniBasket?: ReactNode;
   dataTestId?: string;
+  blockId: string;
+}
+
+interface ActionMenuContentProps {
+  initialIconSettings?: HeaderIconSettings;
 }
 
-export default function ActionMenu() {
+/**
+ * Inner ActionMenu component that uses the designer context
+ */
+function ActionMenuContent({ initialIconSettings }: ActionMenuContentProps) {
+  const router = useRouter();
   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(
@@ -46,75 +182,171 @@ export default function ActionMenu() {
 
   const MenuItems: MenuItem[] = [
     {
+      id: 'search',
+      blockId: HEADER_ICON_BLOCKS.SEARCH.id,
       label: 'Search',
       action: () => {
-        dispatch(openSearch());
+        if (!isDesigner) dispatch(openSearch());
       },
       icon: 'search',
-      className: 'sm:hidden',
       dataTestId: 'header-search'
     },
     {
-      label: 'Favourite Products',
-      url: ROUTES.ACCOUNT_WISHLIST,
-      icon: 'heart-stroke',
-      dataTestId: 'header-favourite'
+      id: 'profile',
+      blockId: HEADER_ICON_BLOCKS.PROFILE.id,
+      label: 'Profile',
+      url: `${status === 'authenticated' ? ROUTES.ACCOUNT : ROUTES.AUTH}`,
+      icon: 'person',
+      dataTestId: 'header-profile'
     },
     {
+      id: 'cart',
+      blockId: HEADER_ICON_BLOCKS.CART.id,
       label: 'Basket',
-      action() {
-        dispatch(toggleMiniBasket());
+      action: () => {
+        if (shouldShowMiniBasket) {
+          dispatch(toggleMiniBasket());
+        } else if (!isDesigner) {
+          // Only navigate to basket page when not in designer mode
+          router.push(ROUTES.BASKET);
+        }
       },
       icon: 'cart',
       dataTestId: 'header-basket',
+      className: 'pl-2.5',
       badge: (
         <Badge
           className={clsx(
-            'w-4',
-            totalQuantity === 0
-              ? 'bg-primary text-gray-500'
-              : 'bg-secondary-500 text-white'
+            'w-4 bg-primary text-white -bottom-1 -right-1 top-auto'
           )}
         >
           <span data-testid="header-basket-count">{totalQuantity}</span>
         </Badge>
       ),
-      miniBasket: <MiniBasket />
+      miniBasket: shouldShowMiniBasket ? <MiniBasket /> : null
     }
   ];
 
+  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 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}
+    <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}
             >
-              <Icon name={menu.icon} size={24} />
-              {menu.badge}
-            </Link>
-          )}
-          {menu.miniBasket}
-        </li>
-      ))}
+              {iconElement}
+            </SelectableIcon>
+            {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,27 +6,12 @@ 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';
 
-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>
+interface HeaderBandProps {
+  initialIconSettings?: HeaderIconSettings;
+}
 
-      <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>
-  );
+export default function HeaderBand({ initialIconSettings }: HeaderBandProps) {
+  return <ActionMenu initialIconSettings={initialIconSettings} />;
 }

package/app-template/src/views/header/designer-context.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+/**
+ * Header Designer Context
+ *
+ * Provides a lightweight native-widget bridge so Theme Editor can
+ * select header blocks without rewriting the header as a widget.
+ */
+
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+
+type BlockDefinition = {
+  id: string;
+  type: string;
+  label: string;
+  properties?: Record<string, unknown>;
+};
+
+type ThemeBlock = {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+};
+
+type ThemeSection = {
+  id: string;
+  blocks?: ThemeBlock[];
+};
+
+type ThemePlaceholder = {
+  slug: string;
+  sections?: ThemeSection[];
+};
+
+interface HeaderDesignerContextValue {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
+  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
+}
+
+export const HEADER_PLACEHOLDER_ID = 'header';
+export const HEADER_SECTION_ID = 'header-structure';
+
+// Block definitions used by WithDesignerFeatures wrappers
+const headerBlocks = {
+  CONTAINER: {
+    id: 'header-container',
+    type: 'group',
+    label: 'Header Container'
+  },
+  LOGO: {
+    id: 'header-logo-image',
+    type: 'image',
+    label: 'Logo'
+  },
+  NAVBAR: {
+    id: 'header-navbar',
+    type: 'group',
+    label: 'Navigation Bar'
+  },
+  NAV_ITEM: {
+    id: 'header-nav-menu-item',
+    type: 'text',
+    label: 'Navigation Item'
+  },
+  SEARCH: {
+    id: 'header-icon-search',
+    type: 'icon-button',
+    label: 'Search Icon',
+    properties: {
+      icon: 'search',
+      iconSize: '20'
+    }
+  },
+  USER_MENU: {
+    id: 'header-icon-profile',
+    type: 'icon-button',
+    label: 'Profile Icon',
+    properties: {
+      icon: 'person',
+      iconSize: '20'
+    }
+  },
+  MINI_BASKET: {
+    id: 'header-icon-cart',
+    type: 'icon-button',
+    label: 'Cart Icon',
+    properties: {
+      icon: 'cart',
+      iconSize: '20'
+    }
+  },
+  MOBILE_MENU_BUTTON: {
+    id: 'header-mobile-menu-button',
+    type: 'icon-button',
+    label: 'Mobile Menu Button',
+    properties: {
+      icon: 'hamburger',
+      iconSize: '18'
+    }
+  }
+} satisfies Record<string, BlockDefinition>;
+
+export const HEADER_BLOCKS = headerBlocks;
+
+type HeaderBlockDefinition =
+  (typeof HEADER_BLOCKS)[keyof typeof HEADER_BLOCKS];
+type HeaderBlockId = HeaderBlockDefinition['id'];
+
+const blockLookup = new Map<HeaderBlockId, BlockDefinition>(
+  Object.values(HEADER_BLOCKS).map((block) => [block.id, block as BlockDefinition])
+);
+
+const HeaderDesignerContext = createContext<HeaderDesignerContextValue>({
+  isDesigner: false,
+  selectedSectionId: null,
+  selectedBlockId: null,
+  getBlockStyles: () => undefined,
+  getBlockProperties: () => undefined
+});
+
+export function HeaderDesignerProvider({
+  children
+}: PropsWithChildren) {
+  const designerState = useExternalDesigner({
+    placeholderId: HEADER_PLACEHOLDER_ID
+  });
+
+  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
+    new Map()
+  );
+  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
+
+  const registerNativeWidget = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const isInIframe = window.self !== window.top;
+    if (!isInIframe || !window.parent) return;
+
+    const sectionBlocks = Object.values(HEADER_BLOCKS).map((blockDef) => {
+      const block = blockDef as BlockDefinition;
+      const storedBlock = themeBlocksRef.current.get(block.id);
+      return {
+        id: block.id,
+        type: block.type,
+        label: block.label,
+        properties: storedBlock?.properties ?? block.properties ?? {},
+        styles: storedBlock?.styles ?? {}
+      };
+    });
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: {
+          widgets: [
+            {
+              placeholderId: HEADER_PLACEHOLDER_ID,
+              section: {
+                id: HEADER_SECTION_ID,
+                type: 'native',
+                label: 'Header Layout',
+                blocks: sectionBlocks
+              }
+            }
+          ]
+        }
+      },
+      '*'
+    );
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    registerNativeWidget();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only register once
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = (data.theme.placeholders as ThemePlaceholder[]).find(
+          (p) => p.slug === HEADER_PLACEHOLDER_ID
+        );
+
+        const headerSection = placeholder?.sections?.find(
+          (section) => section.id === HEADER_SECTION_ID
+        );
+
+        if (headerSection?.blocks) {
+          const incoming = new Map<string, ThemeBlock>();
+          headerSection.blocks.forEach((block) => {
+            incoming.set(block.id, block);
+          });
+
+          const merged = new Map(themeBlocksRef.current);
+          incoming.forEach((block, id) => {
+            merged.set(id, block);
+          });
+
+          themeBlocksRef.current = merged;
+          setThemeBlocks(merged);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  const getBlockStyles = useCallback(
+    (blockId: string) => {
+      return themeBlocks.get(blockId)?.styles;
+    },
+    [themeBlocks]
+  );
+
+  const getBlockProperties = useCallback(
+    (blockId: string) => {
+      const block = themeBlocks.get(blockId);
+      if (block?.properties) {
+        return block.properties;
+      }
+      return blockLookup.get(blockId as HeaderBlockId)?.properties;
+    },
+    [themeBlocks]
+  );
+
+  return (
+    <HeaderDesignerContext.Provider
+      value={{
+        ...designerState,
+        getBlockStyles,
+        getBlockProperties
+      }}
+    >
+      {children}
+    </HeaderDesignerContext.Provider>
+  );
+}
+
+export const useHeaderDesigner = () => useContext(HeaderDesignerContext);