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

package/app-template/src/views/header/header-announcement-registrar.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  PropsWithChildren
+} from 'react';
+
+export const HEADER_ANNOUNCEMENT_PLACEHOLDER_ID = 'header';
+export const HEADER_ANNOUNCEMENT_SECTION_ID = 'header-announcement-bar';
+
+declare global {
+  interface Window {
+    __headerAnnouncementRegistered?: boolean;
+  }
+}
+
+interface ThemeSection {
+  id: string;
+  visible?: boolean;
+  properties?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+}
+
+interface ThemePlaceholder {
+  slug: string;
+  sections: ThemeSection[];
+}
+
+export interface HeaderAnnouncementProperties {
+  visible?: boolean;
+  text?: string | Record<string, string>;
+  link?: string | Record<string, string>;
+  target?: string | Record<string, string>;
+}
+
+interface HeaderAnnouncementContextValue {
+  isDesigner: boolean;
+  isAnnouncementSectionSelected: boolean;
+  isSectionVisible: boolean;
+  properties: HeaderAnnouncementProperties;
+  sectionStyles: Record<string, unknown>;
+}
+
+const HeaderAnnouncementContext = createContext<HeaderAnnouncementContextValue>({
+  isDesigner: false,
+  isAnnouncementSectionSelected: false,
+  isSectionVisible: false,
+  properties: {},
+  sectionStyles: {}
+});
+
+export const useHeaderAnnouncement = () => useContext(HeaderAnnouncementContext);
+
+interface HeaderAnnouncementRegistrarProps extends PropsWithChildren {
+  initialSettings?: {
+    sectionStyles?: Record<string, unknown>;
+    properties?: HeaderAnnouncementProperties;
+  };
+}
+
+export default function HeaderAnnouncementRegistrar({
+  children,
+  initialSettings = {}
+}: HeaderAnnouncementRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  const [sectionProperties, setSectionProperties] =
+    useState<HeaderAnnouncementProperties>(
+      initialSettings.properties
+        ? initialSettings.properties
+        : {
+            text: '₺1500 üzeri siparişlerde ücretsiz kargo 🚚',
+            visible: true
+          }
+    );
+  const [sectionStyles, setSectionStyles] = useState<Record<string, unknown>>(
+    initialSettings.sectionStyles || {
+      'background-color': '#111827',
+      color: '#ffffff',
+      'padding-top': '10px',
+      'padding-bottom': '10px',
+      'text-align': 'center',
+      'font-size': '14px'
+    }
+  );
+  const [isAnnouncementSelected, setIsAnnouncementSelected] = useState(false);
+  const [isSectionVisible, setIsSectionVisible] = useState(
+    initialSettings.properties?.visible ?? true
+  );
+  const hasRegisteredNativeWidget = useRef(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    isDesignerRef.current = window.self !== window.top;
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    if (
+      typeof window !== 'undefined' &&
+      window.__headerAnnouncementRegistered &&
+      hasRegisteredNativeWidget.current
+    ) {
+      return;
+    }
+
+    const nativeWidgetConfig = {
+      placeholderId: HEADER_ANNOUNCEMENT_PLACEHOLDER_ID,
+      autoAdd: false,
+      section: {
+        id: HEADER_ANNOUNCEMENT_SECTION_ID,
+        type: 'native',
+        label: 'Announcement Bar',
+        blocks: [],
+        properties:
+          initialSettings.properties || {
+            text: '₺1500 üzeri siparişlerde ücretsiz kargo 🚚',
+            link: '',
+            target: '_self',
+            visible: true
+          },
+        styles:
+          initialSettings.sectionStyles || {
+            'background-color': '#111827',
+            color: '#ffffff',
+            'font-size': '13px',
+            'font-weight': '500',
+            'text-align': 'center',
+            'padding-top': '8px',
+            'padding-bottom': '8px',
+            'padding-left': '12px',
+            'padding-right': '12px'
+          }
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    window.__headerAnnouncementRegistered = true;
+    hasRegisteredNativeWidget.current = true;
+  }, [initialSettings.properties, initialSettings.sectionStyles]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    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: ThemePlaceholder) => p.slug === HEADER_ANNOUNCEMENT_PLACEHOLDER_ID
+        );
+
+        const section = placeholder?.sections?.find(
+          (s: ThemeSection) => s.id === HEADER_ANNOUNCEMENT_SECTION_ID
+        );
+
+        if (section) {
+          const visibleValue = section.properties?.visible;
+          const isVisible =
+            typeof visibleValue === 'boolean'
+              ? visibleValue
+              : (visibleValue as Record<string, boolean>)?.desktop === true ||
+                (visibleValue as Record<string, boolean>)?.mobile === true ||
+                typeof section.visible === 'boolean'
+              ? Boolean(section.visible ?? true)
+              : true;
+
+          setIsSectionVisible(isVisible);
+
+          if (section.properties) {
+            setSectionProperties(section.properties as HeaderAnnouncementProperties);
+          }
+
+          if (section.styles) {
+            setSectionStyles(section.styles);
+          }
+        } else if (placeholder) {
+          setIsSectionVisible(false);
+        }
+      }
+
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, key, value, properties } = data || {};
+        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({ ...prev, [key]: value }));
+          }
+          if (properties) {
+            setSectionProperties(properties as HeaderAnnouncementProperties);
+          }
+        }
+      }
+
+      if (type === 'UPDATE_SECTION_STYLE' || type === 'UPDATE_STYLE') {
+        const { sectionId, key, value, styles } = data || {};
+        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
+          if (key && value !== undefined) {
+            setSectionStyles((prev) => ({ ...prev, [key]: value }));
+          }
+          if (styles) {
+            setSectionStyles(styles);
+          }
+        }
+      }
+
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+        setIsAnnouncementSelected(
+          placeholderId === HEADER_ANNOUNCEMENT_PLACEHOLDER_ID &&
+            sectionId === HEADER_ANNOUNCEMENT_SECTION_ID
+        );
+      }
+
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsAnnouncementSelected(false);
+      }
+
+      if (type === 'TOGGLE_SECTION_VISIBILITY') {
+        const { sectionId } = data || {};
+        if (sectionId === HEADER_ANNOUNCEMENT_SECTION_ID) {
+          setIsSectionVisible((prev) => !prev);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <HeaderAnnouncementContext.Provider
+      value={{
+        isDesigner,
+        isAnnouncementSectionSelected: isAnnouncementSelected,
+        isSectionVisible,
+        properties: sectionProperties,
+        sectionStyles
+      }}
+    >
+      {children}
+    </HeaderAnnouncementContext.Provider>
+  );
+}