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

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

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