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

package/app-template/src/views/basket/designer-context.tsx

@@ -1,617 +0,0 @@
-'use client';
-
-/**
- * Native Widget Context for Basket Page
- *
- * This context enables the basket page to be styled via Theme Editor.
- * It handles both designer mode (live editing) and standalone mode (fetching saved styles from widget).
- *
- * @see .github/instructions/native-widget.instructions.md for implementation guide
- */
-
-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';
-
-// Native Widget constants for basket page
-export const BASKET_PLACEHOLDER_ID = 'basket-page';
-export const BASKET_ITEMS_SECTION_ID = 'basket-items-section';
-export const BASKET_STYLES_WIDGET_SLUG = 'basket-items-styles';
-
-export const BASKET_ITEM_BLOCKS = {
-  ITEM: {
-    id: 'basket-item',
-    type: 'group',
-    label: 'Basket List'
-  },
-  ITEM_ROW: {
-    id: 'basket-item-row',
-    type: 'group',
-    label: 'Basket Item'
-  },
-  IMAGE: {
-    id: 'basket-item-image',
-    type: 'image',
-    label: 'Product Image'
-  },
-  NAME: {
-    id: 'basket-item-name',
-    type: 'text',
-    label: 'Product Name'
-  },
-  ATTRIBUTES: {
-    id: 'basket-item-attributes',
-    type: 'group',
-    label: 'Product Attributes'
-  },
-  ATTRIBUTE_LABEL: {
-    id: 'basket-item-attribute-label',
-    type: 'text',
-    label: 'Attribute Label'
-  },
-  ATTRIBUTE_VALUE: {
-    id: 'basket-item-attribute-value',
-    type: 'text',
-    label: 'Attribute Value'
-  },
-  QUANTITY: {
-    id: 'basket-item-quantity',
-    type: 'group',
-    label: 'Quantity Container'
-  },
-  QUANTITY_WRAPPER: {
-    id: 'basket-item-quantity-wrapper',
-    type: 'group',
-    label: 'Quantity Buttons'
-  },
-  QUANTITY_MINUS_BUTTON: {
-    id: 'basket-item-quantity-minus-button',
-    type: 'button',
-    label: 'Minus Button'
-  },
-  QUANTITY_MINUS_ICON: {
-    id: 'basket-item-quantity-minus-icon',
-    type: 'icon',
-    label: 'Minus Icon'
-  },
-  QUANTITY_VALUE: {
-    id: 'basket-item-quantity-value',
-    type: 'text',
-    label: 'Quantity Value'
-  },
-  QUANTITY_PLUS_BUTTON: {
-    id: 'basket-item-quantity-plus-button',
-    type: 'button',
-    label: 'Plus Button'
-  },
-  QUANTITY_PLUS_ICON: {
-    id: 'basket-item-quantity-plus-icon',
-    type: 'icon',
-    label: 'Plus Icon'
-  },
-  PRICE: {
-    id: 'basket-item-price',
-    type: 'group',
-    label: 'Price Summary'
-  },
-  PRICE_TEXT: {
-    id: 'basket-item-price-text',
-    type: 'text',
-    label: 'Price Text'
-  },
-  REMOVE: {
-    id: 'basket-item-remove',
-    type: 'button',
-    label: 'Remove Product'
-  },
-  GIFT_PACK: {
-    id: 'basket-item-gift-pack',
-    type: 'group',
-    label: 'Gift Pack'
-  }
-} as const;
-
-export type BasketViewMode = 'products' | 'empty';
-
-interface ThemeBlock {
-  id: string;
-  type: string;
-  label: string;
-  styles?: Record<string, unknown>;
-  properties?: Record<string, unknown>;
-  blocks?: ThemeBlock[];
-}
-
-interface ThemeSection {
-  id: string;
-  blocks: ThemeBlock[];
-}
-
-interface ThemePlaceholder {
-  slug: string;
-  sections: ThemeSection[];
-}
-
-interface DesignerContextValue {
-  isDesigner: boolean;
-  selectedSectionId: string | null;
-  selectedBlockId: string | null;
-  viewMode: BasketViewMode;
-  setViewMode: (mode: BasketViewMode) => void;
-  getBlockStyles: (blockId: string) => Record<string, unknown> | undefined;
-  getBlockProperties: (blockId: string) => Record<string, unknown> | undefined;
-}
-
-const BasketDesignerContext = createContext<DesignerContextValue>({
-  isDesigner: false,
-  selectedSectionId: null,
-  selectedBlockId: null,
-  viewMode: 'products',
-  setViewMode: () => {},
-  getBlockStyles: () => undefined,
-  getBlockProperties: () => undefined
-});
-
-// Placeholder product data for designer mode
-export const PLACEHOLDER_BASKET_ITEMS = [
-  {
-    id: 1,
-    quantity: 2,
-    attributes: {},
-    product: {
-      pk: 1001,
-      name: 'Classic Black T-Shirt',
-      absolute_url: '#',
-      price: '299.90',
-      retail_price: '399.90',
-      productimage_set: [
-        { image: 'https://placehold.co/400x500/1a1a1a/ffffff?text=T-Shirt' }
-      ],
-      attributes_kwargs: {
-        color: { label: 'Color', value: 'Black' },
-        size: { label: 'Size', value: 'M' }
-      }
-    }
-  },
-  {
-    id: 2,
-    quantity: 1,
-    attributes: {},
-    product: {
-      pk: 1002,
-      name: 'Slim Fit Blue Jeans',
-      absolute_url: '#',
-      price: '599.90',
-      retail_price: '599.90',
-      productimage_set: [
-        { image: 'https://placehold.co/400x500/1e3a5f/ffffff?text=Jeans' }
-      ],
-      attributes_kwargs: {
-        color: { label: 'Color', value: 'Blue' },
-        size: { label: 'Size', value: '32' }
-      }
-    }
-  },
-  {
-    id: 3,
-    quantity: 1,
-    attributes: {},
-    product: {
-      pk: 1003,
-      name: 'White Sneakers',
-      absolute_url: '#',
-      price: '899.90',
-      retail_price: '1199.90',
-      productimage_set: [
-        { image: 'https://placehold.co/400x500/f5f5f5/333333?text=Sneakers' }
-      ],
-      attributes_kwargs: {
-        color: { label: 'Color', value: 'White' },
-        size: { label: 'Size', value: '42' }
-      }
-    }
-  }
-];
-
-export const BasketDesignerProvider = ({
-  children
-}: PropsWithChildren<Record<string, unknown>>) => {
-  const designerState = useExternalDesigner({
-    placeholderId: BASKET_PLACEHOLDER_ID
-  });
-  const [viewMode, setViewMode] = useState<BasketViewMode>('products');
-  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
-    new Map()
-  );
-  const hasRegisteredNativeWidget = useRef(false);
-  // Track if theme editor has sent styles (to avoid overwriting with widget data)
-  const hasReceivedThemeStyles = useRef(false);
-  // Keep a ref to current themeBlocks for use in message handler
-  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
-
-  // Flatten block meta for useNativeWidgetData (stable reference)
-  const blockMeta = useMemo(() => {
-    return Object.values(BASKET_ITEM_BLOCKS).map((block) => ({
-      id: block.id,
-      type: block.type,
-      label: block.label
-    }));
-  }, []);
-
-  // Load saved widget data (styles from backend)
-  const widgetData = useNativeWidgetData({
-    widgetSlug: BASKET_STYLES_WIDGET_SLUG,
-    sectionId: BASKET_ITEMS_SECTION_ID,
-    blockMeta
-  });
-
-  // Load saved styles from widget (non-designer / standalone mode)
-  useEffect(() => {
-    if (designerState.isDesigner) return;
-    if (widgetData.isLoading) return;
-    if (hasReceivedThemeStyles.current) return;
-
-    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;
-    }
-  }, [designerState.isDesigner, widgetData.isLoading, widgetData.blocks]);
-
-  // Add blocks to map recursively
-  const indexBlocks = useCallback(
-    (blocks: ThemeBlock[], map: Map<string, ThemeBlock>) => {
-      blocks.forEach((block) => {
-        map.set(block.id, block);
-        if (block.blocks) {
-          indexBlocks(block.blocks, map);
-        }
-      });
-    },
-    []
-  );
-
-  const getDefaultBlocks = useCallback((): ThemeBlock[] => {
-    const itemBaseBlocks: ThemeBlock[] = [
-      BASKET_ITEM_BLOCKS.IMAGE,
-      BASKET_ITEM_BLOCKS.NAME,
-      BASKET_ITEM_BLOCKS.REMOVE,
-      BASKET_ITEM_BLOCKS.GIFT_PACK
-    ].map((block) => ({
-      id: block.id,
-      type: block.type,
-      label: block.label,
-      properties: {},
-      styles: themeBlocksRef.current.get(block.id)?.styles || {}
-    }));
-
-    const attributesBlock = {
-      id: BASKET_ITEM_BLOCKS.ATTRIBUTES.id,
-      type: BASKET_ITEM_BLOCKS.ATTRIBUTES.type,
-      label: BASKET_ITEM_BLOCKS.ATTRIBUTES.label,
-      properties: {},
-      styles:
-        themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.ATTRIBUTES.id)?.styles ||
-        {},
-      blocks: [
-        {
-          id: BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL.id,
-          type: BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL.type,
-          label: BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL.label,
-          properties: {},
-          styles:
-            themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.ATTRIBUTE_LABEL.id)
-              ?.styles || {}
-        },
-        {
-          id: BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE.id,
-          type: BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE.type,
-          label: BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE.label,
-          properties: {},
-          styles:
-            themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.ATTRIBUTE_VALUE.id)
-              ?.styles || {}
-        }
-      ]
-    };
-
-    const quantityBlock = {
-      id: BASKET_ITEM_BLOCKS.QUANTITY.id,
-      type: BASKET_ITEM_BLOCKS.QUANTITY.type,
-      label: BASKET_ITEM_BLOCKS.QUANTITY.label,
-      properties: {},
-      styles:
-        themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.QUANTITY.id)?.styles ||
-        {},
-      blocks: [
-        {
-          id: BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.id,
-          type: BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.type,
-          label: BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.label,
-          properties:
-            themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.id)
-              ?.properties || {},
-          styles:
-            themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.QUANTITY_WRAPPER.id)
-              ?.styles || {},
-          blocks: [
-            {
-              id: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.id,
-              type: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.type,
-              label: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.label,
-              properties:
-                themeBlocksRef.current.get(
-                  BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.id
-                )?.properties || {},
-              styles:
-                themeBlocksRef.current.get(
-                  BASKET_ITEM_BLOCKS.QUANTITY_MINUS_BUTTON.id
-                )?.styles || {},
-              blocks: [
-                {
-                  id: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.id,
-                  type: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.type,
-                  label: BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.label,
-                  properties:
-                    themeBlocksRef.current.get(
-                      BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.id
-                    )?.properties || {},
-                  styles:
-                    themeBlocksRef.current.get(
-                      BASKET_ITEM_BLOCKS.QUANTITY_MINUS_ICON.id
-                    )?.styles || {}
-                }
-              ]
-            },
-            {
-              id: BASKET_ITEM_BLOCKS.QUANTITY_VALUE.id,
-              type: BASKET_ITEM_BLOCKS.QUANTITY_VALUE.type,
-              label: BASKET_ITEM_BLOCKS.QUANTITY_VALUE.label,
-              properties:
-                themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.QUANTITY_VALUE.id)
-                  ?.properties || {},
-              styles:
-                themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.QUANTITY_VALUE.id)
-                  ?.styles || {}
-            },
-            {
-              id: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.id,
-              type: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.type,
-              label: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.label,
-              properties:
-                themeBlocksRef.current.get(
-                  BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.id
-                )?.properties || {},
-              styles:
-                themeBlocksRef.current.get(
-                  BASKET_ITEM_BLOCKS.QUANTITY_PLUS_BUTTON.id
-                )?.styles || {},
-              blocks: [
-                {
-                  id: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.id,
-                  type: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.type,
-                  label: BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.label,
-                  properties:
-                    themeBlocksRef.current.get(
-                      BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.id
-                    )?.properties || {},
-                  styles:
-                    themeBlocksRef.current.get(
-                      BASKET_ITEM_BLOCKS.QUANTITY_PLUS_ICON.id
-                    )?.styles || {}
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    };
-
-    const priceBlock = {
-      id: BASKET_ITEM_BLOCKS.PRICE.id,
-      type: BASKET_ITEM_BLOCKS.PRICE.type,
-      label: BASKET_ITEM_BLOCKS.PRICE.label,
-      properties: {},
-      styles:
-        themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.PRICE.id)?.styles || {},
-      blocks: [
-        {
-          id: BASKET_ITEM_BLOCKS.PRICE_TEXT.id,
-          type: BASKET_ITEM_BLOCKS.PRICE_TEXT.type,
-          label: BASKET_ITEM_BLOCKS.PRICE_TEXT.label,
-          properties: {},
-          styles:
-            themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.PRICE_TEXT.id)
-              ?.styles || {}
-        }
-      ]
-    };
-
-    return [
-      {
-        id: BASKET_ITEM_BLOCKS.ITEM.id,
-        type: BASKET_ITEM_BLOCKS.ITEM.type,
-        label: BASKET_ITEM_BLOCKS.ITEM.label,
-        properties: {},
-        styles:
-          themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.ITEM.id)?.styles || {},
-        blocks: [
-          {
-            id: BASKET_ITEM_BLOCKS.ITEM_ROW.id,
-            type: BASKET_ITEM_BLOCKS.ITEM_ROW.type,
-            label: BASKET_ITEM_BLOCKS.ITEM_ROW.label,
-            properties: {},
-            styles:
-              themeBlocksRef.current.get(BASKET_ITEM_BLOCKS.ITEM_ROW.id)
-                ?.styles || {},
-            blocks: [
-              ...itemBaseBlocks,
-              attributesBlock,
-              quantityBlock,
-              priceBlock
-            ]
-          }
-        ]
-      }
-    ];
-  }, []);
-
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-
-    if (!isInIframe || !window.parent || hasRegisteredNativeWidget.current) {
-      return;
-    }
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: {
-          widgets: [
-            {
-              placeholderId: BASKET_PLACEHOLDER_ID,
-              autoAdd: true,
-              section: {
-                id: BASKET_ITEMS_SECTION_ID,
-                type: 'native',
-                label: 'Basket Section',
-                blocks: getDefaultBlocks(),
-                styles: {},
-                properties: {}
-              }
-            }
-          ]
-        }
-      },
-      '*'
-    );
-
-    hasRegisteredNativeWidget.current = true;
-  }, [getDefaultBlocks]);
-
-  // Listen to messages from theme editor
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      const { type, data } = event.data || {};
-
-      if (type === 'SET_BASKET_VIEW_MODE' && data?.viewMode) {
-        setViewMode(data.viewMode);
-      }
-
-      // Listen to theme updates (both LOAD_THEME and UPDATE_THEME)
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders?.find(
-          (p: ThemePlaceholder) => p.slug === BASKET_PLACEHOLDER_ID
-        );
-
-        if (placeholder) {
-          hasReceivedThemeStyles.current = true;
-          const blockMap = new Map<string, ThemeBlock>();
-          placeholder.sections.forEach((section: ThemeSection) => {
-            indexBlocks(section.blocks, blockMap);
-          });
-
-          // Merge: Use styles from theme editor if available, otherwise keep existing styles
-          const currentBlocks = themeBlocksRef.current;
-          const mergedMap = new Map<string, ThemeBlock>();
-
-          // First add existing blocks
-          currentBlocks.forEach((block, id) => {
-            mergedMap.set(id, block);
-          });
-
-          // Add/update blocks from theme editor
-          blockMap.forEach((block, id) => {
-            const existingBlock = mergedMap.get(id);
-            const hasNewStyles =
-              block.styles && Object.keys(block.styles).length > 0;
-
-            if (hasNewStyles) {
-              // Use styles from theme editor
-              mergedMap.set(id, block);
-            } else if (existingBlock) {
-              // Keep existing block if no new styles (styles from widget)
-              mergedMap.set(id, {
-                ...block,
-                styles: existingBlock.styles
-              });
-            } else {
-              // New block without styles
-              mergedMap.set(id, block);
-            }
-          });
-
-          setThemeBlocks(mergedMap);
-          themeBlocksRef.current = mergedMap;
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [indexBlocks]);
-
-  const getBlockStyles = useCallback(
-    (blockId: string) => {
-      const block = themeBlocks.get(blockId);
-      if (block?.styles) return block.styles;
-
-      // Search by base ID (e.g., "basket-item-name-1" -> "basket-item-name")
-      const baseId = blockId.replace(/-\d+$/, '');
-      const baseBlock = themeBlocks.get(baseId);
-      return baseBlock?.styles;
-    },
-    [themeBlocks]
-  );
-
-  const getBlockProperties = useCallback(
-    (blockId: string) => {
-      const block = themeBlocks.get(blockId);
-      if (block?.properties) return block.properties;
-
-      const baseId = blockId.replace(/-\d+$/, '');
-      const baseBlock = themeBlocks.get(baseId);
-      return baseBlock?.properties;
-    },
-    [themeBlocks]
-  );
-
-  return (
-    <BasketDesignerContext.Provider
-      value={{
-        ...designerState,
-        viewMode,
-        setViewMode,
-        getBlockStyles,
-        getBlockProperties
-      }}
-    >
-      {children}
-    </BasketDesignerContext.Provider>
-  );
-};
-
-export const useBasketDesigner = () => useContext(BasketDesignerContext);