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

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

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