Refactor subcription layer
This commit is contained in:
Urtzi Alfaro
@@ -0,0 +1,258 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user