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

package/app-template/src/views/header/header-layout-registrar.tsx

@@ -0,0 +1,658 @@
+'use client';
+
+/**
+ * Header Layout Section Registrar
+ *
+ * This component registers the "Layout" section for the header placeholder.
+ * It's a minimal client component that only handles native widget registration
+ * and applies selection highlight to the header when Layout section is selected.
+ *
+ * When the Layout section is selected in Theme Editor, the entire header
+ * gets highlighted.
+ *
+ * It also provides the current layout type to child components via context.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  ReactNode
+} from 'react';
+
+// Constants
+export const HEADER_LAYOUT_PLACEHOLDER_ID = 'header';
+export const HEADER_LAYOUT_SECTION_ID = 'header-layout';
+export const HEADER_LAYOUT_WIDGET_SLUG = 'header-layout-settings-2';
+
+// Block definitions for row containers
+export const HEADER_LAYOUT_BLOCKS = {
+  UTILITY_ROW: {
+    id: 'header-utility-row',
+    type: 'container',
+    label: 'Utility Row'
+  },
+  MAIN_ROW: {
+    id: 'header-main-row',
+    type: 'container',
+    label: 'Main Row'
+  },
+  TOP_ROW: {
+    id: 'header-top-row',
+    type: 'container',
+    label: 'Top Row'
+  },
+  BOTTOM_ROW: {
+    id: 'header-bottom-row',
+    type: 'container',
+    label: 'Bottom Row'
+  }
+} as const;
+
+// Layout types
+export type HeaderLayoutType = 'default' | 'two-row';
+
+// Global flag to track if registration has been done (survives component remount)
+declare global {
+  interface Window {
+    __headerLayoutRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+export type MenuPositionType = 'left' | 'center' | 'right';
+export type SearchPositionType = 'left' | 'center' | 'right';
+export type UtilityPositionType = 'left' | 'right';
+
+export interface HeaderLayoutProperties {
+  layout?: HeaderLayoutType | Record<string, string>;
+  menuPosition?: MenuPositionType | Record<string, string>;
+  searchPosition?: SearchPositionType | Record<string, string>;
+  utilityPosition?: UtilityPositionType | Record<string, string>;
+  sticky?: boolean | string | Record<string, string>;
+}
+
+// Block styles interface
+interface BlockStyles {
+  [key: string]: unknown;
+}
+
+// Context for sharing layout type with other components
+interface HeaderLayoutContextValue {
+  layout: HeaderLayoutType;
+  menuPosition: MenuPositionType;
+  searchPosition: SearchPositionType;
+  utilityPosition: UtilityPositionType;
+  sticky: boolean;
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => BlockStyles | undefined;
+}
+
+const HeaderLayoutContext = createContext<HeaderLayoutContextValue>({
+  layout: 'default',
+  menuPosition: 'center',
+  searchPosition: 'center',
+  utilityPosition: 'right',
+  sticky: true,
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlockStyles: () => undefined
+});
+
+export const useHeaderLayout = () => useContext(HeaderLayoutContext);
+
+/**
+ * HeaderLayoutRegistrar
+ *
+ * Registers the Layout native section with Theme Editor so it appears in the sidebar,
+ * handles header highlight when Layout section is selected, and provides
+ * layout type to children via context.
+ */
+interface HeaderLayoutRegistrarProps {
+  children?: ReactNode;
+  /** Initial layout settings from server to avoid layout flash */
+  initialLayout?: HeaderLayoutType;
+  initialMenuPosition?: MenuPositionType;
+  initialSearchPosition?: SearchPositionType;
+  initialUtilityPosition?: UtilityPositionType;
+  initialSticky?: boolean;
+  /** Initial block styles from server (for standalone mode) */
+  initialBlockStyles?: Record<string, Record<string, string>>;
+}
+
+export default function HeaderLayoutRegistrar({
+  children,
+  initialLayout = 'default',
+  initialMenuPosition = 'center',
+  initialSearchPosition = 'center',
+  initialUtilityPosition = 'right',
+  initialSticky = true,
+  initialBlockStyles = {}
+}: HeaderLayoutRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  // Initialize with server-provided values to avoid flash
+  const [sectionProperties, setSectionProperties] =
+    useState<HeaderLayoutProperties>({
+      layout: initialLayout,
+      menuPosition: initialMenuPosition,
+      searchPosition: initialSearchPosition,
+      utilityPosition: initialUtilityPosition,
+      sticky: initialSticky
+    });
+  const [isLayoutSelected, setIsLayoutSelected] = useState(false);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  // Initialize block styles from server-provided values
+  const [blockStyles, setBlockStyles] = useState<Map<string, BlockStyles>>(
+    () => {
+      const initialMap = new Map<string, BlockStyles>();
+      Object.entries(initialBlockStyles).forEach(([blockId, styles]) => {
+        initialMap.set(blockId, styles);
+      });
+      return initialMap;
+    }
+  );
+  const blockStylesRef = useRef<Map<string, BlockStyles>>(
+    (() => {
+      const initialMap = new Map<string, BlockStyles>();
+      Object.entries(initialBlockStyles).forEach(([blockId, styles]) => {
+        initialMap.set(blockId, styles);
+      });
+      return initialMap;
+    })()
+  );
+  const hasReceivedThemeProps = useRef(false);
+  const previousLayoutRef = useRef<HeaderLayoutType | null>(initialLayout);
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  // Helper to get block styles
+  const getBlockStyles = useCallback(
+    (blockId: string) => blockStyles.get(blockId),
+    [blockStyles]
+  );
+
+  // Helper to get blocks based on current layout
+  const getBlocksForLayout = useCallback((layout: HeaderLayoutType) => {
+    // UTILITY_ROW is always included - it's used for Language/Currency selects
+    const utilityRowBlock = {
+      id: HEADER_LAYOUT_BLOCKS.UTILITY_ROW.id,
+      type: HEADER_LAYOUT_BLOCKS.UTILITY_ROW.type,
+      label: HEADER_LAYOUT_BLOCKS.UTILITY_ROW.label
+    };
+
+    if (layout === 'two-row') {
+      return [
+        utilityRowBlock,
+        {
+          id: HEADER_LAYOUT_BLOCKS.TOP_ROW.id,
+          type: HEADER_LAYOUT_BLOCKS.TOP_ROW.type,
+          label: HEADER_LAYOUT_BLOCKS.TOP_ROW.label
+        },
+        {
+          id: HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.id,
+          type: HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.type,
+          label: HEADER_LAYOUT_BLOCKS.BOTTOM_ROW.label
+        }
+      ];
+    }
+    // Default layout - utility row + single main row
+    return [
+      utilityRowBlock,
+      {
+        id: HEADER_LAYOUT_BLOCKS.MAIN_ROW.id,
+        type: HEADER_LAYOUT_BLOCKS.MAIN_ROW.type,
+        label: HEADER_LAYOUT_BLOCKS.MAIN_ROW.label
+      }
+    ];
+  }, []);
+
+  // Register native widget with Theme Editor
+  // Properties are managed by Theme Editor, not sent with registration
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    const blocks = getBlocksForLayout(initialLayout);
+
+    // If already registered, just update blocks (in case layout changed)
+    if (typeof window !== 'undefined' && window.__headerLayoutRegistered) {
+      window.parent.postMessage(
+        {
+          type: 'UPDATE_SECTION_BLOCKS',
+          data: {
+            placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
+            sectionId: HEADER_LAYOUT_SECTION_ID,
+            blocks
+          }
+        },
+        '*'
+      );
+      return;
+    }
+
+    // Send native widget registration to Theme Editor
+    // Include blocks for row containers
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
+      section: {
+        id: HEADER_LAYOUT_SECTION_ID,
+        type: 'native',
+        label: 'Layout',
+        blocks
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    // Mark as registered in window to survive component remount
+    window.__headerLayoutRegistered = true;
+  }, [initialLayout, getBlocksForLayout]);
+
+  // Apply highlight style to header when Layout section is selected
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const headerElement = document.querySelector('header');
+    if (!headerElement) return;
+
+    if (isLayoutSelected) {
+      // Apply selection highlight
+      headerElement.style.outline = '2px solid #3b82f6';
+      headerElement.style.outlineOffset = '-2px';
+    } else {
+      // Remove selection highlight
+      headerElement.style.outline = '';
+      headerElement.style.outlineOffset = '';
+    }
+
+    return () => {
+      // Cleanup on unmount
+      headerElement.style.outline = '';
+      headerElement.style.outlineOffset = '';
+    };
+  }, [isLayoutSelected]);
+
+  // Listen for theme updates and selection changes from Theme Editor
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle theme updates
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: { slug: string }) => p.slug === HEADER_LAYOUT_PLACEHOLDER_ID
+        );
+
+        const layoutSection = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === HEADER_LAYOUT_SECTION_ID
+        );
+
+        if (layoutSection) {
+          hasReceivedThemeProps.current = true;
+          if (layoutSection.properties) {
+            setSectionProperties(layoutSection.properties);
+          }
+
+          // Extract block styles from theme update
+          if (layoutSection.blocks && Array.isArray(layoutSection.blocks)) {
+            setBlockStyles((prev) => {
+              const newMap = new Map(prev);
+              layoutSection.blocks.forEach(
+                (block: { id: string; styles?: Record<string, unknown> }) => {
+                  if (block.id && block.styles) {
+                    // Convert responsive styles to flat styles for current breakpoint
+                    // Block styles format: { 'background-color': { desktop: '#ff0000', mobile: '#00ff00' } }
+                    const flatStyles: Record<string, string> = {};
+                    Object.entries(block.styles).forEach(([key, value]) => {
+                      if (typeof value === 'object' && value !== null) {
+                        // Get desktop value first, fallback to any available value
+                        const responsiveValue = value as Record<string, string>;
+                        flatStyles[key] =
+                          responsiveValue.desktop ||
+                          responsiveValue.mobile ||
+                          Object.values(responsiveValue)[0] ||
+                          '';
+                      } else if (typeof value === 'string') {
+                        flatStyles[key] = value;
+                      }
+                    });
+                    if (Object.keys(flatStyles).length > 0) {
+                      newMap.set(block.id, flatStyles);
+                    }
+                  }
+                }
+              );
+              blockStylesRef.current = newMap;
+              return newMap;
+            });
+          }
+        }
+      }
+
+      // Handle property updates (when user changes dropdown in Theme Editor)
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, placeholderId, key, value, properties } = data || {};
+
+        // Check if this is for our section
+        if (
+          sectionId === HEADER_LAYOUT_SECTION_ID ||
+          placeholderId === HEADER_LAYOUT_PLACEHOLDER_ID
+        ) {
+          // If we get individual key/value
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          // If we get full properties object
+          if (properties) {
+            setSectionProperties(properties);
+          }
+        }
+      }
+
+      // Handle block style updates
+      if (type === 'UPDATE_BLOCK_STYLE') {
+        const { sectionId, blockId, key, value, styles } = data || {};
+
+        if (sectionId === HEADER_LAYOUT_SECTION_ID && blockId) {
+          setBlockStyles((prev) => {
+            const newMap = new Map(prev);
+            const existingStyles = newMap.get(blockId) || {};
+
+            if (key && value !== undefined) {
+              newMap.set(blockId, { ...existingStyles, [key]: value });
+            }
+            if (styles) {
+              newMap.set(blockId, { ...existingStyles, ...styles });
+            }
+
+            blockStylesRef.current = newMap;
+            return newMap;
+          });
+        }
+      }
+
+      // Handle selection changes
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+
+        // Check if Layout section is selected
+        const isSelected =
+          placeholderId === HEADER_LAYOUT_PLACEHOLDER_ID &&
+          sectionId === HEADER_LAYOUT_SECTION_ID;
+
+        setIsLayoutSelected(isSelected);
+        if (!isSelected) {
+          setSelectedBlockId(null);
+        }
+      }
+
+      // Handle block selection
+      if (type === 'SELECT_BLOCK') {
+        const { sectionId, blockId } = data || {};
+        if (sectionId === HEADER_LAYOUT_SECTION_ID) {
+          setSelectedBlockId(blockId || null);
+          setIsLayoutSelected(true);
+        } else {
+          setIsLayoutSelected(false);
+          setSelectedBlockId(null);
+        }
+      }
+
+      // Handle deselection
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsLayoutSelected(false);
+        setSelectedBlockId(null);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Helper to extract layout value from potentially responsive property
+  const extractLayoutValue = (layoutProp: unknown): HeaderLayoutType => {
+    if (!layoutProp) return 'default';
+
+    // If it's a direct string value
+    if (typeof layoutProp === 'string') {
+      return layoutProp as HeaderLayoutType;
+    }
+
+    // If it's a responsive object (e.g., { desktop: 'two-row' })
+    if (typeof layoutProp === 'object' && layoutProp !== null) {
+      const obj = layoutProp as Record<string, string>;
+      // Try desktop first, then mobile, then any first value
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'default') as HeaderLayoutType;
+    }
+
+    return 'default';
+  };
+
+  // Get the current layout type
+  const currentLayout: HeaderLayoutType = extractLayoutValue(
+    sectionProperties.layout
+  );
+
+  // Helper to extract menu position value from potentially responsive property
+  const extractMenuPositionValue = (menuPosProp: unknown): MenuPositionType => {
+    if (!menuPosProp) return 'center';
+
+    if (typeof menuPosProp === 'string') {
+      return menuPosProp as MenuPositionType;
+    }
+
+    if (typeof menuPosProp === 'object' && menuPosProp !== null) {
+      const obj = menuPosProp as Record<string, string>;
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'center') as MenuPositionType;
+    }
+
+    return 'center';
+  };
+
+  // Get the current menu position
+  const currentMenuPosition: MenuPositionType = extractMenuPositionValue(
+    sectionProperties.menuPosition
+  );
+
+  // Helper to extract search position value from potentially responsive property
+  const extractSearchPositionValue = (
+    searchPosProp: unknown
+  ): SearchPositionType => {
+    if (!searchPosProp) return 'center';
+
+    if (typeof searchPosProp === 'string') {
+      return searchPosProp as SearchPositionType;
+    }
+
+    if (typeof searchPosProp === 'object' && searchPosProp !== null) {
+      const obj = searchPosProp as Record<string, string>;
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'center') as SearchPositionType;
+    }
+
+    return 'center';
+  };
+
+  // Get the current search position
+  const currentSearchPosition: SearchPositionType = extractSearchPositionValue(
+    sectionProperties.searchPosition
+  );
+
+  // Helper to extract utility position value from potentially responsive property
+  const extractUtilityPositionValue = (
+    utilityPosProp: unknown
+  ): UtilityPositionType => {
+    if (!utilityPosProp) return 'right';
+
+    if (typeof utilityPosProp === 'string') {
+      return utilityPosProp as UtilityPositionType;
+    }
+
+    if (typeof utilityPosProp === 'object' && utilityPosProp !== null) {
+      const obj = utilityPosProp as Record<string, string>;
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'right') as UtilityPositionType;
+    }
+
+    return 'right';
+  };
+
+  // Get the current utility position (Language/Currency selects position)
+  const currentUtilityPosition: UtilityPositionType =
+    extractUtilityPositionValue(sectionProperties.utilityPosition);
+
+  // Helper to extract sticky value from potentially responsive property
+  const extractStickyValue = (stickyProp: unknown): boolean => {
+    if (stickyProp === undefined || stickyProp === null) return true;
+
+    if (typeof stickyProp === 'boolean') {
+      return stickyProp;
+    }
+
+    if (typeof stickyProp === 'string') {
+      return stickyProp === 'true';
+    }
+
+    if (typeof stickyProp === 'object' && stickyProp !== null) {
+      const obj = stickyProp as Record<string, string | boolean>;
+      const value = obj.desktop ?? obj.mobile ?? Object.values(obj)[0];
+      return value === 'true' || value === true;
+    }
+
+    return true;
+  };
+
+  // Get the current sticky value
+  const currentSticky: boolean = extractStickyValue(sectionProperties.sticky);
+
+  // Apply sticky styles to header element when sticky value changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const headerElement = document.querySelector('header');
+    if (!headerElement) return;
+
+    if (currentSticky) {
+      headerElement.style.position = 'sticky';
+      headerElement.style.top = '0';
+      headerElement.style.zIndex = '40';
+    } else {
+      headerElement.style.position = 'relative';
+      headerElement.style.top = 'auto';
+      headerElement.style.zIndex = 'auto';
+    }
+  }, [currentSticky]);
+
+  // Handle layout changes - unregister search section when switching to default
+  // and update blocks in Theme Editor
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    const previousLayout = previousLayoutRef.current;
+
+    // If layout changed from two-row to default, remove search section
+    if (previousLayout === 'two-row' && currentLayout === 'default') {
+      window.parent.postMessage(
+        {
+          type: 'UNREGISTER_NATIVE_SECTION',
+          data: {
+            placeholderId: 'header',
+            sectionId: 'header-search'
+          }
+        },
+        '*'
+      );
+      // Reset registration flags
+      if (typeof window !== 'undefined') {
+        window.__headerSearchRegistered = false;
+      }
+    }
+
+    // Update blocks when layout changes
+    if (previousLayout !== currentLayout && previousLayout !== null) {
+      window.parent.postMessage(
+        {
+          type: 'UPDATE_SECTION_BLOCKS',
+          data: {
+            placeholderId: HEADER_LAYOUT_PLACEHOLDER_ID,
+            sectionId: HEADER_LAYOUT_SECTION_ID,
+            blocks: getBlocksForLayout(currentLayout)
+          }
+        },
+        '*'
+      );
+    }
+
+    // Update previous layout ref
+    previousLayoutRef.current = currentLayout;
+  }, [currentLayout, getBlocksForLayout]);
+
+  // If no children, just return null (registration-only mode)
+  if (!children) {
+    return null;
+  }
+
+  // Provide layout context to children
+  return (
+    <HeaderLayoutContext.Provider
+      value={{
+        layout: currentLayout,
+        menuPosition: currentMenuPosition,
+        searchPosition: currentSearchPosition,
+        utilityPosition: currentUtilityPosition,
+        sticky: currentSticky,
+        isDesigner,
+        selectedBlockId,
+        getBlockStyles
+      }}
+    >
+      {children}
+    </HeaderLayoutContext.Provider>
+  );
+}