@djangocfg/layouts 2.1.10 → 2.1.15

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

@@ -1,291 +0,0 @@
-// @ts-nocheck
-/**
- * Create Payment Dialog (v2.0 - Simplified)
- * Dialog for creating new payments
- */
-
-'use client';
-
-import React, { useState, useEffect, useMemo } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Button,
-  TokenIcon,
-} from '@djangocfg/ui-nextjs';
-import { Plus, RefreshCw } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/layouts/contexts';
-import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
-import { openPaymentDetailsDialog } from '../events';
-import { paymentsLogger } from '../../../utils/logger';
-
-// 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,290 +0,0 @@
-/**
- * Payment Details Dialog (v2.0 - Simplified)
- * Shows payment details with QR code, address, and status
- */
-
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Button,
-  TokenIcon,
-  CopyButton,
-} from '@djangocfg/ui-nextjs';
-import { ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
-import { Hooks, api } from '@djangocfg/api';
-import type { API } from '@djangocfg/api';
-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 } = Hooks.usePaymentsPaymentsRetrieve(
-    shouldFetch ? paymentId : '',
-    api as unknown as API
-  );
-
-  // 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 = new Date().getTime();
-      const expires = new Date(payment.expires_at!).getTime();
-      const diff = expires - now;
-
-      if (diff <= 0) {
-        setTimeLeft('Expired');
-        return;
-      }
-
-      const hours = Math.floor(diff / (1000 * 60 * 60));
-      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-      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>{new Date(payment.created_at!).toLocaleString()}</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';

package/src/layouts/PaymentsLayout/events.ts

@@ -1,47 +0,0 @@
-"use client"
-
-/**
- * Payment Events System (v2.0 - Simplified)
- *
- * Event-based communication for dialogs using DOM events
- * Removed: API Keys events (deprecated)
- */
-
-// ─────────────────────────────────────────────────────────────────────────
-// Event Names
-// ─────────────────────────────────────────────────────────────────────────
-
-export const PAYMENT_EVENTS = {
-  OPEN_CREATE_PAYMENT_DIALOG: 'payments:open-create-payment',
-  OPEN_PAYMENT_DETAILS_DIALOG: 'payments:open-payment-details',
-  CLOSE_DIALOG: 'payments:close-dialog',
-} as const;
-
-// ─────────────────────────────────────────────────────────────────────────
-// Event Types
-// ─────────────────────────────────────────────────────────────────────────
-
-export type PaymentEvent =
-  | { type: 'OPEN_CREATE_PAYMENT' }
-  | { type: 'OPEN_PAYMENT_DETAILS'; id: string }
-  | { type: 'CLOSE_DIALOG' };
-
-// ─────────────────────────────────────────────────────────────────────────
-// Helper Functions
-// ─────────────────────────────────────────────────────────────────────────
-
-export const openCreatePaymentDialog = () => {
-  window.dispatchEvent(new Event(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG));
-};
-
-export const openPaymentDetailsDialog = (id: string) => {
-  window.dispatchEvent(
-    new CustomEvent(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, {
-      detail: { id },
-    })
-  );
-};
-
-export const closePaymentsDialog = () => {
-  window.dispatchEvent(new Event(PAYMENT_EVENTS.CLOSE_DIALOG));
-};

package/src/layouts/PaymentsLayout/index.ts

@@ -1,16 +0,0 @@
-/**
- * Payments Layout (v2.0 - Simplified)
- *
- * Exports:
- * - PaymentsLayout: Main layout component
- * - PaymentTab: Tab type definition
- * - Payment events: openCreatePaymentDialog, openPaymentDetailsDialog, closePaymentsDialog
- */
-
-export { PaymentsLayout } from './PaymentsLayout';
-export type { PaymentTab } from './types';
-export {
-  openCreatePaymentDialog,
-  openPaymentDetailsDialog,
-  closePaymentsDialog
-} from './events';

package/src/layouts/PaymentsLayout/types.ts

@@ -1,6 +0,0 @@
-/**
- * Payments Layout Types (v2.0 - Simplified)
- */
-
-// Tab types for navigation (removed apikeys and tariffs)
-export type PaymentTab = 'overview' | 'payments' | 'transactions';