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

package/app-template/src/views/footer/footer-value-props-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_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

@@ -1,183 +0,0 @@
-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
-};