258 lines
8.3 KiB
TypeScript
258 lines
8.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { CreditCard, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
|
|
import { Button, Modal, Input } from '../../components/ui';
|
|
import { DialogModal } from '../../components/ui/DialogModal/DialogModal';
|
|
import { subscriptionService } from '../../api';
|
|
import { showToast } from '../../utils/toast';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface PaymentMethodUpdateModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
tenantId: string;
|
|
currentPaymentMethod?: {
|
|
brand?: string;
|
|
last4?: string;
|
|
exp_month?: number;
|
|
exp_year?: number;
|
|
};
|
|
onPaymentMethodUpdated: (paymentMethod: {
|
|
brand: string;
|
|
last4: string;
|
|
exp_month?: number;
|
|
exp_year?: number;
|
|
}) => void;
|
|
}
|
|
|
|
export const PaymentMethodUpdateModal: React.FC<PaymentMethodUpdateModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
tenantId,
|
|
currentPaymentMethod,
|
|
onPaymentMethodUpdated
|
|
}) => {
|
|
const { t } = useTranslation('subscription');
|
|
const [loading, setLoading] = useState(false);
|
|
const [paymentMethodId, setPaymentMethodId] = useState('');
|
|
const [stripe, setStripe] = useState<any>(null);
|
|
const [elements, setElements] = useState<any>(null);
|
|
const [cardElement, setCardElement] = useState<any>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
// Load Stripe.js dynamically
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
const loadStripe = async () => {
|
|
try {
|
|
// Load Stripe.js from CDN
|
|
const stripeScript = document.createElement('script');
|
|
stripeScript.src = 'https://js.stripe.com/v3/';
|
|
stripeScript.async = true;
|
|
stripeScript.onload = () => {
|
|
const stripeInstance = (window as any).Stripe('pk_test_your_publishable_key'); // Replace with actual key
|
|
setStripe(stripeInstance);
|
|
const elementsInstance = stripeInstance.elements();
|
|
setElements(elementsInstance);
|
|
};
|
|
document.body.appendChild(stripeScript);
|
|
} catch (err) {
|
|
console.error('Failed to load Stripe:', err);
|
|
setError('Failed to load payment processor');
|
|
}
|
|
};
|
|
|
|
loadStripe();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Create card element when Stripe and elements are loaded
|
|
useEffect(() => {
|
|
if (elements && !cardElement) {
|
|
const card = elements.create('card', {
|
|
style: {
|
|
base: {
|
|
fontSize: '16px',
|
|
color: '#32325d',
|
|
'::placeholder': {
|
|
color: '#aab7c4',
|
|
},
|
|
},
|
|
invalid: {
|
|
color: '#fa755a',
|
|
iconColor: '#fa755a',
|
|
},
|
|
},
|
|
});
|
|
|
|
// Mount the card element
|
|
const cardElementContainer = document.getElementById('card-element');
|
|
if (cardElementContainer) {
|
|
card.mount(cardElementContainer);
|
|
setCardElement(card);
|
|
}
|
|
}
|
|
}, [elements, cardElement]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!stripe || !cardElement) {
|
|
setError('Payment processor not loaded');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
setSuccess(false);
|
|
|
|
try {
|
|
// Create payment method using Stripe Elements
|
|
const { paymentMethod, error: stripeError } = await stripe.createPaymentMethod({
|
|
type: 'card',
|
|
card: cardElement,
|
|
});
|
|
|
|
if (stripeError) {
|
|
setError(stripeError.message || 'Failed to create payment method');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
if (!paymentMethod || !paymentMethod.id) {
|
|
setError('No payment method created');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Call backend to update payment method
|
|
const result = await subscriptionService.updatePaymentMethod(tenantId, paymentMethod.id);
|
|
|
|
if (result.success) {
|
|
setSuccess(true);
|
|
showToast.success(result.message);
|
|
|
|
// Notify parent component about the update
|
|
onPaymentMethodUpdated({
|
|
brand: result.brand,
|
|
last4: result.last4,
|
|
exp_month: result.exp_month,
|
|
exp_year: result.exp_year,
|
|
});
|
|
|
|
// Close modal after a brief delay to show success message
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 2000);
|
|
} else {
|
|
setError(result.message || 'Failed to update payment method');
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Error updating payment method:', err);
|
|
setError(err instanceof Error ? err.message : 'An unexpected error occurred');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setError(null);
|
|
setSuccess(false);
|
|
setPaymentMethodId('');
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<DialogModal
|
|
isOpen={isOpen}
|
|
onClose={handleClose}
|
|
title="Actualizar Método de Pago"
|
|
message={null}
|
|
type="custom"
|
|
size="lg"
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Current Payment Method Info */}
|
|
{currentPaymentMethod && (
|
|
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-2">Método de Pago Actual</h4>
|
|
<div className="flex items-center gap-3">
|
|
<CreditCard className="w-6 h-6 text-blue-500" />
|
|
<div>
|
|
<p className="text-[var(--text-primary)]">
|
|
{currentPaymentMethod.brand} terminando en {currentPaymentMethod.last4}
|
|
</p>
|
|
{currentPaymentMethod.exp_month && currentPaymentMethod.exp_year && (
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Expira: {currentPaymentMethod.exp_month}/{currentPaymentMethod.exp_year}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Payment Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
|
|
Nueva Tarjeta
|
|
</label>
|
|
<div id="card-element" className="p-3 border border-[var(--border-primary)] rounded-lg bg-[var(--bg-primary)]">
|
|
{/* Stripe card element will be mounted here */}
|
|
{!cardElement && !error && (
|
|
<div className="flex items-center gap-2 text-[var(--text-secondary)]">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span>Cargando procesador de pagos...</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-2 text-red-500">
|
|
<AlertCircle className="w-4 h-4" />
|
|
<span className="text-sm">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="p-3 bg-green-500/10 border border-green-500/20 rounded-lg flex items-center gap-2 text-green-500">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-sm">Método de pago actualizado correctamente</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-3 justify-end">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleClose}
|
|
disabled={loading}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
disabled={loading || !cardElement}
|
|
className="flex items-center gap-2"
|
|
>
|
|
{loading && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{loading ? 'Procesando...' : 'Actualizar Método de Pago'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Security Info */}
|
|
<div className="p-3 bg-blue-500/5 border border-blue-500/20 rounded-lg text-sm text-[var(--text-secondary)]">
|
|
<p className="flex items-center gap-2">
|
|
<CreditCard className="w-4 h-4 text-blue-500" />
|
|
<span>Tus datos de pago están protegidos y se procesan de forma segura.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DialogModal>
|
|
);
|
|
}; |