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

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

@@ -1,326 +0,0 @@
-'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

@@ -1,215 +0,0 @@
-'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

@@ -1,74 +0,0 @@
-'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

@@ -1,35 +0,0 @@
-/**
- * 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';