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

package/app-template/src/views/footer/native-widget-config.ts

@@ -0,0 +1,262 @@
+export const FOOTER_PLACEHOLDER_ID = 'footer';
+export const FOOTER_MENU_SECTION_ID = 'footer-menu';
+export const FOOTER_SUBSCRIPTION_SECTION_ID = 'footer-subscription';
+export const FOOTER_SOCIAL_SECTION_ID = 'footer-social';
+export const FOOTER_BOTTOM_SECTION_ID = 'footer-bottom';
+export const FOOTER_APP_BANNER_SECTION_ID = 'footer-app-banner';
+export const FOOTER_VALUE_PROPS_SECTION_ID = 'footer-value-props';
+
+export const FOOTER_MENU_WIDGET_SLUG = 'footer-menu-settings-2';
+export const FOOTER_SUBSCRIPTION_WIDGET_SLUG = 'footer-subscription-settings-2';
+export const FOOTER_SOCIAL_WIDGET_SLUG = 'footer-social-settings-2';
+export const FOOTER_BOTTOM_WIDGET_SLUG = 'footer-bottom-settings-2';
+export const FOOTER_APP_BANNER_WIDGET_SLUG = 'footer-app-banner-settings-2';
+export const FOOTER_VALUE_PROPS_WIDGET_SLUG = 'footer-value-props-settings-2';
+
+export const FOOTER_MENU_LOGO_BLOCK_ID = 'footer-menu-logo';
+export const FOOTER_MENU_HEADING_BLOCK_ID = 'footer-menu-heading';
+export const FOOTER_MENU_LINK_BLOCK_ID = 'footer-menu-link';
+export const FOOTER_SUBSCRIPTION_TITLE_BLOCK_ID = 'footer-subscription-title';
+export const FOOTER_SUBSCRIPTION_DESCRIPTION_BLOCK_ID =
+  'footer-subscription-description';
+export const FOOTER_SUBSCRIPTION_FORM_BLOCK_ID = 'footer-subscription-form';
+export const FOOTER_SOCIAL_ICONS_BLOCK_ID = 'footer-social-icons';
+export const FOOTER_BOTTOM_LABELS_BLOCK_ID = 'footer-bottom-labels';
+export const FOOTER_BOTTOM_SELECTORS_BLOCK_ID = 'footer-bottom-selectors';
+export const FOOTER_BOTTOM_PAYMENTS_BLOCK_ID = 'footer-bottom-payment-icons';
+
+export const FOOTER_APP_BANNER_IMAGE_BLOCK_ID = 'footer-app-banner-image';
+export const FOOTER_APP_BANNER_TITLE_BLOCK_ID = 'footer-app-banner-title';
+export const FOOTER_APP_BANNER_DESCRIPTION_BLOCK_ID =
+  'footer-app-banner-description';
+export const FOOTER_APP_BANNER_BUTTONS_BLOCK_ID = 'footer-app-banner-buttons';
+export const FOOTER_APP_BANNER_APPSTORE_BLOCK_ID = 'footer-app-banner-appstore';
+export const FOOTER_APP_BANNER_PLAYSTORE_BLOCK_ID =
+  'footer-app-banner-playstore';
+
+export const FOOTER_VALUE_PROPS_LIST_BLOCK_ID = 'footer-value-props-list';
+
+export interface FooterNativeWidgetBlockConfig {
+  id: string;
+  type: string;
+  label: string;
+  blocks?: FooterNativeWidgetBlockConfig[];
+}
+
+export interface FooterNativeWidgetSectionConfig {
+  placeholderId: string;
+  sectionId: string;
+  label: string;
+  widgetSlug: string;
+  blocks: FooterNativeWidgetBlockConfig[];
+}
+
+export interface FooterNativeWidgetBlock extends FooterNativeWidgetBlockConfig {
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  value?: unknown;
+  blocks?: FooterNativeWidgetBlock[];
+}
+
+export interface FooterNativeWidgetSection
+  extends FooterNativeWidgetSectionConfig {
+  blocks: FooterNativeWidgetBlock[];
+  sectionProperties?: Record<string, unknown>;
+  sectionStyles?: Record<string, unknown>;
+}
+
+export const FOOTER_NATIVE_SECTIONS: FooterNativeWidgetSectionConfig[] = [
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_MENU_SECTION_ID,
+    label: 'Footer Menu',
+    widgetSlug: FOOTER_MENU_WIDGET_SLUG,
+    blocks: [
+      {
+        id: 'footer-menu-heading',
+        type: 'text',
+        label: 'Menu Headings'
+      },
+      {
+        id: 'footer-menu-link',
+        type: 'text',
+        label: 'Menu Links'
+      },
+      {
+        id: FOOTER_MENU_LOGO_BLOCK_ID,
+        type: 'image',
+        label: 'Footer Logo'
+      }
+    ]
+  },
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_SUBSCRIPTION_SECTION_ID,
+    label: 'Footer Subscription',
+    widgetSlug: FOOTER_SUBSCRIPTION_WIDGET_SLUG,
+    blocks: [
+      {
+        id: FOOTER_SUBSCRIPTION_TITLE_BLOCK_ID,
+        type: 'text',
+        label: 'Subscription Title'
+      },
+      {
+        id: FOOTER_SUBSCRIPTION_DESCRIPTION_BLOCK_ID,
+        type: 'text',
+        label: 'Subscription Description'
+      },
+      {
+        id: FOOTER_SUBSCRIPTION_FORM_BLOCK_ID,
+        type: 'group',
+        label: 'Subscription Form'
+      }
+    ]
+  },
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_SOCIAL_SECTION_ID,
+    label: 'Footer Social Icons',
+    widgetSlug: FOOTER_SOCIAL_WIDGET_SLUG,
+    blocks: [
+      {
+        id: FOOTER_SOCIAL_ICONS_BLOCK_ID,
+        type: 'social-icons-list',
+        label: 'Social Icons'
+      }
+    ]
+  },
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_BOTTOM_SECTION_ID,
+    label: 'Footer Bottom',
+    widgetSlug: FOOTER_BOTTOM_WIDGET_SLUG,
+    blocks: [
+      {
+        id: FOOTER_BOTTOM_PAYMENTS_BLOCK_ID,
+        type: 'icon-group',
+        label: 'Payment Icons'
+      }
+    ]
+  },
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_APP_BANNER_SECTION_ID,
+    label: 'App Banner',
+    widgetSlug: FOOTER_APP_BANNER_WIDGET_SLUG,
+    blocks: [
+      {
+        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',
+        blocks: [
+          {
+            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'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    placeholderId: FOOTER_PLACEHOLDER_ID,
+    sectionId: FOOTER_VALUE_PROPS_SECTION_ID,
+    label: 'Value Propositions',
+    widgetSlug: FOOTER_VALUE_PROPS_WIDGET_SLUG,
+    blocks: [
+      {
+        id: FOOTER_VALUE_PROPS_LIST_BLOCK_ID,
+        type: 'value-props-list',
+        label: 'Value Props'
+      }
+    ]
+  }
+];
+
+type WidgetAttributes = Record<string, unknown>;
+
+type WidgetData = {
+  attributes?: WidgetAttributes;
+} | null;
+
+type ParsedBlockPayload = {
+  styles?: Record<string, unknown>;
+  properties?: Record<string, unknown>;
+  value?: unknown;
+  [key: string]: unknown;
+};
+
+export function parseWidgetBlockAttributes(
+  widgetData: WidgetData,
+  blockId: string
+): Pick<FooterNativeWidgetBlock, 'styles' | 'properties' | 'value'> {
+  const attributes = widgetData?.attributes;
+  if (!attributes || !(blockId in attributes)) {
+    return {};
+  }
+
+  const attrData = attributes[blockId];
+  let parsed: unknown = attrData;
+
+  if (typeof attrData === 'string') {
+    try {
+      parsed = JSON.parse(attrData);
+    } catch {
+      return { value: attrData };
+    }
+  } 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 {
+        return { value };
+      }
+    } else {
+      parsed = value;
+    }
+  }
+
+  if (typeof parsed !== 'object' || parsed === null) {
+    if (typeof parsed === 'string') {
+      return { value: parsed };
+    }
+    return {};
+  }
+
+  const payload = parsed as ParsedBlockPayload;
+  const styles =
+    payload.styles ||
+    // Legacy format where style props live at root
+    (!payload.properties && !('value' in payload) ? payload : undefined);
+
+  return {
+    styles,
+    properties: payload.properties,
+    value: payload.value
+  };
+}

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

@@ -0,0 +1,122 @@
+import {
+  FOOTER_SUBSCRIPTION_SECTION_ID,
+  FOOTER_SUBSCRIPTION_TITLE_BLOCK_ID,
+  FOOTER_SUBSCRIPTION_DESCRIPTION_BLOCK_ID,
+  FOOTER_SUBSCRIPTION_FORM_BLOCK_ID,
+  FOOTER_SUBSCRIPTION_WIDGET_SLUG,
+  type FooterNativeWidgetSection,
+  type FooterNativeWidgetBlock
+} from './native-widget-config';
+
+export type FooterSubscriptionBlockSnapshot = Array<FooterNativeWidgetBlock>;
+
+export const FOOTER_SUBSCRIPTION_DEFAULT_CONTENT = {
+  title: 'Keep up with our latest news',
+  description:
+    'Subscribe to our newsletter to hear about new arrivals before anyone else.'
+} as const;
+
+export const FOOTER_SUBSCRIPTION_BLOCKS = {
+  TITLE: {
+    id: FOOTER_SUBSCRIPTION_TITLE_BLOCK_ID,
+    type: 'text',
+    label: 'Subscription Title'
+  },
+  DESCRIPTION: {
+    id: FOOTER_SUBSCRIPTION_DESCRIPTION_BLOCK_ID,
+    type: 'text',
+    label: 'Subscription Description'
+  },
+  FORM: {
+    id: FOOTER_SUBSCRIPTION_FORM_BLOCK_ID,
+    type: 'group',
+    label: 'Subscription Form'
+  }
+} as const;
+
+const FOOTER_SUBSCRIPTION_BLOCK_LIST = Object.values(
+  FOOTER_SUBSCRIPTION_BLOCKS
+);
+
+const FOOTER_SUBSCRIPTION_BLOCK_ID_SET = new Set<string>(
+  FOOTER_SUBSCRIPTION_BLOCK_LIST.map((block) => block.id)
+);
+
+const createTextValue = (text?: string) => {
+  if (!text) {
+    return undefined;
+  }
+
+  return text;
+};
+
+export function getFooterSubscriptionInitialBlocks(
+  sections: FooterNativeWidgetSection[]
+): FooterSubscriptionBlockSnapshot {
+  const section = sections.find(
+    (item) => item.sectionId === FOOTER_SUBSCRIPTION_SECTION_ID
+  );
+
+  if (!section) {
+    return [];
+  }
+
+  return section.blocks.map((block) => ({
+    id: block.id,
+    type: block.type,
+    label: block.label,
+    styles: block.styles,
+    properties: block.properties,
+    value: block.value
+  }));
+}
+
+type FooterSubscriptionContent = {
+  title?: string;
+  description?: string;
+};
+
+export function mergeFooterSubscriptionContent(
+  blocks: FooterSubscriptionBlockSnapshot,
+  content: FooterSubscriptionContent
+): FooterSubscriptionBlockSnapshot {
+  const blockMap = new Map<string, FooterNativeWidgetBlock>();
+  blocks.forEach((block) => {
+    blockMap.set(block.id, { ...block });
+  });
+
+  const normalizedBlocks = FOOTER_SUBSCRIPTION_BLOCK_LIST.map((config) => {
+    const existing = blockMap.get(config.id) ?? {
+      id: config.id,
+      type: config.type,
+      label: config.label
+    };
+
+    if (existing.value == null) {
+      const fallbackText =
+        config.id === FOOTER_SUBSCRIPTION_TITLE_BLOCK_ID
+          ? content.title
+          : config.id === FOOTER_SUBSCRIPTION_DESCRIPTION_BLOCK_ID
+          ? content.description
+          : undefined;
+
+      const fallbackValue = createTextValue(fallbackText);
+      if (fallbackValue) {
+        return {
+          ...existing,
+          value: fallbackValue
+        };
+      }
+    }
+
+    return existing;
+  });
+
+  const extraBlocks = blocks.filter(
+    (block) => !FOOTER_SUBSCRIPTION_BLOCK_ID_SET.has(block.id)
+  );
+
+  return [...normalizedBlocks, ...extraBlocks];
+}
+
+export { FOOTER_SUBSCRIPTION_WIDGET_SLUG };

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

@@ -0,0 +1,162 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useNativeWidgetData } from '@akinon/next/components/theme-editor/hooks/use-native-widget-data';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import {
+  defaultFooterLogoSettings,
+  FooterLogoSettings,
+  parseFooterLogoBlockPayload,
+  FOOTER_LOGO_PLACEHOLDER_ID,
+  FOOTER_LOGO_SECTION_ID,
+  FOOTER_LOGO_BLOCK_ID,
+  FOOTER_LOGO_WIDGET_SLUG
+} from './logo-settings';
+
+const THEME_CONFIG_SLUG = 'theme-config';
+
+const BLOCK_META = [
+  { id: FOOTER_LOGO_BLOCK_ID, type: 'image', label: 'Footer Logo' }
+];
+
+type ThemeSettings = {
+  logo?: string;
+};
+
+const parseThemeConfigLogo = (
+  themeSettings?: ThemeSettings
+): Partial<FooterLogoSettings> => {
+  if (!themeSettings?.logo) {
+    return {};
+  }
+  return { src: themeSettings.logo };
+};
+
+export function useFooterLogoSettings(
+  initialSettings?: FooterLogoSettings
+): FooterLogoSettings {
+  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 { data: themeConfigData } = useGetWidgetQuery(THEME_CONFIG_SLUG, {
+    skip: !isDesignerChecked || isDesigner
+  });
+
+  const widgetData = useNativeWidgetData({
+    widgetSlug: FOOTER_LOGO_WIDGET_SLUG,
+    sectionId: FOOTER_LOGO_SECTION_ID,
+    skip: !isDesignerChecked || isDesigner,
+    blockMeta: BLOCK_META
+  });
+
+  const [settings, setSettings] = useState<FooterLogoSettings>(
+    initialSettings || defaultFooterLogoSettings
+  );
+  const hasInitialSettings = !!initialSettings;
+
+  useEffect(() => {
+    if (!isDesignerChecked) return;
+    if (isDesigner) return;
+    if (hasInitialSettings) return;
+    if (widgetData.isLoading && !themeConfigData) return;
+
+    let nextSettings: FooterLogoSettings = { ...defaultFooterLogoSettings };
+
+    const themeSettingsAttr = themeConfigData?.attributes?.theme_settings;
+    if (themeSettingsAttr) {
+      try {
+        let parsedSettings: ThemeSettings | undefined;
+
+        if (typeof themeSettingsAttr === 'string') {
+          parsedSettings = JSON.parse(themeSettingsAttr) as ThemeSettings;
+        } else if (
+          typeof themeSettingsAttr === 'object' &&
+          'value' in themeSettingsAttr
+        ) {
+          const rawValue = themeSettingsAttr.value;
+          if (typeof rawValue === 'string') {
+            parsedSettings = JSON.parse(rawValue) as ThemeSettings;
+          } else if (rawValue && typeof rawValue === 'object') {
+            parsedSettings = rawValue as ThemeSettings;
+          }
+        } else if (typeof themeSettingsAttr === 'object') {
+          parsedSettings = themeSettingsAttr as ThemeSettings;
+        }
+
+        if (parsedSettings) {
+          nextSettings = {
+            ...nextSettings,
+            ...parseThemeConfigLogo(parsedSettings)
+          };
+        }
+      } catch {
+        // ignore
+      }
+    }
+
+    const block = widgetData.getBlock(FOOTER_LOGO_BLOCK_ID);
+    if (block) {
+      const overrides = parseFooterLogoBlockPayload(block);
+      nextSettings = {
+        ...nextSettings,
+        ...overrides,
+        src: overrides.src ?? nextSettings.src
+      };
+    }
+
+    setSettings(nextSettings);
+  }, [
+    widgetData,
+    themeConfigData,
+    hasInitialSettings,
+    isDesigner,
+    isDesignerChecked
+  ]);
+
+  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_LOGO_PLACEHOLDER_ID
+        );
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === FOOTER_LOGO_SECTION_ID
+        );
+        const block = section?.blocks?.find(
+          (b: { id: string }) => b.id === FOOTER_LOGO_BLOCK_ID
+        );
+
+        if (block) {
+          const overrides = parseFooterLogoBlockPayload(block);
+          if (Object.keys(overrides).length > 0) {
+            setSettings((prev) => ({
+              ...prev,
+              ...overrides,
+              src: overrides.src ?? prev.src
+            }));
+          }
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return settings;
+}
+
+export type { FooterLogoSettings };