@djangocfg/ext-payments 1.0.14 → 1.0.19

package/src/components/CurrencyCombobox.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+/**
+ * Currency Combobox with TokenIcon
+ */
+
+import { Combobox, TokenIcon } from '@djangocfg/ui-core';
+import type { CurrencyOption } from '../types';
+
+interface CurrencyComboboxProps {
+  options: CurrencyOption[];
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  label?: string;
+}
+
+export function CurrencyCombobox({
+  options,
+  value,
+  onChange,
+  disabled,
+  placeholder = 'Select currency...',
+}: CurrencyComboboxProps) {
+  return (
+    <Combobox
+      options={options}
+      value={value}
+      onValueChange={onChange}
+      placeholder={placeholder}
+      searchPlaceholder="Search..."
+      disabled={disabled}
+      className="h-14"
+      renderOption={(option) => (
+        <div className="flex items-center gap-3 flex-1">
+          <TokenIcon symbol={option.value} size={24} />
+          <span className="font-medium">{option.label}</span>
+        </div>
+      )}
+      renderValue={(option) => option && (
+        <div className="flex items-center gap-3">
+          <TokenIcon symbol={option.value} size={24} />
+          <span className="font-medium">{option.label}</span>
+        </div>
+      )}
+    />
+  );
+}

package/src/components/PaymentSheet.tsx

@@ -0,0 +1,352 @@
+/**
+ * Payment Sheet (Apple-style)
+ *
+ * Responsive: Dialog on desktop, Drawer on mobile
+ * Shows payment details with QR code and address
+ */
+
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Clock,
+  ExternalLink,
+  RefreshCw,
+  XCircle,
+} from 'lucide-react';
+import moment from 'moment';
+import useSWR from 'swr';
+
+import {
+  Button,
+  CopyButton,
+  Skeleton,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+} from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useWallet } from '../contexts/WalletContext';
+import type { PaymentDetail } from '../api/generated/ext_payments/_utils/schemas';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface PaymentSheetProps {
+  paymentId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreateNew?: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Status Config
+// ─────────────────────────────────────────────────────────────────────────────
+
+const statusConfig: Record<string, { icon: any; color: string; bg: string; label: string; animate?: boolean }> = {
+  pending: {
+    icon: Clock,
+    color: 'text-yellow-500',
+    bg: 'bg-yellow-500/10',
+    label: 'Waiting for payment',
+  },
+  confirming: {
+    icon: RefreshCw,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    label: 'Confirming',
+    animate: true,
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bg: 'bg-green-500/10',
+    label: 'Completed',
+  },
+  failed: {
+    icon: XCircle,
+    color: 'text-red-500',
+    bg: 'bg-red-500/10',
+    label: 'Failed',
+  },
+  expired: {
+    icon: AlertCircle,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted',
+    label: 'Expired',
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: PaymentSheetProps) {
+  const { getPaymentDetails } = useWallet();
+  const [timeLeft, setTimeLeft] = useState<string>('');
+
+  // Fetch payment details when sheet is open
+  const { data: payment, isLoading, error, mutate } = useSWR<PaymentDetail>(
+    open && paymentId ? ['payment-details', paymentId] : null,
+    () => getPaymentDetails(paymentId!),
+    { refreshInterval: 10000 }
+  );
+
+  // Calculate time left
+  useEffect(() => {
+    if (!payment?.expires_at) return;
+
+    const updateTimeLeft = () => {
+      const now = moment();
+      const expires = moment.utc(payment.expires_at!);
+      const diff = expires.diff(now);
+
+      if (diff <= 0) {
+        setTimeLeft('Expired');
+        return;
+      }
+
+      const duration = moment.duration(diff);
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+
+      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
+    };
+
+    updateTimeLeft();
+    const interval = setInterval(updateTimeLeft, 1000);
+    return () => clearInterval(interval);
+  }, [payment?.expires_at]);
+
+  // Prepare all display data before render
+  const displayData = useMemo(() => {
+    // Map status
+    const s = payment?.status?.toLowerCase();
+    let status: string;
+    if (s === 'completed' || s === 'success' || s === 'finished') status = 'completed';
+    else if (s === 'confirming' || s === 'partially_paid') status = 'confirming';
+    else if (s === 'expired') status = 'expired';
+    else if (s === 'failed' || s === 'error' || s === 'cancelled') status = 'failed';
+    else status = 'pending';
+
+    const config = statusConfig[status];
+    const isPending = status === 'pending';
+    const isExpired = status === 'expired' || timeLeft === 'Expired';
+    const isCompleted = status === 'completed';
+    const isFailed = status === 'failed';
+    const isConfirming = status === 'confirming';
+    const canPay = isPending && !isExpired;
+
+    // Description text
+    let description = '';
+    if (canPay) description = 'Send cryptocurrency to complete payment';
+    else if (isExpired) description = 'This payment has expired';
+    else if (isCompleted) description = 'Payment completed successfully';
+    else if (isFailed) description = 'Payment failed';
+    else if (isConfirming) description = 'Confirming your payment';
+
+    // Status badge
+    const statusBadge = {
+      bg: isExpired ? 'bg-muted' : config.bg,
+      iconColor: isExpired ? 'text-muted-foreground' : config.color,
+      iconAnimate: config.animate,
+      label: isExpired ? 'Payment Expired' : config.label,
+      subtitle: canPay && timeLeft
+        ? `Expires in ${timeLeft}`
+        : isExpired
+          ? 'Please create a new payment to continue'
+          : null,
+    };
+
+    // QR code URL
+    const qrCodeUrl = payment?.pay_address && canPay
+      ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
+      : null;
+
+    // Formatted values
+    const amountUsd = payment?.amount_usd ? `$${parseFloat(payment.amount_usd).toFixed(2)} USD` : '';
+    const createdAt = payment?.created_at
+      ? moment.utc(payment.created_at).local().format('MMM D, YYYY HH:mm')
+      : '';
+
+    return {
+      status,
+      config,
+      isPending,
+      isExpired,
+      isCompleted,
+      isFailed,
+      isConfirming,
+      canPay,
+      description,
+      statusBadge,
+      qrCodeUrl,
+      amountUsd,
+      createdAt,
+    };
+  }, [payment, timeLeft]);
+
+  const { config, canPay, isExpired, description, statusBadge, qrCodeUrl, amountUsd, createdAt } = displayData;
+  const StatusIcon = config.icon;
+
+  return (
+    <ResponsiveSheet open={open} onOpenChange={onOpenChange}>
+      <ResponsiveSheetContent className="sm:max-w-lg">
+        <ResponsiveSheetHeader>
+          <ResponsiveSheetTitle>Payment Details</ResponsiveSheetTitle>
+          <ResponsiveSheetDescription>{description}</ResponsiveSheetDescription>
+        </ResponsiveSheetHeader>
+
+        <div className="p-4 sm:p-0 sm:mt-4 overflow-y-auto max-h-[70vh]">
+          {isLoading && (
+            <div className="space-y-6">
+              <div className="flex items-center justify-center">
+                <Skeleton className="h-48 w-48 rounded-xl" />
+              </div>
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+          )}
+
+          {error && (
+            <div className="flex flex-col items-center justify-center py-12">
+              <XCircle className="h-12 w-12 text-destructive mb-4" />
+              <p className="text-sm text-muted-foreground mb-4">Failed to load payment</p>
+              <Button onClick={() => mutate()}>Try Again</Button>
+            </div>
+          )}
+
+          {payment && !isLoading && (
+            <div className="space-y-6">
+              {/* Status Badge */}
+              <div className={cn('flex items-center gap-3 p-4 rounded-xl', statusBadge.bg)}>
+                <StatusIcon className={cn('h-6 w-6', statusBadge.iconColor, statusBadge.iconAnimate && 'animate-spin')} />
+                <div className="flex-1">
+                  <div className="font-semibold">{statusBadge.label}</div>
+                  {statusBadge.subtitle && (
+                    <div className="text-sm text-muted-foreground">{statusBadge.subtitle}</div>
+                  )}
+                </div>
+              </div>
+
+              {/* Amount */}
+              <div className="bg-muted rounded-xl p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Amount to send</span>
+                  <div className="flex items-center gap-2">
+                    <TokenIcon symbol={payment.currency_code} size={24} />
+                    <span className="font-mono font-bold text-lg">
+                      {payment.pay_amount} {payment.currency_code}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Equivalent</span>
+                  <span className="font-semibold">{amountUsd}</span>
+                </div>
+                {payment.currency_network && (
+                  <div className="flex items-center justify-between text-sm pt-2 border-t">
+                    <span className="text-muted-foreground">Network</span>
+                    <span className="font-medium">{payment.currency_network}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* QR Code */}
+              {qrCodeUrl && (
+                <div className="flex justify-center p-6 bg-white rounded-xl">
+                  <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
+                </div>
+              )}
+
+              {/* Payment Address */}
+              {payment.pay_address && canPay && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Payment Address</label>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all">
+                      {payment.pay_address}
+                    </div>
+                    <CopyButton value={payment.pay_address} variant="outline" className="shrink-0" />
+                  </div>
+                </div>
+              )}
+
+              {/* Expired - Create New Payment */}
+              {isExpired && onCreateNew && (
+                <Button
+                  size="lg"
+                  className="w-full"
+                  onClick={() => {
+                    onOpenChange(false);
+                    onCreateNew();
+                  }}
+                >
+                  Create New Payment
+                </Button>
+              )}
+
+              {/* Transaction Hash (if completed) */}
+              {payment.transaction_hash && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Transaction Hash</label>
+                  <div className="p-3 bg-muted rounded-xl font-mono text-sm break-all">
+                    {payment.transaction_hash}
+                  </div>
+                </div>
+              )}
+
+              {/* External Link */}
+              {payment.payment_url && canPay && (
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => window.open(payment.payment_url!, '_blank')}
+                >
+                  <ExternalLink className="h-4 w-4 mr-2" />
+                  Open in Payment Provider
+                </Button>
+              )}
+
+              {/* Metadata */}
+              <div className="space-y-2 text-xs text-muted-foreground pt-4 border-t">
+                <div className="flex justify-between">
+                  <span>Payment ID</span>
+                  <span className="font-mono">{payment.id}</span>
+                </div>
+                {payment.internal_payment_id && (
+                  <div className="flex justify-between">
+                    <span>Order #</span>
+                    <span className="font-mono">{payment.internal_payment_id}</span>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <span>Created</span>
+                  <span>{createdAt}</span>
+                </div>
+              </div>
+
+              {/* Refresh Button */}
+              <Button
+                variant="ghost"
+                className="w-full"
+                onClick={() => mutate()}
+              >
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh Status
+              </Button>
+            </div>
+          )}
+        </div>
+      </ResponsiveSheetContent>
+    </ResponsiveSheet>
+  );
+}