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

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

@@ -1,253 +0,0 @@
-'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

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

@@ -1,5 +0,0 @@
-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/steps/payment/options/masterpass-rest.tsx

@@ -1,15 +0,0 @@
-import { useLocalization } from '@akinon/next/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-
-const MasterpassRest = () => {
-  const { locale, currency } = useLocalization();
-
-  return (
-    <PluginModule
-      component={Component.MasterpassRest}
-      props={{ locale, currency }}
-    />
-  );
-};
-
-export default MasterpassRest;

package/app-template/src/views/checkout/steps/payment/options/saved-card.tsx

@@ -1,18 +0,0 @@
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { useLocalization } from '@akinon/next/hooks';
-import CheckoutAgreements from '@theme/views/checkout/steps/payment/agreements';
-
-export default function SavedCard() {
-  const { t } = useLocalization();
-
-  return (
-    <PluginModule
-      component={Component.IyzicoSavedCard}
-      props={{
-        agreementCheckbox: (
-          <CheckoutAgreements control={null} error={null} fieldId="agreement" />
-        )
-      }}
-    />
-  );
-}