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

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

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