salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bank trnasfer deteiasl udaptes and issues fixed

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-20 02:15:46 +00:00
parent 9b93d22d22
commit 4996e2e1aa
6 changed files with 299 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/src/components/billing/PayInvoiceModal.tsx
View File

@@ -25,7 +25,15 @@ import {
} from '../../icons';
import { API_BASE_URL } from '../../services/api';
import { useAuthStore } from '../../store/authStore';
import { subscribeToPlan } from '../../services/billing.api';
import { subscribeToPlan, getAvailablePaymentMethods } from '../../services/billing.api';
interface BankDetails {
bank_name: string;
account_title: string;
account_number: string;
iban?: string;
swift_code?: string;
}
interface Invoice {
id: number;
@@ -109,6 +117,10 @@ export default function PayInvoiceModal({
});
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';
@@ -132,9 +144,42 @@ export default function PayInvoiceModal({
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 () => {
// Use plan slug if available, otherwise fall back to id
const planIdentifier = planSlug || (planId ? String(planId) : null);
@@ -434,13 +479,24 @@ export default function PayInvoiceModal({
<Building2Icon className="w-5 h-5" />
Bank Transfer Details
</h4>
<div className="text-sm text-brand-800 dark:text-brand-200 space-y-1">
<p><span className="font-medium">Bank:</span> Standard Chartered Bank Pakistan</p>
<p><span className="font-medium">Account Title:</span> IGNY8 Technologies</p>
<p><span className="font-medium">Account #:</span> 01-2345678-01</p>
<p><span className="font-medium">IBAN:</span> PK36SCBL0000001234567890</p>
<p><span className="font-medium">Reference:</span> {invoice.invoice_number}</p>
</div>
{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 */}