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

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

@@ -1,560 +0,0 @@
-'use client';
-
-/**
- * Basket Summary Designer Context
- *
- * Enables basket summary to be customized via Theme Editor.
- * Uses the native widget pattern for live editing.
- *
- * @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';
-
-// Constants
-export const BASKET_SUMMARY_PLACEHOLDER_ID = 'basket-page';
-export const BASKET_SUMMARY_SECTION_ID = 'basket-summary-section';
-export const BASKET_SUMMARY_WIDGET_SLUG = 'basket-summary-styles';
-
-// Section-level default styles
-export const BASKET_SUMMARY_SECTION_STYLES = {
-  'background-color': '#f9fafb',
-  padding: '24px'
-};
-
-// Block definitions for basket summary elements
-export const BASKET_SUMMARY_BLOCKS = {
-  TITLE: {
-    id: 'basket-summary-title',
-    type: 'text',
-    label: 'Summary Title',
-    properties: {},
-    styles: {}
-  },
-  VOUCHER_SECTION: {
-    id: 'basket-summary-voucher-section',
-    type: 'group',
-    label: 'Voucher Section',
-    properties: {},
-    styles: {}
-  },
-  VOUCHER_TITLE: {
-    id: 'basket-summary-voucher-title',
-    type: 'text',
-    label: 'Voucher Section Title',
-    properties: {},
-    styles: {}
-  },
-  VOUCHER_FORM: {
-    id: 'basket-summary-voucher-form',
-    type: 'group',
-    label: 'Voucher Form',
-    properties: {},
-    styles: {}
-  },
-  VOUCHER_INPUT: {
-    id: 'basket-summary-voucher-input',
-    type: 'text',
-    label: 'Voucher Input',
-    properties: {},
-    styles: {}
-  },
-  VOUCHER_BUTTON: {
-    id: 'basket-summary-voucher-button',
-    type: 'button',
-    label: 'Voucher Button',
-    properties: {},
-    styles: {}
-  },
-  PRICE_SECTION: {
-    id: 'basket-summary-price-section',
-    type: 'group',
-    label: 'Price Section',
-    properties: {},
-    styles: {}
-  },
-  SUBTOTAL_ROW: {
-    id: 'basket-summary-subtotal-row',
-    type: 'group',
-    label: 'Subtotal Row',
-    properties: {},
-    styles: {}
-  },
-  SUBTOTAL_LABEL: {
-    id: 'basket-summary-subtotal-label',
-    type: 'text',
-    label: 'Subtotal Label',
-    properties: {},
-    styles: {}
-  },
-  SUBTOTAL_PRICE: {
-    id: 'basket-summary-subtotal-price',
-    type: 'text',
-    label: 'Subtotal Price',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNT_ITEM_ROW: {
-    id: 'basket-summary-discount-item-row',
-    type: 'group',
-    label: 'Discount Item Row',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNT_ITEM_LABEL: {
-    id: 'basket-summary-discount-item-label',
-    type: 'text',
-    label: 'Discount Item Label',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNT_ITEM_PRICE: {
-    id: 'basket-summary-discount-item-price',
-    type: 'text',
-    label: 'Discount Item Price',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNTS_TOTAL_LABEL: {
-    id: 'basket-summary-discounts-total-label',
-    type: 'text',
-    label: 'Discounts Total Label',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNTS_TOTAL_PRICE: {
-    id: 'basket-summary-discounts-total-price',
-    type: 'text',
-    label: 'Discounts Total Price',
-    properties: {},
-    styles: {}
-  },
-  DISCOUNTS_TOTAL_ROW: {
-    id: 'basket-summary-discounts-total-row',
-    type: 'group',
-    label: 'Discounts Total Row',
-    properties: {},
-    styles: {}
-  },
-  TOTAL_ROW: {
-    id: 'basket-summary-total-row',
-    type: 'group',
-    label: 'Total Row',
-    properties: {},
-    styles: {}
-  },
-  TOTAL_LABEL: {
-    id: 'basket-summary-total-label',
-    type: 'text',
-    label: 'Total Label',
-    properties: {},
-    styles: {}
-  },
-  TOTAL_PRICE: {
-    id: 'basket-summary-total-price',
-    type: 'text',
-    label: 'Total Price',
-    properties: {},
-    styles: {}
-  },
-  CHECKOUT_SECTION: {
-    id: 'basket-summary-checkout-section',
-    type: 'group',
-    label: 'Checkout Section',
-    properties: {},
-    styles: {}
-  },
-  CHECKOUT_BUTTON: {
-    id: 'basket-summary-checkout-button',
-    type: 'button',
-    label: 'Checkout Button',
-    properties: {},
-    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 BasketSummaryContextValue {
-  isDesigner: boolean;
-  isSectionSelected: boolean;
-  selectedBlockId: string;
-  getSectionStyles: () => Record<string, unknown> | undefined;
-  getBlockData: (blockId: string) => ThemeBlock | undefined;
-}
-
-const BasketSummaryContext = createContext<BasketSummaryContextValue>({
-  isDesigner: false,
-  isSectionSelected: false,
-  selectedBlockId: '',
-  getSectionStyles: () => undefined,
-  getBlockData: () => undefined
-});
-
-export const useBasketSummary = () => useContext(BasketSummaryContext);
-
-export const BasketSummaryProvider = ({ children }: PropsWithChildren) => {
-  const designerState = useExternalDesigner({
-    placeholderId: BASKET_SUMMARY_PLACEHOLDER_ID
-  });
-
-  const [isSectionSelected, setIsSectionSelected] = useState(false);
-  const [selectedBlockId, setSelectedBlockId] = useState('');
-  const [themeBlocks, setThemeBlocks] = useState<Map<string, ThemeBlock>>(
-    new Map()
-  );
-  const [sectionStyles, setSectionStyles] = useState<
-    Record<string, unknown> | undefined
-  >(BASKET_SUMMARY_SECTION_STYLES);
-
-  const themeBlocksRef = useRef<Map<string, ThemeBlock>>(new Map());
-  const hasRegisteredNativeWidget = useRef(false);
-  const hasReceivedThemeStyles = useRef(false);
-
-  // Flatten block meta for useNativeWidgetData
-  const blockMeta = useMemo(() => {
-    return Object.values(BASKET_SUMMARY_BLOCKS).map((block) => ({
-      id: block.id,
-      type: block.type,
-      label: block.label
-    }));
-  }, []);
-
-  // Load saved widget data (styles from backend)
-  const widgetData = useNativeWidgetData({
-    widgetSlug: BASKET_SUMMARY_WIDGET_SLUG,
-    sectionId: BASKET_SUMMARY_SECTION_ID,
-    blockMeta
-  });
-
-  const createBlock = useCallback((blockId: string): ThemeBlock => {
-    const blockDef = Object.values(BASKET_SUMMARY_BLOCKS).find(
-      (block) => block.id === blockId
-    );
-
-    if (!blockDef) {
-      return {
-        id: blockId,
-        type: 'text',
-        label: blockId,
-        properties: {},
-        styles: {},
-        blocks: []
-      };
-    }
-
-    const existingBlock = themeBlocksRef.current.get(blockId);
-
-    return {
-      id: blockDef.id,
-      type: blockDef.type,
-      label: blockDef.label,
-      properties: existingBlock?.properties || blockDef.properties || {},
-      styles: existingBlock?.styles || blockDef.styles || {},
-      blocks: existingBlock?.blocks || []
-    };
-  }, []);
-
-  // Get default blocks with current styles
-  const getDefaultBlocks = useCallback(() => {
-    const voucherSection = createBlock(
-      BASKET_SUMMARY_BLOCKS.VOUCHER_SECTION.id
-    );
-    const voucherForm = createBlock(BASKET_SUMMARY_BLOCKS.VOUCHER_FORM.id);
-    const priceSection = createBlock(BASKET_SUMMARY_BLOCKS.PRICE_SECTION.id);
-    const subtotalRow = createBlock(BASKET_SUMMARY_BLOCKS.SUBTOTAL_ROW.id);
-    const discountItemRow = createBlock(
-      BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_ROW.id
-    );
-    const discountsTotalRow = createBlock(
-      BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_ROW.id
-    );
-    const totalRow = createBlock(BASKET_SUMMARY_BLOCKS.TOTAL_ROW.id);
-    const checkoutSection = createBlock(
-      BASKET_SUMMARY_BLOCKS.CHECKOUT_SECTION.id
-    );
-
-    return [
-      createBlock(BASKET_SUMMARY_BLOCKS.TITLE.id),
-      {
-        ...voucherSection,
-        blocks: [
-          createBlock(BASKET_SUMMARY_BLOCKS.VOUCHER_TITLE.id),
-          {
-            ...voucherForm,
-            blocks: [
-              createBlock(BASKET_SUMMARY_BLOCKS.VOUCHER_INPUT.id),
-              createBlock(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id)
-            ]
-          }
-        ]
-      },
-      {
-        ...priceSection,
-        blocks: [
-          {
-            ...subtotalRow,
-            blocks: [
-              createBlock(BASKET_SUMMARY_BLOCKS.SUBTOTAL_LABEL.id),
-              createBlock(BASKET_SUMMARY_BLOCKS.SUBTOTAL_PRICE.id)
-            ]
-          },
-          {
-            ...discountItemRow,
-            blocks: [
-              createBlock(BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_LABEL.id),
-              createBlock(BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_PRICE.id)
-            ]
-          },
-          {
-            ...discountsTotalRow,
-            blocks: [
-              createBlock(BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_LABEL.id),
-              createBlock(BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_PRICE.id)
-            ]
-          },
-          {
-            ...totalRow,
-            blocks: [
-              createBlock(BASKET_SUMMARY_BLOCKS.TOTAL_LABEL.id),
-              createBlock(BASKET_SUMMARY_BLOCKS.TOTAL_PRICE.id)
-            ]
-          }
-        ]
-      },
-      {
-        ...checkoutSection,
-        blocks: [createBlock(BASKET_SUMMARY_BLOCKS.CHECKOUT_BUTTON.id)]
-      }
-    ];
-  }, [createBlock]);
-
-  const indexBlocksRecursively = useCallback(
-    (blocks: ThemeBlock[], targetMap: Map<string, ThemeBlock>) => {
-      blocks.forEach((block) => {
-        targetMap.set(block.id, block);
-
-        if (block.blocks?.length) {
-          indexBlocksRecursively(block.blocks, targetMap);
-        }
-      });
-    },
-    []
-  );
-
-  // Register native widget with Theme Editor (ONLY ONCE)
-  useEffect(() => {
-    const isInIframe =
-      typeof window !== 'undefined' && window.self !== window.top;
-    if (!isInIframe || !window.parent) {
-      return;
-    }
-
-    if (hasRegisteredNativeWidget.current) {
-      return;
-    }
-
-    const blocks = getDefaultBlocks();
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: {
-          widgets: [
-            {
-              placeholderId: BASKET_SUMMARY_PLACEHOLDER_ID,
-              autoAdd: true,
-              section: {
-                id: BASKET_SUMMARY_SECTION_ID,
-                type: 'native',
-                label: 'Basket Summary',
-                blocks,
-                styles: BASKET_SUMMARY_SECTION_STYLES,
-                properties: {}
-              }
-            }
-          ]
-        }
-      },
-      '*'
-    );
-
-    hasRegisteredNativeWidget.current = true;
-  }, [getDefaultBlocks]);
-
-  // Load saved styles from widget (non-designer / standalone mode)
-  useEffect(() => {
-    if (designerState.isDesigner) return;
-    if (widgetData.isLoading) return;
-
-    if (
-      widgetData.sectionStyles &&
-      Object.keys(widgetData.sectionStyles).length > 0
-    ) {
-      setSectionStyles(widgetData.sectionStyles);
-    }
-
-    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.sectionStyles,
-    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 === BASKET_SUMMARY_PLACEHOLDER_ID &&
-          data?.sectionId === BASKET_SUMMARY_SECTION_ID;
-        setIsSectionSelected(isOurSection);
-        if (isOurSection) {
-          setSelectedBlockId('');
-        }
-        return;
-      }
-
-      if (type === 'SELECT_BLOCK') {
-        const isOurSectionBlock =
-          data?.placeholderId === BASKET_SUMMARY_PLACEHOLDER_ID &&
-          data?.sectionId === BASKET_SUMMARY_SECTION_ID;
-        if (isOurSectionBlock) {
-          setSelectedBlockId(data?.blockId || '');
-          setIsSectionSelected(false);
-        } else {
-          setSelectedBlockId('');
-        }
-        return;
-      }
-
-      if (!designerState.isDesigner) {
-        return;
-      }
-
-      if (
-        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
-        data?.theme?.placeholders
-      ) {
-        const placeholder = data.theme.placeholders.find(
-          (p: ThemePlaceholder) => p.id === BASKET_SUMMARY_PLACEHOLDER_ID
-        );
-
-        if (!placeholder) return;
-
-        const summarySection = placeholder.sections?.find(
-          (section: ThemeSection) => section.id === BASKET_SUMMARY_SECTION_ID
-        );
-
-        if (!summarySection) return;
-
-        // Update section styles
-        if (summarySection.styles) {
-          setSectionStyles(summarySection.styles);
-        }
-
-        // Update blocks map
-        const newBlocks = new Map<string, ThemeBlock>();
-        indexBlocksRecursively(summarySection.blocks || [], newBlocks);
-
-        // Merge: keep existing styles if incoming block has no styles
-        const currentBlocks = themeBlocksRef.current;
-        const mergedMap = new Map<string, ThemeBlock>();
-
-        currentBlocks.forEach((block, id) => mergedMap.set(id, block));
-
-        newBlocks.forEach((block, id) => {
-          const existingBlock = mergedMap.get(id);
-          const hasNewStyles =
-            block.styles && Object.keys(block.styles).length > 0;
-
-          if (hasNewStyles) {
-            mergedMap.set(id, block);
-          } else if (existingBlock) {
-            mergedMap.set(id, { ...block, styles: existingBlock.styles });
-          } else {
-            mergedMap.set(id, block);
-          }
-        });
-
-        themeBlocksRef.current = mergedMap;
-        setThemeBlocks(mergedMap);
-        hasReceivedThemeStyles.current = true;
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [designerState.isDesigner, indexBlocksRecursively]);
-
-  const getSectionStyles = useCallback(() => {
-    return sectionStyles;
-  }, [sectionStyles]);
-
-  const getBlockData = useCallback(
-    (blockId: string) => {
-      return themeBlocks.get(blockId);
-    },
-    [themeBlocks]
-  );
-
-  const contextValue: BasketSummaryContextValue = {
-    isDesigner: designerState.isDesigner,
-    isSectionSelected,
-    selectedBlockId,
-    getSectionStyles,
-    getBlockData
-  };
-
-  return (
-    <BasketSummaryContext.Provider value={contextValue}>
-      {children}
-    </BasketSummaryContext.Provider>
-  );
-};