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

package/components/theme-editor/dynamic-font-loader.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface DynamicFontLoaderProps {
+  fontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+}
+
+/**
+ * Client-side component to dynamically load Google Fonts
+ * Used for theme editor buttons that use custom fonts
+ */
+export function DynamicFontLoader({
+  fontFamily,
+  fontWeight,
+  fontSubsets
+}: DynamicFontLoaderProps) {
+  useEffect(() => {
+    if (!fontFamily || fontFamily === 'inherit') return;
+
+    // Clean font family name (remove quotes and extra spaces)
+    const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
+
+    // Skip if it's a system font
+    const systemFonts = [
+      'Arial',
+      'Helvetica',
+      'Times New Roman',
+      'Georgia',
+      'Courier New',
+      'Verdana'
+    ];
+    if (systemFonts.includes(cleanFontFamily)) return;
+
+    // Build Google Fonts URL
+    const params = new URLSearchParams();
+
+    // Font family with weights
+    const weights = fontWeight || '100;300;400;500;600;700;800;900';
+    const fontParam = `${cleanFontFamily.replace(/\s+/g, '+')}:wght@${weights}`;
+    params.append('family', fontParam);
+
+    // Subsets
+    if (fontSubsets) {
+      params.append('subset', fontSubsets);
+    }
+
+    // Display swap for better performance
+    params.append('display', 'swap');
+
+    const fontUrl = `https://fonts.googleapis.com/css2?${params.toString()}`;
+
+    // Check if link already exists
+    const existingLink = document.querySelector(`link[href="${fontUrl}"]`);
+    if (existingLink) return;
+
+    // Create and append link element
+    const link = document.createElement('link');
+    link.href = fontUrl;
+    link.rel = 'stylesheet';
+    link.id = `google-font-${cleanFontFamily
+      .replace(/\s+/g, '-')
+      .toLowerCase()}`;
+
+    document.head.appendChild(link);
+
+    // Cleanup on unmount
+    return () => {
+      const linkToRemove = document.getElementById(link.id);
+      if (linkToRemove) {
+        document.head.removeChild(linkToRemove);
+      }
+    };
+  }, [fontFamily, fontWeight, fontSubsets]);
+
+  return null;
+}

package/components/theme-editor/hooks/use-designer-features.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useCallback } from 'react';
+
+interface BlockInfo {
+  id: string;
+  type: string;
+  label: string;
+}
+
+interface UseDesignerFeaturesProps {
+  blockId: string;
+  placeholderId: string;
+  sectionId: string;
+  isDesigner: boolean;
+  blockInfo?: BlockInfo;
+}
+
+export function useDesignerFeatures({
+  blockId,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  blockInfo
+}: UseDesignerFeaturesProps) {
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'SELECT_BLOCK',
+              data: {
+                placeholderId,
+                sectionId,
+                blockId,
+                blockType: blockInfo?.type,
+                blockLabel: blockInfo?.label
+              }
+            },
+            '*'
+          );
+        }
+      }
+    },
+    [isDesigner, blockId, placeholderId, sectionId, blockInfo]
+  );
+
+  const createActionHandler = useCallback(
+    (actionType: string) => () => {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: actionType,
+            data: {
+              placeholderId,
+              sectionId,
+              blockId
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [blockId, placeholderId, sectionId]
+  );
+
+  const handleRename = useCallback(
+    (newLabel: string) => {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'RENAME_BLOCK',
+            data: {
+              placeholderId,
+              sectionId,
+              blockId,
+              label: newLabel
+            }
+          },
+          '*'
+        );
+      }
+    },
+    [blockId, placeholderId, sectionId]
+  );
+
+  return {
+    handleClick,
+    onMoveUp: createActionHandler('MOVE_BLOCK_UP'),
+    onMoveDown: createActionHandler('MOVE_BLOCK_DOWN'),
+    onDuplicate: createActionHandler('DUPLICATE_BLOCK'),
+    onToggleVisibility: createActionHandler('TOGGLE_BLOCK_VISIBILITY'),
+    onDelete: createActionHandler('DELETE_BLOCK'),
+    onRename: handleRename
+  };
+}

package/components/theme-editor/hooks/use-external-designer.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  registerPlaceholder,
+  unregisterPlaceholder
+} from '../placeholder-registry';
+
+interface UseExternalDesignerOptions {
+  placeholderId: string;
+}
+
+interface ExternalDesignerState {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+}
+
+export function useExternalDesigner({
+  placeholderId
+}: UseExternalDesignerOptions): ExternalDesignerState {
+  const [isDesigner, setIsDesigner] = useState(false);
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
+    null
+  );
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const isInIframe = window.self !== window.top;
+
+    // Set isDesigner immediately if in iframe (don't wait for SET_THEME_EDITOR_COOKIE)
+    if (isInIframe) {
+      setIsDesigner(true);
+    }
+
+    if (isInIframe && window.parent) {
+      // Only send IFRAME_READY once per page session to prevent re-initialization
+      if (
+        !(window as Window & { __iframeReadySent?: boolean }).__iframeReadySent
+      ) {
+        window.parent.postMessage(
+          {
+            type: 'IFRAME_READY'
+          },
+          '*'
+        );
+        (window as Window & { __iframeReadySent?: boolean }).__iframeReadySent =
+          true;
+      }
+
+      registerPlaceholder(placeholderId);
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Also handle SET_THEME_EDITOR_COOKIE for backwards compatibility
+      if (type === 'SET_THEME_EDITOR_COOKIE' && data) {
+        setIsDesigner(true);
+      }
+
+      if (type === 'SELECT_SECTION' && data?.placeholderId === placeholderId) {
+        setSelectedSectionId(data.sectionId ?? null);
+        setSelectedBlockId(null);
+      }
+
+      if (type === 'SELECT_BLOCK' && data?.placeholderId === placeholderId) {
+        setSelectedSectionId(data.sectionId ?? null);
+        setSelectedBlockId(data.blockId ?? null);
+      }
+
+      if (type === 'CLEAR_SELECTION') {
+        setSelectedSectionId(null);
+        setSelectedBlockId(null);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      unregisterPlaceholder(placeholderId);
+    };
+  }, [placeholderId]);
+
+  return {
+    isDesigner,
+    selectedSectionId,
+    selectedBlockId
+  };
+}

package/components/theme-editor/hooks/use-native-widget-data.ts

@@ -0,0 +1,188 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import {
+  useGetWidgetQuery,
+  useGetWidgetSchemaQuery
+} from '../../../data/client/misc';
+
+export interface NativeWidgetBlock {
+  id: string;
+  type?: string;
+  label?: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  value?: unknown;
+  blocks?: NativeWidgetBlock[];
+}
+
+export interface NativeWidgetData {
+  blocks: Map<string, NativeWidgetBlock>;
+  sectionStyles: Record<string, unknown>;
+  sectionProperties: Record<string, unknown>;
+  isLoading: boolean;
+  getBlock: (blockId: string) => NativeWidgetBlock | undefined;
+  getSectionStyle: (key: string) => unknown;
+  getSectionProperty: (key: string) => unknown;
+}
+
+interface UseNativeWidgetDataOptions {
+  widgetSlug: string;
+  sectionId: string;
+  skip?: boolean;
+  blockMeta?: Array<{ id: string; type: string; label: string }>;
+}
+
+function parseAttributeValue(attrData: unknown): unknown {
+  if (attrData === undefined || attrData === null) return undefined;
+
+  if (typeof attrData === 'string') {
+    try {
+      return JSON.parse(attrData);
+    } catch {
+      return attrData;
+    }
+  }
+
+  if (typeof attrData === 'object' && attrData !== null && 'value' in attrData) {
+    const value = (attrData as { value?: unknown }).value;
+    if (typeof value === 'string') {
+      try {
+        return JSON.parse(value);
+      } catch {
+        return value;
+      }
+    }
+    return value;
+  }
+
+  return attrData;
+}
+
+function extractResponsiveValue(value: unknown): unknown {
+  if (typeof value === 'object' && value !== null && 'desktop' in value) {
+    return (value as Record<string, unknown>).desktop;
+  }
+  return value;
+}
+
+export function useNativeWidgetData({
+  widgetSlug,
+  sectionId,
+  skip = false,
+  blockMeta = []
+}: UseNativeWidgetDataOptions): NativeWidgetData {
+  const [blockMap, setBlockMap] = useState<Map<string, NativeWidgetBlock>>(
+    () => new Map()
+  );
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>({});
+  const [sectionProperties, setSectionProperties] = useState<Record<string, unknown>>({});
+  const blockMapRef = useRef(blockMap);
+
+  const { data: widgetData, isLoading: isWidgetLoading } = useGetWidgetQuery(
+    widgetSlug,
+    { skip }
+  );
+
+  const { data: schemaData, isLoading: isSchemaLoading } = useGetWidgetSchemaQuery(
+    widgetSlug,
+    { skip }
+  );
+
+  useEffect(() => {
+    if (skip) return;
+
+    const schema = schemaData?.schema;
+    const attributes = widgetData?.attributes;
+
+    const sectionMeta = schema?.[sectionId]?.metadata;
+    if (sectionMeta) {
+      if (sectionMeta.styles) {
+        setSectionStyles(sectionMeta.styles);
+      }
+      if (sectionMeta.properties) {
+        setSectionProperties(sectionMeta.properties);
+      }
+    }
+
+    const newBlockMap = new Map<string, NativeWidgetBlock>();
+
+    blockMeta.forEach((meta) => {
+      newBlockMap.set(meta.id, {
+        id: meta.id,
+        type: meta.type,
+        label: meta.label
+      });
+    });
+
+    if (schema) {
+      Object.entries(schema).forEach(([blockId, blockSchema]: [string, any]) => {
+        if (blockId === sectionId) return;
+
+        const metadata = blockSchema?.metadata || {};
+        const existing = newBlockMap.get(blockId);
+        const value = attributes ? parseAttributeValue(attributes[blockId]) : undefined;
+
+        newBlockMap.set(blockId, {
+          ...existing,
+          id: blockId,
+          type: metadata.type || existing?.type,
+          label: blockSchema.label || existing?.label,
+          styles: metadata.styles || {},
+          properties: metadata.properties || {},
+          value
+        });
+      });
+    } else if (attributes) {
+      Object.keys(attributes).forEach((blockId) => {
+        const existing = newBlockMap.get(blockId);
+        const parsed = parseAttributeValue(attributes[blockId]);
+
+        if (typeof parsed === 'object' && parsed !== null) {
+          const payload = parsed as Record<string, unknown>;
+          newBlockMap.set(blockId, {
+            ...existing,
+            id: blockId,
+            styles: (payload.styles as Record<string, unknown>) || existing?.styles,
+            properties: (payload.properties as Record<string, unknown>) || existing?.properties,
+            value: payload.value !== undefined ? payload.value : existing?.value
+          });
+        } else {
+          newBlockMap.set(blockId, {
+            ...existing,
+            id: blockId,
+            value: parsed
+          });
+        }
+      });
+    }
+
+    setBlockMap(newBlockMap);
+    blockMapRef.current = newBlockMap;
+  }, [skip, widgetData, schemaData, sectionId, blockMeta]);
+
+  const getBlock = useCallback(
+    (blockId: string) => blockMapRef.current.get(blockId),
+    []
+  );
+
+  const getSectionStyle = useCallback(
+    (key: string) => extractResponsiveValue(sectionStyles[key]),
+    [sectionStyles]
+  );
+
+  const getSectionProperty = useCallback(
+    (key: string) => extractResponsiveValue(sectionProperties[key]),
+    [sectionProperties]
+  );
+
+  return {
+    blocks: blockMap,
+    sectionStyles,
+    sectionProperties,
+    isLoading: isWidgetLoading || isSchemaLoading,
+    getBlock,
+    getSectionStyle,
+    getSectionProperty
+  };
+}

package/components/theme-editor/hooks/use-visibility-context.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useSession } from 'next-auth/react';
+
+import { useLocalization } from '../../../hooks/use-localization';
+
+export const useVisibilityContext = (currentBreakpoint = 'desktop') => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { status } = useSession();
+  const { locale, currency } = useLocalization();
+
+  return {
+    authState:
+      status === 'authenticated'
+        ? ('authenticated' as const)
+        : status === 'loading'
+        ? ('loading' as const)
+        : ('guest' as const),
+    breakpoint: currentBreakpoint,
+    locale: String(locale || ''),
+    currency: String(currency || ''),
+    pathname: String(pathname || ''),
+    searchParams
+  };
+};

package/components/theme-editor/placeholder-registry.ts

@@ -0,0 +1,31 @@
+const placeholderRegistry = new Set<string>();
+let registryTimeout: NodeJS.Timeout | null = null;
+
+export const registerPlaceholder = (slug: string) => {
+  placeholderRegistry.add(slug);
+
+  if (registryTimeout) {
+    clearTimeout(registryTimeout);
+  }
+
+  registryTimeout = setTimeout(() => {
+    if (
+      typeof window !== 'undefined' &&
+      window.parent &&
+      window.self !== window.top
+    ) {
+      const availablePlaceholders = Array.from(placeholderRegistry);
+      window.parent.postMessage(
+        {
+          type: 'PLACEHOLDERS_AVAILABLE',
+          data: { placeholders: availablePlaceholders }
+        },
+        '*'
+      );
+    }
+  }, 100);
+};
+
+export const unregisterPlaceholder = (slug: string) => {
+  placeholderRegistry.delete(slug);
+};