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

package/app-template/src/views/product-detail/product-detail-registrar.tsx

@@ -0,0 +1,616 @@
+'use client';
+
+/**
+ * Product Detail Page Registrar
+ *
+ * This component registers the "Product Detail" placeholder as a native widget.
+ * The placeholder contains sections like "Add to Cart" that allow customization
+ * of styles and appearance via the Theme Editor.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  PropsWithChildren
+} from 'react';
+import {
+  registerPlaceholder,
+  unregisterPlaceholder
+} from '@akinon/next/components/theme-editor/placeholder-registry';
+import {
+  PRODUCT_DETAIL_PLACEHOLDER_ID,
+  ADD_TO_CART_SECTION_ID,
+  QUANTITY_SECTION_ID,
+  VARIANTS_SECTION_ID,
+  PRODUCT_INFO_SECTION_ID,
+  SHARE_SECTION_ID,
+  ACCORDION_SECTION_ID,
+  FAVORITES_BUTTON_SECTION_ID,
+  FIND_IN_STORE_SECTION_ID,
+  AddToCartStyles,
+  QuantityStyles,
+  QuantityProperties,
+  QuantityDisplayType,
+  VariantsStyles,
+  ProductInfoStyles,
+  ShareStyles,
+  ShareProperties,
+  ShareLayoutType,
+  AccordionStyles,
+  FavoritesButtonStyles,
+  FavoritesButtonProperties,
+  FindInStoreStyles,
+  FindInStoreProperties
+} from './constants';
+
+// Re-export constants for external use
+export {
+  PRODUCT_DETAIL_PLACEHOLDER_ID,
+  PRODUCT_DETAIL_WIDGET_SLUG,
+  ADD_TO_CART_SECTION_ID,
+  QUANTITY_SECTION_ID,
+  VARIANTS_SECTION_ID,
+  PRODUCT_INFO_SECTION_ID,
+  SHARE_SECTION_ID,
+  ACCORDION_SECTION_ID,
+  FAVORITES_BUTTON_SECTION_ID,
+  FIND_IN_STORE_SECTION_ID
+} from './constants';
+export type {
+  AddToCartProperties,
+  AddToCartStyles,
+  QuantityStyles,
+  QuantityProperties,
+  QuantityDisplayType,
+  VariantsStyles,
+  ProductInfoStyles,
+  ShareStyles,
+  ShareProperties,
+  ShareLayoutType,
+  AccordionStyles,
+  FavoritesButtonStyles,
+  FavoritesButtonProperties,
+  FindInStoreStyles,
+  FindInStoreProperties
+} from './constants';
+
+// Global flag to track if registration has been done
+declare global {
+  interface Window {
+    __productDetailRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+interface ThemeSection {
+  id: string;
+  visible?: boolean;
+  properties?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+interface ProductDetailContextValue {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  addToCartStyles: AddToCartStyles;
+  quantityStyles: QuantityStyles;
+  quantityProperties: QuantityProperties;
+  variantsStyles: VariantsStyles;
+  productInfoStyles: ProductInfoStyles;
+  shareStyles: ShareStyles;
+  shareProperties: ShareProperties;
+  accordionStyles: AccordionStyles;
+  favoritesButtonStyles: FavoritesButtonStyles;
+  favoritesButtonProperties: FavoritesButtonProperties;
+  findInStoreStyles: FindInStoreStyles;
+  findInStoreProperties: FindInStoreProperties;
+}
+
+const ProductDetailContext = createContext<ProductDetailContextValue>({
+  isDesigner: false,
+  selectedSectionId: null,
+  addToCartStyles: {},
+  quantityStyles: {},
+  quantityProperties: { displayType: 'buttons' },
+  variantsStyles: {},
+  productInfoStyles: {},
+  shareStyles: {},
+  shareProperties: { layout: 'floating' },
+  accordionStyles: {},
+  favoritesButtonStyles: {},
+  favoritesButtonProperties: {},
+  findInStoreStyles: {},
+  findInStoreProperties: {}
+});
+
+export const useProductDetail = () => useContext(ProductDetailContext);
+
+interface ProductDetailRegistrarProps extends PropsWithChildren {
+  /**
+   * Initial settings from server-side parsing (to avoid flash)
+   */
+  initialSettings?: {
+    addToCartStyles?: AddToCartStyles;
+    quantityStyles?: QuantityStyles;
+    quantityProperties?: QuantityProperties;
+    variantsStyles?: VariantsStyles;
+    productInfoStyles?: ProductInfoStyles;
+    shareStyles?: ShareStyles;
+    shareProperties?: ShareProperties;
+    accordionStyles?: AccordionStyles;
+    favoritesButtonStyles?: FavoritesButtonStyles;
+    favoritesButtonProperties?: FavoritesButtonProperties;
+    findInStoreStyles?: FindInStoreStyles;
+    findInStoreProperties?: FindInStoreProperties;
+  };
+}
+
+/**
+ * ProductDetailRegistrar
+ *
+ * Registers the Product Detail native placeholder with Theme Editor.
+ * Contains sections like "Add to Cart" for customizing button appearance.
+ */
+export default function ProductDetailRegistrar({
+  children,
+  initialSettings
+}: ProductDetailRegistrarProps) {
+  const [isDesigner, setIsDesigner] = useState(false);
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
+    null
+  );
+  const [addToCartStyles, setAddToCartStyles] = useState<AddToCartStyles>(
+    initialSettings?.addToCartStyles || {}
+  );
+  const [quantityStyles, setQuantityStyles] = useState<QuantityStyles>(
+    initialSettings?.quantityStyles || {}
+  );
+  const [quantityProperties, setQuantityProperties] =
+    useState<QuantityProperties>(
+      initialSettings?.quantityProperties || { displayType: 'buttons' }
+    );
+  const [variantsStyles, setVariantsStyles] = useState<VariantsStyles>(
+    initialSettings?.variantsStyles || {}
+  );
+  const [productInfoStyles, setProductInfoStyles] = useState<ProductInfoStyles>(
+    initialSettings?.productInfoStyles || {}
+  );
+  const [shareStyles, setShareStyles] = useState<ShareStyles>(
+    initialSettings?.shareStyles || {}
+  );
+  const [shareProperties, setShareProperties] = useState<ShareProperties>(
+    initialSettings?.shareProperties || { layout: 'floating' }
+  );
+  const [accordionStyles, setAccordionStyles] = useState<AccordionStyles>(
+    initialSettings?.accordionStyles || {}
+  );
+  const [favoritesButtonStyles, setFavoritesButtonStyles] =
+    useState<FavoritesButtonStyles>(
+      initialSettings?.favoritesButtonStyles || {}
+    );
+  const [favoritesButtonProperties, setFavoritesButtonProperties] =
+    useState<FavoritesButtonProperties>(
+      initialSettings?.favoritesButtonProperties || {}
+    );
+  const [findInStoreStyles, setFindInStoreStyles] = useState<FindInStoreStyles>(
+    initialSettings?.findInStoreStyles || {}
+  );
+  const [findInStoreProperties, setFindInStoreProperties] =
+    useState<FindInStoreProperties>(
+      initialSettings?.findInStoreProperties || {}
+    );
+  const registeredRef = useRef(false);
+
+  // Helper to extract responsive value
+  const extractValue = (value: unknown): unknown => {
+    if (value && typeof value === 'object' && 'desktop' in value) {
+      return (value as { desktop: unknown }).desktop;
+    }
+    return value;
+  };
+
+  useEffect(() => {
+    const designerMode = isInDesignerMode();
+    setIsDesigner(designerMode);
+
+    if (!designerMode) return;
+
+    // Register placeholder for PLACEHOLDERS_AVAILABLE message
+    registerPlaceholder(PRODUCT_DETAIL_PLACEHOLDER_ID);
+
+    // One-time registration per session
+    if (!window.__productDetailRegistered && !registeredRef.current) {
+      window.__productDetailRegistered = true;
+      registeredRef.current = true;
+
+      // Send REGISTER_NATIVE_WIDGETS message to parent with correct format
+      const addToCartWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: ADD_TO_CART_SECTION_ID,
+          type: 'native',
+          label: 'Add to Cart Button',
+          blocks: [],
+          properties: {},
+          styles: initialSettings?.addToCartStyles || {}
+        }
+      };
+
+      const quantityWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: QUANTITY_SECTION_ID,
+          type: 'native',
+          label: 'Quantity Selector',
+          blocks: [],
+          properties: initialSettings?.quantityProperties || {
+            displayType: 'buttons'
+          },
+          styles: initialSettings?.quantityStyles || {}
+        }
+      };
+
+      const variantsWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: VARIANTS_SECTION_ID,
+          type: 'native',
+          label: 'Product Variants',
+          blocks: [],
+          properties: {},
+          styles: initialSettings?.variantsStyles || {}
+        }
+      };
+
+      const productInfoWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: PRODUCT_INFO_SECTION_ID,
+          type: 'native',
+          label: 'Product Info',
+          blocks: [],
+          properties: {},
+          styles: initialSettings?.productInfoStyles || {}
+        }
+      };
+
+      const shareWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: SHARE_SECTION_ID,
+          type: 'native',
+          label: 'Share Button',
+          blocks: [],
+          properties: initialSettings?.shareProperties || {
+            layout: 'floating'
+          },
+          styles: initialSettings?.shareStyles || {}
+        }
+      };
+
+      const accordionWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: ACCORDION_SECTION_ID,
+          type: 'native',
+          label: 'Accordion Sections',
+          blocks: [],
+          properties: {},
+          styles: initialSettings?.accordionStyles || {}
+        }
+      };
+
+      const favoritesButtonWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: FAVORITES_BUTTON_SECTION_ID,
+          type: 'native',
+          label: 'Favorites Button',
+          blocks: [],
+          properties: initialSettings?.favoritesButtonProperties || {},
+          styles: initialSettings?.favoritesButtonStyles || {}
+        }
+      };
+
+      const findInStoreWidgetConfig = {
+        placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: FIND_IN_STORE_SECTION_ID,
+          type: 'native',
+          label: 'Find in Store',
+          blocks: [],
+          properties: initialSettings?.findInStoreProperties || {},
+          styles: initialSettings?.findInStoreStyles || {}
+        }
+      };
+
+      window.parent?.postMessage(
+        {
+          type: 'REGISTER_NATIVE_WIDGETS',
+          data: {
+            widgets: [
+              addToCartWidgetConfig,
+              quantityWidgetConfig,
+              variantsWidgetConfig,
+              productInfoWidgetConfig,
+              shareWidgetConfig,
+              accordionWidgetConfig,
+              favoritesButtonWidgetConfig,
+              findInStoreWidgetConfig
+            ]
+          }
+        },
+        '*'
+      );
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle LOAD_THEME and UPDATE_THEME - theme updates
+      if (
+        (type === 'LOAD_THEME' || type === 'UPDATE_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders.find(
+          (p: ThemePlaceholder) => p.slug === PRODUCT_DETAIL_PLACEHOLDER_ID
+        );
+        if (placeholder?.sections) {
+          // Process Add to Cart section
+          const addToCartSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === ADD_TO_CART_SECTION_ID
+          );
+          if (addToCartSection?.styles) {
+            const extractedStyles: AddToCartStyles = {};
+            Object.entries(addToCartSection.styles).forEach(([key, value]) => {
+              const val = extractValue(value);
+              if (val !== undefined && val !== null) {
+                extractedStyles[key] = String(val);
+              }
+            });
+            setAddToCartStyles(extractedStyles);
+          }
+
+          // Process Quantity section
+          const quantitySection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === QUANTITY_SECTION_ID
+          );
+          if (quantitySection) {
+            if (quantitySection.styles) {
+              const extractedStyles: QuantityStyles = {};
+              Object.entries(quantitySection.styles).forEach(([key, value]) => {
+                const val = extractValue(value);
+                if (val !== undefined && val !== null) {
+                  extractedStyles[key] = String(val);
+                }
+              });
+              setQuantityStyles(extractedStyles);
+            }
+            if (quantitySection.properties) {
+              const props: QuantityProperties = { displayType: 'buttons' };
+              const { displayType, maxDropdownOptions } =
+                quantitySection.properties;
+
+              if (displayType) {
+                const dt = extractValue(displayType);
+                props.displayType = (dt as QuantityDisplayType) || 'buttons';
+              }
+              if (maxDropdownOptions !== undefined) {
+                const max = extractValue(maxDropdownOptions);
+                props.maxDropdownOptions = Number(max) || 10;
+              }
+              setQuantityProperties(props);
+            }
+          }
+
+          // Process Variants section
+          const variantsSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === VARIANTS_SECTION_ID
+          );
+          if (variantsSection?.styles) {
+            const extractedStyles: VariantsStyles = {};
+            Object.entries(variantsSection.styles).forEach(([key, value]) => {
+              const val = extractValue(value);
+              if (val !== undefined && val !== null) {
+                extractedStyles[key] = String(val);
+              }
+            });
+            setVariantsStyles(extractedStyles);
+          }
+
+          // Process Product Info section
+          const productInfoSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === PRODUCT_INFO_SECTION_ID
+          );
+          if (productInfoSection?.styles) {
+            const extractedStyles: ProductInfoStyles = {};
+            Object.entries(productInfoSection.styles).forEach(
+              ([key, value]) => {
+                const val = extractValue(value);
+                if (val !== undefined && val !== null) {
+                  extractedStyles[key] = String(val);
+                }
+              }
+            );
+            setProductInfoStyles(extractedStyles);
+          }
+
+          // Process Share section
+          const shareSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === SHARE_SECTION_ID
+          );
+          if (shareSection) {
+            if (shareSection.styles) {
+              const extractedStyles: ShareStyles = {};
+              Object.entries(shareSection.styles).forEach(([key, value]) => {
+                const val = extractValue(value);
+                if (val !== undefined && val !== null) {
+                  extractedStyles[key] = String(val);
+                }
+              });
+              setShareStyles(extractedStyles);
+            }
+            if (shareSection.properties) {
+              const props: ShareProperties = { layout: 'floating' };
+              const { layout, showLabel } = shareSection.properties;
+
+              if (layout) {
+                const lt = extractValue(layout);
+                props.layout = (lt as ShareLayoutType) || 'floating';
+              }
+              if (showLabel !== undefined) {
+                const sl = extractValue(showLabel);
+                props.showLabel = String(sl).toLowerCase() === 'true';
+              }
+              setShareProperties(props);
+            }
+          }
+
+          // Process Accordion section
+          const accordionSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === ACCORDION_SECTION_ID
+          );
+          if (accordionSection?.styles) {
+            const extractedStyles: AccordionStyles = {};
+            Object.entries(accordionSection.styles).forEach(([key, value]) => {
+              const val = extractValue(value);
+              if (val !== undefined && val !== null) {
+                extractedStyles[key] = String(val);
+              }
+            });
+            setAccordionStyles(extractedStyles);
+          }
+
+          // Process Favorites Button section
+          const favoritesButtonSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === FAVORITES_BUTTON_SECTION_ID
+          );
+          if (favoritesButtonSection) {
+            if (favoritesButtonSection.styles) {
+              const extractedStyles: FavoritesButtonStyles = {};
+              Object.entries(favoritesButtonSection.styles).forEach(
+                ([key, value]) => {
+                  const val = extractValue(value);
+                  if (val !== undefined && val !== null) {
+                    extractedStyles[key] = String(val);
+                  }
+                }
+              );
+              setFavoritesButtonStyles(extractedStyles);
+            }
+            if (favoritesButtonSection.properties) {
+              const props: FavoritesButtonProperties = {};
+              const { icon, iconActive } = favoritesButtonSection.properties;
+
+              if (icon) {
+                const ic = extractValue(icon);
+                props.icon = String(ic || '');
+              }
+              if (iconActive) {
+                const ica = extractValue(iconActive);
+                props.iconActive = String(ica || '');
+              }
+              setFavoritesButtonProperties(props);
+            }
+          }
+
+          // Process Find in Store section
+          const findInStoreSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === FIND_IN_STORE_SECTION_ID
+          );
+          if (findInStoreSection) {
+            if (findInStoreSection.styles) {
+              const extractedStyles: FindInStoreStyles = {};
+              Object.entries(findInStoreSection.styles).forEach(
+                ([key, value]) => {
+                  const val = extractValue(value);
+                  if (val !== undefined && val !== null) {
+                    extractedStyles[key] = String(val);
+                  }
+                }
+              );
+              setFindInStoreStyles(extractedStyles);
+            }
+            if (findInStoreSection.properties) {
+              const props: FindInStoreProperties = {};
+              const { icon, showIcon } = findInStoreSection.properties;
+
+              if (icon) {
+                const ic = extractValue(icon);
+                props.icon = String(ic || '');
+              }
+              if (showIcon !== undefined) {
+                const si = extractValue(showIcon);
+                props.showIcon = String(si).toLowerCase() === 'true';
+              }
+              setFindInStoreProperties(props);
+            }
+          }
+        }
+      }
+
+      // Handle SELECT_SECTION - track selected section
+      if (type === 'SELECT_SECTION') {
+        if (data?.placeholderId === PRODUCT_DETAIL_PLACEHOLDER_ID) {
+          setSelectedSectionId(data?.sectionId || null);
+        } else {
+          setSelectedSectionId(null);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      unregisterPlaceholder(PRODUCT_DETAIL_PLACEHOLDER_ID);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const contextValue: ProductDetailContextValue = {
+    isDesigner,
+    selectedSectionId,
+    addToCartStyles,
+    quantityStyles,
+    quantityProperties,
+    variantsStyles,
+    productInfoStyles,
+    shareStyles,
+    shareProperties,
+    accordionStyles,
+    favoritesButtonStyles,
+    favoritesButtonProperties,
+    findInStoreStyles,
+    findInStoreProperties
+  };
+
+  return (
+    <ProductDetailContext.Provider value={contextValue}>
+      {children}
+    </ProductDetailContext.Provider>
+  );
+}