@djangocfg/ext-payments 1.0.13 → 1.0.17

package/src/components/PaymentSheet.tsx

@@ -0,0 +1,290 @@
+/**
+ * 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;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// 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 }: 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]);
+
+  // Map status
+  const status = useMemo(() => {
+    const s = payment?.status?.toLowerCase();
+    if (s === 'completed' || s === 'success' || s === 'finished') return 'completed';
+    if (s === 'confirming' || s === 'partially_paid') return 'confirming';
+    if (s === 'expired') return 'expired';
+    if (s === 'failed' || s === 'error' || s === 'cancelled') return 'failed';
+    return 'pending';
+  }, [payment?.status]);
+
+  const config = statusConfig[status];
+  const StatusIcon = config.icon;
+
+  // QR code URL
+  const qrCodeUrl = payment?.pay_address
+    ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
+    : null;
+
+  const isPending = status === 'pending';
+
+  return (
+    <ResponsiveSheet open={open} onOpenChange={onOpenChange}>
+      <ResponsiveSheetContent className="sm:max-w-lg">
+        <ResponsiveSheetHeader>
+          <ResponsiveSheetTitle>Payment Details</ResponsiveSheetTitle>
+          <ResponsiveSheetDescription>
+            {isPending ? 'Send cryptocurrency to complete payment' : 'Payment information'}
+          </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', config.bg)}>
+                <StatusIcon className={cn('h-6 w-6', config.color, config.animate && 'animate-spin')} />
+                <div className="flex-1">
+                  <div className="font-semibold">{config.label}</div>
+                  {isPending && timeLeft && (
+                    <div className="text-sm text-muted-foreground">
+                      Expires in {timeLeft}
+                    </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">${parseFloat(payment.amount_usd).toFixed(2)} USD</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 && isPending && (
+                <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 && isPending && (
+                <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>
+              )}
+
+              {/* 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 && isPending && (
+                <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>{moment.utc(payment.created_at).local().format('MMM D, YYYY HH:mm')}</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>
+  );
+}

package/src/components/ResponsiveSheet.tsx

@@ -0,0 +1,151 @@
+/**
+ * Responsive Sheet (Apple-style)
+ *
+ * Dialog on desktop, Drawer (pull-down) on mobile.
+ * Uses useIsMobile hook for responsive behavior.
+ */
+
+'use client';
+
+import * as React from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  useIsMobile,
+} from '@djangocfg/ui-core';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ResponsiveSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+interface ResponsiveSheetHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface ResponsiveSheetTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface ResponsiveSheetDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface ResponsiveSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface ResponsiveSheetFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ResponsiveSheetContext = React.createContext<{ isMobile: boolean }>({ isMobile: false });
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Components
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function ResponsiveSheet({ open, onOpenChange, children }: ResponsiveSheetProps) {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <ResponsiveSheetContext.Provider value={{ isMobile: true }}>
+        <Drawer open={open} onOpenChange={onOpenChange}>
+          {children}
+        </Drawer>
+      </ResponsiveSheetContext.Provider>
+    );
+  }
+
+  return (
+    <ResponsiveSheetContext.Provider value={{ isMobile: false }}>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        {children}
+      </Dialog>
+    </ResponsiveSheetContext.Provider>
+  );
+}
+
+export function ResponsiveSheetContent({ children, className }: ResponsiveSheetContentProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return (
+      <DrawerContent className={className}>
+        {children}
+      </DrawerContent>
+    );
+  }
+
+  return (
+    <DialogContent className={className}>
+      {children}
+    </DialogContent>
+  );
+}
+
+export function ResponsiveSheetHeader({ children, className }: ResponsiveSheetHeaderProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerHeader className={className}>{children}</DrawerHeader>;
+  }
+
+  return <DialogHeader className={className}>{children}</DialogHeader>;
+}
+
+export function ResponsiveSheetTitle({ children, className }: ResponsiveSheetTitleProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerTitle className={className}>{children}</DrawerTitle>;
+  }
+
+  return <DialogTitle className={className}>{children}</DialogTitle>;
+}
+
+export function ResponsiveSheetDescription({ children, className }: ResponsiveSheetDescriptionProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerDescription className={className}>{children}</DrawerDescription>;
+  }
+
+  return <DialogDescription className={className}>{children}</DialogDescription>;
+}
+
+export function ResponsiveSheetFooter({ children, className }: ResponsiveSheetFooterProps) {
+  const { isMobile } = React.useContext(ResponsiveSheetContext);
+
+  if (isMobile) {
+    return <DrawerFooter className={className}>{children}</DrawerFooter>;
+  }
+
+  return <DialogFooter className={className}>{children}</DialogFooter>;
+}