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

package/app-template/src/views/checkout/checkout-delivery-method-registrar.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+/**
+ * Checkout Delivery Method Section Registrar
+ *
+ * This component registers the "Delivery Method" section for the checkout placeholder.
+ * It provides the current view type and styles to child components via context.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  ReactNode
+} from 'react';
+
+// Constants
+export const CHECKOUT_PLACEHOLDER_ID = 'checkout-page';
+export const CHECKOUT_DELIVERY_METHOD_SECTION_ID = 'checkout-delivery-method';
+
+// View types
+export type DeliveryMethodViewType = 'radio' | 'dropdown';
+
+// Global flag to track if registration has been done (survives component remount)
+declare global {
+  interface Window {
+    __checkoutDeliveryMethodRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+export interface CheckoutDeliveryMethodProperties {
+  viewType?: DeliveryMethodViewType | Record<string, string>;
+}
+
+export interface CheckoutDeliveryMethodStyles {
+  [key: string]: string | number;
+}
+
+// Context for sharing view type with other components
+interface CheckoutDeliveryMethodContextValue {
+  viewType: DeliveryMethodViewType;
+  isDesigner: boolean;
+  sectionStyles: CheckoutDeliveryMethodStyles;
+}
+
+const CheckoutDeliveryMethodContext =
+  createContext<CheckoutDeliveryMethodContextValue>({
+    viewType: 'radio',
+    isDesigner: false,
+    sectionStyles: {}
+  });
+
+export const useCheckoutDeliveryMethod = () =>
+  useContext(CheckoutDeliveryMethodContext);
+
+interface CheckoutDeliveryMethodRegistrarProps {
+  children?: ReactNode;
+  initialViewType?: DeliveryMethodViewType;
+}
+
+export function CheckoutDeliveryMethodRegistrar({
+  children,
+  initialViewType = 'radio'
+}: CheckoutDeliveryMethodRegistrarProps) {
+  const isDesignerRef = useRef(false);
+
+  const [sectionProperties, setSectionProperties] =
+    useState<CheckoutDeliveryMethodProperties>({
+      viewType: initialViewType
+    });
+
+  const [sectionStyles, setSectionStyles] =
+    useState<CheckoutDeliveryMethodStyles>({});
+
+  const [isSectionSelected, setIsSectionSelected] = useState(false);
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  // Register native widget with Theme Editor
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // If already registered, skip
+    if (
+      typeof window !== 'undefined' &&
+      window.__checkoutDeliveryMethodRegistered
+    ) {
+      return;
+    }
+
+    const nativeWidgetConfig = {
+      placeholderId: CHECKOUT_PLACEHOLDER_ID,
+      section: {
+        id: CHECKOUT_DELIVERY_METHOD_SECTION_ID,
+        type: 'native',
+        label: 'Delivery Method',
+        blocks: []
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    window.__checkoutDeliveryMethodRegistered = true;
+  }, []);
+
+  // Listen for theme updates and selection changes from Theme Editor
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle theme updates
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: { slug: string }) => p.slug === CHECKOUT_PLACEHOLDER_ID
+        );
+
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === CHECKOUT_DELIVERY_METHOD_SECTION_ID
+        );
+
+        if (section) {
+          if (section.properties) {
+            setSectionProperties(section.properties);
+          }
+          if (section.styles) {
+            // Flatten responsive styles to current breakpoint (desktop by default)
+            const flatStyles: CheckoutDeliveryMethodStyles = {};
+            Object.entries(section.styles).forEach(([key, value]) => {
+              if (typeof value === 'object' && value !== null) {
+                const responsiveValue = value as Record<
+                  string,
+                  string | number
+                >;
+                flatStyles[key] =
+                  responsiveValue.desktop ||
+                  responsiveValue.mobile ||
+                  responsiveValue.tablet ||
+                  Object.values(responsiveValue)[0] ||
+                  '';
+              } else if (
+                typeof value === 'string' ||
+                typeof value === 'number'
+              ) {
+                flatStyles[key] = value;
+              }
+            });
+            setSectionStyles(flatStyles);
+          }
+        }
+      }
+
+      // Handle property updates
+      if (type === 'UPDATE_SECTION_PROPERTY' || type === 'UPDATE_PROPERTY') {
+        const { sectionId, placeholderId, key, value, properties } = data || {};
+
+        if (
+          sectionId === CHECKOUT_DELIVERY_METHOD_SECTION_ID ||
+          placeholderId === CHECKOUT_PLACEHOLDER_ID
+        ) {
+          if (key && value !== undefined) {
+            setSectionProperties((prev) => ({
+              ...prev,
+              [key]: value
+            }));
+          }
+          if (properties) {
+            setSectionProperties(properties);
+          }
+        }
+      }
+
+      // Handle selection
+      if (type === 'SELECT_SECTION') {
+        const { placeholderId, sectionId } = data || {};
+        setIsSectionSelected(
+          placeholderId === CHECKOUT_PLACEHOLDER_ID &&
+            sectionId === CHECKOUT_DELIVERY_METHOD_SECTION_ID
+        );
+      }
+
+      if (type === 'DESELECT' || type === 'CLEAR_SELECTION') {
+        setIsSectionSelected(false);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  // Extraction helper
+  const extractViewType = (prop: unknown): DeliveryMethodViewType => {
+    if (!prop) return 'radio';
+
+    if (typeof prop === 'string') {
+      return prop as DeliveryMethodViewType;
+    }
+
+    if (typeof prop === 'object' && prop !== null) {
+      const obj = prop as Record<string, string>;
+      return (obj.desktop ||
+        obj.mobile ||
+        Object.values(obj)[0] ||
+        'radio') as DeliveryMethodViewType;
+    }
+
+    return 'radio';
+  };
+
+  const currentViewType = extractViewType(sectionProperties.viewType);
+
+  return (
+    <CheckoutDeliveryMethodContext.Provider
+      value={{
+        viewType: currentViewType,
+        isDesigner,
+        sectionStyles
+      }}
+    >
+      <div
+        style={
+          isSectionSelected
+            ? { outline: '2px solid #3b82f6', outlineOffset: '2px' }
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </CheckoutDeliveryMethodContext.Provider>
+  );
+}

package/app-template/src/views/checkout/checkout-payment-options-registrar.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+/**
+ * Checkout Payment Options Section Registrar
+ *
+ * This component registers the "Payment Options" section for the checkout placeholder.
+ * It provides view type and styles to child components via context.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode
+} from 'react';
+
+import {
+  CHECKOUT_PLACEHOLDER_ID,
+  CHECKOUT_PAYMENT_OPTIONS_SECTION_ID
+} from './constants';
+
+// Global flag to track if registration has been done (survives component remount)
+declare global {
+  interface Window {
+    __checkoutPaymentOptionsRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+export interface CheckoutPaymentOptionsStyles {
+  [key: string]: string | number;
+}
+
+// Context for sharing view type and styles with other components
+interface CheckoutPaymentOptionsContextValue {
+  isDesigner: boolean;
+  viewType: 'tab' | 'dropdown';
+  sectionStyles: CheckoutPaymentOptionsStyles;
+}
+
+const CheckoutPaymentOptionsContext =
+  createContext<CheckoutPaymentOptionsContextValue>({
+    isDesigner: false,
+    viewType: 'tab',
+    sectionStyles: {}
+  });
+
+export const useCheckoutPaymentOptions = () =>
+  useContext(CheckoutPaymentOptionsContext);
+
+interface CheckoutPaymentOptionsRegistrarProps {
+  children?: ReactNode;
+}
+
+export function CheckoutPaymentOptionsRegistrar({
+  children
+}: CheckoutPaymentOptionsRegistrarProps) {
+  const [isDesigner, setIsDesigner] = useState(() => {
+    // Initialize from function to avoid recalculation
+    if (typeof window === 'undefined') return false;
+    return window.self !== window.top;
+  });
+
+  const [viewType, setViewType] = useState<'tab' | 'dropdown'>(() => {
+    // Try to get from localStorage first (for persistence)
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('checkout-payment-view-type');
+      if (saved === 'tab' || saved === 'dropdown') return saved;
+    }
+    return 'tab';
+  });
+
+  const [sectionStyles, setSectionStyles] =
+    useState<CheckoutPaymentOptionsStyles>({});
+  const [isSectionSelected, setIsSectionSelected] = useState(false);
+
+  // No longer need this useEffect for isDesigner
+  // useEffect(() => {
+  //   setIsDesigner(isInDesignerMode());
+  // }, []);
+
+  // Register native widget with Theme Editor
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // If already registered, skip
+    if (
+      typeof window !== 'undefined' &&
+      window.__checkoutPaymentOptionsRegistered
+    ) {
+      return;
+    }
+
+    const nativeWidgetConfig = {
+      placeholderId: CHECKOUT_PLACEHOLDER_ID,
+      section: {
+        id: CHECKOUT_PAYMENT_OPTIONS_SECTION_ID,
+        type: 'native',
+        label: 'Payment Options',
+        blocks: []
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    window.__checkoutPaymentOptionsRegistered = true;
+  }, []);
+
+  // Listen for theme updates and selection changes from Theme Editor
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle theme updates
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: { slug: string }) => p.slug === CHECKOUT_PLACEHOLDER_ID
+        );
+
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === CHECKOUT_PAYMENT_OPTIONS_SECTION_ID
+        );
+
+        if (section) {
+          // Extract view type from properties - only update if value exists
+          if (
+            section.properties?.viewType !== undefined &&
+            section.properties?.viewType !== null
+          ) {
+            const viewTypeValue = section.properties.viewType;
+
+            // Handle both string and responsive object formats
+            if (typeof viewTypeValue === 'string') {
+              setViewType(viewTypeValue as 'tab' | 'dropdown');
+              // Save to localStorage for persistence
+              if (typeof window !== 'undefined') {
+                localStorage.setItem(
+                  'checkout-payment-view-type',
+                  viewTypeValue
+                );
+              }
+            } else if (
+              typeof viewTypeValue === 'object' &&
+              viewTypeValue !== null
+            ) {
+              // Extract from responsive object
+              const responsiveValue = viewTypeValue as Record<string, string>;
+              const extractedValue =
+                responsiveValue.desktop ||
+                responsiveValue.mobile ||
+                responsiveValue.tablet ||
+                Object.values(responsiveValue)[0];
+              if (extractedValue) {
+                setViewType(extractedValue as 'tab' | 'dropdown');
+                // Save to localStorage for persistence
+                if (typeof window !== 'undefined') {
+                  localStorage.setItem(
+                    'checkout-payment-view-type',
+                    extractedValue
+                  );
+                }
+              }
+            }
+          }
+
+          // Flatten responsive styles to current breakpoint (desktop by default)
+          if (section.styles) {
+            const flatStyles: CheckoutPaymentOptionsStyles = {};
+            Object.entries(section.styles).forEach(([key, value]) => {
+              if (typeof value === 'object' && value !== null) {
+                const responsiveValue = value as Record<
+                  string,
+                  string | number
+                >;
+                flatStyles[key] =
+                  responsiveValue.desktop ||
+                  responsiveValue.mobile ||
+                  responsiveValue.tablet ||
+                  Object.values(responsiveValue)[0] ||
+                  '';
+              } else if (
+                typeof value === 'string' ||
+                typeof value === 'number'
+              ) {
+                flatStyles[key] = value;
+              }
+            });
+            setSectionStyles(flatStyles);
+          }
+        }
+      }
+
+      // Handle section selection
+      if (type === 'SECTION_SELECTED') {
+        const isSelected =
+          data?.placeholderId === CHECKOUT_PLACEHOLDER_ID &&
+          data?.sectionId === CHECKOUT_PAYMENT_OPTIONS_SECTION_ID;
+        setIsSectionSelected(isSelected);
+      }
+
+      if (type === 'SECTION_DESELECTED') {
+        setIsSectionSelected(false);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return (
+    <CheckoutPaymentOptionsContext.Provider
+      value={{
+        isDesigner,
+        viewType,
+        sectionStyles
+      }}
+    >
+      <div
+        data-native-section={CHECKOUT_PAYMENT_OPTIONS_SECTION_ID}
+        data-placeholder={CHECKOUT_PLACEHOLDER_ID}
+        style={{
+          outline: isSectionSelected ? '2px solid #2359C4' : 'none',
+          outlineOffset: '2px'
+        }}
+      >
+        {children}
+      </div>
+    </CheckoutPaymentOptionsContext.Provider>
+  );
+}

package/app-template/src/views/checkout/checkout-summary-registrar.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+/**
+ * Checkout Summary Section Registrar
+ *
+ * This component registers the "Summary" section for the checkout placeholder.
+ * It provides the current styles to child components via context.
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  ReactNode
+} from 'react';
+
+import {
+  CHECKOUT_PLACEHOLDER_ID,
+  CHECKOUT_SUMMARY_SECTION_ID
+} from './constants';
+
+// Global flag to track if registration has been done (survives component remount)
+declare global {
+  interface Window {
+    __checkoutSummaryRegistered?: boolean;
+  }
+}
+
+/**
+ * Check if running inside designer iframe
+ */
+function isInDesignerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.self !== window.top;
+}
+
+export interface CheckoutSummaryStyles {
+  [key: string]: string | number;
+}
+
+// Context for sharing styles with other components
+interface CheckoutSummaryContextValue {
+  isDesigner: boolean;
+  sectionStyles: CheckoutSummaryStyles;
+}
+
+const CheckoutSummaryContext = createContext<CheckoutSummaryContextValue>({
+  isDesigner: false,
+  sectionStyles: {}
+});
+
+export const useCheckoutSummary = () => useContext(CheckoutSummaryContext);
+
+interface CheckoutSummaryRegistrarProps {
+  children?: ReactNode;
+}
+
+export function CheckoutSummaryRegistrar({
+  children
+}: CheckoutSummaryRegistrarProps) {
+  const isDesignerRef = useRef(false);
+  const [sectionStyles, setSectionStyles] = useState<CheckoutSummaryStyles>({});
+  const [isSectionSelected, setIsSectionSelected] = useState(false);
+
+  useEffect(() => {
+    isDesignerRef.current = isInDesignerMode();
+  }, []);
+
+  const isDesigner = isDesignerRef.current;
+
+  // Register native widget with Theme Editor
+  useEffect(() => {
+    const isInIframe =
+      typeof window !== 'undefined' && window.self !== window.top;
+    if (!isInIframe || !window.parent) {
+      return;
+    }
+
+    // If already registered, skip
+    if (typeof window !== 'undefined' && window.__checkoutSummaryRegistered) {
+      return;
+    }
+
+    const nativeWidgetConfig = {
+      placeholderId: CHECKOUT_PLACEHOLDER_ID,
+      section: {
+        id: CHECKOUT_SUMMARY_SECTION_ID,
+        type: 'native',
+        label: 'Summary',
+        blocks: []
+      }
+    };
+
+    window.parent.postMessage(
+      {
+        type: 'REGISTER_NATIVE_WIDGETS',
+        data: { widgets: [nativeWidgetConfig] }
+      },
+      '*'
+    );
+
+    window.__checkoutSummaryRegistered = true;
+  }, []);
+
+  // Listen for theme updates and selection changes from Theme Editor
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { type, data } = event.data || {};
+
+      // Handle theme updates
+      if (
+        (type === 'UPDATE_THEME' || type === 'LOAD_THEME') &&
+        data?.theme?.placeholders
+      ) {
+        const placeholder = data.theme.placeholders?.find(
+          (p: { slug: string }) => p.slug === CHECKOUT_PLACEHOLDER_ID
+        );
+
+        const section = placeholder?.sections?.find(
+          (s: { id: string }) => s.id === CHECKOUT_SUMMARY_SECTION_ID
+        );
+
+        if (section && section.styles) {
+          // Flatten responsive styles to current breakpoint (desktop by default)
+          const flatStyles: CheckoutSummaryStyles = {};
+          Object.entries(section.styles).forEach(([key, value]) => {
+            if (typeof value === 'object' && value !== null) {
+              const responsiveValue = value as Record<string, string | number>;
+              flatStyles[key] =
+                responsiveValue.desktop ||
+                responsiveValue.mobile ||
+                responsiveValue.tablet ||
+                Object.values(responsiveValue)[0] ||
+                '';
+            } else if (typeof value === 'string' || typeof value === 'number') {
+              flatStyles[key] = value;
+            }
+          });
+          setSectionStyles(flatStyles);
+        }
+      }
+
+      // Handle section selection
+      if (type === 'SECTION_SELECTED') {
+        const isSelected =
+          data?.placeholderId === CHECKOUT_PLACEHOLDER_ID &&
+          data?.sectionId === CHECKOUT_SUMMARY_SECTION_ID;
+        setIsSectionSelected(isSelected);
+      }
+
+      if (type === 'SECTION_DESELECTED') {
+        setIsSectionSelected(false);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return (
+    <CheckoutSummaryContext.Provider
+      value={{
+        isDesigner,
+        sectionStyles
+      }}
+    >
+      <div
+        data-native-section={CHECKOUT_SUMMARY_SECTION_ID}
+        data-placeholder={CHECKOUT_PLACEHOLDER_ID}
+        style={{
+          outline: isSectionSelected ? '2px solid #2359C4' : 'none',
+          outlineOffset: '2px'
+        }}
+      >
+        {children}
+      </div>
+    </CheckoutSummaryContext.Provider>
+  );
+}

package/app-template/src/views/checkout/constants.ts

@@ -0,0 +1,5 @@
+export const CHECKOUT_PLACEHOLDER_ID = 'checkout-page';
+export const CHECKOUT_ADDRESS_SECTION_ID = 'checkout-address';
+export const CHECKOUT_BUTTONS_SECTION_ID = 'checkout-buttons';
+export const CHECKOUT_PAYMENT_OPTIONS_SECTION_ID = 'checkout-payment-options';
+export const CHECKOUT_SUMMARY_SECTION_ID = 'checkout-summary';

package/app-template/src/views/checkout/index.tsx

@@ -1,3 +1,8 @@
 export * from './step-button';
 export * from './step-list';
 export * from './summary';
+export * from './checkout-address-registrar';
+export * from './checkout-delivery-method-registrar';
+export * from './checkout-payment-options-registrar';
+export * from './checkout-summary-registrar';
+export * from './checkout-buttons-registrar';