@djangocfg/ext-payments 1.0.14 → 1.0.19

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -1,90 +0,0 @@
-// @ts-nocheck
-/**
- * Payments Layout (v2.0 - Simplified)
- *
- * Simplified layout with 3 tabs: Overview, Payments, Transactions
- * Removed: API Keys, Tariffs (deprecated in v2.0)
- */
-
-'use client';
-
-import { CreditCard, History, Wallet } from 'lucide-react';
-import React from 'react';
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui-core';
-
-import { OverviewProvider, PaymentsProvider, RootPaymentsProvider } from '../../contexts';
-import { CreatePaymentDialog, PaymentDetailsDialog } from './components';
-import { OverviewView } from './views/overview';
-import { PaymentsView } from './views/payments';
-import { TransactionsView } from './views/transactions';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Payments Layout
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface PaymentsLayoutProps {
-  children?: React.ReactNode;
-}
-
-export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
-  return (
-    <RootPaymentsProvider>
-      <div className="h-full p-6 space-y-6">
-        {/* Page Header */}
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Payments</h1>
-          <p className="text-muted-foreground">
-            Manage your payments, balance, and transaction history
-          </p>
-        </div>
-
-        {/* Main Content with Tabs */}
-        <Tabs defaultValue="overview" className="space-y-6">
-          <TabsList className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
-            <TabsTrigger value="overview" className="inline-flex items-center gap-2 px-3 py-1.5">
-              <Wallet className="h-4 w-4" />
-              <span className="hidden sm:inline">Overview</span>
-            </TabsTrigger>
-            <TabsTrigger value="payments" className="inline-flex items-center gap-2 px-3 py-1.5">
-              <CreditCard className="h-4 w-4" />
-              <span className="hidden sm:inline">Payments</span>
-            </TabsTrigger>
-            <TabsTrigger value="transactions" className="inline-flex items-center gap-2 px-3 py-1.5">
-              <History className="h-4 w-4" />
-              <span className="hidden sm:inline">Transactions</span>
-            </TabsTrigger>
-          </TabsList>
-
-          {/* Overview Tab - Balance + Recent Payments */}
-          <TabsContent value="overview" className="space-y-6">
-            <OverviewProvider>
-              <PaymentsProvider>
-                <OverviewView />
-                <CreatePaymentDialog />
-              </PaymentsProvider>
-            </OverviewProvider>
-          </TabsContent>
-
-          {/* Payments Tab - Full Payment List */}
-          <TabsContent value="payments" className="space-y-6">
-            <PaymentsProvider>
-              <PaymentsView />
-              <CreatePaymentDialog />
-            </PaymentsProvider>
-          </TabsContent>
-
-          {/* Transactions Tab - Transaction History */}
-          <TabsContent value="transactions" className="space-y-6">
-            <OverviewProvider>
-              <TransactionsView />
-            </OverviewProvider>
-          </TabsContent>
-        </Tabs>
-
-        {/* Global Payment Details Dialog */}
-        <PaymentDetailsDialog />
-      </div>
-    </RootPaymentsProvider>
-  );
-};

package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx

@@ -1,274 +0,0 @@
-// @ts-nocheck
-/**
- * Create Payment Dialog (v2.0 - Simplified)
- * Dialog for creating new payments
- */
-
-'use client';
-
-import { Plus, RefreshCw } from 'lucide-react';
-import React, { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import {
-    Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Form,
-    FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Select,
-    SelectContent, SelectItem, SelectTrigger, SelectValue, TokenIcon
-} from '@djangocfg/ui-core';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import { usePaymentsContext, useRootPaymentsContext } from '../../../contexts';
-import { paymentsLogger } from '../../../utils/logger';
-import { closePaymentsDialog, openPaymentDetailsDialog, PAYMENT_EVENTS } from '../events';
-
-// Payment creation schema
-const PaymentCreateSchema = z.object({
-  amount_usd: z.number().min(0.01, 'Amount must be at least $0.01'),
-  currency_code: z.string().min(1, 'Please select a currency'),
-});
-
-type PaymentCreateRequest = z.infer<typeof PaymentCreateSchema>;
-
-export const CreatePaymentDialog: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const { createPayment } = usePaymentsContext();
-  const { currencies, isLoadingCurrencies } = useRootPaymentsContext();
-
-  const form = useForm<PaymentCreateRequest>({
-    resolver: zodResolver(PaymentCreateSchema),
-    defaultValues: {
-      amount_usd: 10,
-      currency_code: 'USDT',
-    },
-  });
-
-  // Extract currencies list from response (handle different possible structures)
-  const currenciesList = useMemo(() => {
-    const data = currencies?.currencies || currencies?.results || currencies || [];
-    return Array.isArray(data) ? data : [];
-  }, [currencies]);
-
-  // Get currency options for select
-  const currencyOptions = useMemo(() => {
-    return currenciesList
-      .filter((curr: any) => curr.is_enabled !== false)
-      .map((curr: any) => ({
-        code: curr.code || curr.currency_code || curr.symbol,
-        name: curr.name || curr.code || curr.currency_code,
-        usd_rate: curr.usd_rate || curr.rate || 1,
-        network: curr.network || null,
-      }));
-  }, [currenciesList]);
-
-  // Calculate crypto amount from USD
-  const calculateCryptoAmount = useMemo(() => {
-    const amountUsd = form.watch('amount_usd');
-    const currencyCode = form.watch('currency_code');
-    const currency = currencyOptions.find((c: any) => c.code === currencyCode);
-
-    if (!currency || !currency.usd_rate || !amountUsd) {
-      return null;
-    }
-
-    const cryptoAmount = amountUsd / currency.usd_rate;
-    return {
-      amount: cryptoAmount,
-      currency: currency.code,
-      rate: currency.usd_rate,
-      network: currency.network,
-    };
-  }, [form.watch('amount_usd'), form.watch('currency_code'), currencyOptions]);
-
-  // Listen for open/close events
-  useEffect(() => {
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-
-    window.addEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
-    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
-
-    return () => {
-      window.removeEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
-      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
-    };
-  }, []);
-
-  const handleClose = () => {
-    setOpen(false);
-    form.reset();
-  };
-
-  // Initialize default currency if not set
-  useEffect(() => {
-    if (currencyOptions.length > 0 && !form.getValues('currency_code')) {
-      form.setValue('currency_code', currencyOptions[0].code);
-    }
-  }, [currencyOptions, form]);
-
-  const handleSubmit = async (data: PaymentCreateRequest) => {
-    try {
-      setIsSubmitting(true);
-
-      const result = await createPayment();
-      handleClose();
-      closePaymentsDialog();
-
-      // Extract payment ID from result
-      const paymentData = result as any;
-      const paymentId = paymentData?.payment?.id || paymentData?.id;
-
-      if (paymentId) {
-        openPaymentDetailsDialog(String(paymentId));
-      }
-    } catch (error) {
-      paymentsLogger.error('Failed to create payment:', error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Create Payment</DialogTitle>
-          <DialogDescription>
-            Create a new payment to add funds to your account.
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-            <FormField
-              control={form.control}
-              name="amount_usd"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Amount (USD)</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="number"
-                      step="0.01"
-                      min="0.01"
-                      placeholder="10.00"
-                      {...field}
-                      onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    The amount you want to pay in USD.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="currency_code"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Currency</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    disabled={isLoadingCurrencies}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select currency..." />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {currencyOptions.map((curr: any) => (
-                        <SelectItem key={curr.code} value={curr.code}>
-                          <div className="flex items-center gap-2">
-                            <TokenIcon symbol={curr.code} size={16} />
-                            <span>{curr.code}</span>
-                            {curr.network && (
-                              <span className="text-xs text-muted-foreground">
-                                ({curr.network})
-                              </span>
-                            )}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    The cryptocurrency to use for payment.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Conversion Information */}
-            {calculateCryptoAmount && (
-              <div className="rounded-sm bg-muted p-4 space-y-3">
-                {/* Amount to Send in Crypto */}
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-muted-foreground">You will send</span>
-                  <div className="flex items-center gap-2">
-                    <TokenIcon symbol={calculateCryptoAmount.currency} size={16} />
-                    <span className="font-mono font-semibold">
-                      {calculateCryptoAmount.amount.toFixed(8)} {calculateCryptoAmount.currency}
-                    </span>
-                  </div>
-                </div>
-
-                {/* USD Amount Received */}
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-muted-foreground">You will receive</span>
-                  <span className="text-lg font-bold">
-                    ${form.watch('amount_usd')?.toFixed(2)} USD
-                  </span>
-                </div>
-
-                {/* Exchange Rate */}
-                <div className="flex items-center justify-between text-xs">
-                  <span className="text-muted-foreground">Rate</span>
-                  <span className="font-medium">
-                    1 {calculateCryptoAmount.currency} = ${calculateCryptoAmount.rate?.toFixed(2)}
-                  </span>
-                </div>
-
-                {/* Network Info */}
-                {calculateCryptoAmount.network && (
-                  <div className="border-t pt-3">
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-muted-foreground">Network</span>
-                      <span className="text-sm font-medium">{calculateCryptoAmount.network}</span>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting || currencyOptions.length === 0}>
-                {isSubmitting ? (
-                  <>
-                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    <Plus className="h-4 w-4 mr-2" />
-                    Create Payment
-                  </>
-                )}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/layouts/PaymentsLayout/components/PaymentDetailsDialog.tsx

@@ -1,287 +0,0 @@
-/**
- * Payment Details Dialog (v2.0 - Simplified)
- * Shows payment details with QR code, address, and status
- */
-
-'use client';
-
-import { AlertCircle, CheckCircle2, Clock, ExternalLink, RefreshCw, XCircle } from 'lucide-react';
-import moment from 'moment';
-import React, { useEffect, useState } from 'react';
-
-import {
-    Button, CopyButton, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
-    DialogTitle, TokenIcon
-} from '@djangocfg/ui-core';
-
-import { apiPayments } from '../../../api';
-import { usePaymentsPaymentsRetrieve } from '../../../api/generated/ext_payments/_utils/hooks';
-import { PAYMENT_EVENTS } from '../events';
-
-export const PaymentDetailsDialog: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [paymentId, setPaymentId] = useState<string | null>(null);
-  const [timeLeft, setTimeLeft] = useState<string>('');
-
-  // Load payment data by ID using hook
-  const shouldFetch = open && !!paymentId;
-  const { data: payment, isLoading, error, mutate } = usePaymentsPaymentsRetrieve(
-    shouldFetch ? paymentId : '',
-    apiPayments
-  );
-
-  // Listen for open/close events
-  useEffect(() => {
-    const handleOpen = (event: Event) => {
-      const customEvent = event as CustomEvent<{ id: string }>;
-      setPaymentId(customEvent.detail.id);
-      setOpen(true);
-    };
-
-    const handleClose = () => {
-      setOpen(false);
-      setPaymentId(null);
-    };
-
-    window.addEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
-    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
-
-    return () => {
-      window.removeEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
-      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
-    };
-  }, []);
-
-  const handleClose = () => {
-    setOpen(false);
-    setPaymentId(null);
-  };
-
-  // Calculate time left until expiration
-  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]);
-
-  // Get status icon and color
-  const getStatusInfo = () => {
-    switch (payment?.status?.toLowerCase()) {
-      case 'pending':
-        return { icon: Clock, color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
-      case 'completed':
-      case 'success':
-        return { icon: CheckCircle2, color: 'text-green-500', bg: 'bg-green-500/10' };
-      case 'failed':
-      case 'error':
-        return { icon: XCircle, color: 'text-red-500', bg: 'bg-red-500/10' };
-      case 'expired':
-        return { icon: AlertCircle, color: 'text-gray-500', bg: 'bg-gray-500/10' };
-      case 'confirming':
-        return { icon: RefreshCw, color: 'text-blue-500', bg: 'bg-blue-500/10' };
-      default:
-        return { icon: Clock, color: 'text-gray-500', bg: 'bg-gray-500/10' };
-    }
-  };
-
-  if (!open) return null;
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Payment Details</DialogTitle>
-            <DialogDescription>Loading payment information...</DialogDescription>
-          </DialogHeader>
-          <div className="flex items-center justify-center py-12">
-            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  // Error state
-  if (shouldFetch && !isLoading && (error || !payment)) {
-    return (
-      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Payment Details</DialogTitle>
-            <DialogDescription>Failed to load payment information</DialogDescription>
-          </DialogHeader>
-          <div className="flex flex-col items-center justify-center py-12 space-y-4">
-            <XCircle className="h-12 w-12 text-destructive" />
-            <p className="text-sm text-muted-foreground">
-              {error ? `Error: ${error}` : 'Payment not found'}
-            </p>
-            <Button onClick={() => mutate()}>Try Again</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  const statusInfo = getStatusInfo();
-  const StatusIcon = statusInfo.icon;
-
-  // Generate QR code URL
-  const qrCodeUrl = payment.pay_address
-    ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
-    : null;
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Payment Details</DialogTitle>
-          <DialogDescription>
-            Send cryptocurrency to complete your payment
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6">
-          {/* Status Badge */}
-          <div className={`flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`}>
-            <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
-            <div className="flex-1">
-              <div className="font-semibold capitalize">{payment.status}</div>
-              {payment.status === 'pending' && timeLeft && (
-                <div className="text-sm text-muted-foreground">
-                  Expires in {timeLeft}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {/* Amount Information */}
-          <div className="space-y-3">
-            <div className="flex items-center justify-between p-4 bg-muted rounded-sm">
-              <span className="text-sm text-muted-foreground">Amount to send</span>
-              <div className="flex items-center gap-2">
-                <TokenIcon symbol={String(payment.currency_code || 'BTC')} size={20} />
-                <span className="font-mono font-bold text-lg">
-                  {payment.pay_amount || '0.00000000'} {payment.currency_code}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between px-4">
-              <span className="text-sm text-muted-foreground">Equivalent to</span>
-              <span className="font-semibold text-lg">
-                ${parseFloat(payment.amount_usd || '0').toFixed(2)} USD
-              </span>
-            </div>
-
-            {payment.internal_payment_id && (
-              <div className="flex items-center justify-between px-4">
-                <span className="text-sm text-muted-foreground">Payment Order #</span>
-                <span className="font-mono font-medium">{payment.internal_payment_id}</span>
-              </div>
-            )}
-
-            {payment.currency_network && (
-              <div className="flex items-center justify-between px-4">
-                <span className="text-sm text-muted-foreground">Network</span>
-                <span className="font-medium">{payment.currency_network}</span>
-              </div>
-            )}
-          </div>
-
-          {/* QR Code */}
-          {qrCodeUrl && payment.status === 'pending' && (
-            <div className="flex justify-center p-6 bg-white rounded-sm">
-              <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
-            </div>
-          )}
-
-          {/* Payment Address */}
-          {payment.pay_address && payment.status === 'pending' && (
-            <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-sm font-mono text-sm break-all">
-                  {payment.pay_address}
-                </div>
-                <CopyButton value={payment.pay_address} variant="outline" />
-              </div>
-            </div>
-          )}
-
-          {/* Transaction Hash */}
-          {payment.transaction_hash && (
-            <div className="space-y-2">
-              <label className="text-sm font-medium">Transaction Hash</label>
-              <div className="p-3 bg-muted rounded-sm font-mono text-sm break-all">
-                {payment.transaction_hash}
-              </div>
-            </div>
-          )}
-
-          {/* Payment URL */}
-          {payment.payment_url && payment.status === 'pending' && (
-            <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>
-          )}
-
-          {/* Additional Info */}
-          <div className="pt-4 border-t space-y-2 text-xs text-muted-foreground">
-            <div className="flex justify-between">
-              <span>Payment ID</span>
-              <span className="font-mono">{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>
-            {payment.confirmations_count !== undefined && (
-              <div className="flex justify-between">
-                <span>Confirmations</span>
-                <span>{payment.confirmations_count}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={handleClose}>
-            Close
-          </Button>
-          <Button onClick={() => mutate()} variant="ghost" size="sm">
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Refresh
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/layouts/PaymentsLayout/components/index.ts

@@ -1,2 +0,0 @@
-export { CreatePaymentDialog } from './CreatePaymentDialog';
-export { PaymentDetailsDialog } from './PaymentDetailsDialog';