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

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

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