655 lines
26 KiB
TypeScript
655 lines
26 KiB
TypeScript
/**
|
|
* Pay Invoice Modal
|
|
* Allows users to pay pending invoices using Stripe, PayPal, or submit bank transfer confirmation
|
|
*
|
|
* Payment Method Logic (Following SignUpFormUnified pattern):
|
|
* - Pakistan (PK): Bank Transfer + Credit Card (Stripe) - NO PayPal
|
|
* - Other countries: Credit Card (Stripe) + PayPal only
|
|
* - Default selection: User's configured default payment method from AccountPaymentMethod
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Modal } from '../ui/modal';
|
|
import Button from '../ui/button/Button';
|
|
import Label from '../form/Label';
|
|
import Input from '../form/input/InputField';
|
|
import TextArea from '../form/input/TextArea';
|
|
import {
|
|
Loader2Icon,
|
|
UploadIcon,
|
|
XIcon,
|
|
CheckCircleIcon,
|
|
CreditCardIcon,
|
|
Building2Icon,
|
|
WalletIcon
|
|
} from '../../icons';
|
|
import { API_BASE_URL } from '../../services/api';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { subscribeToPlan, getAvailablePaymentMethods, purchaseCredits } from '../../services/billing.api';
|
|
|
|
interface BankDetails {
|
|
bank_name: string;
|
|
account_title: string;
|
|
account_number: string;
|
|
iban?: string;
|
|
swift_code?: string;
|
|
}
|
|
|
|
interface Invoice {
|
|
id: number;
|
|
invoice_number: string;
|
|
invoice_type?: 'subscription' | 'credit_package' | 'addon' | 'custom';
|
|
credit_package_id?: string | number | null;
|
|
total?: string;
|
|
total_amount?: string;
|
|
currency?: string;
|
|
status?: string;
|
|
payment_method?: string;
|
|
subscription?: {
|
|
id?: number;
|
|
plan?: {
|
|
id: number;
|
|
name: string;
|
|
slug?: string;
|
|
};
|
|
} | null;
|
|
}
|
|
|
|
interface PayInvoiceModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: () => void;
|
|
invoice: Invoice;
|
|
/** User's billing country code (e.g., 'US', 'PK') */
|
|
userCountry?: string;
|
|
/** User's default payment method type */
|
|
defaultPaymentMethod?: string;
|
|
}
|
|
|
|
type PaymentOption = 'stripe' | 'paypal' | 'bank_transfer';
|
|
|
|
export default function PayInvoiceModal({
|
|
isOpen,
|
|
onClose,
|
|
onSuccess,
|
|
invoice,
|
|
userCountry = 'US',
|
|
defaultPaymentMethod,
|
|
}: PayInvoiceModalProps) {
|
|
const isPakistan = userCountry?.toUpperCase() === 'PK';
|
|
|
|
// Determine available payment options based on country
|
|
// PK users: Stripe (Card) + Bank Transfer - NO PayPal
|
|
// Other users: Stripe (Card) + PayPal only
|
|
const availableOptions: PaymentOption[] = isPakistan
|
|
? ['stripe', 'bank_transfer']
|
|
: ['stripe', 'paypal'];
|
|
|
|
// Determine initial selection based on:
|
|
// 1. User's default payment method (if available for this country)
|
|
// 2. Invoice's stored payment_method
|
|
// 3. First available option (stripe)
|
|
const getInitialOption = (): PaymentOption => {
|
|
// Check user's default payment method first
|
|
if (defaultPaymentMethod) {
|
|
if (defaultPaymentMethod === 'stripe' || defaultPaymentMethod === 'card') return 'stripe';
|
|
if (defaultPaymentMethod === 'bank_transfer' && isPakistan) return 'bank_transfer';
|
|
if (defaultPaymentMethod === 'paypal' && !isPakistan) return 'paypal';
|
|
}
|
|
// Then check invoice's stored payment method
|
|
if (invoice.payment_method) {
|
|
if (invoice.payment_method === 'stripe' || invoice.payment_method === 'card') return 'stripe';
|
|
if (invoice.payment_method === 'bank_transfer' && isPakistan) return 'bank_transfer';
|
|
if (invoice.payment_method === 'paypal' && !isPakistan) return 'paypal';
|
|
}
|
|
// Fall back to first available (always stripe)
|
|
return 'stripe';
|
|
};
|
|
|
|
const [selectedOption, setSelectedOption] = useState<PaymentOption>(getInitialOption());
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
// Bank transfer form state
|
|
const [bankFormData, setBankFormData] = useState({
|
|
manual_reference: '',
|
|
manual_notes: '',
|
|
proof_url: '',
|
|
});
|
|
const [uploadedFileName, setUploadedFileName] = useState('');
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
// Bank details loaded from backend
|
|
const [bankDetails, setBankDetails] = useState<BankDetails | null>(null);
|
|
const [bankDetailsLoading, setBankDetailsLoading] = useState(false);
|
|
|
|
const amount = parseFloat(invoice.total_amount || invoice.total || '0');
|
|
const currency = invoice.currency?.toUpperCase() || 'USD';
|
|
const planId = invoice.subscription?.plan?.id;
|
|
const planSlug = invoice.subscription?.plan?.slug;
|
|
const isCreditInvoice = invoice.invoice_type === 'credit_package';
|
|
const creditPackageId = invoice.credit_package_id ? String(invoice.credit_package_id) : null;
|
|
|
|
// Check if user's default method is selected (for showing badge)
|
|
const isDefaultMethod = (option: PaymentOption): boolean => {
|
|
if (!defaultPaymentMethod) return false;
|
|
if (option === 'stripe' && (defaultPaymentMethod === 'stripe' || defaultPaymentMethod === 'card')) return true;
|
|
if (option === 'bank_transfer' && defaultPaymentMethod === 'bank_transfer') return true;
|
|
if (option === 'paypal' && defaultPaymentMethod === 'paypal') return true;
|
|
return false;
|
|
};
|
|
|
|
// Reset state when modal opens
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setSelectedOption(getInitialOption());
|
|
setError('');
|
|
setSuccess(false);
|
|
setBankFormData({ manual_reference: '', manual_notes: '', proof_url: '' });
|
|
setUploadedFileName('');
|
|
setBankDetails(null);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Load bank details from backend when bank_transfer is selected for PK users
|
|
useEffect(() => {
|
|
if (!isOpen || !isPakistan || selectedOption !== 'bank_transfer') return;
|
|
if (bankDetails) return; // Already loaded
|
|
|
|
const loadBankDetails = async () => {
|
|
setBankDetailsLoading(true);
|
|
try {
|
|
const { results } = await getAvailablePaymentMethods(userCountry);
|
|
const bankMethod = results.find(
|
|
(m) => m.type === 'bank_transfer' && m.is_enabled
|
|
) as any;
|
|
|
|
if (bankMethod?.bank_name && (bankMethod?.account_title || bankMethod?.account_number)) {
|
|
setBankDetails({
|
|
bank_name: bankMethod.bank_name,
|
|
account_title: bankMethod.account_title || '',
|
|
account_number: bankMethod.account_number || '',
|
|
iban: bankMethod.iban,
|
|
swift_code: bankMethod.swift_code,
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load bank details:', err);
|
|
} finally {
|
|
setBankDetailsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadBankDetails();
|
|
}, [isOpen, isPakistan, selectedOption, userCountry, bankDetails]);
|
|
|
|
const handleStripePayment = async () => {
|
|
if (isCreditInvoice) {
|
|
if (!creditPackageId) {
|
|
setError('Unable to process card payment. Credit package not found on invoice. Please contact support.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
const result = await purchaseCredits(creditPackageId, 'stripe', {
|
|
return_url: `${window.location.origin}/account/usage?purchase=success`,
|
|
cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
|
|
});
|
|
|
|
window.location.href = result.redirect_url;
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to initiate card payment');
|
|
setLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Use plan slug if available, otherwise fall back to id
|
|
const planIdentifier = planSlug || (planId ? String(planId) : null);
|
|
|
|
if (!planIdentifier) {
|
|
setError('Unable to process card payment. Invoice has no associated plan. Please contact support.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
// Use the subscribeToPlan function which properly handles Stripe checkout
|
|
const result = await subscribeToPlan(planIdentifier, 'stripe', {
|
|
return_url: `${window.location.origin}/account/plans?success=true`,
|
|
cancel_url: `${window.location.origin}/account/plans?canceled=true`,
|
|
});
|
|
|
|
// Redirect to Stripe Checkout
|
|
window.location.href = result.redirect_url;
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to initiate card payment');
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePayPalPayment = async () => {
|
|
if (isCreditInvoice) {
|
|
if (!creditPackageId) {
|
|
setError('Unable to process PayPal payment. Credit package not found on invoice. Please contact support.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
const result = await purchaseCredits(creditPackageId, 'paypal', {
|
|
return_url: `${window.location.origin}/account/usage?purchase=success`,
|
|
cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
|
|
});
|
|
|
|
window.location.href = result.redirect_url;
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to initiate PayPal payment');
|
|
setLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Use plan slug if available, otherwise fall back to id
|
|
const planIdentifier = planSlug || (planId ? String(planId) : null);
|
|
|
|
if (!planIdentifier) {
|
|
setError('Unable to process PayPal payment. Invoice has no associated plan. Please contact support.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
// Use the subscribeToPlan function which properly handles PayPal
|
|
const result = await subscribeToPlan(planIdentifier, 'paypal', {
|
|
return_url: `${window.location.origin}/account/plans?paypal=success&plan_id=${planIdentifier}`,
|
|
cancel_url: `${window.location.origin}/account/plans?paypal=cancel`,
|
|
});
|
|
|
|
// Redirect to PayPal
|
|
window.location.href = result.redirect_url;
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to initiate PayPal payment');
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
setError('File size must be less than 5MB');
|
|
return;
|
|
}
|
|
|
|
const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
setError('Only JPEG, PNG, and PDF files are allowed');
|
|
return;
|
|
}
|
|
|
|
setUploadedFileName(file.name);
|
|
setError('');
|
|
setUploading(true);
|
|
|
|
try {
|
|
// Placeholder URL - actual S3 upload would go here
|
|
const placeholderUrl = `https://s3.amazonaws.com/igny8-payments/${Date.now()}-${file.name}`;
|
|
setBankFormData({ ...bankFormData, proof_url: placeholderUrl });
|
|
} catch (err) {
|
|
setError('Failed to upload file');
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const handleBankSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (!bankFormData.manual_reference.trim()) {
|
|
setError('Transaction reference is required');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
|
|
const token = useAuthStore.getState().token;
|
|
const response = await fetch(`${API_BASE_URL}/v1/billing/admin/payments/confirm/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(token && { Authorization: `Bearer ${token}` }),
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
invoice_id: invoice.id,
|
|
payment_method: 'bank_transfer',
|
|
amount: invoice.total_amount || invoice.total || '0',
|
|
manual_reference: bankFormData.manual_reference.trim(),
|
|
manual_notes: bankFormData.manual_notes.trim() || undefined,
|
|
proof_url: bankFormData.proof_url || undefined,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok || !data.success) {
|
|
throw new Error(data.error || data.message || 'Failed to submit payment confirmation');
|
|
}
|
|
|
|
setSuccess(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
onSuccess?.();
|
|
}, 2500);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Failed to submit payment');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePayNow = () => {
|
|
if (selectedOption === 'stripe') {
|
|
handleStripePayment();
|
|
} else if (selectedOption === 'paypal') {
|
|
handlePayPalPayment();
|
|
}
|
|
// Bank transfer uses form submit
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} className="max-w-xl p-0">
|
|
<div className="p-6">
|
|
{success ? (
|
|
<div className="text-center py-8">
|
|
<CheckCircleIcon className="w-16 h-16 text-success-500 mx-auto mb-4" />
|
|
<h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
{selectedOption === 'bank_transfer' ? 'Payment Submitted!' : 'Redirecting...'}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{selectedOption === 'bank_transfer'
|
|
? 'Your payment confirmation has been submitted for review.'
|
|
: 'You will be redirected to complete your payment.'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-5 pr-8">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">Pay Invoice</h2>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">#{invoice.invoice_number}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
{currency} {amount.toFixed(2)}
|
|
</div>
|
|
{isPakistan && selectedOption === 'bank_transfer' && (
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
≈ PKR {Math.round(amount * 278).toLocaleString()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Payment Method Selection */}
|
|
{availableOptions.length > 1 && (
|
|
<div className="mb-5">
|
|
<Label className="text-sm text-gray-600 dark:text-gray-400 mb-2 block">Payment Method</Label>
|
|
<div className="flex gap-2">
|
|
{/* Stripe (Card) - Always available */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedOption('stripe')}
|
|
disabled={loading}
|
|
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
|
|
selectedOption === 'stripe'
|
|
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
|
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
<CreditCardIcon className={`w-5 h-5 ${selectedOption === 'stripe' ? 'text-brand-600' : 'text-gray-500'}`} />
|
|
<span className="font-medium">Credit/Debit Card</span>
|
|
{isDefaultMethod('stripe') && (
|
|
<span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
|
|
Default
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* PayPal - Only for non-Pakistan */}
|
|
{!isPakistan && availableOptions.includes('paypal') && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedOption('paypal')}
|
|
disabled={loading}
|
|
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
|
|
selectedOption === 'paypal'
|
|
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
|
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
<WalletIcon className={`w-5 h-5 ${selectedOption === 'paypal' ? 'text-brand-600' : 'text-gray-500'}`} />
|
|
<span className="font-medium">PayPal</span>
|
|
{isDefaultMethod('paypal') && (
|
|
<span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
|
|
Default
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{/* Bank Transfer - Only for Pakistan */}
|
|
{isPakistan && availableOptions.includes('bank_transfer') && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedOption('bank_transfer')}
|
|
disabled={loading}
|
|
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
|
|
selectedOption === 'bank_transfer'
|
|
? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
|
|
: 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
|
|
}`}
|
|
>
|
|
<Building2Icon className={`w-5 h-5 ${selectedOption === 'bank_transfer' ? 'text-brand-600' : 'text-gray-500'}`} />
|
|
<span className="font-medium">Bank Transfer</span>
|
|
{isDefaultMethod('bank_transfer') && (
|
|
<span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
|
|
Default
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stripe Payment */}
|
|
{selectedOption === 'stripe' && (
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
|
<CreditCardIcon className="w-12 h-12 mx-auto text-brand-500 mb-3" />
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Pay securely with your credit or debit card via Stripe.
|
|
</p>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handlePayNow}
|
|
disabled={loading}
|
|
startIcon={loading ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <CreditCardIcon className="w-4 h-4" />}
|
|
>
|
|
{loading ? 'Processing...' : `Pay ${currency} ${amount.toFixed(2)} with Card`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* PayPal Payment - Only for non-Pakistan */}
|
|
{selectedOption === 'paypal' && !isPakistan && (
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
|
|
<WalletIcon className="w-12 h-12 mx-auto text-[#0070ba] mb-3" />
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Pay securely using your PayPal account.
|
|
</p>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handlePayNow}
|
|
disabled={loading}
|
|
className="bg-[#0070ba] hover:bg-[#005ea6]"
|
|
startIcon={loading ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <WalletIcon className="w-4 h-4" />}
|
|
>
|
|
{loading ? 'Processing...' : `Pay ${currency} ${amount.toFixed(2)} with PayPal`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bank Transfer - Only for Pakistan */}
|
|
{selectedOption === 'bank_transfer' && isPakistan && (
|
|
<form onSubmit={handleBankSubmit} className="space-y-4">
|
|
{/* Bank Details */}
|
|
<div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
|
|
<h4 className="font-medium text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
|
|
<Building2Icon className="w-5 h-5" />
|
|
Bank Transfer Details
|
|
</h4>
|
|
{bankDetailsLoading ? (
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<Loader2Icon className="w-4 h-4 animate-spin" />
|
|
Loading bank details...
|
|
</div>
|
|
) : bankDetails ? (
|
|
<div className="text-sm text-brand-800 dark:text-brand-200 space-y-1">
|
|
<p><span className="font-medium">Bank:</span> {bankDetails.bank_name}</p>
|
|
<p><span className="font-medium">Account Title:</span> {bankDetails.account_title}</p>
|
|
<p><span className="font-medium">Account #:</span> {bankDetails.account_number}</p>
|
|
{bankDetails.iban && <p><span className="font-medium">IBAN:</span> {bankDetails.iban}</p>}
|
|
<p><span className="font-medium">Reference:</span> {invoice.invoice_number}</p>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-error-600 dark:text-error-400">
|
|
Bank details not available. Please contact support.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Transaction Reference */}
|
|
<div>
|
|
<Label>Transaction Reference / ID<span className="text-error-500">*</span></Label>
|
|
<Input
|
|
type="text"
|
|
value={bankFormData.manual_reference}
|
|
onChange={(e) => setBankFormData({ ...bankFormData, manual_reference: e.target.value })}
|
|
placeholder="Enter your bank transaction reference"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Notes */}
|
|
<div>
|
|
<Label>Notes (Optional)</Label>
|
|
<TextArea
|
|
placeholder="Any additional notes about your payment..."
|
|
rows={2}
|
|
value={bankFormData.manual_notes}
|
|
onChange={(val) => setBankFormData({ ...bankFormData, manual_notes: val })}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Proof Upload */}
|
|
<div>
|
|
<Label>Upload Payment Proof (Optional)</Label>
|
|
{!uploadedFileName ? (
|
|
<label className="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-brand-500 dark:border-gray-700 transition-colors">
|
|
<div className="text-center">
|
|
<UploadIcon className="w-6 h-6 mx-auto text-gray-400 mb-1" />
|
|
<p className="text-xs text-gray-500">Click to upload receipt screenshot</p>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
className="hidden"
|
|
onChange={handleFileSelect}
|
|
accept=".jpg,.jpeg,.png,.pdf"
|
|
disabled={loading || uploading}
|
|
/>
|
|
</label>
|
|
) : (
|
|
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircleIcon className="w-5 h-5 text-success-500" />
|
|
<span className="text-sm truncate max-w-[200px]">{uploadedFileName}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setUploadedFileName('');
|
|
setBankFormData({ ...bankFormData, proof_url: '' });
|
|
}}
|
|
disabled={loading}
|
|
className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
|
|
>
|
|
<XIcon className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
disabled={loading || uploading}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
|
|
Submitting...
|
|
</>
|
|
) : (
|
|
'Submit Payment Confirmation'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
{/* Cancel Button */}
|
|
<div className="mt-4 text-center">
|
|
<Button
|
|
variant="outline"
|
|
tone="neutral"
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|