@akinon/next 2.0.0-beta.20 → 2.0.0-beta.22

package/components/theme-editor/theme-placeholder-wrapper.tsx

@@ -1,732 +0,0 @@
-'use client';
-
-import { useEffect, useState, useMemo } from 'react';
-import ThemeSection, { Section } from './theme-section';
-import {
-  registerPlaceholder,
-  unregisterPlaceholder
-} from './placeholder-registry';
-import { ThemeSettingsProvider } from './theme-settings-context';
-import { generateThemeCSS } from './utils';
-import { useVisibilityContext } from './hooks/use-visibility-context';
-import { applyVisibilityRulesToSections } from './utils/visibility-rules';
-import { isPublishWindowVisible } from './utils/publish-window';
-import { buildClientRequestUrl } from '../../utils';
-
-// Helper function to inject theme colors as CSS custom properties
-const injectThemeColors = (settings: Record<string, unknown>) => {
-  if (!settings) return;
-
-  const root = document.documentElement;
-
-  // Primary Styling colors
-  if (settings.primaryColor) {
-    root.style.setProperty('--theme-primary', settings.primaryColor as string);
-  }
-  if (settings.secondaryColor) {
-    root.style.setProperty(
-      '--theme-secondary',
-      settings.secondaryColor as string
-    );
-  }
-  if (settings.color3) {
-    root.style.setProperty('--theme-color3', settings.color3 as string);
-  }
-  if (settings.color4) {
-    root.style.setProperty('--theme-color4', settings.color4 as string);
-  }
-  if (settings.backgroundColor) {
-    root.style.setProperty(
-      '--theme-background',
-      settings.backgroundColor as string
-    );
-    document.body.style.backgroundColor = settings.backgroundColor as string;
-  }
-
-  // Also set opacity values if needed
-  if (settings.primaryOpacity !== undefined) {
-    root.style.setProperty(
-      '--theme-primary-opacity',
-      String(settings.primaryOpacity)
-    );
-  }
-  if (settings.secondaryOpacity !== undefined) {
-    root.style.setProperty(
-      '--theme-secondary-opacity',
-      String(settings.secondaryOpacity)
-    );
-  }
-  if (settings.color3Opacity !== undefined) {
-    root.style.setProperty(
-      '--theme-color3-opacity',
-      String(settings.color3Opacity)
-    );
-  }
-  if (settings.color4Opacity !== undefined) {
-    root.style.setProperty(
-      '--theme-color4-opacity',
-      String(settings.color4Opacity)
-    );
-  }
-  if (settings.backgroundOpacity !== undefined) {
-    root.style.setProperty(
-      '--theme-background-opacity',
-      String(settings.backgroundOpacity)
-    );
-  }
-  if (settings.breadcrumbSeparator) {
-    root.style.setProperty(
-      '--theme-breadcrumb-separator',
-      `"${settings.breadcrumbSeparator}"`
-    );
-    root.style.setProperty('--theme-breadcrumb-icon-display', 'none');
-  } else {
-    root.style.removeProperty('--theme-breadcrumb-separator');
-    root.style.removeProperty('--theme-breadcrumb-icon-display');
-  }
-
-  if (settings.mainMenuSticky !== undefined) {
-    const isSticky = settings.mainMenuSticky;
-    root.style.setProperty(
-      '--theme-header-position',
-      isSticky ? 'sticky' : 'relative'
-    );
-    root.style.setProperty('--theme-header-top', isSticky ? '0' : 'auto');
-    root.style.setProperty('--theme-header-z-index', isSticky ? '40' : 'auto');
-
-    // Sticky positioning requires ancestors to not have overflow: hidden
-    // We force overflow-x to 'clip' (modern browsers) or 'visible' to fix this
-    if (isSticky) {
-      document.body.style.overflowX = 'clip';
-    } else {
-      document.body.style.overflowX = '';
-    }
-  }
-};
-
-// Helper function to load Google Font
-const loadGoogleFont = (fontFamily: string, fontWeight?: string) => {
-  if (!fontFamily || fontFamily === 'inherit') return;
-
-  const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
-
-  // Skip system fonts
-  const systemFonts = [
-    'Arial',
-    'Helvetica',
-    'Times New Roman',
-    'Georgia',
-    'Courier New',
-    'Verdana'
-  ];
-  if (systemFonts.includes(cleanFontFamily)) return;
-
-  const weights = fontWeight || '100;300;400;500;600;700;800;900';
-  const fontParam = `${cleanFontFamily.replace(/\s+/g, '+')}:wght@${weights}`;
-  const fontUrl = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
-
-  const linkId = `google-font-${cleanFontFamily
-    .replace(/\s+/g, '-')
-    .toLowerCase()}`;
-
-  // Check if already loaded
-  if (document.getElementById(linkId)) return;
-
-  const link = document.createElement('link');
-  link.id = linkId;
-  link.href = fontUrl;
-  link.rel = 'stylesheet';
-  document.head.appendChild(link);
-};
-
-interface ThemePlaceholderWrapperProps {
-  slug: string;
-  initialSections: Section[];
-  initialPlaceholderId: string;
-  isDesignMode: boolean;
-  dataSources?: any[];
-  initialThemeSettings?: Record<string, unknown> | null;
-}
-
-declare global {
-  interface Window {
-    __iframeReadySent?: boolean;
-    __productPickerPreviewListenerAttached?: boolean;
-  }
-}
-
-const postProductPickerResponse = (
-  requestId: string,
-  ok: boolean,
-  result?: unknown,
-  error?: string
-) => {
-  if (!window.parent) {
-    return;
-  }
-
-  window.parent.postMessage(
-    {
-      type: 'PRODUCT_PICKER_RESPONSE',
-      data: {
-        requestId,
-        ok,
-        result,
-        error
-      }
-    },
-    '*'
-  );
-};
-
-const attachProductPickerPreviewListener = () => {
-  if (
-    typeof window === 'undefined' ||
-    window.__productPickerPreviewListenerAttached
-  ) {
-    return;
-  }
-
-  window.__productPickerPreviewListenerAttached = true;
-
-  window.addEventListener('message', async event => {
-    const type = event.data?.type;
-    const requestId = event.data?.data?.requestId;
-
-    if (
-      ![
-        'PRODUCT_PICKER_SEARCH',
-        'PRODUCT_PICKER_RESOLVE_URL',
-        'PRODUCT_PICKER_GET_PRODUCT'
-      ].includes(type) ||
-      typeof requestId !== 'string'
-    ) {
-      return;
-    }
-
-    try {
-      if (type === 'PRODUCT_PICKER_SEARCH') {
-        const query = String(event.data?.data?.query || '').trim();
-
-        if (!query) {
-          postProductPickerResponse(requestId, true, { groups: [] });
-          return;
-        }
-
-        const response = await fetch(
-          buildClientRequestUrl(
-            `/autocomplete/?search_text=${encodeURIComponent(query)}`
-          )
-        );
-
-        if (!response.ok) {
-          throw new Error(`Autocomplete request failed with ${response.status}.`);
-        }
-
-        postProductPickerResponse(requestId, true, await response.json());
-        return;
-      }
-
-      if (type === 'PRODUCT_PICKER_RESOLVE_URL') {
-        const path = String(event.data?.data?.path || '').trim();
-
-        if (!path) {
-          postProductPickerResponse(requestId, true, { results: [] });
-          return;
-        }
-
-        const response = await fetch(
-          buildClientRequestUrl(
-            `/pretty_urls/?new_path__exact=${encodeURIComponent(path)}`
-          )
-        );
-
-        if (!response.ok) {
-          throw new Error(`Pretty URL request failed with ${response.status}.`);
-        }
-
-        postProductPickerResponse(requestId, true, await response.json());
-        return;
-      }
-
-      const productPk = Number.parseInt(String(event.data?.data?.pk || ''), 10);
-      if (!Number.isFinite(productPk) || productPk <= 0) {
-        throw new Error('Product PK is invalid.');
-      }
-
-      const response = await fetch(
-        buildClientRequestUrl(`/product/${productPk}/`)
-      );
-
-      if (!response.ok) {
-        throw new Error(`Product request failed with ${response.status}.`);
-      }
-
-      postProductPickerResponse(requestId, true, await response.json());
-    } catch (error) {
-      postProductPickerResponse(
-        requestId,
-        false,
-        undefined,
-        error instanceof Error ? error.message : 'Preview request failed.'
-      );
-    }
-  });
-};
-
-export default function ThemePlaceholderWrapper({
-  slug,
-  initialSections,
-  initialPlaceholderId,
-  isDesignMode,
-  dataSources: initialDataSources = [],
-  initialThemeSettings = null
-}: ThemePlaceholderWrapperProps) {
-  const [sections, setSections] = useState<Section[]>(initialSections);
-  const [placeholderSlug, setPlaceholderSlug] =
-    useState<string>(initialPlaceholderId);
-  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
-    null
-  );
-  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
-  const [currentBreakpoint, setCurrentBreakpoint] = useState<string>('desktop');
-  const [isDesigner, setIsDesigner] = useState(isDesignMode);
-  const [dataSources, setDataSources] = useState<any[]>(initialDataSources);
-  const [themeSettings, setThemeSettings] = useState<Record<
-    string,
-    unknown
-  > | null>(initialThemeSettings);
-
-  // Inject theme colors when settings change
-  useEffect(() => {
-    if (themeSettings) {
-      injectThemeColors(themeSettings);
-    }
-  }, [themeSettings]);
-
-  // Inject custom fonts from theme settings
-  useEffect(() => {
-    if (!themeSettings?.customFonts) return;
-    const customFonts = themeSettings.customFonts as {
-      name: string;
-      sources: { dataUrl: string; format: string }[];
-    }[];
-
-    customFonts.forEach((font) => {
-      if (!font.name || !Array.isArray(font.sources) || font.sources.length === 0) return;
-
-      const styleId = `custom-font-${font.name.replace(/\s+/g, '-').toLowerCase()}`;
-      const existing = document.getElementById(styleId);
-      if (existing) existing.remove(); // Re-inject in case sources changed
-
-      const src = font.sources
-        .map((s) => `url('${s.dataUrl}') format('${s.format}')`)
-        .join(', ');
-
-      const style = document.createElement('style');
-      style.id = styleId;
-      style.textContent = `@font-face { font-family: '${font.name}'; src: ${src}; font-display: swap; }`;
-      document.head.appendChild(style);
-    });
-  }, [themeSettings]);
-
-  // Load fonts from initial sections on mount (for production site, not iframe)
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    // Helper to extract and load fonts from blocks
-    const loadFontsFromBlocks = (blocks: Section['blocks']) => {
-      if (!blocks) return;
-
-      blocks.forEach((block) => {
-        const fontFamily =
-          block.styles?.['font-family']?.desktop ||
-          block.styles?.['font-family']?.mobile;
-        if (fontFamily && fontFamily !== 'inherit') {
-          loadGoogleFont(fontFamily);
-        }
-
-        // Recursively check nested blocks
-        if (block.blocks) {
-          loadFontsFromBlocks(block.blocks as Section['blocks']);
-        }
-      });
-    };
-
-    // Load fonts from all initial sections
-    initialSections.forEach((section) => {
-      loadFontsFromBlocks(section.blocks);
-    });
-  }, [initialSections]);
-
-  // Handle responsive breakpoint detection when not in iframe (e.g. production site)
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const checkIsInIframe = () => {
-      try {
-        return window.self !== window.top;
-      } catch (e) {
-        return true;
-      }
-    };
-
-    if (!checkIsInIframe()) {
-      const checkBreakpoint = () => {
-        const width = window.innerWidth;
-        // Use 1024px as the cutoff for desktop/mobile based on DEFAULT_BREAKPOINTS
-        const newBreakpoint = width < 1024 ? 'mobile' : 'desktop';
-
-        setCurrentBreakpoint((prev) => {
-          if (prev !== newBreakpoint) {
-            return newBreakpoint;
-          }
-          return prev;
-        });
-      };
-
-      let timeoutId: ReturnType<typeof setTimeout>;
-      const handleResize = () => {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(checkBreakpoint, 200);
-      };
-
-      // Initial check
-      checkBreakpoint();
-
-      window.addEventListener('resize', handleResize);
-      return () => {
-        window.removeEventListener('resize', handleResize);
-        clearTimeout(timeoutId);
-      };
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!isDesigner) return;
-    if (dataSources && dataSources.length > 0) {
-      setSections((prevSections) => {
-        return prevSections.map((section) => {
-          if (section.dataSourceId) {
-            const dataSource = dataSources.find(
-              (ds: any) => ds.id === section.dataSourceId
-            );
-
-            return {
-              ...section,
-              dataSource: dataSource || section.dataSource
-            };
-          }
-          return section;
-        });
-      });
-    }
-  }, [dataSources, isDesigner]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const checkIsInIframe = () => {
-      return window.self !== window.top;
-    };
-
-    const isInIframe = checkIsInIframe();
-
-    if (isInIframe && window.parent) {
-      attachProductPickerPreviewListener();
-
-      // Only send IFRAME_READY once per page session to prevent re-initialization
-      if (!window.__iframeReadySent) {
-        window.parent.postMessage(
-          {
-            type: 'IFRAME_READY'
-          },
-          '*'
-        );
-        window.__iframeReadySent = true;
-      }
-
-      registerPlaceholder(slug);
-    }
-
-    const handleMessage = (event: MessageEvent) => {
-      switch (event.data?.type) {
-        case 'SET_THEME_EDITOR_COOKIE':
-          if (event.data.data) {
-            setIsDesigner(true);
-          }
-          break;
-
-        case 'LOAD_THEME':
-        case 'UPDATE_THEME': {
-          const theme = event.data.data?.theme;
-
-          // Inject theme colors as CSS custom properties
-          if (theme?.settings) {
-            injectThemeColors(theme.settings);
-            setThemeSettings(theme.settings);
-          }
-
-          // Load fonts from typography settings
-          if (
-            theme?.settings?.typography &&
-            Array.isArray(theme.settings.typography)
-          ) {
-            const uniqueFonts = new Set<string>();
-            theme.settings.typography.forEach(
-              (variant: { fontFamily?: string }) => {
-                if (variant.fontFamily && variant.fontFamily !== 'inherit') {
-                  uniqueFonts.add(variant.fontFamily);
-                }
-              }
-            );
-            uniqueFonts.forEach((font) => loadGoogleFont(font));
-          }
-
-          // Load fonts from block styles (for text blocks with custom fonts)
-          if (theme?.placeholders) {
-            // Recursive function to load fonts from nested blocks
-            const loadFontsFromBlocks = (blocks: any[]) => {
-              blocks?.forEach((block) => {
-                const fontFamily =
-                  block.styles?.['font-family']?.desktop ||
-                  block.styles?.['font-family']?.mobile;
-                if (fontFamily && fontFamily !== 'inherit') {
-                  loadGoogleFont(fontFamily);
-                }
-                // Recursively check nested blocks
-                if (block.blocks && block.blocks.length > 0) {
-                  loadFontsFromBlocks(block.blocks);
-                }
-              });
-            };
-
-            theme.placeholders.forEach(
-              (p: {
-                sections?: Array<{
-                  blocks?: Array<any>;
-                }>;
-              }) => {
-                p.sections?.forEach((section) => {
-                  loadFontsFromBlocks(section.blocks || []);
-                });
-              }
-            );
-          }
-
-          if (theme?.placeholders) {
-            const placeholder = theme.placeholders.find(
-              (p: { slug: string }) => p.slug === slug
-            );
-
-            if (placeholder) {
-              setPlaceholderSlug(placeholder.slug);
-
-              // Store dataSources in state for editor mode
-              if (theme.dataSources) {
-                setDataSources(theme.dataSources);
-              }
-
-              if (placeholder.sections) {
-                // In editor mode: Complete override with theme editor's data
-                // This allows unsaved sections to render with editor's product data
-                setSections(() => {
-                  return placeholder.sections.map((incomingSection: any) => {
-                    let dataSource = null;
-                    if (incomingSection.dataSourceId && theme.dataSources) {
-                      dataSource = theme.dataSources.find(
-                        (ds: any) => ds.id === incomingSection.dataSourceId
-                      );
-                    }
-
-                    // Deep clone the section to ensure React detects changes
-                    // Especially important for nested blocks and styles
-                    return {
-                      ...incomingSection,
-                      blocks: incomingSection.blocks
-                        ? JSON.parse(JSON.stringify(incomingSection.blocks))
-                        : [],
-                      styles: incomingSection.styles
-                        ? { ...incomingSection.styles }
-                        : {},
-                      properties: incomingSection.properties
-                        ? { ...incomingSection.properties }
-                        : {},
-                      dataSource: dataSource || null
-                    };
-                  });
-                });
-              }
-            }
-          }
-          break;
-        }
-
-        case 'SELECT_SECTION': {
-          const { sectionId } = event.data.data || {};
-          if (sectionId) {
-            setSelectedSectionId(sectionId);
-            setSelectedBlockId(null);
-          }
-          break;
-        }
-
-        case 'SELECT_BLOCK': {
-          const { blockId } = event.data.data || {};
-          if (blockId) {
-            setSelectedBlockId(blockId);
-            setSelectedSectionId(null);
-          }
-          break;
-        }
-
-        case 'CHANGE_BREAKPOINT': {
-          const { breakpoint } = event.data.data || {};
-          if (breakpoint) {
-            setCurrentBreakpoint(breakpoint);
-          }
-          break;
-        }
-
-        case 'CLEAR_SELECTION': {
-          setSelectedSectionId(null);
-          setSelectedBlockId(null);
-          break;
-        }
-
-        case 'LOAD_FONT': {
-          const { fontFamily, fontWeight } = event.data.data || {};
-          if (fontFamily) {
-            loadGoogleFont(fontFamily, fontWeight);
-          }
-          break;
-        }
-
-        case 'LOAD_CUSTOM_FONT': {
-          const { name, sources } = event.data.data || {};
-          if (!name || !Array.isArray(sources) || sources.length === 0) break;
-
-          const styleId = `custom-font-${name.replace(/\s+/g, '-').toLowerCase()}`;
-          if (document.getElementById(styleId)) break;
-
-          const src = sources
-            .map((s: { dataUrl: string; format: string }) => `url('${s.dataUrl}') format('${s.format}')`)
-            .join(', ');
-
-          const style = document.createElement('style');
-          style.id = styleId;
-          style.textContent = `@font-face { font-family: '${name}'; src: ${src}; font-display: swap; }`;
-          document.head.appendChild(style);
-          break;
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => {
-      window.removeEventListener('message', handleMessage);
-      unregisterPlaceholder(slug);
-    };
-  }, [slug]);
-
-  const sendAction = (
-    action: string,
-    data: {
-      placeholderId?: string;
-      sectionId?: string;
-      blockId?: string;
-      label?: string;
-    }
-  ) => {
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          type: action,
-          data
-        },
-        '*'
-      );
-    }
-  };
-
-  const dynamicCSS = useMemo(
-    () =>
-      generateThemeCSS(sections, isDesigner ? currentBreakpoint : undefined),
-    [sections, isDesigner, currentBreakpoint]
-  );
-  const visibilityContext = useVisibilityContext(currentBreakpoint);
-  const renderedSections = useMemo(
-    () => applyVisibilityRulesToSections(sections, visibilityContext),
-    [sections, visibilityContext]
-  );
-
-  return (
-    <ThemeSettingsProvider value={themeSettings}>
-      {dynamicCSS && <style dangerouslySetInnerHTML={{ __html: dynamicCSS }} />}
-      <div
-        data-placeholder={slug}
-        className="theme-placeholder"
-        style={{ backgroundColor: 'var(--theme-background)' }}
-      >
-        {renderedSections
-          .sort((a, b) => a.order - b.order)
-          .filter((section) =>
-            !section.hidden &&
-            (isDesigner ||
-              isPublishWindowVisible(section.properties?.['publish-window']))
-          )
-          .map((section) => (
-            <ThemeSection
-              key={section.id}
-              section={section}
-              placeholderId={placeholderSlug}
-              isDesigner={isDesigner}
-              isSelected={selectedSectionId === section.id}
-              selectedBlockId={selectedBlockId}
-              currentBreakpoint={currentBreakpoint}
-              onSelect={setSelectedSectionId}
-              onMoveUp={() =>
-                sendAction('MOVE_SECTION_UP', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onMoveDown={() =>
-                sendAction('MOVE_SECTION_DOWN', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onDuplicate={() =>
-                sendAction('DUPLICATE_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onToggleVisibility={() =>
-                sendAction('TOGGLE_SECTION_VISIBILITY', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onDelete={() =>
-                sendAction('DELETE_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onRename={(newLabel) =>
-                sendAction('RENAME_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id,
-                  label: newLabel
-                })
-              }
-            />
-          ))}
-      </div>
-    </ThemeSettingsProvider>
-  );
-}