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

fixing and creatign mess

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-07 10:19:34 +00:00
parent 0386d4bf33
commit ad1756c349
11 changed files with 1067 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/components/billing/PendingPaymentBanner.tsx
View File

@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom';
import Button from '../ui/button/Button';
import { useAuthStore } from '../../store/authStore';
import { API_BASE_URL } from '../../services/api';
import PaymentConfirmationModal from './PaymentConfirmationModal';
import PayInvoiceModal from './PayInvoiceModal';
interface Invoice {
id: number;
@@ -21,6 +21,15 @@ interface Invoice {
status: string;
due_date?: string;
created_at: string;
payment_method?: string; // For checking bank_transfer
subscription?: {
id?: number;
plan?: {
id: number;
name: string;
slug?: string;
};
};
}
interface PendingPaymentBannerProps {
@@ -30,6 +39,11 @@ interface PendingPaymentBannerProps {
export default function PendingPaymentBanner({ className = '' }: PendingPaymentBannerProps) {
const [invoice, setInvoice] = useState<Invoice | null>(null);
const [paymentMethod, setPaymentMethod] = useState<any>(null);
const [availableGateways, setAvailableGateways] = useState<{ stripe: boolean; paypal: boolean; manual: boolean }>({
stripe: false,
paypal: false,
manual: true,
});
const [loading, setLoading] = useState(true);
const [dismissed, setDismissed] = useState(false);
const [showPaymentModal, setShowPaymentModal] = useState(false);
@@ -74,21 +88,58 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
if (response.ok && data.success && data.results?.length > 0) {
setInvoice(data.results[0]);
// Load payment method if available - use public endpoint
const country = (user?.account as any)?.billing_country || 'US';
const pmResponse = await fetch(`${API_BASE_URL}/v1/billing/payment-configs/payment-methods/?country=${country}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
// Load user's account payment methods
try {
const apmResponse = await fetch(`${API_BASE_URL}/v1/billing/payment-methods/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
},
credentials: 'include',
});
const apmData = await apmResponse.json();
if (apmResponse.ok && apmData.success && apmData.results?.length > 0) {
const defaultMethod = apmData.results.find((m: any) => m.is_default && m.is_verified) ||
apmData.results.find((m: any) => m.is_verified) ||
apmData.results[0];
if (defaultMethod) {
setPaymentMethod(defaultMethod);
}
}
} catch (err) {
console.error('Failed to load account payment methods:', err);
}
const pmData = await pmResponse.json();
// Use public endpoint response format
if (pmResponse.ok && pmData.success && pmData.results?.length > 0) {
setPaymentMethod(pmData.results[0]);
} else if (pmResponse.ok && Array.isArray(pmData) && pmData.length > 0) {
setPaymentMethod(pmData[0]);
// Load available payment gateways by checking their config endpoints
try {
const [stripeRes, paypalRes] = await Promise.all([
fetch(`${API_BASE_URL}/v1/billing/stripe/config/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
},
credentials: 'include',
}),
fetch(`${API_BASE_URL}/v1/billing/paypal/config/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` }),
},
credentials: 'include',
}),
]);
const stripeData = await stripeRes.json().catch(() => ({}));
const paypalData = await paypalRes.json().catch(() => ({}));
setAvailableGateways({
stripe: stripeRes.ok && stripeData.success && !!stripeData.publishable_key,
paypal: paypalRes.ok && paypalData.success && !!paypalData.client_id,
manual: true,
});
} catch (err) {
console.error('Failed to load payment gateways:', err);
}
}
} catch (err) {
@@ -241,13 +292,17 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
startIcon={<CreditCardIcon className="w-4 h-4" />}
onClick={() => setShowPaymentModal(true)}
>
Confirm Payment
Pay Now
</Button>
<Link to="/account/plans">
<Button variant="outline" size="sm">
View Billing Details
</Button>
</Link>
{/* Only show Bank Transfer Details for PK users with bank_transfer payment method */}
{(user?.account as any)?.billing_country?.toUpperCase() === 'PK' &&
(paymentMethod?.type === 'bank_transfer' || invoice.payment_method === 'bank_transfer') && (
<Link to="/account/plans">
<Button variant="outline" size="sm">
View Bank Transfer Details
</Button>
</Link>
)}
</div>
</div>
@@ -266,18 +321,15 @@ export default function PendingPaymentBanner({ className = '' }: PendingPaymentB
</div>
</div>
{/* Payment Confirmation Modal */}
{/* Payment Modal with All Options */}
{showPaymentModal && invoice && (
<PaymentConfirmationModal
<PayInvoiceModal
isOpen={showPaymentModal}
onClose={() => setShowPaymentModal(false)}
onSuccess={handlePaymentSuccess}
invoice={invoice}
paymentMethod={paymentMethod || {
payment_method: 'bank_transfer',
display_name: 'Bank Transfer',
country_code: 'US'
}}
userCountry={(user?.account as any)?.billing_country || 'US'}
defaultPaymentMethod={paymentMethod?.type}
/>
)}
</>