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

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

@@ -0,0 +1,511 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  PropsWithChildren
+} from 'react';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+import { useHeaderLayout } from './header-layout-registrar';
+
+export const HEADER_SEARCH_PLACEHOLDER_ID = 'header';
+export const HEADER_SEARCH_SECTION_ID = 'header-search';
+export const HEADER_SEARCH_WIDGET_SLUG = 'header-search-settings-2';
+
+export const HEADER_SEARCH_BLOCKS = {
+  ICON: {
+    id: 'header-search-icon',
+    type: 'icon-button',
+    label: 'Search Icon'
+  }
+} as const;
+
+const BLOCK_META = [HEADER_SEARCH_BLOCKS.ICON];
+
+declare global {
+  interface Window {
+    __headerSearchRegistered?: boolean;
+    __headerSearchCurrentLayout?: string;
+  }
+}
+
+interface ThemeBlock {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+}
+
+interface ThemeSection {
+  id: string;
+  blocks: ThemeBlock[];
+  visible?: boolean;
+  properties?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+export interface HeaderSearchProperties {
+  placeholder?: string;
+  visible?: boolean;
+  width?: string | number | Record<string, string | number>;
+}
+
+interface HeaderSearchContextValue {
+  isDesigner: boolean;
+  isSearchSectionSelected: boolean;
+  isSectionVisible: boolean;
+  properties: HeaderSearchProperties;
+  sectionStyles: Record<string, unknown>;
+  selectedBlockId: string | null;
+  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
+  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
+}
+
+const HeaderSearchContext = createContext<HeaderSearchContextValue>({
+  isDesigner: false,
+  isSearchSectionSelected: false,
+  isSectionVisible: true,
+  properties: {},
+  sectionStyles: {},
+  selectedBlockId: null,
+  getBlockStyles: () => undefined,
+  getBlockProperties: () => undefined
+});
+
+export const useHeaderSearch = () => useContext(HeaderSearchContext);
+
+export interface InitialSearchSettings {
+  sectionStyles?: {
+    width?: string | number;
+    maxWidth?: string;
+    height?: string | number;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+  };
+  iconStyles?: {
+    color?: string;
+    iconSize?: number;
+  };
+  properties?: {
+    placeholder?: string;
+    visible?: boolean;
+    width?: string | number;
+  };
+}
+
+interface HeaderSearchRegistrarProps extends PropsWithChildren {
+  autoRegister?: boolean;
+  initialSettings?: InitialSearchSettings;
+}
+
+export default function HeaderSearchRegistrar({
+  children,
+  autoRegister = false,
+  initialSettings = {}
+}: HeaderSearchRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+  const [sectionProperties, setSectionProperties] =
+    useState<HeaderSearchProperties>(initialSettings.properties || {});
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
+    initialSettings.sectionStyles || {}
+  );
+  const [isSearchSelected, setIsSearchSelected] = useState(false);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+  const [isSectionVisible, setIsSectionVisible] = useState(true);
+  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
+    () => {
+      const initialMap = new Map<string, ThemeBlock>();
+      if (
+        initialSettings.iconStyles &&
+        Object.keys(initialSettings.iconStyles).length > 0
+      ) {
+        initialMap.set(HEADER_SEARCH_BLOCKS.ICON.id, {
+          id: HEADER_SEARCH_BLOCKS.ICON.id,
+          type: HEADER_SEARCH_BLOCKS.ICON.type,
+          label: HEADER_SEARCH_BLOCKS.ICON.label,
+          styles: initialSettings.iconStyles,
+          properties: {}
+        });
+      }
+      return initialMap;
+    }
+  );
+  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(
+    (() => {
+      const initialMap = new Map<string, ThemeBlock>();
+      if (
+        initialSettings.iconStyles &&
+        Object.keys(initialSettings.iconStyles).length > 0
+      ) {
+        initialMap.set(HEADER_SEARCH_BLOCKS.ICON.id, {
+          id: HEADER_SEARCH_BLOCKS.ICON.id,
+          type: HEADER_SEARCH_BLOCKS.ICON.type,
+          label: HEADER_SEARCH_BLOCKS.ICON.label,
+          styles: initialSettings.iconStyles,
+          properties: {}
+        });
+      }
+      return initialMap;
+    })()
+  );
+  const hasRegisteredNativeWidget = useRef(false);
+
+  const hasInitialSettings = !!(
+    (initialSettings.sectionStyles &&
+      Object.keys(initialSettings.sectionStyles).length > 0) ||
+    (initialSettings.iconStyles &&
+      Object.keys(initialSettings.iconStyles).length > 0) ||
+    (initialSettings.properties &&
+      Object.keys(initialSettings.properties).length > 0)
+  );
+  const hasReceivedThemeProps = useRef(false);
+
+  const { layout } = useHeaderLayout();
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: HEADER_SEARCH_WIDGET_SLUG,
+    sectionId: HEADER_SEARCH_SECTION_ID,
+    skip: !isDesignerChecked || !isDesigner || hasInitialSettings,
+    blockMeta: BLOCK_META
+  });
+
+  const getBlockWithStyles = useCallback(
+    (
+      blockDef: typeof HEADER_SEARCH_BLOCKS[keyof typeof HEADER_SEARCH_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 previousLayout = window.__headerSearchCurrentLayout;
+    window.__headerSearchCurrentLayout = layout;
+
+    const shouldRegister = autoRegister || layout === 'two-row';
+
+    if (previousLayout === 'two-row' && layout === 'default' && !autoRegister) {
+      window.parent.postMessage(
+        {
+          type: 'UNREGISTER_NATIVE_SECTION',
+          data: {
+            placeholderId: HEADER_SEARCH_PLACEHOLDER_ID,
+            sectionId: HEADER_SEARCH_SECTION_ID
+          }
+        },
+        '*'
+      );
+      hasRegisteredNativeWidget.current = false;
+      window.__headerSearchRegistered = false;
+      return;
+    }
+
+    if (!shouldRegister) {
+      return;
+    }
+
+    if (
+      typeof window !== 'undefined' &&
+      window.__headerSearchRegistered &&
+      hasRegisteredNativeWidget.current
+    ) {
+      return;
+    }
+
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_SEARCH_PLACEHOLDER_ID,
+      section: {
+        id: HEADER_SEARCH_SECTION_ID,
+        type: 'native',
+        label: 'Search',
+        blocks: [getBlockWithStyles(HEADER_SEARCH_BLOCKS.ICON)],
+        properties: sectionProperties,
+        styles: sectionStyles
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    window.__headerSearchRegistered = true;
+    hasRegisteredNativeWidget.current = true;
+  }, [
+    layout,
+    autoRegister,
+    getBlockWithStyles,
+    sectionProperties,
+    sectionStyles
+  ]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const searchContainer = document.querySelector(
+      '[data-section-id="header-search"]'
+    );
+    if (!searchContainer) return;
+
+    if (isSearchSelected) {
+      (searchContainer as HTMLElement).style.outline = '2px solid #3b82f6';
+      (searchContainer as HTMLElement).style.outlineOffset = '-2px';
+    } else {
+      (searchContainer as HTMLElement).style.outline = '';
+      (searchContainer as HTMLElement).style.outlineOffset = '';
+    }
+
+    return () => {
+      (searchContainer as HTMLElement).style.outline = '';
+      (searchContainer as HTMLElement).style.outlineOffset = '';
+    };
+  }, [isSearchSelected]);
+
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (!isDesigner) return;
+    if (hasInitialSettings) return;
+    if (widgetData.isLoading || hasReceivedThemeProps.current) return;
+
+    if (widgetData.sectionProperties && Object.keys(widgetData.sectionProperties).length > 0) {
+      setSectionProperties(widgetData.sectionProperties as HeaderSearchProperties);
+    }
+    if (widgetData.sectionStyles && Object.keys(widgetData.sectionStyles).length > 0) {
+      setSectionStyles(widgetData.sectionStyles);
+    }
+
+    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;
+    }
+
+    hasReceivedThemeProps.current = true;
+  }, [widgetData, isDesignerChecked, isDesigner, hasInitialSettings]);
+
+  const indexBlocks = useCallback(
+    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
+      blocks.forEach((block) => {
+        map.set(block.id, block);
+      });
+    },
+    []
+  );
+
+  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?.find(
+          (p: ThemePlaceholder) => p.slug === HEADER_SEARCH_PLACEHOLDER_ID
+        );
+
+        const searchSection = placeholder?.sections?.find(
+          (s: ThemeSection) => s.id === HEADER_SEARCH_SECTION_ID
+        );
+
+        if (searchSection) {
+          const shouldUpdateStyles =
+            type === 'UPDATE_THEME' || !hasInitialSettings;
+
+          if (shouldUpdateStyles) {
+            hasReceivedThemeProps.current = true;
+
+            if (searchSection.properties) {
+              setSectionProperties(searchSection.properties as HeaderSearchProperties);
+            }
+
+            if (searchSection.styles) {
+              setSectionStyles(searchSection.styles);
+            }
+
+            if (searchSection.blocks) {
+              const blockMap = new Map<string, ThemeBlock>();
+              indexBlocks(searchSection.blocks, blockMap);
+              if (blockMap.size > 0) {
+                setThemeBlocks(blockMap);
+                themeBlocksRef.current = blockMap;
+              }
+            }
+          }
+
+          if (typeof searchSection.visible === 'boolean') {
+            setIsSectionVisible(searchSection.visible);
+          } else {
+            setIsSectionVisible(true);
+          }
+        } else if (placeholder) {
+          setIsSectionVisible(false);
+        }
+      }
+
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, placeholderId, key, value, properties } = data || {};
+
+        if (
+          sectionId === HEADER_SEARCH_SECTION_ID ||
+          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID
+        ) {
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (properties) {
+            setSectionProperties(properties);
+          }
+        }
+      }
+
+      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
+        const { sectionId, placeholderId, key, value, styles } = data || {};
+
+        if (
+          sectionId === HEADER_SEARCH_SECTION_ID ||
+          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID
+        ) {
+          if (key && value !== undefined) {
+            setSectionStyles((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (styles) {
+            setSectionStyles(styles);
+          }
+        }
+      }
+
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+
+        const isSelected =
+          placeholderId === HEADER_SEARCH_PLACEHOLDER_ID &&
+          sectionId === HEADER_SEARCH_SECTION_ID;
+
+        setIsSearchSelected(isSelected);
+        if (!isSelected) {
+          setSelectedBlockId(null);
+        }
+      }
+
+      if (type === 'SELECT_BLOCK') {
+        const { sectionId, blockId } = data || {};
+        if (sectionId === HEADER_SEARCH_SECTION_ID) {
+          setSelectedBlockId(blockId || null);
+          setIsSearchSelected(true);
+        } else {
+          setIsSearchSelected(false);
+          setSelectedBlockId(null);
+        }
+      }
+
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsSearchSelected(false);
+        setSelectedBlockId(null);
+      }
+
+      if (type === 'TOGGLE_SECTION_VISIBILITY') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_SEARCH_SECTION_ID) {
+          setIsSectionVisible((prev) => !prev);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [indexBlocks, hasInitialSettings]);
+
+  const getBlockStyles = useCallback(
+    (blockId: string) => {
+      return themeBlocks.get(blockId)?.styles;
+    },
+    [themeBlocks]
+  );
+
+  const getBlockProperties = useCallback(
+    (blockId: string) => {
+      return themeBlocks.get(blockId)?.properties;
+    },
+    [themeBlocks]
+  );
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <HeaderSearchContext.Provider
+      value={{
+        isDesigner,
+        isSearchSectionSelected: isSearchSelected,
+        isSectionVisible,
+        properties: sectionProperties,
+        sectionStyles,
+        selectedBlockId,
+        getBlockStyles,
+        getBlockProperties
+      }}
+    >
+      {children}
+    </HeaderSearchContext.Provider>
+  );
+}