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

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

@@ -1,54 +1,78 @@
-import { useRouter, useLocalization } from '@akinon/next/hooks';
-import { Link } from '@theme/components';
-import GuestLogin from '@theme/views/guest-login';
+'use client';
+
 import { Login } from '@theme/views/login';
-import { useEffect } from 'react';
-import { ROUTES } from 'routes';
+import { Register } from '@theme/views/register';
 import { useSession } from 'next-auth/react';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { api } from '@akinon/next/data/client/api';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '@theme/components';
+import GuestLogin from '@theme/views/guest-login';
 
-const CheckoutAuth = () => {
-  const { t } = useLocalization();
+export default function CheckoutAuth() {
+  const { data: session } = useSession();
   const router = useRouter();
-  const { status } = useSession();
-  const dispatch = useAppDispatch();
+  const searchParams = useSearchParams();
+  const { t } = useLocalization();
+  const [activeTab, setActiveTab] = useState('login');
+
+  const tabClass = (tabName) => {
+    return twMerge(
+      clsx(
+        'text-base font-normal text-black-750/50 bg-transparent border-0 border-primary px-6 transition-all hover:border-b hover:text-black-750',
+        {
+          'border-b text-black-750': activeTab === tabName
+        }
+      )
+    );
+  };
+
+  const pageTitle = useMemo(() => {
+    return {
+      login: t('auth.login.title'),
+      register: t('auth.register.title'),
+      guest: t('checkout.auth.guest_checkout')
+    }[activeTab];
+  }, [activeTab]);
 
   useEffect(() => {
-    if (status === 'authenticated') {
-      dispatch(api.util.invalidateTags(['Checkout']));
-    } else if (status === 'unauthenticated') {
-      router.replace(ROUTES.CHECKOUT + `?callbackUrl=${ROUTES.CHECKOUT}`);
+    if (session?.user) {
+      router.push(searchParams.get('callbackUrl') ?? '/');
     }
-  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [session?.user]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 flex-shrink-0">
-        <Login />
-        <div className="text-center text-sm text-gray-600 uppercase mt-5">
-          <span>
-            {t('checkout.auth.title')}
-            <Link
-              href={ROUTES.AUTH + `?callbackUrl=${ROUTES.CHECKOUT}`}
-              className="ml-1 text-black underline"
-            >
-              {t('checkout.auth.signup')}
-            </Link>
-          </span>
+    <section className="container my-7 lg:my-24">
+      <div className="max-w-lg mx-auto">
+        <div className="text-black-750 text-[40px] font-normal">
+          {pageTitle}
         </div>
-      </div>
+        {activeTab !== 'guest' && (
+          <div className="w-full grid grid-cols-2 justify-center gap-4 lg:gap-6 mt-8">
+            <button
+              className={tabClass('login')}
+              onClick={() => setActiveTab('login')}
+            >
+              {t('auth.login.mobile_title')}
+            </button>
+            <Button
+              className={tabClass('register')}
+              onClick={() => setActiveTab('register')}
+            >
+              {t('auth.register.mobile_title')}
+            </Button>
+          </div>
+        )}
+        <div className="w-full flex flex-wrap">
+          {activeTab === 'register' && <Register />}
+
+          {activeTab === 'login' && <Login setActiveTab={setActiveTab} />}
 
-      <div className="flex-1 mt-5 lg:mt-0">
-        <div className="px-5 lg:px-16">
-          <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-            {t('checkout.auth.guest_checkout')}
-          </h2>
-          <GuestLogin />
+          {activeTab === 'guest' && <GuestLogin />}
         </div>
       </div>
-    </div>
+    </section>
   );
-};
-
-export default CheckoutAuth;
+}

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

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

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