@b3dotfun/sdk 0.1.66 → 0.1.68

package/src/anyspend/react/components/checkout/CheckoutFormPanel.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { useCallback, useMemo, useRef, useState } from "react";
+import type {
+  CheckoutFormSchema,
+  CheckoutFormComponentProps,
+  AddressData,
+  ShippingOption,
+  DiscountResult,
+} from "../../../types/forms";
+import { CheckoutFormFieldComponent } from "./CheckoutFormField";
+import { AddressForm } from "./AddressForm";
+import { ShippingSelector } from "./ShippingSelector";
+import { DiscountCodeInput } from "./DiscountCodeInput";
+import type { AnySpendCheckoutClasses } from "../types/classes";
+
+interface CheckoutFormPanelProps {
+  /** JSON form definition */
+  formSchema?: CheckoutFormSchema | null;
+  /** Custom React component to render instead of schema-based form */
+  formComponent?: React.ComponentType<CheckoutFormComponentProps>;
+  /** Shipping options */
+  shippingOptions?: ShippingOption[] | null;
+  /** Whether to collect a shipping address */
+  collectShippingAddress?: boolean;
+  /** Enable discount code input */
+  enableDiscountCode?: boolean;
+  /** Validate a discount code */
+  validateDiscount?: (code: string) => Promise<DiscountResult>;
+  /** Token info for display */
+  tokenSymbol?: string;
+  tokenDecimals?: number;
+  /** CSS class overrides */
+  classes?: AnySpendCheckoutClasses;
+  /** Current form data (lifted state) */
+  formData: Record<string, unknown>;
+  /** Update form data */
+  onFormDataChange: (data: Record<string, unknown>) => void;
+  /** Shipping selection */
+  selectedShipping: ShippingOption | null;
+  onShippingChange: (option: ShippingOption) => void;
+  /** Discount state */
+  appliedDiscount: DiscountResult | null;
+  onDiscountApplied: (result: DiscountResult) => void;
+  onDiscountRemoved: () => void;
+  /** Shipping address */
+  shippingAddress: AddressData;
+  onShippingAddressChange: (address: AddressData) => void;
+  /** Slot overrides */
+  checkoutFormSlot?: (props: CheckoutFormComponentProps) => React.ReactNode;
+}
+
+const emptyAddress: AddressData = { street: "", city: "", state: "", zip: "", country: "" };
+
+export function CheckoutFormPanel({
+  formSchema,
+  formComponent: FormComponent,
+  shippingOptions,
+  collectShippingAddress,
+  enableDiscountCode,
+  validateDiscount,
+  tokenSymbol,
+  tokenDecimals,
+  classes,
+  formData,
+  onFormDataChange,
+  selectedShipping,
+  onShippingChange,
+  appliedDiscount,
+  onDiscountApplied,
+  onDiscountRemoved,
+  shippingAddress,
+  onShippingAddressChange,
+  checkoutFormSlot,
+}: CheckoutFormPanelProps) {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const hasFormFields = formSchema && formSchema.fields.length > 0;
+  const hasShipping = shippingOptions && shippingOptions.length > 0;
+  const hasAnyContent =
+    hasFormFields || FormComponent || checkoutFormSlot || hasShipping || collectShippingAddress || enableDiscountCode;
+
+  // All hooks must be called before any early returns
+  const formDataRef = useRef(formData);
+  formDataRef.current = formData;
+
+  const handleFieldChange = useCallback(
+    (id: string, value: unknown) => {
+      onFormDataChange({ ...formDataRef.current, [id]: value });
+      setErrors(prev => {
+        if (!prev[id]) return prev;
+        const next = { ...prev };
+        delete next[id];
+        return next;
+      });
+    },
+    [onFormDataChange],
+  );
+
+  const handleFormSubmit = useCallback(
+    (data: Record<string, unknown>) => {
+      onFormDataChange(data);
+    },
+    [onFormDataChange],
+  );
+
+  const handleValidationChange = useCallback((_isValid: boolean) => {
+    // Validation is handled internally via errors state
+  }, []);
+
+  const handleDiscountApply = useCallback(
+    async (code: string): Promise<DiscountResult> => {
+      if (!validateDiscount) {
+        return { valid: false, error: "Discount validation not available" };
+      }
+      const result = await validateDiscount(code);
+      if (result.valid) {
+        onDiscountApplied(result);
+      }
+      return result;
+    },
+    [validateDiscount, onDiscountApplied],
+  );
+
+  // Separate address fields from regular fields
+  const { regularFields, addressFields } = useMemo(() => {
+    if (!formSchema) return { regularFields: [], addressFields: [] };
+    return {
+      regularFields: formSchema.fields.filter(f => f.type !== "address"),
+      addressFields: formSchema.fields.filter(f => f.type === "address"),
+    };
+  }, [formSchema]);
+
+  if (!hasAnyContent) return null;
+
+  // Shared shipping + discount section
+  const shippingAndDiscount = (
+    <>
+      {hasShipping && shippingOptions && (
+        <ShippingSelector
+          options={shippingOptions}
+          selectedId={selectedShipping?.id || null}
+          onSelect={onShippingChange}
+          tokenSymbol={tokenSymbol}
+          tokenDecimals={tokenDecimals}
+        />
+      )}
+      {enableDiscountCode && validateDiscount && (
+        <DiscountCodeInput
+          onApply={handleDiscountApply}
+          appliedDiscount={appliedDiscount}
+          onRemove={onDiscountRemoved}
+          tokenSymbol={tokenSymbol}
+          tokenDecimals={tokenDecimals}
+        />
+      )}
+    </>
+  );
+
+  // Render custom form slot if provided
+  if (checkoutFormSlot) {
+    return (
+      <div className={cn("anyspend-form-panel space-y-4", classes?.formPanel)}>
+        <div className="anyspend-form-slot">
+          {checkoutFormSlot({
+            onSubmit: handleFormSubmit,
+            onValidationChange: handleValidationChange,
+            formData,
+            setFormData: onFormDataChange,
+          })}
+        </div>
+        {shippingAndDiscount}
+      </div>
+    );
+  }
+
+  // Render custom form component if provided
+  if (FormComponent) {
+    return (
+      <div className={cn("anyspend-form-panel space-y-4", classes?.formPanel)}>
+        <div className="anyspend-form-component">
+          <FormComponent
+            onSubmit={handleFormSubmit}
+            onValidationChange={handleValidationChange}
+            formData={formData}
+            setFormData={onFormDataChange}
+          />
+        </div>
+        {shippingAndDiscount}
+      </div>
+    );
+  }
+
+  // Schema-based form rendering
+  return (
+    <div className={cn("anyspend-form-panel space-y-4", classes?.formPanel)}>
+      {/* Regular form fields */}
+      {regularFields.length > 0 && (
+        <div className="anyspend-form-fields space-y-3">
+          {regularFields.map(field => (
+            <CheckoutFormFieldComponent
+              key={field.id}
+              field={field}
+              value={formData[field.id]}
+              onChange={handleFieldChange}
+              error={errors[field.id]}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Address fields from schema */}
+      {addressFields.map(field => (
+        <div key={field.id} className="anyspend-form-address space-y-2">
+          <h3 className="anyspend-form-address-title text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {field.label}
+          </h3>
+          <AddressForm
+            value={(formData[field.id] as AddressData) || emptyAddress}
+            onChange={addr => handleFieldChange(field.id, addr)}
+            required={field.required}
+          />
+        </div>
+      ))}
+
+      {/* Shipping address (from collectShippingAddress prop, not schema) */}
+      {collectShippingAddress && addressFields.length === 0 && (
+        <div className="anyspend-shipping-address space-y-2">
+          <h3 className="anyspend-shipping-address-title text-sm font-semibold text-gray-900 dark:text-gray-100">
+            Shipping Address
+          </h3>
+          <AddressForm value={shippingAddress} onChange={onShippingAddressChange} required />
+        </div>
+      )}
+
+      {/* Shipping options + Discount code */}
+      {shippingAndDiscount}
+    </div>
+  );
+}

package/src/anyspend/react/components/checkout/CheckoutLayout.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { ReactNode } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CheckoutLayoutProps {
+  mode: "page" | "embedded";
+  paymentPanel: ReactNode;
+  cartPanel: ReactNode;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutLayout({ mode, paymentPanel, cartPanel, classes }: CheckoutLayoutProps) {
+  const rightColumnWidth = mode === "page" ? 380 : 340;
+
+  return (
+    <div
+      className={cn("anyspend-checkout mx-auto w-full", classes?.root)}
+      style={
+        {
+          ...(mode === "page" ? { maxWidth: 1100, padding: "2rem 1rem" } : undefined),
+          "--anyspend-cart-width": `${rightColumnWidth}px`,
+        } as React.CSSProperties
+      }
+    >
+      <div className={cn("anyspend-checkout-grid", classes?.layout)}>
+        {/* LEFT: Payment Methods (appears second on mobile, first on desktop) */}
+        <div
+          className={cn(
+            "anyspend-payment-col order-2",
+            "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900",
+            classes?.paymentColumn,
+          )}
+        >
+          {paymentPanel}
+        </div>
+
+        {/* RIGHT: Cart / Invoice (appears first on mobile, second on desktop) */}
+        <div
+          className={cn(
+            "anyspend-cart-col order-1",
+            "rounded-2xl border border-gray-200 bg-gray-50 p-6 dark:border-neutral-700 dark:bg-neutral-800/50",
+            classes?.cartColumn,
+          )}
+        >
+          {cartPanel}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/anyspend/react/components/checkout/CheckoutOrderStatus.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { getErrorDisplay, getExplorerTxUrl, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { useAnyspendOrderAndTransactions } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendOrderAndTransactions";
+import { useOnOrderSuccess } from "@b3dotfun/sdk/anyspend/react/hooks/useOnOrderSuccess";
+import { TextShimmer } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatNumber } from "@b3dotfun/sdk/shared/utils/formatNumber";
+import { ExternalLink, Loader2, RefreshCcw } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useRef } from "react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
+import { OrderStatus } from "../common/OrderStatus";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CheckoutOrderStatusProps {
+  /** The order ID to track */
+  orderId: string;
+  /** Theme color (hex) */
+  themeColor?: string;
+  /** Return URL for the terminal success state */
+  returnUrl?: string;
+  /** Label for the return button */
+  returnLabel?: string;
+  /** Called when the order reaches "executed" */
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  /** Called when the order reaches a failure/expired/refunded terminal state */
+  onError?: (error: Error) => void;
+  /** Called when the user clicks "Try again" on failure */
+  onRetry?: () => void;
+  /** Show the points row in the order status summary. Defaults to false. */
+  showPoints?: boolean;
+  /** Show the order ID row in the order status summary. Defaults to false. */
+  showOrderId?: boolean;
+  /** Custom class names */
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutOrderStatus({
+  orderId,
+  themeColor,
+  returnUrl,
+  returnLabel,
+  onSuccess,
+  onError,
+  onRetry,
+  showPoints = false,
+  showOrderId = false,
+  classes,
+}: CheckoutOrderStatusProps) {
+  // Stable refs for callback props to avoid re-triggering effects
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  const { orderAndTransactions, isLoadingOrderAndTransactions } = useAnyspendOrderAndTransactions(orderId);
+  const order = orderAndTransactions?.data?.order;
+  const executeTx = orderAndTransactions?.data?.executeTx;
+  const points = orderAndTransactions?.data?.points;
+
+  const { content } = useAnySpendCustomization();
+
+  // Fire onSuccess when order reaches "executed"
+  useOnOrderSuccess({
+    orderData: orderAndTransactions,
+    orderId,
+    onSuccess: (txHash?: string) => onSuccess?.({ orderId, txHash }),
+  });
+
+  // Fire onError once for terminal failure states
+  const onErrorCalled = useRef(false);
+  useEffect(() => {
+    if (!order || onErrorCalled.current) return;
+    if (order.status === "failure" || order.status === "expired" || order.status === "refunded") {
+      const { description } = getStatusDisplay(order);
+      onErrorRef.current?.(new Error(description || `Order ${order.status}`));
+      onErrorCalled.current = true;
+    }
+  }, [order]);
+
+  // Reset error flag if orderId changes
+  const prevOrderId = useRef(orderId);
+  useEffect(() => {
+    if (prevOrderId.current !== orderId) {
+      onErrorCalled.current = false;
+      prevOrderId.current = orderId;
+    }
+  }, [orderId]);
+
+  // Clear persisted orderId when order reaches a terminal state
+  const orderStatus = order?.status;
+  useEffect(() => {
+    if (orderStatus && ["executed", "failure", "expired", "refunded"].includes(orderStatus)) {
+      sessionStorage.removeItem("anyspend_checkout_orderId");
+    }
+  }, [orderStatus]);
+
+  // Loading state
+  if (isLoadingOrderAndTransactions || !order) {
+    return (
+      <div className={cn("flex flex-col items-center gap-3 py-12", classes?.orderStatusPanel)}>
+        <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+        <TextShimmer duration={1.5} className="text-sm">
+          Loading order status...
+        </TextShimmer>
+      </div>
+    );
+  }
+
+  const isExecuted = order.status === "executed";
+  const isRefunding = order.status === "refunding";
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+      className={cn("anyspend-checkout-order-status flex flex-col items-center gap-5 py-6", classes?.orderStatusPanel)}
+    >
+      {/* Step progress / terminal state icon */}
+      <OrderStatus order={order} />
+
+      {/* Checkout-relevant order summary: points + order ID (opt-in) */}
+      {(showPoints || showOrderId) && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, delay: 0.15 }}
+          className="bg-as-surface-secondary border-as-border-secondary w-full rounded-xl border px-4 py-3"
+        >
+          <div className="flex flex-col gap-2 text-sm">
+            {showPoints && points != null && points > 0 && (
+              <>
+                <div className="flex w-full justify-between">
+                  <span className="text-as-tertiary">Points</span>
+                  <span className="text-as-brand font-semibold">+{formatNumber(points)} pts</span>
+                </div>
+                {showOrderId && <div className="divider w-full" />}
+              </>
+            )}
+            {showOrderId && (
+              <div className="flex w-full items-center justify-between gap-3">
+                <span className="text-as-tertiary shrink-0">Order ID</span>
+                <span className="text-as-primary min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+                  {order.id}
+                </span>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+
+      {/* Transaction link for executed orders */}
+      {isExecuted && executeTx && (
+        <motion.a
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
+          href={getExplorerTxUrl(order.dstChain, executeTx.txHash)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(
+            "flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400",
+            classes?.transactionLink,
+          )}
+        >
+          View Transaction
+          <ExternalLink className="h-3.5 w-3.5" />
+        </motion.a>
+      )}
+
+      {/* Error details for failure */}
+      {order.status === "failure" && order.errorDetails && (
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.2, delay: 0.2 }}
+          className="max-w-[40ch] text-center text-sm text-red-500 dark:text-red-400"
+        >
+          {getErrorDisplay(order.errorDetails)}
+        </motion.p>
+      )}
+
+      {/* Retry button for failure/expired */}
+      {(order.status === "failure" || order.status === "expired") && onRetry && (
+        <motion.button
+          initial={{ opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, delay: 0.3 }}
+          onClick={onRetry}
+          className={cn(
+            "flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-medium transition-colors",
+            "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-neutral-800 dark:text-gray-300 dark:hover:bg-neutral-700",
+            classes?.retryButton,
+          )}
+        >
+          <RefreshCcw className="h-4 w-4" />
+          {content.retryButtonLabel || "Try Again"}
+        </motion.button>
+      )}
+
+      {/* Return button for success and refunded */}
+      {(isExecuted || order.status === "refunded") && returnUrl && (
+        <motion.a
+          initial={{ opacity: 0, y: 6 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, delay: 0.4 }}
+          href={returnUrl}
+          className={cn(
+            "inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors",
+            classes?.returnButton,
+          )}
+          style={{ backgroundColor: themeColor || "#111827", color: "#fff" }}
+        >
+          {content.returnButtonLabel || returnLabel || "Return to Store"}
+        </motion.a>
+      )}
+
+      {/* Refunding message (transient state — no action needed) */}
+      {isRefunding && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">Please wait while your funds are being returned.</p>
+      )}
+    </motion.div>
+  );
+}