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

package/app-template/src/views/footer/footer-value-props-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_VALUE_PROPS_SECTION_ID,
+  FOOTER_VALUE_PROPS_WIDGET_SLUG,
+  FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export { FOOTER_VALUE_PROPS_LIST_BLOCK_ID };
+
+export interface ValuePropItem {
+  icon: string;
+  title: string;
+  description?: string;
+}
+
+type FooterValuePropsBlockState = FooterNativeWidgetBlock;
+
+interface FooterValuePropsContextValue {
+  isDesigner: boolean;
+  selectedSectionId: string | null;
+  selectedBlockId: string | null;
+  getBlock: (blockId: string) => FooterValuePropsBlockState | undefined;
+  getSectionProperty: (key: string) => unknown;
+  getSectionStyle: (key: string) => unknown;
+  blockVersion: number;
+}
+
+const FooterValuePropsContext = createContext<FooterValuePropsContextValue>({
+  isDesigner: false,
+  selectedSectionId: null,
+  selectedBlockId: null,
+  getBlock: () => undefined,
+  getSectionProperty: () => undefined,
+  getSectionStyle: () => undefined,
+  blockVersion: 0
+});
+
+const BLOCK_META = [
+  {
+    id: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+    type: 'value-props-list',
+    label: 'Value Props List'
+  }
+];
+
+const DEFAULT_VALUE_PROPS: ValuePropItem[] = [
+  { icon: 'home', title: 'Free Shipping', description: 'On orders over $50' },
+  {
+    icon: 'add',
+    title: 'Secure Payment',
+    description: '256-bit SSL encryption'
+  },
+  { icon: 'search', title: 'Easy Returns', description: '30-day return policy' }
+];
+
+const toBlockState = (
+  block: Partial<FooterNativeWidgetBlock>,
+  defaultItems?: ValuePropItem[]
+): FooterValuePropsBlockState => {
+  const fallback = BLOCK_META.find((meta) => meta.id === block.id);
+
+  const defaultProperties =
+    block.id === FOOTER_VALUE_PROPS_LIST_BLOCK_ID && defaultItems?.length
+      ? { items: defaultItems }
+      : undefined;
+
+  return {
+    id: block.id ?? fallback?.id ?? '',
+    type: block.type ?? fallback?.type,
+    label: block.label ?? fallback?.label,
+    styles: block.styles,
+    properties: block.properties || defaultProperties,
+    value: block.value
+  } as FooterValuePropsBlockState;
+};
+
+const mapFromSnapshot = (
+  blocks?: FooterNativeWidgetBlock[],
+  defaultItems?: ValuePropItem[]
+): Map<string, FooterValuePropsBlockState> => {
+  const map = new Map<string, FooterValuePropsBlockState>();
+  blocks?.forEach((block) => {
+    map.set(block.id, toBlockState(block, defaultItems));
+  });
+
+  BLOCK_META.forEach((meta) => {
+    if (!map.has(meta.id)) {
+      map.set(meta.id, toBlockState(meta, defaultItems));
+    } else if (
+      meta.id === FOOTER_VALUE_PROPS_LIST_BLOCK_ID &&
+      defaultItems?.length
+    ) {
+      const existing = map.get(meta.id);
+      const existingItems = (
+        existing?.properties as { items?: ValuePropItem[] }
+      )?.items;
+      if (!existingItems || existingItems.length === 0) {
+        map.set(
+          meta.id,
+          toBlockState({
+            ...existing,
+            properties: { ...existing?.properties, items: defaultItems }
+          })
+        );
+      }
+    }
+  });
+
+  return map;
+};
+
+interface FooterValuePropsProviderProps {
+  initialBlocks?: FooterNativeWidgetBlock[];
+  initialProperties?: Record<string, unknown>;
+  initialStyles?: Record<string, unknown>;
+  defaultItems?: ValuePropItem[];
+}
+
+export function FooterValuePropsProvider({
+  initialBlocks,
+  initialProperties,
+  initialStyles,
+  defaultItems = DEFAULT_VALUE_PROPS,
+  children
+}: PropsWithChildren<FooterValuePropsProviderProps>) {
+  const designerState = useExternalDesigner({
+    placeholderId: FOOTER_PLACEHOLDER_ID
+  });
+
+  const [blockMap, setBlockMap] = useState(() =>
+    mapFromSnapshot(initialBlocks, defaultItems)
+  );
+  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_VALUE_PROPS_WIDGET_SLUG,
+    sectionId: FOOTER_VALUE_PROPS_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;
+
+    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_VALUE_PROPS_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 (
+    <FooterValuePropsContext.Provider value={contextValue}>
+      {children}
+    </FooterValuePropsContext.Provider>
+  );
+}
+
+export function useFooterValuePropsDesigner() {
+  return useContext(FooterValuePropsContext);
+}

package/app-template/src/views/footer/logo-settings.ts

@@ -0,0 +1,183 @@
+import type {
+  FooterNativeWidgetBlock,
+  FooterNativeWidgetSection
+} from './native-widget-config';
+import {
+  FOOTER_PLACEHOLDER_ID,
+  FOOTER_MENU_SECTION_ID,
+  FOOTER_MENU_LOGO_BLOCK_ID,
+  FOOTER_MENU_WIDGET_SLUG
+} from './native-widget-config';
+
+export interface FooterLogoSettings {
+  src: string;
+  width: number | string;
+  height: number | string;
+  maxWidth?: string | number;
+  maxHeight?: string | number;
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | string;
+}
+
+const DEFAULT_LOGO_SRC = '/logo.svg';
+const DEFAULT_LOGO_WIDTH = 80;
+const DEFAULT_LOGO_HEIGHT = 20;
+
+export const defaultFooterLogoSettings: FooterLogoSettings = {
+  src: DEFAULT_LOGO_SRC,
+  width: DEFAULT_LOGO_WIDTH,
+  height: DEFAULT_LOGO_HEIGHT,
+  objectFit: 'contain'
+};
+
+type BlockLike = Pick<FooterNativeWidgetBlock, 'styles' | 'value'> & {
+  styles?: Record<string, unknown>;
+  value?: unknown;
+};
+
+type ResponsiveValue<T = unknown> =
+  | T
+  | {
+      desktop?: T;
+      mobile?: T;
+      tablet?: T;
+    };
+
+const getResponsiveValue = <T = unknown>(value: ResponsiveValue<T>) => {
+  if (value && typeof value === 'object' && 'desktop' in value) {
+    return value.desktop as T;
+  }
+  return value as T;
+};
+
+const readStyleValue = (
+  styles: Record<string, unknown> | undefined,
+  keys: string[]
+) => {
+  if (!styles) return undefined;
+  for (const key of keys) {
+    if (key in styles) return styles[key];
+  }
+  return undefined;
+};
+
+export function parseFooterLogoBlockPayload(
+  block?: BlockLike
+): Partial<FooterLogoSettings> {
+  if (!block) return {};
+
+  const overrides: Partial<FooterLogoSettings> = {};
+
+  if (block.value !== undefined && block.value !== null) {
+    const value = getResponsiveValue(block.value as ResponsiveValue<string>);
+    if (typeof value === 'string' && value.trim().length > 0) {
+      overrides.src = value;
+    }
+  }
+
+  const styles = block.styles as Record<string, unknown> | undefined;
+  if (styles) {
+    const width = readStyleValue(styles, ['width']);
+    if (width !== undefined) {
+      overrides.width = getResponsiveValue(
+        width as ResponsiveValue<string | number>
+      );
+    }
+
+    const height = readStyleValue(styles, ['height']);
+    if (height !== undefined) {
+      overrides.height = getResponsiveValue(
+        height as ResponsiveValue<string | number>
+      );
+    }
+
+    const maxWidth = readStyleValue(styles, ['maxWidth', 'max-width']);
+    if (maxWidth !== undefined) {
+      overrides.maxWidth = getResponsiveValue(
+        maxWidth as ResponsiveValue<string | number>
+      );
+    }
+
+    const maxHeight = readStyleValue(styles, ['maxHeight', 'max-height']);
+    if (maxHeight !== undefined) {
+      overrides.maxHeight = getResponsiveValue(
+        maxHeight as ResponsiveValue<string | number>
+      );
+    }
+
+    const objectFit = readStyleValue(styles, ['objectFit', 'object-fit']);
+    if (objectFit !== undefined) {
+      overrides.objectFit = getResponsiveValue(
+        objectFit as ResponsiveValue<string>
+      ) as FooterLogoSettings['objectFit'];
+    }
+  }
+
+  return overrides;
+}
+
+export function parseFooterLogoWidgetAttribute(
+  attrData: unknown
+): Partial<FooterLogoSettings> {
+  if (!attrData) return {};
+
+  let parsed: unknown = attrData;
+  if (typeof attrData === 'string') {
+    try {
+      parsed = JSON.parse(attrData);
+    } catch {
+      return {};
+    }
+  } else if (
+    typeof attrData === 'object' &&
+    attrData !== null &&
+    'value' in (attrData as Record<string, unknown>)
+  ) {
+    const value = (attrData as { value?: unknown }).value;
+    if (typeof value === 'string') {
+      try {
+        parsed = JSON.parse(value);
+      } catch {
+        parsed = value;
+      }
+    } else {
+      parsed = value;
+    }
+  }
+
+  if (!parsed || typeof parsed !== 'object') {
+    return {};
+  }
+
+  return parseFooterLogoBlockPayload(parsed as BlockLike);
+}
+
+export function getFooterLogoInitialSettingsFromSections(
+  sections: FooterNativeWidgetSection[],
+  fallbackSrc?: string
+): FooterLogoSettings {
+  const footerMenuSection = sections.find(
+    (section) => section.sectionId === FOOTER_MENU_SECTION_ID
+  );
+  const logoBlock = footerMenuSection?.blocks.find(
+    (block) => block.id === FOOTER_MENU_LOGO_BLOCK_ID
+  );
+
+  const overrides = parseFooterLogoBlockPayload(logoBlock);
+  const base: FooterLogoSettings = {
+    ...defaultFooterLogoSettings,
+    src: fallbackSrc || defaultFooterLogoSettings.src
+  };
+
+  return {
+    ...base,
+    ...overrides,
+    src: overrides.src ?? base.src
+  };
+}
+
+export {
+  FOOTER_PLACEHOLDER_ID as FOOTER_LOGO_PLACEHOLDER_ID,
+  FOOTER_MENU_SECTION_ID as FOOTER_LOGO_SECTION_ID,
+  FOOTER_MENU_LOGO_BLOCK_ID as FOOTER_LOGO_BLOCK_ID,
+  FOOTER_MENU_WIDGET_SLUG as FOOTER_LOGO_WIDGET_SLUG
+};