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

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

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