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

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

@@ -1,254 +0,0 @@
-'use client';
-
-/**
- * Checkout Address Section Registrar
- *
- * This component registers the "Address" section for the checkout placeholder.
- * It provides the current address view type to child components via context.
- */
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  ReactNode
-} from 'react';
-
-import {
-  CHECKOUT_PLACEHOLDER_ID,
-  CHECKOUT_ADDRESS_SECTION_ID
-} from './constants';
-
-// View types
-export type AddressViewType = 'box' | 'dropdown';
-
-// Global flag to track if registration has been done (survives component remount)
-declare global {
-  interface Window {
-    __checkoutAddressRegistered?: boolean;
-  }
-}
-
-/**
- * Check if running inside designer iframe
- */
-function isInDesignerMode(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.self !== window.top;
-}
-
-export interface CheckoutAddressProperties {
-  viewType?: AddressViewType | Record<string, string>;
-}
-
-export interface CheckoutAddressStyles {
-  [key: string]: string | number;
-}
-
-// Context for sharing view type with other components
-interface CheckoutAddressContextValue {
-  viewType: AddressViewType;
-  isDesigner: boolean;
-  sectionStyles: CheckoutAddressStyles;
-}
-
-const CheckoutAddressContext = createContext<CheckoutAddressContextValue>({
-  viewType: 'box',
-  isDesigner: false,
-  sectionStyles: {}
-});
-
-export const useCheckoutAddress = () => useContext(CheckoutAddressContext);
-
-interface CheckoutAddressRegistrarProps {
-  children?: ReactNode;
-  initialViewType?: AddressViewType;
-}
-
-export function CheckoutAddressRegistrar({
-  children,
-  initialViewType = 'box'
-}: CheckoutAddressRegistrarProps) {
-  const isDesignerRef = useRef(false);
-
-  const [sectionProperties, setSectionProperties] =
-    useState<CheckoutAddressProperties>({
-      viewType: initialViewType
-    });
-
-  const [sectionStyles, setSectionStyles] = useState<CheckoutAddressStyles>({});
-
-  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.__checkoutAddressRegistered) {
-      return;
-    }
-
-    const nativeWidgetConfig = {
-      placeholderId: CHECKOUT_PLACEHOLDER_ID,
-      section: {
-        id: CHECKOUT_ADDRESS_SECTION_ID,
-        type: 'native',
-        label: 'Addresses',
-        blocks: []
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    window.__checkoutAddressRegistered = 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_ADDRESS_SECTION_ID
-        );
-
-        if (section) {
-          if (section.properties) {
-            setSectionProperties(section.properties);
-          }
-          if (section.styles) {
-            // Flatten responsive styles to current breakpoint (desktop by default)
-            const flatStyles: CheckoutAddressStyles = {};
-            Object.entries(section.styles).forEach(([key, value]) => {
-              if (typeof value === 'object' && value !== null) {
-                // Get desktop value first, fallback to any available value
-                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_ADDRESS_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_ADDRESS_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): AddressViewType => {
-    if (!prop) return 'box';
-
-    if (typeof prop === 'string') {
-      return prop as AddressViewType;
-    }
-
-    if (typeof prop === 'object' && prop !== null) {
-      const obj = prop as Record<string, string>;
-      return (obj.desktop ||
-        obj.mobile ||
-        Object.values(obj)[0] ||
-        'box') as AddressViewType;
-    }
-
-    return 'box';
-  };
-
-  const currentViewType = extractViewType(sectionProperties.viewType);
-
-  return (
-    <CheckoutAddressContext.Provider
-      value={{
-        viewType: currentViewType,
-        isDesigner,
-        sectionStyles
-      }}
-    >
-      <div
-        style={
-          isSectionSelected
-            ? { outline: '2px solid #3b82f6', outlineOffset: '2px' }
-            : undefined
-        }
-      >
-        {children}
-      </div>
-    </CheckoutAddressContext.Provider>
-  );
-}

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

@@ -1,183 +0,0 @@
-'use client';
-
-/**
- * Checkout Buttons Section Registrar
- *
- * This component registers the "Buttons" section for the checkout placeholder.
- * It provides button styles to child components via context.
- */
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  ReactNode
-} from 'react';
-
-import {
-  CHECKOUT_PLACEHOLDER_ID,
-  CHECKOUT_BUTTONS_SECTION_ID
-} from './constants';
-
-// Global flag to track if registration has been done (survives component remount)
-declare global {
-  interface Window {
-    __checkoutButtonsRegistered?: boolean;
-  }
-}
-
-/**
- * Check if running inside designer iframe
- */
-function isInDesignerMode(): boolean {
-  if (typeof window === 'undefined') return false;
-  return window.self !== window.top;
-}
-
-export interface CheckoutButtonsStyles {
-  [key: string]: string | number;
-}
-
-// Context for sharing styles with other components
-interface CheckoutButtonsContextValue {
-  isDesigner: boolean;
-  sectionStyles: CheckoutButtonsStyles;
-}
-
-const CheckoutButtonsContext = createContext<CheckoutButtonsContextValue>({
-  isDesigner: false,
-  sectionStyles: {}
-});
-
-export const useCheckoutButtons = () => useContext(CheckoutButtonsContext);
-
-interface CheckoutButtonsRegistrarProps {
-  children?: ReactNode;
-}
-
-export function CheckoutButtonsRegistrar({
-  children
-}: CheckoutButtonsRegistrarProps) {
-  const isDesignerRef = useRef(false);
-  const [sectionStyles, setSectionStyles] = useState<CheckoutButtonsStyles>({});
-  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.__checkoutButtonsRegistered) {
-      return;
-    }
-
-    const nativeWidgetConfig = {
-      placeholderId: CHECKOUT_PLACEHOLDER_ID,
-      section: {
-        id: CHECKOUT_BUTTONS_SECTION_ID,
-        type: 'native',
-        label: 'Buttons',
-        blocks: []
-      }
-    };
-
-    window.parent.postMessage(
-      {
-        type: 'REGISTER_NATIVE_WIDGETS',
-        data: { widgets: [nativeWidgetConfig] }
-      },
-      '*'
-    );
-
-    window.__checkoutButtonsRegistered = 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_BUTTONS_SECTION_ID
-        );
-
-        if (section && section.styles) {
-          // Flatten responsive styles to current breakpoint (desktop by default)
-          const flatStyles: CheckoutButtonsStyles = {};
-          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_BUTTONS_SECTION_ID;
-        setIsSectionSelected(isSelected);
-      }
-
-      if (type === 'SECTION_DESELECTED') {
-        setIsSectionSelected(false);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, []);
-
-  return (
-    <CheckoutButtonsContext.Provider
-      value={{
-        isDesigner,
-        sectionStyles
-      }}
-    >
-      <div
-        data-native-section={CHECKOUT_BUTTONS_SECTION_ID}
-        data-placeholder={CHECKOUT_PLACEHOLDER_ID}
-        style={{
-          outline: isSectionSelected ? '2px solid #2359C4' : 'none',
-          outlineOffset: '2px'
-        }}
-      >
-        {children}
-      </div>
-    </CheckoutButtonsContext.Provider>
-  );
-}

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

@@ -1,259 +0,0 @@
-'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>
-  );
-}