@b3dotfun/sdk 0.1.66-alpha.4 → 0.1.67-alpha.0

package/src/anyspend/react/components/context/AnySpendCustomizationContext.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "../types/customization";
+
+interface AnySpendCustomizationContextValue {
+  slots: AnySpendSlots;
+  content: AnySpendContent;
+  theme: AnySpendTheme;
+}
+
+const AnySpendCustomizationContext = createContext<AnySpendCustomizationContextValue>({
+  slots: {},
+  content: {},
+  theme: {},
+});
+
+/** Convert a hex color to HSL string (e.g. "210 50% 40%"). Supports both 3-digit (#fff) and 6-digit (#ffffff) formats. */
+function hexToHsl(hex: string): string | null {
+  const hexStr = hex.replace(/^#/, "");
+  let r: number, g: number, b: number;
+
+  if (hexStr.length === 3) {
+    // 3-digit hex shorthand (e.g., #fff)
+    [r, g, b] = [0, 1, 2].map(i => parseInt(hexStr[i] + hexStr[i], 16) / 255);
+  } else if (hexStr.length === 6) {
+    // 6-digit hex (e.g., #ffffff)
+    [r, g, b] = [0, 2, 4].map(i => parseInt(hexStr.substring(i, i + 2), 16) / 255);
+  } else {
+    return null;
+  }
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+const CSS_VAR_MAP: Record<string, string> = {
+  primary: "--as-primary",
+  secondary: "--as-secondary",
+  tertiary: "--as-tertiary",
+  surfacePrimary: "--as-surface-primary",
+  surfaceSecondary: "--as-surface-secondary",
+  brand: "--as-brand",
+  borderPrimary: "--as-border-primary",
+  borderSecondary: "--as-border-secondary",
+};
+
+export interface AnySpendCustomizationProviderProps {
+  slots?: AnySpendSlots;
+  content?: AnySpendContent;
+  theme?: AnySpendTheme;
+  children: ReactNode;
+}
+
+export function AnySpendCustomizationProvider({ slots, content, theme, children }: AnySpendCustomizationProviderProps) {
+  const value = useMemo<AnySpendCustomizationContextValue>(
+    () => ({
+      slots: slots || {},
+      content: content || {},
+      theme: theme || {},
+    }),
+    [slots, content, theme],
+  );
+
+  const cssVarOverrides = useMemo(() => {
+    const vars: Record<string, string> = {};
+
+    // Convert brandColor hex → HSL → --as-brand
+    if (theme?.brandColor) {
+      const hsl = hexToHsl(theme.brandColor);
+      if (hsl) vars["--as-brand"] = hsl;
+    }
+
+    // Apply explicit color overrides (convert hex to HSL)
+    if (theme?.colors) {
+      for (const [key, val] of Object.entries(theme.colors)) {
+        const cssVar = CSS_VAR_MAP[key];
+        if (cssVar && val) {
+          const hsl = hexToHsl(val);
+          if (hsl) vars[cssVar] = hsl;
+        }
+      }
+    }
+
+    return vars;
+  }, [theme?.brandColor, theme?.colors]);
+
+  const hasOverrides = Object.keys(cssVarOverrides).length > 0;
+
+  return (
+    <AnySpendCustomizationContext.Provider value={value}>
+      {hasOverrides ? (
+        <div style={{ ...cssVarOverrides, display: "contents" } as React.CSSProperties}>{children}</div>
+      ) : (
+        children
+      )}
+    </AnySpendCustomizationContext.Provider>
+  );
+}
+
+export function useAnySpendCustomization(): AnySpendCustomizationContextValue {
+  return useContext(AnySpendCustomizationContext);
+}

package/src/anyspend/react/components/icons/AnimatedCheckmark.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useId } from "react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface AnimatedCheckmarkProps {
+  /** Circle stroke / fill color (CSS color value) */
+  color?: string;
+  /** Checkmark stroke color (defaults to white) */
+  checkColor?: string;
+  /** Stroke width for the circle and check path */
+  strokeWidth?: number;
+  /** Tailwind or custom className to control size, e.g. "h-16 w-16" */
+  className?: string;
+  /** Animation delay in seconds */
+  delay?: number;
+  /** Render in final (post-animation) state with no animation */
+  static?: boolean;
+}
+
+/**
+ * Animated checkmark SVG component.
+ * Circle draws in → checkmark draws → background fills → subtle scale bounce.
+ *
+ * Size is controlled via className (Tailwind classes like `h-10 w-10`, `h-16 w-16`, etc.).
+ * The SVG scales to fit its container via viewBox.
+ */
+export function AnimatedCheckmark({
+  color = "#22c55e",
+  checkColor = "#fff",
+  strokeWidth = 2,
+  className,
+  delay = 0,
+  static: isStatic = false,
+}: AnimatedCheckmarkProps) {
+  const id = `ac-${useId().replace(/:/g, "")}`;
+
+  if (isStatic) {
+    return (
+      <svg
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 52 52"
+        style={{
+          borderRadius: "50%",
+          display: "block",
+          strokeWidth,
+          stroke: checkColor,
+          strokeMiterlimit: 10,
+          boxShadow: `inset 0px 0px 0px 100px ${color}`,
+        }}
+      >
+        <circle
+          cx="26"
+          cy="26"
+          r="25"
+          fill="none"
+          style={{
+            strokeWidth,
+            strokeMiterlimit: 10,
+            stroke: color,
+          }}
+        />
+        <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" style={{ transformOrigin: "50% 50%" }} />
+      </svg>
+    );
+  }
+
+  return (
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+@keyframes ${id}-stroke {
+  100% { stroke-dashoffset: 0; }
+}
+@keyframes ${id}-scale {
+  0%, 100% { transform: none; }
+  50% { transform: scale3d(1.1, 1.1, 1); }
+}
+@keyframes ${id}-fill {
+  100% { box-shadow: inset 0px 0px 0px 100px ${color}; }
+}
+.${id} {
+  border-radius: 50%;
+  display: block;
+  stroke-width: ${strokeWidth};
+  stroke: ${checkColor};
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px ${color};
+  animation:
+    ${id}-fill .4s ease-in-out ${delay + 0.4}s forwards,
+    ${id}-scale .3s ease-in-out ${delay + 0.9}s both;
+}
+.${id}__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: ${strokeWidth};
+  stroke-miterlimit: 10;
+  stroke: ${color};
+  fill: none;
+  animation: ${id}-stroke .6s cubic-bezier(0.65, 0, 0.45, 1) ${delay}s forwards;
+}
+.${id}__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: ${id}-stroke .3s cubic-bezier(0.65, 0, 0.45, 1) ${delay + 0.8}s forwards;
+}
+`,
+        }}
+      />
+      <svg className={cn(id, className)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+        <circle className={`${id}__circle`} cx="26" cy="26" r="25" fill="none" />
+        <path className={`${id}__check`} fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+      </svg>
+    </>
+  );
+}

package/src/anyspend/react/components/index.ts

@@ -1,8 +1,19 @@
 // Checkout
 export { AnySpendCheckout } from "./checkout/AnySpendCheckout";
-export type { AnySpendCheckoutProps, CheckoutItem, AnySpendCheckoutClasses } from "./checkout/AnySpendCheckout";
+export type {
+  AnySpendCheckoutProps,
+  CheckoutItem,
+  CheckoutSummaryLine,
+  AnySpendCheckoutClasses,
+  CheckoutFormSchema,
+  CheckoutFormComponentProps,
+  ShippingOption,
+  DiscountResult,
+  AddressData,
+} from "./checkout/AnySpendCheckout";
 export { AnySpendCheckoutTrigger } from "./checkout/AnySpendCheckoutTrigger";
 export type { AnySpendCheckoutTriggerProps } from "./checkout/AnySpendCheckoutTrigger";
+export type { PaymentMethod } from "./checkout/CheckoutPaymentPanel";
 
 // Components
 export { AnySpend } from "./AnySpend";
@@ -30,6 +41,21 @@ export type {
   QRDepositClasses,
   RecipientSelectionClasses,
 } from "./types/classes";
+
+// Customization types (slots, content, theme)
+export type {
+  ActionButtonSlotProps,
+  AnySpendContent,
+  AnySpendSlots,
+  AnySpendTheme,
+  ConnectWalletButtonSlotProps,
+  ErrorScreenSlotProps,
+  SuccessScreenSlotProps,
+} from "./types/customization";
+
+// Customization context (for advanced/nested usage)
+export { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
+
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export { AnySpendWorkflowTrigger } from "./AnySpendWorkflowTrigger";
 export type { AnySpendWorkflowTriggerProps } from "./AnySpendWorkflowTrigger";

package/src/anyspend/react/components/types/classes.ts

@@ -490,6 +490,23 @@ export interface AnySpendCheckoutClasses {
   cartItemPrice?: string;
   cartSummary?: string;
   cartTotal?: string;
+  cartSubtotal?: string;
+  cartSummaryLine?: string;
+  cartSummaryLineLabel?: string;
+  cartSummaryLineAmount?: string;
+  cartDiscount?: string;
+  cartItemMetadata?: string;
+  cartItemMetadataLabel?: string;
+  cartItemMetadataValue?: string;
+
+  // Form panel
+  formPanel?: string;
+  formField?: string;
+  formFieldLabel?: string;
+  formFieldInput?: string;
+  shippingSelector?: string;
+  discountInput?: string;
+  addressForm?: string;
 
   // Branding
   poweredBy?: string;
@@ -497,6 +514,11 @@ export interface AnySpendCheckoutClasses {
   // Success
   successPanel?: string;
   returnButton?: string;
+
+  // Order status tracking
+  orderStatusPanel?: string;
+  retryButton?: string;
+  transactionLink?: string;
 }
 
 /** Combined classes for all AnySpend-related components */

package/src/anyspend/react/components/types/customization.ts

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import type {
+  CheckoutFormComponentProps,
+  ShippingSelectorSlotProps,
+  DiscountInputSlotProps,
+} from "../../../types/forms";
+
+// === SLOT PROP INTERFACES ===
+
+export interface ActionButtonSlotProps {
+  onClick: () => void;
+  disabled: boolean;
+  loading: boolean;
+  text: string;
+}
+
+export interface ConnectWalletButtonSlotProps {
+  onPayment: () => void;
+  txLoading: boolean;
+  connectedAddress?: string;
+  paymentLabel: string;
+}
+
+export interface SuccessScreenSlotProps {
+  title: string;
+  description: string;
+  txHash?: string;
+  orderId?: string;
+  explorerUrl?: string;
+  onDone: () => void;
+  returnUrl?: string;
+  returnLabel?: string;
+}
+
+export interface ErrorScreenSlotProps {
+  title: string;
+  description: string;
+  errorType: "failure" | "expired" | "refunded";
+  orderId?: string;
+  onRetry?: () => void;
+  onDone?: () => void;
+}
+
+// === SLOTS (element replacement) ===
+
+export interface AnySpendSlots {
+  actionButton?: (props: ActionButtonSlotProps) => ReactNode;
+  connectWalletButton?: (props: ConnectWalletButtonSlotProps) => ReactNode;
+  header?: (props: { mode: "page" | "modal" }) => ReactNode;
+  footer?: ReactNode;
+  successScreen?: (props: SuccessScreenSlotProps) => ReactNode;
+  errorScreen?: (props: ErrorScreenSlotProps) => ReactNode;
+  /** Replace the entire checkout form panel with a custom component */
+  checkoutForm?: (props: CheckoutFormComponentProps) => ReactNode;
+  /** Replace the shipping method selector */
+  shippingSelector?: (props: ShippingSelectorSlotProps) => ReactNode;
+  /** Replace the discount code input */
+  discountInput?: (props: DiscountInputSlotProps) => ReactNode;
+}
+
+// === CONTENT (text/message overrides) ===
+
+export interface AnySpendContent {
+  // Success states
+  successTitle?: string | ReactNode;
+  successDescription?: string | ReactNode;
+
+  // Error states
+  failureTitle?: string | ReactNode;
+  failureDescription?: string | ReactNode;
+  expiredTitle?: string | ReactNode;
+  expiredDescription?: string | ReactNode;
+  refundedTitle?: string | ReactNode;
+  refundedDescription?: string | ReactNode;
+
+  // Processing states
+  processingTitle?: string | ReactNode;
+  processingDescription?: string | ReactNode;
+
+  // Buttons
+  returnButtonLabel?: string;
+  retryButtonLabel?: string;
+}
+
+// === THEME ===
+
+export interface AnySpendTheme {
+  brandColor?: string;
+  colors?: Partial<{
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    surfacePrimary: string;
+    surfaceSecondary: string;
+    brand: string;
+    borderPrimary: string;
+    borderSecondary: string;
+  }>;
+}

package/src/anyspend/react/hooks/useAnyspendCreateOnrampOrder.ts

@@ -1,6 +1,7 @@
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend/constants";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -26,7 +27,7 @@ export type CreateOnrampOrderParams = Omit<CreateOrderParams, "srcChain" | "srcT
 };
 
 export type UseAnyspendCreateOnrampOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -124,7 +125,7 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError }: UseAnyspend
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

package/src/anyspend/react/hooks/useAnyspendCreateOrder.ts

@@ -1,5 +1,6 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { buildMetadata, buildPayload, normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -26,7 +27,7 @@ export type CreateOrderParams = {
 };
 
 export type UseAnyspendCreateOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -99,7 +100,7 @@ export function useAnyspendCreateOrder({ onSuccess, onError }: UseAnyspendCreate
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -110,6 +110,8 @@ interface UseAnyspendFlowProps {
   disableUrlParamManagement?: boolean;
   orderType?: "hype_duel" | "custom_exact_in" | "swap";
   customExactInConfig?: CustomExactInConfig;
+  /** Optional sender (payer) address — pre-fills token balances when the user address is known ahead of time */
+  senderAddress?: string;
 }
 
 // This hook serves for order hype_duel and custom_exact_in
@@ -127,6 +129,7 @@ export function useAnyspendFlow({
   disableUrlParamManagement = false,
   orderType = "hype_duel",
   customExactInConfig,
+  senderAddress,
 }: UseAnyspendFlowProps) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -180,9 +183,10 @@ export function useAnyspendFlow({
   const recipientName = recipientProfile.data?.name;
 
   // Check token balance for crypto payments
+  const effectiveBalanceAddress = senderAddress || walletAddress;
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
     token: selectedSrcToken,
-    address: walletAddress,
+    address: effectiveBalanceAddress,
   });
 
   // Check if user has enough balance

package/src/anyspend/react/hooks/useCreateDepositFirstOrder.ts

@@ -1,5 +1,6 @@
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CreateOrderResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { VisitorData } from "@b3dotfun/sdk/anyspend/types/fingerprint";
 import { normalizeAddress } from "@b3dotfun/sdk/anyspend/utils";
 import { useB3Config } from "@b3dotfun/sdk/global-account/react";
@@ -21,7 +22,7 @@ export type CreateDepositFirstOrderParams = {
 };
 
 export type UseCreateDepositFirstOrderProps = {
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: CreateOrderResponse) => void;
   onError?: (error: Error) => void;
 };
 
@@ -94,7 +95,7 @@ export function useCreateDepositFirstOrder({ onSuccess, onError }: UseCreateDepo
         throw error;
       }
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data: CreateOrderResponse) => {
       onSuccess?.(data);
     },
     onError: (error: Error) => {

package/src/anyspend/services/anyspend.ts

@@ -20,7 +20,8 @@ import { VisitorData } from "../types/fingerprint";
 // Service functions
 export const anyspendService = {
   getTokenList: async (chainId: number, query: string): Promise<components["schemas"]["Token"][]> => {
-    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/chains/${chainId}/tokens?limit=100&term=${query}`);
+    const params = new URLSearchParams({ limit: "100", term: query });
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/chains/${chainId}/tokens?${params.toString()}`);
     const body: GetTokenListResponse = await response.json();
     invariant(response.status === 200, `Failed to fetch token list for chain ${chainId}`);
     return body.data;
@@ -123,6 +124,7 @@ export const anyspendService = {
     invariant(orderId, "orderId is required");
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders/${orderId}`);
     const data: GetOrderAndTxsResponse = await response.json();
+    invariant(response.status === 200, (data as any).message || `Failed to fetch order ${orderId}`);
     return data;
   },
 
@@ -140,6 +142,7 @@ export const anyspendService = {
     }
     const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/orders?${params.toString()}`);
     const data: GetOrderHistoryResponse = await response.json();
+    invariant(response.status === 200, (data as any).message || "Failed to fetch order history");
     return data;
   },
 
@@ -177,8 +180,22 @@ export const anyspendService = {
     return data.data;
   },
 
+  getCoinbaseOnrampUrl: async (
+    request: components["schemas"]["CoinbaseOnrampUrlRequest"],
+  ): Promise<components["schemas"]["CoinbaseOnrampUrlResponse"]> => {
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/onramp/coinbase/onramp-url`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(request),
+    });
+    const data: components["schemas"]["CoinbaseOnrampUrlResponse"] = await response.json();
+    if (!response.ok) throw new Error((data as any).message || "Failed to get Coinbase onramp URL");
+    return data;
+  },
+
   getStripeClientSecret: async (paymentIntentId: string): Promise<string | null> => {
-    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/stripe/clientSecret?paymentIntentId=${paymentIntentId}`);
+    const params = new URLSearchParams({ paymentIntentId });
+    const response = await fetch(`${ANYSPEND_MAINNET_BASE_URL}/stripe/clientSecret?${params.toString()}`);
     const data: GetStripeClientSecret = await response.json();
     invariant(response.status === 200, "Failed to get Stripe client secret");
     return data.data;

package/src/anyspend/types/forms.ts

@@ -0,0 +1,97 @@
+/**
+ * Checkout form schema types
+ *
+ * Merchants define forms using a JSON schema to collect customer information
+ * during checkout (email, shipping address, discount codes, arbitrary fields).
+ */
+
+export interface CheckoutFormField {
+  /** Unique field identifier */
+  id: string;
+  /** Field type */
+  type: "text" | "email" | "phone" | "textarea" | "select" | "number" | "checkbox" | "address";
+  /** Display label */
+  label: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the field is required. Default: false */
+  required?: boolean;
+  /** Default value */
+  defaultValue?: string;
+  /** Options for "select" type fields */
+  options?: { label: string; value: string }[];
+  /** Validation rules */
+  validation?: {
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+  };
+}
+
+export interface CheckoutFormSchema {
+  fields: CheckoutFormField[];
+}
+
+export interface ShippingOption {
+  id: string;
+  name: string;
+  description?: string;
+  /** Amount in wei */
+  amount: string;
+  /** e.g. "5-7 business days" */
+  estimated_days?: string;
+}
+
+export interface DiscountResult {
+  valid: boolean;
+  discount_type?: "percentage" | "fixed";
+  discount_value?: string;
+  /** Computed discount amount in wei */
+  discount_amount?: string;
+  /** Final amount after discount in wei */
+  final_amount?: string;
+  error?: string;
+}
+
+export interface AddressData {
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  country: string;
+}
+
+/**
+ * Props passed to custom form components or the checkoutForm slot
+ */
+export interface CheckoutFormComponentProps {
+  /** Call this when the form is submitted / values change */
+  onSubmit: (data: Record<string, unknown>) => void;
+  /** Call to signal whether the form is currently valid */
+  onValidationChange: (isValid: boolean) => void;
+  /** Current form data */
+  formData: Record<string, unknown>;
+  /** Update form data */
+  setFormData: (data: Record<string, unknown>) => void;
+}
+
+/**
+ * Props for shipping selector slot
+ */
+export interface ShippingSelectorSlotProps {
+  options: ShippingOption[];
+  selectedId: string | null;
+  onSelect: (option: ShippingOption) => void;
+}
+
+/**
+ * Props for discount input slot
+ */
+export interface DiscountInputSlotProps {
+  onApply: (code: string) => Promise<DiscountResult>;
+  appliedDiscount: DiscountResult | null;
+  onRemove: () => void;
+  loading: boolean;
+}