@djangocfg/ext-payments 1.0.14 → 1.0.19

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';

package/src/layouts/PaymentsLayout/views/overview/components/BalanceCard.tsx

@@ -1,121 +0,0 @@
-/**
- * Balance Card Component (v2.0 - Simplified)
- * Display user balance with quick actions
- */
-
-'use client';
-
-import { Plus, RefreshCw, Wallet } from 'lucide-react';
-import moment from 'moment';
-import React from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, Skeleton
-} from '@djangocfg/ui-core';
-
-import { useOverviewContext } from '../../../../../contexts';
-import { openCreatePaymentDialog } from '../../../events';
-
-export const BalanceCard: React.FC = () => {
-  const {
-    balance,
-    isLoadingBalance,
-    refreshBalance
-  } = useOverviewContext();
-
-  const formatCurrency = (amount?: number | null) => {
-    if (amount === null || amount === undefined) return '$0.00';
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-    }).format(amount);
-  };
-
-  const formatDate = (dateStr?: string) => {
-    if (!dateStr) return 'No transactions yet';
-    try {
-      return moment.utc(dateStr).local().format('MMM D, YYYY');
-    } catch {
-      return 'Invalid date';
-    }
-  };
-
-  if (isLoadingBalance) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Wallet className="h-5 w-5" />
-              Account Balance
-            </div>
-            <Skeleton className="h-8 w-20" />
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <Skeleton className="h-10 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Extract balance data from response: { success, balance: { amount_usd, total_deposited, total_withdrawn, last_transaction_at } }
-  const balanceData = balance?.balance || balance;
-  const amountUsd = balanceData?.amount_usd ?? 0;
-  const totalDeposited = balanceData?.total_deposited ?? 0;
-  const totalWithdrawn = balanceData?.total_withdrawn ?? 0;
-  const lastTransactionAt = balanceData?.last_transaction_at;
-  const isEmpty = amountUsd === 0 && totalDeposited === 0;
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Wallet className="h-5 w-5" />
-            Account Balance
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={refreshBalance}>
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              Add Funds
-            </Button>
-          </div>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div>
-          <div className="text-4xl font-bold">
-            {formatCurrency(amountUsd)}
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">
-            Available balance • Last updated {formatDate(lastTransactionAt)}
-          </p>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4 pt-4 border-t">
-          <div>
-            <p className="text-xs text-muted-foreground">Total Deposited</p>
-            <p className="text-lg font-semibold text-green-600">{formatCurrency(totalDeposited)}</p>
-          </div>
-          <div>
-            <p className="text-xs text-muted-foreground">Total Withdrawn</p>
-            <p className="text-lg font-semibold text-red-600">{formatCurrency(totalWithdrawn)}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Badge variant={!isEmpty ? 'default' : 'secondary'}>
-            {!isEmpty ? 'Active' : 'New Account'}
-          </Badge>
-          {isEmpty && <Badge variant="outline">Empty Balance</Badge>}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx

@@ -1,139 +0,0 @@
-/**
- * Recent Payments Component (v2.0 - Simplified)
- * Display recent payment transactions from payments list
- */
-
-'use client';
-
-import { ExternalLink, History } from 'lucide-react';
-import moment from 'moment';
-import React from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, Skeleton
-} from '@djangocfg/ui-core';
-
-import { useOverviewContext } from '../../../../../contexts';
-import { openPaymentDetailsDialog } from '../../../events';
-
-export const RecentPayments: React.FC = () => {
-  const { payments, isLoadingPayments } = useOverviewContext();
-
-  const formatCurrency = (amount?: number | string | null) => {
-    if (amount === null || amount === undefined) return '$0.00';
-    const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-    }).format(numAmount);
-  };
-
-  const getRelativeTime = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-
-    const m = moment.utc(date).local();
-    const now = moment();
-    const diffInSeconds = now.diff(m, 'seconds');
-
-    if (diffInSeconds < 60) return 'Just now';
-    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-    return `${Math.floor(diffInSeconds / 86400)}d ago`;
-  };
-
-  const getStatusVariant = (
-    status: string | null | undefined
-  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
-    switch (status?.toLowerCase()) {
-      case 'completed':
-      case 'success':
-        return 'default';
-      case 'pending':
-      case 'confirming':
-        return 'secondary';
-      case 'failed':
-      case 'error':
-      case 'expired':
-        return 'destructive';
-      default:
-        return 'outline';
-    }
-  };
-
-  if (isLoadingPayments) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Recent Payments
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex items-center justify-between p-3 border rounded-sm">
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-32" />
-                <Skeleton className="h-3 w-24" />
-              </div>
-              <Skeleton className="h-6 w-16" />
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Get first 5 payments for recent list
-  const recentPaymentsList = payments?.results?.slice(0, 5) || [];
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Recent Payments
-          </div>
-          <Button variant="ghost" size="sm">
-            View All
-            <ExternalLink className="h-4 w-4 ml-2" />
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        {recentPaymentsList.length === 0 ? (
-          <div className="text-center py-8 text-muted-foreground">
-            <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>No recent payments</p>
-            <p className="text-sm mt-2">Create your first payment to get started</p>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {recentPaymentsList.map((payment) => (
-              <div
-                key={payment.id}
-                className="flex items-center justify-between p-3 border rounded-sm hover:bg-accent cursor-pointer transition-colors"
-                onClick={() => openPaymentDetailsDialog(String(payment.id))}
-              >
-                <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium">{formatCurrency(payment.amount_usd)}</span>
-                    <Badge variant={getStatusVariant(payment.status)} className="text-xs">
-                      {payment.status}
-                    </Badge>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {getRelativeTime(payment.created_at)} • {payment.currency_code || 'USD'}
-                  </p>
-                </div>
-                <ExternalLink className="h-4 w-4 text-muted-foreground" />
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

@@ -1,2 +0,0 @@
-export { BalanceCard } from './BalanceCard';
-export { RecentPayments } from './RecentPayments';

package/src/layouts/PaymentsLayout/views/overview/index.tsx

@@ -1,21 +0,0 @@
-/**
- * Overview View (v2.0 - Simplified)
- * Dashboard with balance and recent payments
- */
-
-'use client';
-
-import React from 'react';
-
-import { BalanceCard, RecentPayments } from './components';
-
-export const OverviewView: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <div className="grid gap-6 lg:grid-cols-2">
-        <BalanceCard />
-        <RecentPayments />
-      </div>
-    </div>
-  );
-};

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -1,279 +0,0 @@
-/**
- * Payments List Component (v2.0 - Simplified)
- * Display paginated list of payments with filters
- */
-
-'use client';
-
-import { ExternalLink, Filter, Plus, RefreshCw, Search } from 'lucide-react';
-import moment from 'moment';
-import React, { useState } from 'react';
-
-import {
-    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent,
-    SelectItem, SelectTrigger, SelectValue, Skeleton, Table, TableBody, TableCell,
-    TableHead, TableHeader, TableRow,
-} from '@djangocfg/ui-core';
-import { useDRFPagination, StaticPagination } from '@djangocfg/ui-nextjs/components';
-
-import { apiPayments } from '../../../../../api';
-import { usePaymentsPaymentsList } from '../../../../../api/generated/ext_payments/_utils/hooks';
-import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
-
-export const PaymentsList: React.FC = () => {
-  // Local pagination state
-  const pagination = useDRFPagination(1, 20);
-
-  // Fetch payments with pagination
-  const {
-    data: payments,
-    error,
-    isLoading: isLoadingPayments,
-    mutate: refreshPayments,
-  } = usePaymentsPaymentsList(pagination.params, apiPayments);
-
-  const paymentsList = payments?.results || [];
-  const totalCount = payments?.count || 0;
-
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('all');
-
-  const formatCurrency = (amount?: number | string | null) => {
-    if (amount === null || amount === undefined) return '$0.00';
-    const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-    }).format(numAmount);
-  };
-
-  const getRelativeTime = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-
-    const m = moment.utc(date).local();
-    const now = moment();
-    const diffInSeconds = now.diff(m, 'seconds');
-
-    if (diffInSeconds < 60) return 'Just now';
-    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-    return `${Math.floor(diffInSeconds / 86400)}d ago`;
-  };
-
-  const formatDate = (date: string | null | undefined): string => {
-    if (!date) return 'N/A';
-    return moment.utc(date).local().format('MMM D, YYYY');
-  };
-
-  const getStatusVariant = (
-    status: string | null | undefined
-  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
-    switch (status?.toLowerCase()) {
-      case 'completed':
-      case 'success':
-        return 'default';
-      case 'pending':
-      case 'confirming':
-        return 'secondary';
-      case 'failed':
-      case 'error':
-      case 'expired':
-        return 'destructive';
-      default:
-        return 'outline';
-    }
-  };
-
-  const handleSearch = (value: string) => {
-    setSearchTerm(value);
-    // Client-side filtering only
-  };
-
-  const handleStatusFilter = (status: string) => {
-    setStatusFilter(status);
-    // Client-side filtering only
-  };
-
-  // Helper to truncate ID
-  const truncateId = (id: string | number | null | undefined): string => {
-    if (!id) return 'N/A';
-    const str = id.toString();
-    return str.length > 8 ? `${str.slice(0, 8)}...` : str;
-  };
-
-  // Filter and prepare payments with pre-computed fields
-  const filteredPayments = paymentsList
-    .filter((payment) => {
-      const matchesSearch = searchTerm
-        ? payment.id?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          payment.status?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          payment.currency_code?.toLowerCase().includes(searchTerm.toLowerCase())
-        : true;
-
-      const matchesStatus = statusFilter !== 'all'
-        ? payment.status?.toLowerCase() === statusFilter.toLowerCase()
-        : true;
-
-      return matchesSearch && matchesStatus;
-    })
-    .map((payment) => ({
-      ...payment,
-      formattedDate: formatDate(payment.created_at),
-      relativeTime: getRelativeTime(payment.created_at),
-      truncatedId: truncateId(payment.id),
-    }));
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <span>Payment History</span>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => refreshPayments()} disabled={isLoadingPayments}>
-              <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingPayments ? 'animate-spin' : ''}`} />
-              Refresh
-            </Button>
-            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              New Payment
-            </Button>
-          </div>
-        </CardTitle>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        {/* Filters */}
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder="Search by ID, status, or currency..."
-              value={searchTerm}
-              onChange={(e) => handleSearch(e.target.value)}
-              className="pl-10"
-            />
-          </div>
-
-          <Select value={statusFilter} onValueChange={handleStatusFilter}>
-            <SelectTrigger className="w-full sm:w-48">
-              <Filter className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Filter by status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Statuses</SelectItem>
-              <SelectItem value="completed">Completed</SelectItem>
-              <SelectItem value="pending">Pending</SelectItem>
-              <SelectItem value="confirming">Confirming</SelectItem>
-              <SelectItem value="failed">Failed</SelectItem>
-              <SelectItem value="expired">Expired</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Payments Table */}
-        {isLoadingPayments ? (
-          <div className="space-y-3">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
-                <div className="space-y-2">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-3 w-24" />
-                </div>
-                <Skeleton className="h-6 w-16" />
-              </div>
-            ))}
-          </div>
-        ) : filteredPayments.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
-              <Search className="w-8 h-8 text-muted-foreground" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">No Payments Found</h3>
-            <p className="text-muted-foreground mb-4">
-              {searchTerm || statusFilter !== 'all'
-                ? 'No payments match your current filters'
-                : "You haven't made any payments yet"}
-            </p>
-            <Button onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              Create Payment
-            </Button>
-          </div>
-        ) : (
-          <>
-            <div className="rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Amount</TableHead>
-                    <TableHead>Currency</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Provider</TableHead>
-                    <TableHead>Payment ID</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredPayments.map((payment) => (
-                    <TableRow
-                      key={payment.id}
-                      className="cursor-pointer hover:bg-accent"
-                      onClick={() => openPaymentDetailsDialog(String(payment.id))}
-                    >
-                      <TableCell>
-                        <div>
-                          <div className="font-medium">
-                            {payment.formattedDate}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {payment.relativeTime}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell className="font-mono font-semibold">
-                        {formatCurrency(payment.amount_usd)}
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant="outline">{payment.currency_code || 'USD'}</Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant={getStatusVariant(payment.status)}>{payment.status}</Badge>
-                      </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        NowPayments
-                      </TableCell>
-                      <TableCell className="font-mono text-sm text-muted-foreground">
-                        {payment.truncatedId}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            openPaymentDetailsDialog(String(payment.id));
-                          }}
-                        >
-                          <ExternalLink className="h-4 w-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* DRF Pagination */}
-            <StaticPagination
-              data={payments}
-              onPageChange={pagination.setPage}
-              className="mt-4"
-            />
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

@@ -1 +0,0 @@
-export { PaymentsList } from './PaymentsList';

package/src/layouts/PaymentsLayout/views/payments/index.tsx

@@ -1,18 +0,0 @@
-/**
- * Payments View (v2.0 - Simplified)
- * List and manage payment transactions
- */
-
-'use client';
-
-import React from 'react';
-
-import { PaymentsList } from './components';
-
-export const PaymentsView: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <PaymentsList />
-    </div>
-  );
-};