@djangocfg/layouts 1.0.2 → 1.0.4

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -5,46 +5,44 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   PaymentsProvider,
-  BalancesProvider,
   ApiKeysProvider,
   OverviewProvider,
+  RootPaymentsProvider,
 } from '@djangocfg/api/cfg/contexts';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
 import { Wallet, CreditCard, History, Key, Crown } from 'lucide-react';
-import type { PaymentTab } from './types';
 import { OverviewView } from './views/overview';
 import { PaymentsView } from './views/payments';
 import { TransactionsView } from './views/transactions';
 import { ApiKeysView } from './views/apikeys';
 import { TariffsView } from './views/tariffs';
-import { CreateApiKeyDialog, DeleteApiKeyDialog } from './components';
+import { CreateApiKeyDialog, DeleteApiKeyDialog, CreatePaymentDialog, PaymentDetailsDialog } from './components';
 
 // ─────────────────────────────────────────────────────────────────────────
-// Payments Layout Content
+// Payments Layout
 // ─────────────────────────────────────────────────────────────────────────
 
-const PaymentsLayoutContent: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<PaymentTab>('overview');
+export interface PaymentsLayoutProps {
+  children?: React.ReactNode;
+}
 
+export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
   return (
-    <div className="h-full p-6 space-y-6">
-      {/* Page Header */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
-        <p className="text-muted-foreground">
-          Manage your payments, subscriptions, API keys, and account balance
-        </p>
-      </div>
+    <RootPaymentsProvider>
+      <div className="h-full p-6 space-y-6">
+        {/* Page Header */}
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
+          <p className="text-muted-foreground">
+            Manage your payments, subscriptions, API keys, and account balance
+          </p>
+        </div>
 
       {/* Main Content with Tabs */}
-      <Tabs
-        value={activeTab}
-        onValueChange={(value) => setActiveTab(value as PaymentTab)}
-        className="space-y-6"
-      >
+      <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" />
@@ -68,58 +66,44 @@ const PaymentsLayoutContent: React.FC = () => {
           </TabsTrigger>
         </TabsList>
 
-        {/* Overview Tab */}
+        {/* Each tab wrapped in its own provider - loads only when tab is active */}
         <TabsContent value="overview" className="space-y-6">
-          <OverviewView />
+          <OverviewProvider>
+            <PaymentsProvider>
+              <OverviewView />
+              <CreatePaymentDialog />
+            </PaymentsProvider>
+          </OverviewProvider>
         </TabsContent>
 
-        {/* Payments Tab */}
         <TabsContent value="payments" className="space-y-6">
-          <PaymentsView />
+          <PaymentsProvider>
+            <PaymentsView />
+            <CreatePaymentDialog />
+          </PaymentsProvider>
         </TabsContent>
 
-        {/* Transactions Tab */}
         <TabsContent value="transactions" className="space-y-6">
           <TransactionsView />
         </TabsContent>
 
-        {/* API Keys Tab */}
         <TabsContent value="apikeys" className="space-y-6">
-          <ApiKeysView />
+          <ApiKeysProvider>
+            <ApiKeysView />
+            <CreateApiKeyDialog />
+            <DeleteApiKeyDialog />
+          </ApiKeysProvider>
         </TabsContent>
 
-        {/* Tariffs Tab */}
-          <TabsContent value="tariffs" className="space-y-6">
-            <TariffsView />
-          </TabsContent>
-        </Tabs>
+        <TabsContent value="tariffs" className="space-y-6">
+          <TariffsView />
+        </TabsContent>
+      </Tabs>
 
-        {/* Global Dialogs */}
-        <CreateApiKeyDialog />
-        <DeleteApiKeyDialog />
+      {/* Global Payment Details Dialog */}
+      <PaymentDetailsDialog />
       </div>
-    );
-  };
-  
-  // ─────────────────────────────────────────────────────────────────────────
-  // Payments Layout (with providers)
-  // ─────────────────────────────────────────────────────────────────────────
-
-export interface PaymentsLayoutProps {
-  children?: React.ReactNode;
-}
-
-export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
-  return (
-    <OverviewProvider>
-      <PaymentsProvider>
-        <BalancesProvider>
-          <ApiKeysProvider>
-            <PaymentsLayoutContent />
-          </ApiKeysProvider>
-        </BalancesProvider>
-      </PaymentsProvider>
-    </OverviewProvider>
+    </RootPaymentsProvider>
   );
 };
 

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

@@ -5,7 +5,7 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -21,40 +21,108 @@ import {
   FormLabel,
   FormMessage,
   Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  Combobox,
   Button,
+  TokenIcon,
   useEventListener,
 } from '@djangocfg/ui';
 import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { Schemas, Enums } from '@djangocfg/api/cfg/generated';
+import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { Schemas } from '@djangocfg/api/cfg/generated';
 import { paymentsLogger } from '../../../utils/logger';
 import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
+import { openPaymentDetails } from './PaymentDetailsDialog';
+import type { ProviderCurrency } from '@djangocfg/api/cfg/contexts';
+import type { ComboboxOption } from '@djangocfg/ui';
 
 const { PaymentCreateRequestSchema } = Schemas;
 type PaymentCreateRequest = Schemas.PaymentCreateRequest;
-const { PaymentCreateRequestCurrencyCode, PaymentCreateRequestProvider } = Enums;
 
 export const CreatePaymentDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+
   const { createPayment } = usePaymentsContext();
+  const {
+    providerCurrencies,
+    isLoadingProviderCurrencies,
+  } = useRootPaymentsContext();
 
   const form = useForm<PaymentCreateRequest>({
     resolver: zodResolver(PaymentCreateRequestSchema),
     defaultValues: {
       amount_usd: 10,
-      currency_code: PaymentCreateRequestCurrencyCode.USDT,
-      provider: PaymentCreateRequestProvider.NOWPAYMENTS,
+      currency_code: 'USDT', // Default to USDT
     },
   });
 
+  // Group currencies by token and create combobox options
+  // Backend automatically selects network, so we group by currency code
+  const currencyOptions = useMemo((): ComboboxOption[] => {
+    if (!providerCurrencies?.results) return [];
+
+    const enabledCurrencies = providerCurrencies.results.filter(pc => pc.is_enabled);
+
+    // Group by currency code and collect all networks
+    const currencyMap = new Map<string, { pc: ProviderCurrency, networks: string[] }>();
+
+    for (const pc of enabledCurrencies) {
+      const code = pc.currency.code.toUpperCase();
+      if (!currencyMap.has(code)) {
+        currencyMap.set(code, { pc, networks: [] });
+      }
+      if (pc.network?.name) {
+        currencyMap.get(code)!.networks.push(pc.network.name);
+      }
+    }
+
+    return Array.from(currencyMap.values()).map(({ pc, networks }) => {
+      // Show network info only if there's exactly one network, otherwise backend will choose
+      let label = pc.currency.code;
+      let description = pc.currency.name;
+
+      if (networks.length === 1) {
+        label = `${pc.currency.code} (${networks[0]})`;
+      } else if (networks.length > 1) {
+        description = `${pc.currency.name} • Multiple networks available`;
+      }
+
+      return {
+        // Use currency code (e.g. "USDT") as value for API
+        value: pc.currency.code.toUpperCase(),
+        label,
+        description,
+      };
+    });
+  }, [providerCurrencies]);
+
+  // Get first ProviderCurrency by currency code (e.g. "USDT")
+  const getProviderCurrency = (currencyCode: string) => {
+    return providerCurrencies?.results?.find(
+      pc => pc.is_enabled && pc.currency.code.toUpperCase() === currencyCode.toUpperCase()
+    );
+  };
+
+  // Calculate crypto amount from USD
+  const calculateCryptoAmount = useMemo(() => {
+    const amountUsd = form.watch('amount_usd');
+    const currencyCode = form.watch('currency_code');
+    const pc = getProviderCurrency(currencyCode);
+
+    if (!pc || !pc.currency.usd_rate || !amountUsd) {
+      return null;
+    }
+
+    const cryptoAmount = amountUsd / pc.currency.usd_rate;
+    return {
+      amount: cryptoAmount,
+      currency: pc.currency.code,
+      symbol: pc.currency.symbol || pc.currency.code,
+    };
+  }, [form.watch('amount_usd'), form.watch('currency_code'), providerCurrencies]);
+
   useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, () => {
     setOpen(true);
   });
@@ -68,12 +136,29 @@ export const CreatePaymentDialog: React.FC = () => {
     form.reset();
   };
 
+  // Initialize default currency if not set
+  useEffect(() => {
+    if (currencyOptions.length > 0 && !form.getValues('currency_code')) {
+      form.setValue('currency_code', currencyOptions[0].value as any);
+    }
+  }, [currencyOptions, form]);
+
   const handleSubmit = async (data: PaymentCreateRequest) => {
     try {
       setIsSubmitting(true);
-      await createPayment(data);
+
+      const result = await createPayment(data);
       handleClose();
       closePaymentsDialog();
+
+      // The API returns a wrapped response with { success, message, payment }
+      // Extract the payment ID from the result
+      const paymentData = result as any;
+      const paymentId = paymentData?.payment?.id || paymentData?.id;
+
+      if (paymentId) {
+        openPaymentDetails(String(paymentId));
+      }
     } catch (error) {
       paymentsLogger.error('Failed to create payment:', error);
     } finally {
@@ -81,11 +166,6 @@ export const CreatePaymentDialog: React.FC = () => {
     }
   };
 
-  const currencyOptions = Object.entries(PaymentCreateRequestCurrencyCode).map(([key, value]) => ({
-    value,
-    label: key,
-  }));
-
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
       <DialogContent className="sm:max-w-md">
@@ -128,20 +208,49 @@ export const CreatePaymentDialog: React.FC = () => {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Currency</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select currency" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {currencyOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <FormControl>
+                    <Combobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      placeholder="Select currency..."
+                      searchPlaceholder="Search currencies..."
+                      emptyText="No currencies found."
+                      disabled={isLoadingProviderCurrencies}
+                      className="w-full"
+                      renderValue={(option) => {
+                        if (!option) return null;
+                        const pc = getProviderCurrency(option.value);
+                        if (!pc) return option.label;
+                        return (
+                          <div className="flex items-center gap-2">
+                            <TokenIcon symbol={pc.currency.code} size={20} />
+                            <span>{pc.currency.code}</span>
+                            {pc.network && (
+                              <span className="text-xs text-muted-foreground">
+                                ({pc.network.name})
+                              </span>
+                            )}
+                          </div>
+                        );
+                      }}
+                      renderOption={(option) => {
+                        const pc = getProviderCurrency(option.value);
+                        if (!pc) return option.label;
+                        return (
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            <TokenIcon symbol={pc.currency.code} size={20} className="shrink-0" />
+                            <div className="flex flex-col flex-1 min-w-0">
+                              <span className="font-medium truncate">
+                                {pc.currency.code}
+                                {pc.network && ` (${pc.network.name})`}
+                              </span>
+                            </div>
+                          </div>
+                        );
+                      }}
+                    />
+                  </FormControl>
                   <FormDescription>
                     The cryptocurrency to use for payment.
                   </FormDescription>
@@ -150,37 +259,59 @@ export const CreatePaymentDialog: React.FC = () => {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="provider"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Payment Provider</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select provider" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value={PaymentCreateRequestProvider.NOWPAYMENTS}>
-                        NOWPayments
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    The payment gateway to process your payment.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            {/* Conversion and Fee Information */}
+            {calculateCryptoAmount && (() => {
+              const pc = getProviderCurrency(form.watch('currency_code'));
+              const amountUsd = form.watch('amount_usd');
+              if (!pc) return null;
+
+              return (
+                <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">
+                      ${amountUsd?.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} = ${pc.currency.usd_rate?.toFixed(2)}
+                    </span>
+                  </div>
+
+                  {/* Network Info */}
+                  {pc.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">{pc.network.name}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
 
             <DialogFooter>
               <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button type="submit" disabled={isSubmitting || !form.formState.isValid}>
+              <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting ? (
                   <>
                     <RefreshCw className="h-4 w-4 mr-2 animate-spin" />