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

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

@@ -0,0 +1,348 @@
+'use client';
+
+/**
+ * Header Currency Section Registrar
+ *
+ * This component registers the "Currency Select" section for the header placeholder.
+ * The currency section is a native widget that can be added via "Add Section" button.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  PropsWithChildren
+} from 'react';
+
+// Constants
+export const HEADER_CURRENCY_PLACEHOLDER_ID = 'header';
+export const HEADER_CURRENCY_SECTION_ID = 'header-currency';
+export const HEADER_CURRENCY_WIDGET_SLUG = 'header-currency-settings-2';
+
+// Global flag to track if registration has been done
+declare global {
+  interface Window {
+    __headerCurrencyRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+interface ThemeSection {
+  id: string;
+  visible?: boolean;
+  properties?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+export interface HeaderCurrencyProperties {
+  showIcon?: boolean;
+  visible?: boolean;
+  labelFormat?: 'full' | 'symbol' | 'code';
+  /** Custom SVG icon content */
+  icon?: string;
+}
+
+interface HeaderCurrencyContextValue {
+  isDesigner: boolean;
+  isCurrencySectionSelected: boolean;
+  isSectionVisible: boolean;
+  properties: HeaderCurrencyProperties;
+  sectionStyles: Record<string, unknown>;
+}
+
+const HeaderCurrencyContext = createContext<HeaderCurrencyContextValue>({
+  isDesigner: false,
+  isCurrencySectionSelected: false,
+  isSectionVisible: false, // Not visible by default, must be added via Add Section
+  properties: { showIcon: true },
+  sectionStyles: {}
+});
+
+export const useHeaderCurrency = () => useContext(HeaderCurrencyContext);
+
+interface HeaderCurrencyRegistrarProps extends PropsWithChildren {
+  /**
+   * Initial settings from server-side parsing (to avoid flash)
+   */
+  initialSettings?: {
+    sectionStyles?: Record<string, unknown>;
+    properties?: HeaderCurrencyProperties;
+  };
+}
+
+/**
+ * HeaderCurrencyRegistrar
+ *
+ * Registers the Currency Select native section with Theme Editor.
+ * The section can be added via "Add Section" button in the header placeholder.
+ */
+export default function HeaderCurrencyRegistrar({
+  children,
+  initialSettings = {}
+}: HeaderCurrencyRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  const [sectionProperties, setSectionProperties] =
+    useState<HeaderCurrencyProperties>(
+      initialSettings.properties || { showIcon: true }
+    );
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
+    initialSettings.sectionStyles || {}
+  );
+  const [isCurrencySelected, setIsCurrencySelected] = useState(false);
+  // Initialize visibility from server-side settings - defaults to false if no settings
+  const [isSectionVisible, setIsSectionVisible] = useState(
+    initialSettings.properties?.visible ?? false
+  );
+  const hasRegisteredNativeWidget = useRef(false);
+
+  const hasInitialSettings = !!(
+    (initialSettings.sectionStyles &&
+      Object.keys(initialSettings.sectionStyles).length > 0) ||
+    (initialSettings.properties &&
+      Object.keys(initialSettings.properties).length > 0)
+  );
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  // Register native widget
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // Skip if already registered
+    if (
+      typeof window !== 'undefined' &&
+      window.__headerCurrencyRegistered &&
+      hasRegisteredNativeWidget.current
+    ) {
+      return;
+    }
+
+    // Send native widget registration to Theme Editor
+    // autoAdd: false means this section won't be auto-inserted when registered
+    // It must be manually added via "Add Section" button
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_CURRENCY_PLACEHOLDER_ID,
+      autoAdd: false,
+      section: {
+        id: HEADER_CURRENCY_SECTION_ID,
+        type: 'native',
+        label: 'Currency Select',
+        blocks: [],
+        properties: sectionProperties,
+        styles: sectionStyles
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    // Mark as registered
+    window.__headerCurrencyRegistered = true;
+    hasRegisteredNativeWidget.current = true;
+  }, [sectionProperties, sectionStyles]);
+
+  // Apply highlight style to currency container when section is selected
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const currencyContainer = document.querySelector(
+      '[data-section-id="header-currency"]'
+    );
+    if (!currencyContainer) return;
+
+    if (isCurrencySelected) {
+      (currencyContainer as HTMLElement).style.outline = '2px solid #3b82f6';
+      (currencyContainer as HTMLElement).style.outlineOffset = '-2px';
+    } else {
+      (currencyContainer as HTMLElement).style.outline = '';
+      (currencyContainer as HTMLElement).style.outlineOffset = '';
+    }
+
+    return () => {
+      (currencyContainer as HTMLElement).style.outline = '';
+      (currencyContainer as HTMLElement).style.outlineOffset = '';
+    };
+  }, [isCurrencySelected]);
+
+  // 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: ThemePlaceholder) => p.slug === HEADER_CURRENCY_PLACEHOLDER_ID
+        );
+
+        const currencySection = placeholder?.sections?.find(
+          (s: ThemeSection) => s.id === HEADER_CURRENCY_SECTION_ID
+        );
+
+        if (currencySection) {
+          // Check section visibility from properties first
+          // Section properties.visible determines if section should be shown
+          const sectionVisible = currencySection.properties?.visible;
+          if (sectionVisible !== undefined) {
+            // Handle responsive format { desktop: bool, mobile: bool } or direct boolean
+            const isVisible =
+              typeof sectionVisible === 'boolean'
+                ? sectionVisible
+                : sectionVisible?.desktop === true ||
+                  sectionVisible?.mobile === true;
+            setIsSectionVisible(isVisible);
+          } else if (typeof currencySection.visible === 'boolean') {
+            // Fallback to section.visible flag
+            setIsSectionVisible(currencySection.visible);
+          } else {
+            // Section exists in theme without explicit visibility, show it
+            setIsSectionVisible(true);
+          }
+
+          // In designer mode, always apply updates from Theme Editor
+          // In standalone mode, only apply if no initial settings (to avoid flash)
+          const shouldApplyUpdates = isDesigner || !hasInitialSettings;
+
+          if (shouldApplyUpdates) {
+            // Update section properties
+            if (currencySection.properties) {
+              setSectionProperties(
+                currencySection.properties as HeaderCurrencyProperties
+              );
+            }
+
+            // Update section styles
+            if (currencySection.styles) {
+              setSectionStyles(currencySection.styles);
+            }
+          }
+        } else if (placeholder) {
+          // Section not in placeholder, hide it
+          setIsSectionVisible(false);
+        }
+      }
+
+      // Handle property updates
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, key, value, properties } = data || {};
+
+        if (sectionId === HEADER_CURRENCY_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (properties) {
+            setSectionProperties(properties as HeaderCurrencyProperties);
+          }
+        }
+      }
+
+      // Handle style updates for the section
+      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
+        const { sectionId, key, value, styles } = data || {};
+
+        if (sectionId === HEADER_CURRENCY_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionStyles((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (styles) {
+            setSectionStyles(styles);
+          }
+        }
+      }
+
+      // Handle selection changes
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+
+        const isSelected =
+          placeholderId === HEADER_CURRENCY_PLACEHOLDER_ID &&
+          sectionId === HEADER_CURRENCY_SECTION_ID;
+
+        setIsCurrencySelected(isSelected);
+      }
+
+      // Handle block selection
+      if (type === 'SELECT_BLOCK') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_CURRENCY_SECTION_ID) {
+          setIsCurrencySelected(true);
+        } else {
+          setIsCurrencySelected(false);
+        }
+      }
+
+      // Handle deselection
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsCurrencySelected(false);
+      }
+
+      // Handle visibility toggle
+      if (type === 'TOGGLE_SECTION_VISIBILITY') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_CURRENCY_SECTION_ID) {
+          setIsSectionVisible((prev) => !prev);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [hasInitialSettings, isDesigner]);
+
+  // If no children, just return null (registration-only mode)
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <HeaderCurrencyContext.Provider
+      value={{
+        isDesigner,
+        isCurrencySectionSelected: isCurrencySelected,
+        isSectionVisible,
+        properties: sectionProperties,
+        sectionStyles
+      }}
+    >
+      {children}
+    </HeaderCurrencyContext.Provider>
+  );
+}

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

@@ -0,0 +1,262 @@
+'use client';
+
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+import { useHeaderLayout } from './header-layout-registrar';
+
+export const HEADER_ICONS_PLACEHOLDER_ID = 'header';
+export const HEADER_ICONS_SECTION_ID = 'header-icons';
+export const HEADER_ICONS_WIDGET_SLUG = 'header-icon-settings-2';
+
+export const HEADER_ICON_BLOCKS = {
+  SEARCH: {
+    id: 'header-icon-search',
+    type: 'icon-button',
+    label: 'Search Icon'
+  },
+  PROFILE: {
+    id: 'header-icon-profile',
+    type: 'icon-button',
+    label: 'Profile Icon'
+  },
+  CART: { id: 'header-icon-cart', type: 'icon-button', label: 'Cart Icon' }
+} as const;
+
+const BLOCK_META = [
+  HEADER_ICON_BLOCKS.SEARCH,
+  HEADER_ICON_BLOCKS.PROFILE,
+  HEADER_ICON_BLOCKS.CART
+];
+
+interface ThemeBlock {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+}
+
+interface ThemeSection {
+  id: string;
+  blocks: ThemeBlock[];
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+interface HeaderIconsContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
+  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
+}
+
+const HeaderIconsContext = createContext<HeaderIconsContextValue>({
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlockStyles: () => undefined,
+  getBlockProperties: () => undefined
+});
+
+export const HeaderIconsProvider = ({ children }: PropsWithChildren) => {
+  const designerState = useExternalDesigner({
+    placeholderId: HEADER_ICONS_PLACEHOLDER_ID
+  });
+
+  const { layout } = useHeaderLayout();
+  const previousLayoutRef = useRef(layout);
+
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
+    new Map()
+  );
+  const hasReceivedThemeStyles = useRef(false);
+  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
+  const hasRegisteredNativeWidget = useRef(false);
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: HEADER_ICONS_WIDGET_SLUG,
+    sectionId: HEADER_ICONS_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const getBlockWithStyles = useCallback(
+    (blockDef: typeof HEADER_ICON_BLOCKS[keyof typeof HEADER_ICON_BLOCKS]) => {
+      const existingBlock = themeBlocksRef.current.get(blockDef.id);
+      return {
+        id: blockDef.id,
+        type: blockDef.type,
+        label: blockDef.label,
+        properties: existingBlock?.properties || {},
+        styles: existingBlock?.styles || {}
+      };
+    },
+    []
+  );
+
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) return;
+
+    const blocks =
+      layout === 'two-row'
+        ? [
+            getBlockWithStyles(HEADER_ICON_BLOCKS.PROFILE),
+            getBlockWithStyles(HEADER_ICON_BLOCKS.CART)
+          ]
+        : [
+            getBlockWithStyles(HEADER_ICON_BLOCKS.SEARCH),
+            getBlockWithStyles(HEADER_ICON_BLOCKS.PROFILE),
+            getBlockWithStyles(HEADER_ICON_BLOCKS.CART)
+          ];
+
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_ICONS_PLACEHOLDER_ID,
+      section: {
+        id: HEADER_ICONS_SECTION_ID,
+        type: 'native',
+        label: 'Header Icons',
+        blocks
+      }
+    };
+
+    if (
+      hasRegisteredNativeWidget.current &&
+      previousLayoutRef.current !== layout
+    ) {
+      window.parent.postMessage(
+        {
+          type: 'UPDATE_SECTION_BLOCKS',
+          data: {
+            placeholderId: HEADER_ICONS_PLACEHOLDER_ID,
+            sectionId: HEADER_ICONS_SECTION_ID,
+            blocks
+          }
+        },
+        '*'
+      );
+      previousLayoutRef.current = layout;
+      return;
+    }
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    hasRegisteredNativeWidget.current = true;
+    previousLayoutRef.current = layout;
+  }, [layout, getBlockWithStyles]);
+
+  useEffect(() => {
+    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
+    if (hasReceivedThemeStyles.current) return;
+
+    const blockMap = new Map<string, ThemeBlock>();
+    widgetData.blocks.forEach((block) => {
+      blockMap.set(block.id, {
+        id: block.id,
+        type: block.type || 'icon-button',
+        label: block.label || block.id,
+        styles: block.styles,
+        properties: block.properties
+      });
+    });
+
+    if (blockMap.size > 0) {
+      setThemeBlocks(blockMap);
+      themeBlocksRef.current = blockMap;
+    }
+  }, [isDesignerChecked, isDesigner, widgetData.isLoading, widgetData.blocks]);
+
+  const indexBlocks = useCallback(
+    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
+      blocks.forEach((block) => {
+        map.set(block.id, block);
+      });
+    },
+    []
+  );
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: ThemePlaceholder) => p.slug === HEADER_ICONS_PLACEHOLDER_ID
+        );
+
+        if (placeholder) {
+          const blockMap = new Map<string, ThemeBlock>();
+
+          placeholder.sections.forEach((section: ThemeSection) => {
+            indexBlocks(section.blocks, blockMap);
+          });
+
+          if (blockMap.size > 0) {
+            hasReceivedThemeStyles.current = true;
+            setThemeBlocks(blockMap);
+            themeBlocksRef.current = blockMap;
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [indexBlocks]);
+
+  const getBlockStyles = useCallback(
+    (blockId: string) => themeBlocks.get(blockId)?.styles,
+    [themeBlocks]
+  );
+
+  const getBlockProperties = useCallback(
+    (blockId: string) => themeBlocks.get(blockId)?.properties,
+    [themeBlocks]
+  );
+
+  return (
+    <HeaderIconsContext.Provider
+      value={{
+        ...designerState,
+        getBlockStyles,
+        getBlockProperties
+      }}
+    >
+      {children}
+    </HeaderIconsContext.Provider>
+  );
+};
+
+export const useHeaderIconsDesigner = () => useContext(HeaderIconsContext);