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

package/app-template/src/views/category/product-list-registrar.tsx

@@ -0,0 +1,665 @@
+'use client';
+
+/**
+ * Product List Page Registrar
+ *
+ * This component registers the "Product List Page" placeholder as a native widget.
+ * The placeholder contains a "Filters" section that allows customization
+ * of styles and layout via the Theme Editor.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  PropsWithChildren
+} from 'react';
+import {
+  registerPlaceholder,
+  unregisterPlaceholder
+} from '@akinon/next/components/theme-editor/placeholder-registry';
+
+// Constants
+const PRODUCT_LIST_PLACEHOLDER_ID = 'product-list-page';
+const FILTERS_SECTION_ID = 'filters-section';
+const PRODUCTS_SECTION_ID = 'products-section';
+
+// Re-export constants
+export { PRODUCT_LIST_PLACEHOLDER_ID, FILTERS_SECTION_ID, PRODUCTS_SECTION_ID };
+
+// Global flag to track if registration has been done
+declare global {
+  interface Window {
+    __productListPageRegistered?: 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[];
+}
+
+export interface FilterProperties {
+  layout?: 'sidebar' | 'top';
+  'item-padding-y'?: number;
+  'item-padding-x'?: number;
+  'item-margin-bottom'?: number;
+}
+
+export interface FilterStyles {
+  backgroundColor?: string;
+  padding?: string;
+  borderRadius?: string;
+  boxShadow?: string;
+  border?: string;
+  margin?: string;
+  [key: string]: string | undefined;
+}
+
+export interface ProductsProperties {
+  'show-layout-buttons'?: boolean;
+  'available-layouts'?: string[];
+}
+
+export interface ProductsStyles {
+  'gap-x'?: string;
+  'gap-y'?: string;
+  'padding-top'?: string;
+  'padding-bottom'?: string;
+  'padding-left'?: string;
+  'padding-right'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface ProductItemProperties {
+  'show-fav-button'?: boolean;
+  'fav-button-position'?:
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
+}
+
+export interface ProductItemStyles {
+  'fav-button-size'?: string;
+  'fav-button-bg-color'?: string;
+  'fav-button-icon-color'?: string;
+  'fav-button-border-radius'?: string;
+  // Product name styles
+  'product-name-font-size'?: string;
+  'product-name-color'?: string;
+  'product-name-font-weight'?: string;
+  'product-name-line-clamp'?: string;
+  // Price styles
+  'price-font-size'?: string;
+  'price-color'?: string;
+  'price-font-weight'?: string;
+  // Old price styles
+  'old-price-font-size'?: string;
+  'old-price-color'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface PaginationProperties {
+  type?: 'list' | 'more' | 'infinite';
+}
+
+export interface PaginationStyles {
+  'margin-top'?: string;
+  'margin-bottom'?: string;
+  'page-font-size'?: string;
+  'page-color'?: string;
+  'page-active-color'?: string;
+  'page-active-font-weight'?: string;
+  'page-gap'?: string;
+  'page-bg-color'?: string;
+  'page-active-bg-color'?: string;
+  'page-padding-x'?: string;
+  'page-padding-y'?: string;
+  'page-border-radius'?: string;
+  'page-border-width'?: string;
+  'page-border-color'?: string;
+  'page-active-border-color'?: string;
+  'arrow-color'?: string;
+  'button-bg-color'?: string;
+  'button-text-color'?: string;
+  'button-border-radius'?: string;
+  'button-padding-x'?: string;
+  'button-padding-y'?: string;
+  [key: string]: string | undefined;
+}
+
+interface ProductListContextValue {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  filterStyles: FilterStyles;
+  filterProperties: FilterProperties;
+  productsProperties: ProductsProperties;
+  productsStyles: ProductsStyles;
+  productItemProperties: ProductItemProperties;
+  productItemStyles: ProductItemStyles;
+  paginationProperties: PaginationProperties;
+  paginationStyles: PaginationStyles;
+}
+
+const ProductListContext = createContext<ProductListContextValue>({
+  isDesigner: false,
+  selectedSectionId: null,
+  filterStyles: {},
+  filterProperties: { layout: 'top' },
+  productsProperties: {
+    'show-layout-buttons': true,
+    'available-layouts': ['2', '3', '4']
+  },
+  productsStyles: {},
+  productItemProperties: {
+    'show-fav-button': true,
+    'fav-button-position': 'top-right'
+  },
+  productItemStyles: {},
+  paginationProperties: {
+    type: 'list'
+  },
+  paginationStyles: {}
+});
+
+export const useProductList = () => useContext(ProductListContext);
+
+interface ProductListRegistrarProps extends PropsWithChildren {
+  /**
+   * Initial settings from server-side parsing (to avoid flash)
+   */
+  initialSettings?: {
+    filterStyles?: FilterStyles;
+    filterProperties?: FilterProperties;
+  };
+}
+
+/**
+ * ProductListRegistrar
+ *
+ * Registers the Product List Page native placeholder with Theme Editor.
+ * Contains "Filters" section for customizing filters layout and appearance.
+ */
+export default function ProductListRegistrar({
+  children,
+  initialSettings
+}: ProductListRegistrarProps) {
+  const [isDesigner, setIsDesigner] = useState(false);
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
+    null
+  );
+  const [filterStyles, setFilterStyles] = useState<FilterStyles>(
+    initialSettings?.filterStyles || {}
+  );
+  const [filterProperties, setFilterProperties] = useState<FilterProperties>(
+    initialSettings?.filterProperties || {
+      layout: 'top',
+      'item-padding-y': 6,
+      'item-padding-x': 0,
+      'item-margin-bottom': 0
+    }
+  );
+  const [productsProperties, setProductsProperties] =
+    useState<ProductsProperties>({
+      'show-layout-buttons': true,
+      'available-layouts': ['2', '3', '4']
+    });
+  const [productsStyles, setProductsStyles] = useState<ProductsStyles>({});
+  const [productItemProperties, setProductItemProperties] =
+    useState<ProductItemProperties>({
+      'show-fav-button': true,
+      'fav-button-position': 'top-right'
+    });
+  const [productItemStyles, setProductItemStyles] = useState<ProductItemStyles>(
+    {}
+  );
+  const [paginationProperties, setPaginationProperties] =
+    useState<PaginationProperties>({
+      type: 'list'
+    });
+  const [paginationStyles, setPaginationStyles] = useState<PaginationStyles>(
+    {}
+  );
+  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_LIST_PLACEHOLDER_ID);
+
+    // One-time registration per session
+    if (!window.__productListPageRegistered && !registeredRef.current) {
+      window.__productListPageRegistered = true;
+      registeredRef.current = true;
+
+      // Send REGISTER_NATIVE_WIDGETS message to parent
+      const filtersWidgetConfig = {
+        placeholderId: PRODUCT_LIST_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: FILTERS_SECTION_ID,
+          type: 'native',
+          label: 'Filters',
+          blocks: [],
+          properties: initialSettings?.filterProperties || {
+            layout: 'top',
+            'item-padding-y': 6,
+            'item-padding-x': 0,
+            'item-margin-bottom': 0
+          },
+          propertySchema: {
+            layout: {
+              type: 'select',
+              label: 'Layout',
+              options: [
+                { label: 'Top (Above Products)', value: 'top' },
+                { label: 'Sidebar (Left)', value: 'sidebar' }
+              ],
+              default: 'top'
+            },
+            'item-padding-y': {
+              type: 'slider',
+              label: 'Item Vertical Padding',
+              default: 6,
+              min: 0,
+              max: 32,
+              unit: 'px'
+            },
+            'item-padding-x': {
+              type: 'slider',
+              label: 'Item Horizontal Padding',
+              default: 0,
+              min: 0,
+              max: 32,
+              unit: 'px'
+            },
+            'item-margin-bottom': {
+              type: 'slider',
+              label: 'Spacing Between Items',
+              default: 0,
+              min: 0,
+              max: 32,
+              unit: 'px'
+            }
+          },
+          styles: initialSettings?.filterStyles || {}
+        }
+      };
+
+      const productsWidgetConfig = {
+        placeholderId: PRODUCT_LIST_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: PRODUCTS_SECTION_ID,
+          type: 'native',
+          label: 'Products',
+          blocks: [],
+          properties: {
+            'show-layout-buttons': true,
+            'available-layouts': ['2', '3', '4']
+          },
+          propertySchema: {
+            'show-layout-buttons': {
+              type: 'toggle',
+              label: 'Show Layout Buttons',
+              default: true
+            },
+            'available-layouts': {
+              type: 'multiselect',
+              label: 'Available Layouts',
+              default: ['2', '3', '4'],
+              options: [
+                { label: '2 Columns', value: '2' },
+                { label: '3 Columns', value: '3' },
+                { label: '4 Columns', value: '4' },
+                { label: '6 Columns', value: '6' }
+              ]
+            }
+          },
+          styles: {}
+        }
+      };
+
+      const productItemWidgetConfig = {
+        placeholderId: PRODUCT_LIST_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: 'product-item-section',
+          type: 'native',
+          label: 'Product Item',
+          blocks: [],
+          properties: {
+            'show-fav-button': true,
+            'fav-button-position': 'top-right'
+          },
+          propertySchema: {
+            'show-fav-button': {
+              type: 'toggle',
+              label: 'Show Favorite Button',
+              default: true
+            },
+            'fav-button-position': {
+              type: 'select',
+              label: 'Favorite Button Position',
+              default: 'top-right',
+              options: [
+                { label: 'Top Left', value: 'top-left' },
+                { label: 'Top Right', value: 'top-right' },
+                { label: 'Bottom Left', value: 'bottom-left' },
+                { label: 'Bottom Right', value: 'bottom-right' }
+              ]
+            }
+          },
+          styles: {}
+        }
+      };
+
+      const paginationWidgetConfig = {
+        placeholderId: PRODUCT_LIST_PLACEHOLDER_ID,
+        autoAdd: true,
+        section: {
+          id: 'pagination-section',
+          type: 'native',
+          label: 'Pagination',
+          blocks: [],
+          properties: {
+            type: 'list'
+          },
+          propertySchema: {
+            type: {
+              type: 'select',
+              label: 'Pagination Type',
+              default: 'list',
+              options: [
+                { label: 'Page Numbers', value: 'list' },
+                { label: 'Load More Button', value: 'more' },
+                { label: 'Infinite Scroll', value: 'infinite' }
+              ]
+            }
+          },
+          styles: {}
+        }
+      };
+
+      window.parent?.postMessage(
+        {
+          type: 'REGISTER_NATIVE_WIDGETS',
+          data: {
+            widgets: [
+              filtersWidgetConfig,
+              productsWidgetConfig,
+              productItemWidgetConfig,
+              paginationWidgetConfig
+            ]
+          }
+        },
+        '*'
+      );
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle section selection
+      if (type === 'SELECT_SECTION') {
+        if (data?.placeholderId === PRODUCT_LIST_PLACEHOLDER_ID) {
+          setSelectedSectionId(data.sectionId ?? null);
+        }
+      }
+
+      if (type === 'CLEAR_SELECTION') {
+        setSelectedSectionId(null);
+      }
+
+      // 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_LIST_PLACEHOLDER_ID
+        );
+
+        if (placeholder?.sections) {
+          // Process Filters section
+          const filtersSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === FILTERS_SECTION_ID
+          );
+
+          if (filtersSection) {
+            // Extract styles
+            if (filtersSection.styles) {
+              const extractedStyles: FilterStyles = {};
+              Object.entries(filtersSection.styles).forEach(([key, value]) => {
+                const val = extractValue(value);
+                if (val !== undefined && val !== null) {
+                  extractedStyles[key] = String(val);
+                }
+              });
+              setFilterStyles(extractedStyles);
+            }
+
+            // Extract properties
+            if (filtersSection.properties) {
+              const props: FilterProperties = {};
+              const {
+                layout,
+                'item-padding-y': itemPaddingY,
+                'item-padding-x': itemPaddingX,
+                'item-margin-bottom': itemMarginBottom
+              } = filtersSection.properties;
+
+              if (layout) {
+                const layoutVal = extractValue(layout);
+                props.layout = (layoutVal as 'sidebar' | 'top') || 'sidebar';
+              }
+              if (itemPaddingY !== undefined) {
+                const val = extractValue(itemPaddingY);
+                // Parse string value like '14px' to number 14
+                const numVal =
+                  typeof val === 'string' ? parseInt(val, 10) : val;
+                props['item-padding-y'] =
+                  typeof numVal === 'number' && !isNaN(numVal) ? numVal : 6;
+              }
+              if (itemPaddingX !== undefined) {
+                const val = extractValue(itemPaddingX);
+                // Parse string value like '14px' to number 14
+                const numVal =
+                  typeof val === 'string' ? parseInt(val, 10) : val;
+                props['item-padding-x'] =
+                  typeof numVal === 'number' && !isNaN(numVal) ? numVal : 0;
+              }
+              if (itemMarginBottom !== undefined) {
+                const val = extractValue(itemMarginBottom);
+                // Parse string value like '14px' to number 14
+                const numVal =
+                  typeof val === 'string' ? parseInt(val, 10) : val;
+                props['item-margin-bottom'] =
+                  typeof numVal === 'number' && !isNaN(numVal) ? numVal : 0;
+              }
+
+              setFilterProperties(props);
+            }
+          }
+
+          // Process Products section
+          const productsSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === PRODUCTS_SECTION_ID
+          );
+
+          if (productsSection) {
+            // Extract styles
+            if (productsSection.styles) {
+              const extractedStyles: ProductsStyles = {};
+              Object.entries(productsSection.styles).forEach(([key, value]) => {
+                const val = extractValue(value);
+                if (val !== undefined && val !== null) {
+                  extractedStyles[key] = String(val);
+                }
+              });
+              setProductsStyles(extractedStyles);
+            }
+
+            // Extract properties
+            if (productsSection.properties) {
+              const productsProps: ProductsProperties = {};
+              const {
+                'show-layout-buttons': showLayoutButtons,
+                'available-layouts': availableLayouts
+              } = productsSection.properties;
+
+              if (showLayoutButtons !== undefined) {
+                const val = extractValue(showLayoutButtons);
+                productsProps['show-layout-buttons'] =
+                  typeof val === 'boolean' ? val : true;
+              }
+              if (availableLayouts !== undefined) {
+                const val = extractValue(availableLayouts);
+                productsProps['available-layouts'] = Array.isArray(val)
+                  ? val
+                  : ['2', '3', '4'];
+              }
+
+              setProductsProperties(productsProps);
+            }
+          }
+
+          // Process Product Item section
+          const productItemSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === 'product-item-section'
+          );
+
+          if (productItemSection) {
+            // Extract styles
+            if (productItemSection.styles) {
+              const extractedStyles: ProductItemStyles = {};
+              Object.entries(productItemSection.styles).forEach(
+                ([key, value]) => {
+                  const val = extractValue(value);
+                  if (val !== undefined && val !== null) {
+                    extractedStyles[key] = String(val);
+                  }
+                }
+              );
+              setProductItemStyles(extractedStyles);
+            }
+
+            // Extract properties
+            if (productItemSection.properties) {
+              const itemProps: ProductItemProperties = {};
+              const {
+                'show-fav-button': showFavButton,
+                'fav-button-position': favButtonPosition
+              } = productItemSection.properties;
+
+              if (showFavButton !== undefined) {
+                const val = extractValue(showFavButton);
+                itemProps['show-fav-button'] =
+                  typeof val === 'boolean' ? val : true;
+              }
+              if (favButtonPosition !== undefined) {
+                const val = extractValue(favButtonPosition);
+                itemProps['fav-button-position'] =
+                  (val as ProductItemProperties['fav-button-position']) ||
+                  'top-right';
+              }
+
+              setProductItemProperties(itemProps);
+            }
+          }
+
+          // Process Pagination section
+          const paginationSection = placeholder.sections.find(
+            (s: ThemeSection) => s.id === 'pagination-section'
+          );
+
+          if (paginationSection) {
+            // Extract styles
+            if (paginationSection.styles) {
+              const extractedStyles: PaginationStyles = {};
+              Object.entries(paginationSection.styles).forEach(
+                ([key, value]) => {
+                  const val = extractValue(value);
+                  if (val !== undefined && val !== null) {
+                    extractedStyles[key] = String(val);
+                  }
+                }
+              );
+              setPaginationStyles(extractedStyles);
+            }
+
+            // Extract properties
+            if (paginationSection.properties) {
+              const paginationProps: PaginationProperties = {};
+              const { type } = paginationSection.properties;
+
+              if (type !== undefined) {
+                const val = extractValue(type);
+                paginationProps.type =
+                  (val as PaginationProperties['type']) || 'list';
+              }
+
+              setPaginationProperties(paginationProps);
+            }
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      unregisterPlaceholder(PRODUCT_LIST_PLACEHOLDER_ID);
+    };
+  }, [initialSettings]);
+
+  const contextValue: ProductListContextValue = {
+    isDesigner,
+    selectedSectionId,
+    filterStyles,
+    filterProperties,
+    productsProperties,
+    productsStyles,
+    productItemProperties,
+    productItemStyles,
+    paginationProperties,
+    paginationStyles
+  };
+
+  return (
+    <ProductListContext.Provider value={contextValue}>
+      {children}
+    </ProductListContext.Provider>
+  );
+}