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

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

@@ -1,348 +0,0 @@
-'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

@@ -1,262 +0,0 @@
-'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);