@b3dotfun/sdk 0.1.66 → 0.1.68

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

@@ -0,0 +1,341 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { CreditCard, Wallet } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useEffect, useState } from "react";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+import { CheckoutOrderStatus } from "./CheckoutOrderStatus";
+import { CoinbaseCheckoutPanel } from "./CoinbaseCheckoutPanel";
+import { CryptoPayPanel } from "./CryptoPayPanel";
+import { FiatCheckoutPanel } from "./FiatCheckoutPanel";
+
+const SESSION_STORAGE_KEY = "anyspend_checkout_orderId";
+
+export type PaymentMethod = "crypto" | "card" | "coinbase";
+
+interface CheckoutPaymentPanelProps {
+  recipientAddress: string;
+  destinationTokenAddress: string;
+  destinationTokenChainId: number;
+  totalAmount: string;
+  buttonText?: string;
+  themeColor?: string;
+  returnUrl?: string;
+  returnLabel?: string;
+  onSuccess?: (result: { txHash?: string; orderId?: string }) => void;
+  onError?: (error: Error) => void;
+  callbackMetadata?: Record<string, unknown>;
+  classes?: AnySpendCheckoutClasses;
+  /** Which payment method to expand initially. Defaults to none (all collapsed). */
+  defaultPaymentMethod?: PaymentMethod;
+  /** Optional sender (payer) address — pre-fills token balances in the crypto panel */
+  senderAddress?: string;
+  /** 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;
+  /** Whether the checkout form is valid. When false, payment methods are disabled. */
+  isFormValid?: boolean;
+}
+
+function RadioCircle({ selected, themeColor }: { selected: boolean; themeColor?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+        selected ? "border-blue-600" : "border-gray-300 dark:border-neutral-600",
+      )}
+      style={selected && themeColor ? { borderColor: themeColor } : undefined}
+    >
+      {selected && (
+        <div
+          className="h-2 w-2 rounded-full bg-blue-600"
+          style={themeColor ? { backgroundColor: themeColor } : undefined}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Card brand logos - all use consistent 32x20 viewBox */
+function VisaLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Visa">
+      <rect width="32" height="20" rx="3" fill="#1A1F71" />
+      <text
+        x="16"
+        y="13.5"
+        textAnchor="middle"
+        fill="white"
+        fontSize="9"
+        fontWeight="bold"
+        fontFamily="sans-serif"
+        fontStyle="italic"
+      >
+        VISA
+      </text>
+    </svg>
+  );
+}
+
+function MastercardLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Mastercard">
+      <rect width="32" height="20" rx="3" fill="#252525" />
+      <circle cx="12.5" cy="10" r="6" fill="#EB001B" />
+      <circle cx="19.5" cy="10" r="6" fill="#F79E1B" />
+      <path d="M16 5.6a6 6 0 0 1 0 8.8 6 6 0 0 1 0-8.8z" fill="#FF5F00" />
+    </svg>
+  );
+}
+
+function AmexLogo() {
+  return (
+    <svg viewBox="0 0 32 20" style={{ width: 32, height: 20 }} aria-label="Amex">
+      <rect width="32" height="20" rx="3" fill="#006FCF" />
+      <text x="16" y="13" textAnchor="middle" fill="white" fontSize="7" fontWeight="bold" fontFamily="sans-serif">
+        AMEX
+      </text>
+    </svg>
+  );
+}
+
+/** Coinbase mark */
+function CoinbaseLogo() {
+  return (
+    <svg viewBox="0 0 24 24" style={{ width: 20, height: 20 }} aria-label="Coinbase">
+      <circle cx="12" cy="12" r="12" fill="#0052FF" />
+      <path
+        d="M12 4.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm-1.8 4.8h3.6c.33 0 .6.27.6.6v4.2c0 .33-.27.6-.6.6h-3.6a.6.6 0 0 1-.6-.6V9.9c0-.33.27-.6.6-.6z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function CheckoutPaymentPanel({
+  recipientAddress,
+  destinationTokenAddress,
+  destinationTokenChainId,
+  totalAmount,
+  buttonText,
+  themeColor,
+  returnUrl,
+  returnLabel,
+  onSuccess,
+  onError,
+  callbackMetadata,
+  classes,
+  defaultPaymentMethod,
+  senderAddress,
+  showPoints,
+  showOrderId,
+  isFormValid = true,
+}: CheckoutPaymentPanelProps) {
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | null>(defaultPaymentMethod ?? null);
+
+  // Restore activeOrderId from sessionStorage (handles page refresh / Coinbase return)
+  const [activeOrderId, setActiveOrderId] = useState<string | null>(() => {
+    if (typeof window !== "undefined") {
+      return sessionStorage.getItem(SESSION_STORAGE_KEY) || null;
+    }
+    return null;
+  });
+
+  // Persist activeOrderId to sessionStorage
+  useEffect(() => {
+    if (activeOrderId) {
+      sessionStorage.setItem(SESSION_STORAGE_KEY, activeOrderId);
+    } else {
+      sessionStorage.removeItem(SESSION_STORAGE_KEY);
+    }
+  }, [activeOrderId]);
+
+  const handleOrderCreated = useCallback((orderId: string) => {
+    setActiveOrderId(orderId);
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setActiveOrderId(null);
+  }, []);
+
+  if (activeOrderId) {
+    return (
+      <CheckoutOrderStatus
+        orderId={activeOrderId}
+        themeColor={themeColor}
+        returnUrl={returnUrl}
+        returnLabel={returnLabel}
+        onSuccess={onSuccess}
+        onError={onError}
+        onRetry={handleRetry}
+        showPoints={showPoints}
+        showOrderId={showOrderId}
+        classes={classes}
+      />
+    );
+  }
+
+  const accordionButtonClass = (active: boolean) =>
+    cn(
+      "anyspend-payment-method-btn flex w-full items-center gap-3 px-4 py-4 text-left transition-colors",
+      active
+        ? "bg-white dark:bg-neutral-900"
+        : "bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+      classes?.paymentMethodButton,
+    );
+
+  const expandedPanelClass = cn(
+    "anyspend-payment-method-panel border-t border-gray-100 bg-white px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900",
+  );
+
+  return (
+    <div className={cn("anyspend-payment-panel flex flex-col gap-5", classes?.paymentPanel)}>
+      <h2
+        className={cn(
+          "anyspend-payment-title text-lg font-semibold text-gray-900 dark:text-gray-100",
+          classes?.paymentTitle,
+        )}
+      >
+        Payment
+      </h2>
+
+      {!isFormValid && (
+        <p className="text-sm text-amber-600 dark:text-amber-400">
+          Please complete the required fields above before proceeding to payment.
+        </p>
+      )}
+
+      {/* Accordion-style payment methods */}
+      <div
+        className={cn(
+          "anyspend-payment-methods divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 dark:divide-neutral-700 dark:border-neutral-700",
+          !isFormValid && "pointer-events-none opacity-50",
+          classes?.paymentMethodSelector,
+        )}
+      >
+        {/* Pay with crypto */}
+        <div className="anyspend-method-crypto">
+          <button
+            onClick={() => setPaymentMethod(paymentMethod === "crypto" ? null : "crypto")}
+            className={accordionButtonClass(paymentMethod === "crypto")}
+          >
+            <RadioCircle selected={paymentMethod === "crypto"} themeColor={themeColor} />
+            <Wallet className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Pay with crypto</span>
+          </button>
+          <AnimatePresence initial={false}>
+            {paymentMethod === "crypto" && (
+              <motion.div
+                key="crypto-panel"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                style={{ overflow: "hidden" }}
+              >
+                <div className={expandedPanelClass}>
+                  <CryptoPayPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    buttonText={buttonText}
+                    themeColor={themeColor}
+                    onOrderCreated={handleOrderCreated}
+                    onError={onError}
+                    callbackMetadata={callbackMetadata}
+                    classes={classes}
+                    senderAddress={senderAddress}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Credit or Debit Card */}
+        <div className="anyspend-method-card">
+          <button
+            onClick={() => setPaymentMethod(paymentMethod === "card" ? null : "card")}
+            className={accordionButtonClass(paymentMethod === "card")}
+          >
+            <RadioCircle selected={paymentMethod === "card"} themeColor={themeColor} />
+            <CreditCard className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Credit or debit card</span>
+            <div className="ml-auto flex items-center gap-1">
+              <VisaLogo />
+              <MastercardLogo />
+              <AmexLogo />
+            </div>
+          </button>
+          <AnimatePresence initial={false}>
+            {paymentMethod === "card" && (
+              <motion.div
+                key="card-panel"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                style={{ overflow: "hidden" }}
+              >
+                <div className={expandedPanelClass}>
+                  <FiatCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    themeColor={themeColor}
+                    onOrderCreated={handleOrderCreated}
+                    onError={onError}
+                    callbackMetadata={callbackMetadata}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {/* Coinbase Pay */}
+        <div className="anyspend-method-coinbase">
+          <button
+            onClick={() => setPaymentMethod(paymentMethod === "coinbase" ? null : "coinbase")}
+            className={accordionButtonClass(paymentMethod === "coinbase")}
+          >
+            <RadioCircle selected={paymentMethod === "coinbase"} themeColor={themeColor} />
+            <CoinbaseLogo />
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Coinbase Pay</span>
+          </button>
+          <AnimatePresence initial={false}>
+            {paymentMethod === "coinbase" && (
+              <motion.div
+                key="coinbase-panel"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                style={{ overflow: "hidden" }}
+              >
+                <div className={expandedPanelClass}>
+                  <CoinbaseCheckoutPanel
+                    recipientAddress={recipientAddress}
+                    destinationTokenAddress={destinationTokenAddress}
+                    destinationTokenChainId={destinationTokenChainId}
+                    totalAmount={totalAmount}
+                    themeColor={themeColor}
+                    onOrderCreated={handleOrderCreated}
+                    onError={onError}
+                    callbackMetadata={callbackMetadata}
+                    classes={classes}
+                  />
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ExternalLink } from "lucide-react";
+import { motion } from "motion/react";
+import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
+import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
+import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
+
+interface CheckoutSuccessProps {
+  txHash?: string;
+  orderId?: string;
+  returnUrl?: string;
+  returnLabel?: string;
+  classes?: AnySpendCheckoutClasses;
+}
+
+export function CheckoutSuccess({ txHash, orderId, returnUrl, returnLabel, classes }: CheckoutSuccessProps) {
+  const { content, slots } = useAnySpendCustomization();
+
+  if (slots.successScreen) {
+    return (
+      <>
+        {slots.successScreen({
+          title: typeof content.successTitle === "string" ? content.successTitle : "Payment Successful",
+          description:
+            typeof content.successDescription === "string"
+              ? content.successDescription
+              : "Your payment has been processed successfully.",
+          txHash,
+          orderId,
+          explorerUrl: txHash ? `https://explorer.b3.fun/tx/${txHash}` : undefined,
+          onDone: () => {
+            if (returnUrl) window.location.href = returnUrl;
+          },
+          returnUrl,
+          returnLabel: content.returnButtonLabel || returnLabel,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <div className={cn("anyspend-checkout-success flex flex-col items-center py-8 text-center", classes?.successPanel)}>
+      <div className="anyspend-success-icon mb-4">
+        <AnimatedCheckmark className="h-16 w-16" />
+      </div>
+
+      <motion.h2
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 1.0, ease: "easeOut" }}
+        className="anyspend-success-title text-xl font-semibold text-gray-900 dark:text-gray-100"
+      >
+        {content.successTitle || "Payment Successful"}
+      </motion.h2>
+
+      <motion.p
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 1.15, ease: "easeOut" }}
+        className="anyspend-success-description mt-2 text-sm text-gray-500 dark:text-gray-400"
+      >
+        {content.successDescription || "Your payment has been processed successfully."}
+      </motion.p>
+
+      {txHash && (
+        <motion.a
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
+          href={`https://explorer.b3.fun/tx/${txHash}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="anyspend-success-tx-link mt-4 flex items-center gap-1.5 text-sm text-blue-600 hover:underline dark:text-blue-400"
+        >
+          View Transaction
+          <ExternalLink className="h-3.5 w-3.5" />
+        </motion.a>
+      )}
+
+      {!txHash && orderId && (
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.3, delay: 0.5, ease: "easeOut" }}
+          className="anyspend-success-order-id mt-4 text-xs text-gray-400 dark:text-gray-500"
+        >
+          Order ID: {orderId}
+        </motion.p>
+      )}
+
+      {returnUrl && (
+        <motion.a
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, delay: 0.6, ease: "easeOut" }}
+          href={returnUrl}
+          className={cn(
+            "anyspend-success-return-btn mt-6 inline-flex rounded-xl px-6 py-3 text-sm font-medium transition-colors",
+            classes?.returnButton,
+          )}
+          style={{ backgroundColor: "#111827", color: "#fff" }}
+        >
+          {content.returnButtonLabel || returnLabel || "Return to Store"}
+        </motion.a>
+      )}
+    </div>
+  );
+}