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

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

@@ -0,0 +1,326 @@
+'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_APP_BANNER_SECTION_ID,
+  FOOTER_APP_BANNER_WIDGET_SLUG,
+  FOOTER_APP_BANNER_IMAGE_BLOCK_ID,
+  FOOTER_APP_BANNER_TITLE_BLOCK_ID,
+  FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+  FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+  FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+  FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export {
+  FOOTER_APP_BANNER_IMAGE_BLOCK_ID,
+  FOOTER_APP_BANNER_TITLE_BLOCK_ID,
+  FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+  FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+  FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+  FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID
+};
+
+type FooterAppBannerBlockState = FooterNativeWidgetBlock;
+
+interface FooterAppBannerContextValue {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterAppBannerBlockState | undefined;
+  getSectionProperty: (key: string) => unknown;
+  getSectionStyle: (key: string) => unknown;
+  blockVersion: number;
+}
+
+const FooterAppBannerContext = createContext<FooterAppBannerContextValue>({
+  isDesigner: false,
+  selectedSectionId: null,
+  selectedBlockId: null,
+  getBlock: () => undefined,
+  getSectionProperty: () => undefined,
+  getSectionStyle: () => undefined,
+  blockVersion: 0
+});
+
+const BLOCK_META = [
+  { id: FOOTER_APP_BANNER_IMAGE_BLOCK_ID, type: 'image', label: 'App Image' },
+  { id: FOOTER_APP_BANNER_TITLE_BLOCK_ID, type: 'text', label: 'Banner Title' },
+  {
+    id: FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID,
+    type: 'text',
+    label: 'Banner Description'
+  },
+  {
+    id: FOOTER_APP_BANNER_BUTTONS_BLOCK_ID,
+    type: 'group',
+    label: 'Store Buttons'
+  },
+  {
+    id: FOOTER_APP_BANNER_APPSTORE_BLOCK_ID,
+    type: 'image',
+    label: 'App Store Button'
+  },
+  {
+    id: FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID,
+    type: 'image',
+    label: 'Google Play Button'
+  }
+];
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>
+): FooterAppBannerBlockState => {
+  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 FooterAppBannerBlockState;
+};
+
+const flattenBlocks = (
+  blocks: FooterNativeWidgetBlock[] | undefined,
+  result: FooterNativeWidgetBlock[] = []
+): FooterNativeWidgetBlock[] => {
+  blocks?.forEach((block) => {
+    result.push(block);
+    if (block.blocks?.length) {
+      flattenBlocks(block.blocks, result);
+    }
+  });
+  return result;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterNativeWidgetBlock[]
+): Map<string, FooterAppBannerBlockState> => {
+  const map = new Map<string, FooterAppBannerBlockState>();
+  const flatBlocks = flattenBlocks(blocks);
+  flatBlocks.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 FooterAppBannerProviderProps {
+  initialBlocks?: FooterNativeWidgetBlock[];
+  initialProperties?: Record<string, unknown>;
+  initialStyles?: Record<string, unknown>;
+}
+
+export function FooterAppBannerProvider({
+  initialBlocks,
+  initialProperties,
+  initialStyles,
+  children
+}: PropsWithChildren<FooterAppBannerProviderProps>) {
+  const designerState = useExternalDesigner({
+    placeholderId: FOOTER_PLACEHOLDER_ID
+  });
+
+  const [blockMap, setBlockMap] = useState(() =>
+    mapFromSnapshot(initialBlocks)
+  );
+  const blockMapRef = useRef(blockMap);
+  const [blockVersion, setBlockVersion] = useState(0);
+  const [sectionProperties, setSectionProperties] = useState<
+    Record<string, unknown>
+  >(initialProperties || {});
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
+    initialStyles || {}
+  );
+
+  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_APP_BANNER_WIDGET_SLUG,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const mergeBlocks = useCallback(
+    (blocks: Partial<FooterNativeWidgetBlock>[] | undefined) => {
+      if (!blocks?.length) return;
+
+      const flatBlocks = flattenBlocks(blocks as FooterNativeWidgetBlock[]);
+
+      setBlockMap((prev) => {
+        const next = new Map(prev);
+        flatBlocks.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;
+
+    if (
+      widgetData.sectionProperties &&
+      Object.keys(widgetData.sectionProperties).length > 0
+    ) {
+      setSectionProperties(widgetData.sectionProperties);
+    }
+    if (
+      widgetData.sectionStyles &&
+      Object.keys(widgetData.sectionStyles).length > 0
+    ) {
+      setSectionStyles(widgetData.sectionStyles);
+    }
+
+    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,
+    widgetData.sectionProperties,
+    widgetData.sectionStyles,
+    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_APP_BANNER_SECTION_ID
+        );
+
+        if (section) {
+          mergeBlocks(section.blocks);
+
+          if (section.properties) {
+            setSectionProperties(section.properties);
+          }
+
+          if (section.styles) {
+            setSectionStyles(section.styles);
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [mergeBlocks]);
+
+  const getBlock = useCallback(
+    (blockId: string) => blockMapRef.current.get(blockId),
+    []
+  );
+
+  const getSectionProperty = useCallback(
+    (key: string) => {
+      const value = sectionProperties[key];
+      if (typeof value === 'object' && value !== null && 'desktop' in value) {
+        return (value as Record<string, unknown>).desktop;
+      }
+      return value;
+    },
+    [sectionProperties]
+  );
+
+  const getSectionStyle = useCallback(
+    (key: string) => {
+      const value = sectionStyles[key];
+      if (typeof value === 'object' && value !== null && 'desktop' in value) {
+        return (value as Record<string, unknown>).desktop;
+      }
+      return value;
+    },
+    [sectionStyles]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      ...designerState,
+      getBlock,
+      getSectionProperty,
+      getSectionStyle,
+      blockVersion
+    }),
+    [designerState, getBlock, getSectionProperty, getSectionStyle, blockVersion]
+  );
+
+  return (
+    <FooterAppBannerContext.Provider value={contextValue}>
+      {children}
+    </FooterAppBannerContext.Provider>
+  );
+}
+
+export function useFooterAppBannerDesigner() {
+  return useContext(FooterAppBannerContext);
+}

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

@@ -0,0 +1,215 @@
+'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_BOTTOM_SECTION_ID,
+  FOOTER_BOTTOM_WIDGET_SLUG,
+  FOOTER_BOTTOM_PAYMENTS_BLOCK_ID,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export { FOOTER_BOTTOM_PAYMENTS_BLOCK_ID };
+
+type FooterBottomBlockState = FooterNativeWidgetBlock;
+
+interface FooterBottomContextValue {
+  isDesigner: boolean;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterBottomBlockState | undefined;
+  blockVersion: number;
+}
+
+const FooterBottomContext = createContext<FooterBottomContextValue>({
+  isDesigner: false,
+  selectedBlockId: null,
+  getBlock: () => undefined,
+  blockVersion: 0
+});
+
+const BLOCK_META = [
+  {
+    id: FOOTER_BOTTOM_PAYMENTS_BLOCK_ID,
+    type: 'icon-group',
+    label: 'Payment Icons'
+  }
+];
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>
+): FooterBottomBlockState => {
+  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 FooterBottomBlockState;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterNativeWidgetBlock[]
+): Map<string, FooterBottomBlockState> => {
+  const map = new Map<string, FooterBottomBlockState>();
+  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 FooterBottomProviderProps {
+  initialBlocks?: FooterNativeWidgetBlock[];
+}
+
+export function FooterBottomProvider({
+  initialBlocks,
+  children
+}: PropsWithChildren<FooterBottomProviderProps>) {
+  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_BOTTOM_WIDGET_SLUG,
+    sectionId: FOOTER_BOTTOM_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_BOTTOM_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 (
+    <FooterBottomContext.Provider value={contextValue}>
+      {children}
+    </FooterBottomContext.Provider>
+  );
+}
+
+export function useFooterBottomDesigner() {
+  return useContext(FooterBottomContext);
+}

package/app-template/src/views/footer/footer-bottom-wrapper.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+/**
+ * Footer Bottom Wrapper
+ *
+ * Wraps FooterBottom with SelectableRow for theme editor selection support.
+ */
+
+import { ReactNode, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import {
+  useFooterLayout,
+  FOOTER_LAYOUT_BLOCKS,
+  FOOTER_LAYOUT_PLACEHOLDER_ID,
+  FOOTER_LAYOUT_SECTION_ID
+} from './footer-layout-registrar';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import { convertBlockStyles } from './footer-utils';
+
+interface FooterBottomWrapperProps {
+  children: ReactNode;
+}
+
+export default function FooterBottomWrapper({
+  children
+}: FooterBottomWrapperProps) {
+  const { isDesigner, selectedBlockId, getBlockStyles } = useFooterLayout();
+  const blockId = FOOTER_LAYOUT_BLOCKS.BOTTOM_ROW.id;
+  const blockLabel = FOOTER_LAYOUT_BLOCKS.BOTTOM_ROW.label;
+
+  const { handleClick } = useDesignerFeatures({
+    blockId,
+    placeholderId: FOOTER_LAYOUT_PLACEHOLDER_ID,
+    sectionId: FOOTER_LAYOUT_SECTION_ID,
+    isDesigner,
+    blockInfo: {
+      id: blockId,
+      type: 'container',
+      label: blockLabel
+    }
+  });
+
+  const isSelected = selectedBlockId === blockId;
+  const blockStyles = getBlockStyles(blockId);
+  const computedStyles = useMemo(
+    () => convertBlockStyles(blockStyles),
+    [blockStyles]
+  );
+
+  const handleContainerClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDesigner) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClick(e);
+      }
+    },
+    [isDesigner, handleClick]
+  );
+
+  return (
+    <div
+      data-block-id={blockId}
+      onClick={handleContainerClick}
+      className={clsx(
+        isDesigner && 'cursor-pointer',
+        isSelected && 'ring-2 ring-blue-500 ring-inset'
+      )}
+      style={computedStyles}
+    >
+      {children}
+    </div>
+  );
+}

package/app-template/src/views/footer/footer-layout-constants.ts

@@ -0,0 +1,35 @@
+/**
+ * Footer Layout Constants
+ *
+ * Separated from footer-layout-registrar.tsx to allow server-side imports.
+ * The registrar is a client component ('use client') which can cause issues
+ * when importing constants into server components.
+ */
+
+// Constants
+export const FOOTER_LAYOUT_PLACEHOLDER_ID = 'footer';
+export const FOOTER_LAYOUT_SECTION_ID = 'footer-layout';
+export const FOOTER_LAYOUT_WIDGET_SLUG = 'footer-layout-settings-2';
+
+// Block definitions for row containers (like header)
+export const FOOTER_LAYOUT_BLOCKS = {
+  MAIN_ROW: {
+    id: 'footer-main-row',
+    type: 'container',
+    label: 'Main Row'
+  },
+  BOTTOM_ROW: {
+    id: 'footer-bottom-row',
+    type: 'container',
+    label: 'Bottom Row'
+  }
+} as const;
+
+// Block IDs for server-side parsing
+export const FOOTER_LAYOUT_BLOCK_IDS = {
+  MAIN_ROW: 'footer-main-row',
+  BOTTOM_ROW: 'footer-bottom-row'
+} as const;
+
+// Layout types
+export type FooterLayoutType = 'default' | 'compact';