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

package/app-template/src/views/header/header-mini-basket-context.tsx

@@ -0,0 +1,524 @@
+'use client';
+
+/**
+ * Header Mini Basket Designer Context
+ *
+ * Enables mini basket to be customized via Theme Editor.
+ * Uses the native widget pattern for live editing.
+ */
+
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  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 { store } from '@theme/redux/store';
+import { openMiniBasket } from '@akinon/next/redux/reducers/root';
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+// Constants - Mini basket is a section within the header placeholder
+export const HEADER_MINI_BASKET_PLACEHOLDER_ID = 'header';
+export const HEADER_MINI_BASKET_SECTION_ID = 'header-mini-basket';
+export const HEADER_MINI_BASKET_WIDGET_SLUG = 'header-mini-basket-styles';
+
+// Section-level default properties
+export const MINI_BASKET_SECTION_PROPERTIES = {
+  visibility: 'show', // 'show' | 'hide'
+  position: 'right' // 'right' | 'left' | 'bottom'
+};
+
+// Section-level default styles
+export const MINI_BASKET_SECTION_STYLES = {
+  'background-color': '#ffffff',
+  'border-color': '#6b7280',
+  'border-left-width': '1px',
+  'border-top-width': '1px',
+  'border-right-width': '1px',
+  'border-bottom-width': '1px',
+  padding: '20px',
+  width: '320px'
+};
+
+// Default blocks for mini basket
+export const MINI_BASKET_BLOCKS = {
+  HEADER: {
+    id: 'mini-basket-header',
+    type: 'group',
+    label: 'Header',
+    blocks: [
+      {
+        id: 'mini-basket-title',
+        type: 'text',
+        label: 'Title',
+        properties: { content: 'My Bag' },
+        styles: {}
+      },
+      {
+        id: 'mini-basket-item-count',
+        type: 'text',
+        label: 'Item Count',
+        properties: { content: '0 items' },
+        styles: {}
+      },
+      {
+        id: 'mini-basket-close-icon',
+        type: 'icon-button',
+        label: 'Close Icon',
+        properties: { icon: 'close' },
+        styles: {}
+      }
+    ]
+  },
+  LIST: {
+    id: 'mini-basket-list',
+    type: 'group',
+    label: 'Products List',
+    blocks: [
+      {
+        id: 'mini-basket-item',
+        type: 'group',
+        label: 'Product Item',
+        blocks: [
+          {
+            id: 'mini-basket-item-image',
+            type: 'image',
+            label: 'Product Image',
+            properties: {},
+            styles: {}
+          },
+          {
+            id: 'mini-basket-item-name',
+            type: 'text',
+            label: 'Product Name',
+            properties: {},
+            styles: {}
+          },
+          {
+            id: 'mini-basket-item-attribute',
+            type: 'text',
+            label: 'Product Attributes',
+            properties: {},
+            styles: {}
+          },
+          {
+            id: 'mini-basket-item-price',
+            type: 'text',
+            label: 'Product Price',
+            properties: {},
+            styles: {}
+          },
+          {
+            id: 'mini-basket-item-remove-button',
+            type: 'button',
+            label: 'Remove Button',
+            properties: { content: 'Remove' },
+            styles: {}
+          }
+        ]
+      }
+    ]
+  },
+  FOOTER: {
+    id: 'mini-basket-footer',
+    type: 'group',
+    label: 'Footer',
+    blocks: [
+      {
+        id: 'mini-basket-subtotal',
+        type: 'text',
+        label: 'Subtotal Text',
+        properties: { content: 'Subtotal' },
+        styles: {}
+      },
+      {
+        id: 'mini-basket-view-bag-button',
+        type: 'text',
+        label: 'View Bag Button',
+        properties: { content: 'View Bag' },
+        styles: {}
+      },
+      {
+        id: 'mini-basket-continue-shopping-button',
+        type: 'text',
+        label: 'Continue Shopping Link',
+        properties: { content: 'Continue Shopping' },
+        styles: {}
+      }
+    ]
+  }
+} as const;
+
+interface ThemeBlock {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  blocks?: ThemeBlock[];
+}
+
+interface ThemeSection {
+  id: string;
+  blocks: ThemeBlock[];
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  id: string;
+  sections: ThemeSection[];
+}
+
+interface HeaderMiniBasketContextValue {
+  isDesigner: boolean;
+  isSectionSelected: boolean;
+  selectedBlockId: string;
+  sectionProperties: Record<string, unknown> | undefined;
+  getSectionStyles: () => Record<string, unknown> | undefined;
+  getSectionProperties: () => Record<string, unknown> | undefined;
+  getBlockData: (blockId: string) => ThemeBlock | undefined;
+}
+
+const HeaderMiniBasketContext = createContext<HeaderMiniBasketContextValue>({
+  isDesigner: false,
+  isSectionSelected: false,
+  selectedBlockId: '',
+  sectionProperties: undefined,
+  getSectionStyles: () => undefined,
+  getSectionProperties: () => undefined,
+  getBlockData: () => undefined
+});
+
+export const useHeaderMiniBasket = () => {
+  return useContext(HeaderMiniBasketContext);
+};
+
+export const HeaderMiniBasketProvider = ({ children }: PropsWithChildren) => {
+  const designerState = useExternalDesigner({
+    placeholderId: HEADER_MINI_BASKET_PLACEHOLDER_ID
+  });
+
+  const [isSectionSelected, setIsSectionSelected] = useState(false);
+  const [selectedBlockId, setSelectedBlockId] = useState('');
+
+  // Check designer mode
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
+    new Map()
+  );
+  const [sectionStyles, setSectionStyles] = useState<
+    Record<string, unknown> | undefined
+  >(MINI_BASKET_SECTION_STYLES);
+  const [sectionProperties, setSectionProperties] = useState<
+    Record<string, unknown> | undefined
+  >(MINI_BASKET_SECTION_PROPERTIES);
+  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
+  const hasRegisteredNativeWidget = useRef(false);
+  const hasReceivedThemeStyles = useRef(false);
+
+  // Flatten all nested blocks for widget meta
+  // Memoize block meta to prevent infinite loops
+  const blockMeta = useMemo(() => {
+    const allBlocks: Array<{ id: string; type: string; label: string }> = [];
+
+    const flattenBlocks = (blocks: readonly any[]) => {
+      blocks.forEach((block: any) => {
+        allBlocks.push({
+          id: block.id,
+          type: block.type,
+          label: block.label
+        });
+
+        if (block.blocks && Array.isArray(block.blocks)) {
+          flattenBlocks(block.blocks);
+        }
+      });
+    };
+
+    Object.values(MINI_BASKET_BLOCKS).forEach((group) => {
+      // Add the group itself first
+      allBlocks.push({
+        id: group.id,
+        type: group.type,
+        label: group.label
+      });
+
+      // Then add its nested blocks
+      const groupBlocks = 'blocks' in group ? group.blocks || [] : [];
+      flattenBlocks(groupBlocks);
+    });
+
+    return allBlocks;
+  }, []); // Empty deps - block structure is static
+
+  // Load saved widget data (styles from backend)
+  const widgetData = useNativeWidgetData({
+    widgetSlug: HEADER_MINI_BASKET_WIDGET_SLUG,
+    sectionId: HEADER_MINI_BASKET_SECTION_ID,
+    blockMeta
+  });
+
+  // Get default blocks with current styles (recursive for deeply nested blocks)
+  const getDefaultBlocks = useCallback(() => {
+    // Recursive function to process nested blocks at any depth
+    const processBlock = (blockDef: any): any => {
+      const existingBlock = themeBlocksRef.current.get(blockDef.id);
+
+      // Process nested blocks recursively if they exist
+      const nestedBlocks =
+        'blocks' in blockDef && Array.isArray(blockDef.blocks)
+          ? blockDef.blocks.map((nestedBlockDef: any) =>
+              processBlock(nestedBlockDef)
+            )
+          : existingBlock?.blocks || [];
+
+      return {
+        id: blockDef.id,
+        type: blockDef.type,
+        label: blockDef.label,
+        properties: existingBlock?.properties || blockDef.properties || {},
+        styles: existingBlock?.styles || blockDef.styles || {},
+        blocks: nestedBlocks
+      };
+    };
+
+    return Object.values(MINI_BASKET_BLOCKS).map((blockDef) =>
+      processBlock(blockDef)
+    );
+  }, []);
+
+  // Register native widget with Theme Editor (ONLY ONCE)
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // Only register once
+    if (hasRegisteredNativeWidget.current) {
+      return;
+    }
+
+    // Get nested block structure with current styles
+    const nestedBlocks = getDefaultBlocks();
+
+    // Send native widget registration to Theme Editor
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_MINI_BASKET_PLACEHOLDER_ID,
+      section: {
+        id: HEADER_MINI_BASKET_SECTION_ID,
+        type: 'native',
+        label: 'Mini Basket',
+        blocks: nestedBlocks,
+        styles: MINI_BASKET_SECTION_STYLES,
+        properties: MINI_BASKET_SECTION_PROPERTIES
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    hasRegisteredNativeWidget.current = true;
+  }, [getDefaultBlocks]); // Register with nested blocks
+
+  // Load saved styles from widget (non-designer mode)
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (isDesigner) return;
+    if (widgetData.isLoading) return;
+
+    // Set section styles from widget data (always update when widgetData changes)
+    if (
+      widgetData.sectionStyles &&
+      Object.keys(widgetData.sectionStyles).length > 0
+    ) {
+      setSectionStyles(widgetData.sectionStyles);
+    }
+
+    // Set section properties from widget data
+    if (
+      widgetData.sectionProperties &&
+      Object.keys(widgetData.sectionProperties).length > 0
+    ) {
+      setSectionProperties(widgetData.sectionProperties);
+    }
+
+    // Update blocks
+    if (widgetData.blocks && widgetData.blocks.size > 0) {
+      const blockMap = new Map<string, ThemeBlock>();
+      widgetData.blocks.forEach((block) => {
+        blockMap.set(block.id, {
+          id: block.id,
+          type: block.type || 'text',
+          label: block.label || block.id,
+          styles: block.styles,
+          properties: block.properties
+        });
+      });
+
+      setThemeBlocks(blockMap);
+      themeBlocksRef.current = blockMap;
+    }
+  }, [
+    isDesignerChecked,
+    isDesigner,
+    widgetData.isLoading,
+    widgetData.sectionStyles,
+    widgetData.sectionProperties,
+    widgetData.blocks
+  ]);
+
+  // Listen for theme updates from Theme Editor
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      if (type === 'SELECT_SECTION') {
+        const isOurSection =
+          data?.placeholderId === HEADER_MINI_BASKET_PLACEHOLDER_ID &&
+          data?.sectionId === HEADER_MINI_BASKET_SECTION_ID;
+        setIsSectionSelected(isOurSection);
+        if (isOurSection) {
+          setSelectedBlockId('');
+        }
+        return;
+      }
+
+      if (type === 'SELECT_BLOCK') {
+        const isOurSectionBlock =
+          data?.placeholderId === HEADER_MINI_BASKET_PLACEHOLDER_ID &&
+          data?.sectionId === HEADER_MINI_BASKET_SECTION_ID;
+        if (isOurSectionBlock) {
+          setSelectedBlockId(data?.blockId || '');
+          setIsSectionSelected(false);
+        } else {
+          setSelectedBlockId('');
+        }
+        return;
+      }
+
+      if (type === 'OPEN_MINI_BASKET') {
+        store.dispatch(openMiniBasket());
+        return;
+      }
+
+      if (!isDesigner) {
+        return;
+      }
+
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const headerPlaceholder = data.theme.placeholders.find(
+          (p: ThemePlaceholder) => p.id === HEADER_MINI_BASKET_PLACEHOLDER_ID
+        );
+
+        if (!headerPlaceholder) {
+          return;
+        }
+
+        const miniBasketSection = headerPlaceholder.sections?.find(
+          (section: ThemeSection) =>
+            section.id === HEADER_MINI_BASKET_SECTION_ID ||
+            section.id?.startsWith('header-mini-basket')
+        );
+
+        if (!miniBasketSection) {
+          return;
+        }
+
+        // Update section styles
+        setSectionStyles(miniBasketSection.styles);
+
+        // Update section properties
+        if (miniBasketSection.properties) {
+          setSectionProperties(miniBasketSection.properties);
+        }
+
+        // Update blocks map (including nested blocks)
+        const newBlocks = new Map<string, ThemeBlock>();
+
+        const addBlockRecursively = (block: ThemeBlock) => {
+          newBlocks.set(block.id, block);
+          // Also add nested blocks
+          if (block.blocks && block.blocks.length > 0) {
+            block.blocks.forEach((nestedBlock) => {
+              addBlockRecursively(nestedBlock);
+            });
+          }
+        };
+
+        miniBasketSection.blocks?.forEach((block: ThemeBlock) => {
+          addBlockRecursively(block);
+        });
+
+        themeBlocksRef.current = newBlocks;
+        setThemeBlocks(newBlocks);
+        hasReceivedThemeStyles.current = true;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [isDesigner]);
+
+  const getSectionStyles = useCallback(() => {
+    return sectionStyles;
+  }, [sectionStyles]);
+
+  const getSectionProperties = useCallback(() => {
+    return sectionProperties;
+  }, [sectionProperties]);
+
+  const getBlockData = useCallback(
+    (blockId: string) => {
+      return themeBlocksRef.current.get(blockId);
+    },
+    [themeBlocks]
+  );
+
+  const contextValue: HeaderMiniBasketContextValue = {
+    isDesigner,
+    isSectionSelected,
+    selectedBlockId,
+    sectionProperties,
+    getSectionStyles,
+    getSectionProperties,
+    getBlockData
+  };
+
+  return (
+    <HeaderMiniBasketContext.Provider value={contextValue}>
+      {children}
+    </HeaderMiniBasketContext.Provider>
+  );
+};