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

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

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

package/app-template/src/views/basket/index.ts

@@ -1,2 +1,4 @@
 export * from './basket-item';
 export * from './summary';
+export * from './designer-context';
+export * from './basket-summary-context';