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

package/app-template/src/views/footer/footer-native-widgets.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useEffect } from 'react';
+import type { FooterNativeWidgetSection, FooterNativeWidgetBlock } from './native-widget-config';
+
+interface FooterNativeWidgetsProps {
+  sections: FooterNativeWidgetSection[];
+}
+
+interface MappedBlock {
+  id: string;
+  type: string;
+  label: string;
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  value?: unknown;
+  blocks?: MappedBlock[];
+}
+
+const mapBlock = (block: FooterNativeWidgetBlock): MappedBlock => ({
+  id: block.id,
+  type: block.type,
+  label: block.label,
+  styles: block.styles,
+  properties: block.properties,
+  value: block.value,
+  blocks: block.blocks?.map(mapBlock)
+});
+
+export default function FooterNativeWidgets({
+  sections
+}: FooterNativeWidgetsProps) {
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const isInIframe = window.self !== window.top;
+    if (!isInIframe || !window.parent || !sections.length) {
+      return;
+    }
+
+    const widgets = sections.map((section) => ({
+      placeholderId: section.placeholderId,
+      section: {
+        id: section.sectionId,
+        type: 'native',
+        label: section.label,
+        blocks: section.blocks.map(mapBlock)
+      }
+    }));
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets }
+      },
+      '*'
+    );
+  }, [sections]);
+
+  return null;
+}

package/app-template/src/views/footer/footer-social-context.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_SOCIAL_SECTION_ID,
+  FOOTER_SOCIAL_WIDGET_SLUG,
+  FOOTER_SOCIAL_ICONS_BLOCK_ID,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export { FOOTER_SOCIAL_ICONS_BLOCK_ID };
+
+type FooterSocialBlockState = FooterNativeWidgetBlock;
+
+interface FooterSocialContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterSocialBlockState | undefined;
+  blockVersion: number;
+}
+
+const FooterSocialContext = createContext<FooterSocialContextValue>({
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlock: () => undefined,
+  blockVersion: 0
+});
+
+const BLOCK_META = [
+  {
+    id: FOOTER_SOCIAL_ICONS_BLOCK_ID,
+    type: 'social-icons-list',
+    label: 'Social Icons'
+  }
+];
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>
+): FooterSocialBlockState => {
+  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
+  return {
+    id: block.id ?? fallback?.id ?? '',
+    type: block.type ?? fallback?.type,
+    label: block.label ?? fallback?.label,
+    styles: block.styles,
+    properties: block.properties,
+    value: block.value
+  } as FooterSocialBlockState;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterNativeWidgetBlock[],
+  defaultIcons?: SocialIconItem[]
+): Map<string, FooterSocialBlockState> => {
+  const map = new Map<string, FooterSocialBlockState>();
+  blocks?.forEach((block) => {
+    map.set(block.id, toBlockState(block));
+  });
+
+  BLOCK_META.forEach((meta) => {
+    if (!map.has(meta.id)) {
+      const defaultProperties =
+        meta.id === FOOTER_SOCIAL_ICONS_BLOCK_ID && defaultIcons?.length
+          ? { icons: defaultIcons }
+          : undefined;
+
+      map.set(
+        meta.id,
+        toBlockState({
+          ...meta,
+          properties: defaultProperties
+        })
+      );
+    } else if (
+      meta.id === FOOTER_SOCIAL_ICONS_BLOCK_ID &&
+      defaultIcons?.length
+    ) {
+      const existing = map.get(meta.id);
+      const existingIcons = (existing?.properties as any)?.icons;
+      if (
+        !existingIcons ||
+        (Array.isArray(existingIcons) && existingIcons.length === 0)
+      ) {
+        map.set(
+          meta.id,
+          toBlockState({
+            ...existing,
+            properties: { ...existing?.properties, icons: defaultIcons }
+          })
+        );
+      }
+    }
+  });
+
+  return map;
+};
+
+export interface SocialIconItem {
+  icon: string;
+  link: string;
+  size?: number;
+  color?: string;
+}
+
+interface FooterSocialProviderProps {
+  initialBlocks?: FooterNativeWidgetBlock[];
+  defaultIcons?: SocialIconItem[];
+}
+
+export function FooterSocialProvider({
+  initialBlocks,
+  defaultIcons,
+  children
+}: PropsWithChildren<FooterSocialProviderProps>) {
+  const designerState = useExternalDesigner({
+    placeholderId: FOOTER_PLACEHOLDER_ID
+  });
+
+  const [blockMap, setBlockMap] = useState(() =>
+    mapFromSnapshot(initialBlocks, defaultIcons)
+  );
+  const blockMapRef = useRef(blockMap);
+  const [blockVersion, setBlockVersion] = useState(0);
+
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: FOOTER_SOCIAL_WIDGET_SLUG,
+    sectionId: FOOTER_SOCIAL_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const mergeBlocks = useCallback(
+    (blocks: Partial<FooterNativeWidgetBlock>[] | undefined) => {
+      if (!blocks?.length) return;
+
+      setBlockMap((prev) => {
+        const next = new Map(prev);
+        blocks.forEach((block) => {
+          if (!block.id) return;
+          const existing = next.get(block.id);
+
+          next.set(
+            block.id,
+            toBlockState({
+              ...existing,
+              ...block,
+              styles:
+                block.styles && Object.keys(block.styles).length > 0
+                  ? block.styles
+                  : existing?.styles,
+              properties:
+                block.properties && Object.keys(block.properties).length > 0
+                  ? block.properties
+                  : existing?.properties,
+              value: block.value !== undefined ? block.value : existing?.value
+            })
+          );
+        });
+        blockMapRef.current = next;
+        return next;
+      });
+      setBlockVersion((prev) => prev + 1);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
+
+    const blocksToMerge: Partial<FooterNativeWidgetBlock>[] = [];
+    widgetData.blocks.forEach((block) => {
+      blocksToMerge.push(block as FooterNativeWidgetBlock);
+    });
+
+    if (blocksToMerge.length > 0) {
+      mergeBlocks(blocksToMerge);
+    }
+  }, [
+    isDesigner,
+    isDesignerChecked,
+    widgetData.isLoading,
+    widgetData.blocks,
+    mergeBlocks
+  ]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders.find(
+          (p: { slug: string }) => p.slug === FOOTER_PLACEHOLDER_ID
+        );
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === FOOTER_SOCIAL_SECTION_ID
+        );
+        mergeBlocks(section?.blocks);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [mergeBlocks]);
+
+  const getBlock = useCallback(
+    (blockId: string) => blockMapRef.current.get(blockId),
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      ...designerState,
+      getBlock,
+      blockVersion
+    }),
+    [designerState, getBlock, blockVersion]
+  );
+
+  return (
+    <FooterSocialContext.Provider value={contextValue}>
+      {children}
+    </FooterSocialContext.Provider>
+  );
+}
+
+export function useFooterSocialDesigner() {
+  return useContext(FooterSocialContext);
+}

package/app-template/src/views/footer/footer-subscription-context.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren
+} from 'react';
+import { useExternalDesigner } from '@akinon/next/components/theme-editor/hooks/use-external-designer';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_SUBSCRIPTION_SECTION_ID,
+  FOOTER_SUBSCRIPTION_WIDGET_SLUG,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+import {
+  FOOTER_SUBSCRIPTION_BLOCKS,
+  type FooterSubscriptionBlockSnapshot
+} from './subscription-settings';
+
+type FooterSubscriptionBlockState = FooterNativeWidgetBlock;
+
+interface FooterSubscriptionContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterSubscriptionBlockState | undefined;
+  blockVersion: number;
+}
+
+const FooterSubscriptionContext = createContext<FooterSubscriptionContextValue>(
+  {
+    isDesigner: false,
+    selectedBlockId: null,
+    getBlock: () => undefined,
+    blockVersion: 0
+  }
+);
+
+const BLOCK_META = Object.values(FOOTER_SUBSCRIPTION_BLOCKS);
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>
+): FooterSubscriptionBlockState => {
+  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
+  return {
+    id: block.id ?? fallback?.id ?? '',
+    type: block.type ?? fallback?.type,
+    label: block.label ?? fallback?.label,
+    styles: block.styles,
+    properties: block.properties,
+    value: block.value
+  } as FooterSubscriptionBlockState;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterSubscriptionBlockSnapshot
+): Map<string, FooterSubscriptionBlockState> => {
+  const map = new Map<string, FooterSubscriptionBlockState>();
+  blocks?.forEach((block) => {
+    map.set(block.id, toBlockState(block));
+  });
+
+  BLOCK_META.forEach((meta) => {
+    if (!map.has(meta.id)) {
+      map.set(meta.id, toBlockState(meta));
+    }
+  });
+
+  return map;
+};
+
+interface FooterSubscriptionProviderProps {
+  initialBlocks?: FooterSubscriptionBlockSnapshot;
+}
+
+export function FooterSubscriptionProvider({
+  initialBlocks,
+  children
+}: PropsWithChildren<FooterSubscriptionProviderProps>) {
+  const designerState = useExternalDesigner({
+    placeholderId: FOOTER_PLACEHOLDER_ID
+  });
+
+  const [blockMap, setBlockMap] = useState(() =>
+    mapFromSnapshot(initialBlocks)
+  );
+  const blockMapRef = useRef(blockMap);
+  const [blockVersion, setBlockVersion] = useState(0);
+
+  const isDesignerRef = useRef(false);
+  const [isDesignerChecked, setIsDesignerChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+    setIsDesignerChecked(true);
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: FOOTER_SUBSCRIPTION_WIDGET_SLUG,
+    sectionId: FOOTER_SUBSCRIPTION_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const mergeBlocks = useCallback(
+    (blocks: FooterNativeWidgetBlock[] | undefined) => {
+      if (!blocks?.length) return;
+
+      setBlockMap((prev) => {
+        const next = new Map(prev);
+        blocks.forEach((block) => {
+          const existing = next.get(block.id);
+
+          next.set(
+            block.id,
+            toBlockState({
+              ...existing,
+              ...block,
+              styles:
+                block.styles && Object.keys(block.styles).length > 0
+                  ? block.styles
+                  : existing?.styles,
+              properties:
+                block.properties && Object.keys(block.properties).length > 0
+                  ? block.properties
+                  : existing?.properties,
+              value: block.value !== undefined ? block.value : existing?.value
+            })
+          );
+        });
+        blockMapRef.current = next;
+        return next;
+      });
+      setBlockVersion((prev) => prev + 1);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!isDesignerChecked || isDesigner || widgetData.isLoading) return;
+
+    const blocksToMerge: FooterNativeWidgetBlock[] = [];
+    widgetData.blocks.forEach((block) => {
+      blocksToMerge.push(block as FooterNativeWidgetBlock);
+    });
+
+    if (blocksToMerge.length > 0) {
+      mergeBlocks(blocksToMerge);
+    }
+  }, [
+    isDesigner,
+    isDesignerChecked,
+    widgetData.isLoading,
+    widgetData.blocks,
+    mergeBlocks
+  ]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders.find(
+          (p: { slug: string }) => p.slug === FOOTER_PLACEHOLDER_ID
+        );
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === FOOTER_SUBSCRIPTION_SECTION_ID
+        );
+        mergeBlocks(section?.blocks);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [mergeBlocks]);
+
+  const getBlock = useCallback(
+    (blockId: string) => blockMapRef.current.get(blockId),
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      ...designerState,
+      getBlock,
+      blockVersion
+    }),
+    [designerState, getBlock, blockVersion]
+  );
+
+  return (
+    <FooterSubscriptionContext.Provider value={contextValue}>
+      {children}
+    </FooterSubscriptionContext.Provider>
+  );
+}
+
+export const useFooterSubscriptionDesigner = () =>
+  useContext(FooterSubscriptionContext);

package/app-template/src/views/footer/footer-utils.ts

@@ -0,0 +1,43 @@
+/**
+ * Footer Utilities
+ *
+ * Shared utility functions for footer components.
+ */
+
+/**
+ * Convert block styles to CSS properties
+ */
+export function convertBlockStyles(
+  styles: Record<string, unknown>
+): React.CSSProperties {
+  const styleMap: Record<string, string | null> = {
+    'background-color': 'backgroundColor',
+    'padding-top': 'paddingTop',
+    'padding-bottom': 'paddingBottom',
+    'border-top-width': 'borderTopWidth',
+    'border-top-color': 'borderTopColor'
+  };
+
+  const result: Record<string, unknown> = {};
+
+  Object.entries(styles).forEach(([key, value]) => {
+    if (value === undefined || value === null || value === '') return;
+
+    const cssKey = styleMap[key] || key;
+    if (cssKey === null) return;
+
+    // Extract desktop value if responsive
+    if (value && typeof value === 'object' && 'desktop' in value) {
+      result[cssKey] = (value as Record<string, unknown>).desktop;
+    } else {
+      result[cssKey] = value;
+    }
+  });
+
+  // Auto-add border-style: solid if border-top-width is set
+  if (result.borderTopWidth && !result.borderTopStyle) {
+    result.borderTopStyle = 'solid';
+  }
+
+  return result as React.CSSProperties;
+}