Support subcription payments
This commit is contained in:
Urtzi Alfaro
25
frontend/package-lock.json
generated
25
frontend/package-lock.json
generated
@@ -16,6 +16,8 @@
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@stripe/react-stripe-js": "^2.7.3",
|
||||
"@stripe/stripe-js": "^3.0.10",
|
||||
"@tanstack/react-query": "^5.12.0",
|
||||
"axios": "^1.6.2",
|
||||
"chart.js": "^4.5.0",
|
||||
@@ -5805,6 +5807,29 @@
|
||||
"url": "https://opencollective.com/storybook"
|
||||
}
|
||||
},
|
||||
"node_modules/@stripe/react-stripe-js": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.9.0.tgz",
|
||||
"integrity": "sha512-+/j2g6qKAKuWSurhgRMfdlIdKM+nVVJCy/wl0US2Ccodlqx0WqfIIBhUkeONkCG+V/b+bZzcj4QVa3E/rXtT4Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@stripe/stripe-js": "^1.44.1 || ^2.0.0 || ^3.0.0 || ^4.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@stripe/stripe-js": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.5.0.tgz",
|
||||
"integrity": "sha512-pKS3wZnJoL1iTyGBXAvCwduNNeghJHY6QSRSNNvpYnrrQrLZ6Owsazjyynu0e0ObRgks0i7Rv+pe2M7/MBTZpQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12.16"
|
||||
}
|
||||
},
|
||||
"node_modules/@surma/rollup-plugin-off-main-thread": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
|
||||
|
||||
@@ -26,6 +26,8 @@
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@stripe/react-stripe-js": "^2.7.3",
|
||||
"@stripe/stripe-js": "^3.0.10",
|
||||
"@tanstack/react-query": "^5.12.0",
|
||||
"axios": "^1.6.2",
|
||||
"chart.js": "^4.5.0",
|
||||
|
||||
@@ -85,7 +85,7 @@ export class SubscriptionService {
|
||||
}
|
||||
|
||||
async getAvailablePlans(): Promise<AvailablePlans> {
|
||||
return apiClient.get<AvailablePlans>('/subscriptions/plans');
|
||||
return apiClient.get<AvailablePlans>('/plans');
|
||||
}
|
||||
|
||||
async validatePlanUpgrade(tenantId: string, planKey: string): Promise<PlanUpgradeValidation> {
|
||||
@@ -133,7 +133,7 @@ export class SubscriptionService {
|
||||
}
|
||||
|
||||
try {
|
||||
const plans = await apiClient.get<AvailablePlans>('/subscriptions/plans');
|
||||
const plans = await apiClient.get<AvailablePlans>('/plans');
|
||||
cachedPlans = plans;
|
||||
lastFetchTime = now;
|
||||
return plans;
|
||||
|
||||
285
frontend/src/components/domain/auth/PaymentForm.tsx
Normal file
285
frontend/src/components/domain/auth/PaymentForm.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, Input, Button } from '../../ui';
|
||||
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
|
||||
import { AlertCircle, CheckCircle, CreditCard, Lock } from 'lucide-react';
|
||||
|
||||
interface PaymentFormProps {
|
||||
onPaymentSuccess: () => void;
|
||||
onPaymentError: (error: string) => void;
|
||||
className?: string;
|
||||
bypassPayment?: boolean;
|
||||
onBypassToggle?: () => void;
|
||||
}
|
||||
|
||||
const PaymentForm: React.FC<PaymentFormProps> = ({
|
||||
onPaymentSuccess,
|
||||
onPaymentError,
|
||||
className = '',
|
||||
bypassPayment = false,
|
||||
onBypassToggle
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [cardComplete, setCardComplete] = useState(false);
|
||||
const [billingDetails, setBillingDetails] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
address: {
|
||||
line1: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postal_code: '',
|
||||
country: 'ES',
|
||||
},
|
||||
});
|
||||
|
||||
// For development mode - bypass payment option
|
||||
const handleBypassPayment = () => {
|
||||
if (onBypassToggle) {
|
||||
onBypassToggle();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!stripe || !elements) {
|
||||
// Stripe.js has not loaded yet
|
||||
onPaymentError('Stripe.js no ha cargado correctamente');
|
||||
return;
|
||||
}
|
||||
|
||||
if (bypassPayment) {
|
||||
// In development mode, bypass payment processing
|
||||
onPaymentSuccess();
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Create payment method
|
||||
const { error, paymentMethod } = await stripe.createPaymentMethod({
|
||||
type: 'card',
|
||||
card: elements.getElement('card')!,
|
||||
billing_details: {
|
||||
name: billingDetails.name,
|
||||
email: billingDetails.email,
|
||||
address: billingDetails.address,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) {
|
||||
setError(error.message || 'Error al procesar el pago');
|
||||
onPaymentError(error.message || 'Error al procesar el pago');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// In a real application, you would send the paymentMethod.id to your server
|
||||
// to create a subscription. For now, we'll simulate success.
|
||||
console.log('Payment method created:', paymentMethod);
|
||||
|
||||
onPaymentSuccess();
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Error desconocido al procesar el pago';
|
||||
setError(errorMessage);
|
||||
onPaymentError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardChange = (event: any) => {
|
||||
setError(event.error?.message || null);
|
||||
setCardComplete(event.complete);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`p-6 ${className}`}>
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-xl font-bold text-text-primary mb-2 flex items-center justify-center gap-2">
|
||||
<CreditCard className="w-5 h-5" />
|
||||
{t('auth:payment.payment_info', 'Información de Pago')}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-sm">
|
||||
{t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Development mode toggle */}
|
||||
<div className="mb-6 p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Lock className="w-4 h-4 text-yellow-600" />
|
||||
<span className="text-sm text-yellow-800">
|
||||
{t('auth:payment.dev_mode', 'Modo Desarrollo')}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant={bypassPayment ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={handleBypassPayment}
|
||||
>
|
||||
{bypassPayment
|
||||
? t('auth:payment.payment_bypassed', 'Pago Bypassed')
|
||||
: t('auth:payment.bypass_payment', 'Bypass Pago')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{!bypassPayment && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Billing Details */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<Input
|
||||
label={t('auth:payment.cardholder_name', 'Nombre del titular')}
|
||||
placeholder="Nombre completo"
|
||||
value={billingDetails.name}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, name: e.target.value})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth:payment.email', 'Correo electrónico')}
|
||||
placeholder="tu.email@ejemplo.com"
|
||||
value={billingDetails.email}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, email: e.target.value})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label={t('auth:payment.address_line1', 'Dirección')}
|
||||
placeholder="Calle y número"
|
||||
value={billingDetails.address.line1}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, line1: e.target.value}})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('auth:payment.city', 'Ciudad')}
|
||||
placeholder="Ciudad"
|
||||
value={billingDetails.address.city}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, city: e.target.value}})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Input
|
||||
label={t('auth:payment.state', 'Estado/Provincia')}
|
||||
placeholder="Estado"
|
||||
value={billingDetails.address.state}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, state: e.target.value}})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('auth:payment.postal_code', 'Código Postal')}
|
||||
placeholder="Código postal"
|
||||
value={billingDetails.address.postal_code}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, postal_code: e.target.value}})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('auth:payment.country', 'País')}
|
||||
placeholder="País"
|
||||
value={billingDetails.address.country}
|
||||
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, country: e.target.value}})}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Element */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
{t('auth:payment.card_details', 'Detalles de la tarjeta')}
|
||||
</label>
|
||||
<div className="border border-border-primary rounded-lg p-3 bg-bg-primary">
|
||||
<CardElement
|
||||
options={{
|
||||
style: {
|
||||
base: {
|
||||
fontSize: '16px',
|
||||
color: '#424770',
|
||||
'::placeholder': {
|
||||
color: '#aab7c4',
|
||||
},
|
||||
},
|
||||
invalid: {
|
||||
color: '#9e2146',
|
||||
},
|
||||
},
|
||||
}}
|
||||
onChange={handleCardChange}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-text-tertiary mt-2 flex items-center gap-1">
|
||||
<Lock className="w-3 h-3" />
|
||||
{t('auth:payment.card_info_secure', 'Tu información de tarjeta está segura')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="mb-4 bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3" role="alert">
|
||||
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
isLoading={loading}
|
||||
loadingText="Procesando pago..."
|
||||
disabled={!stripe || loading || (!cardComplete && !bypassPayment)}
|
||||
className="w-full"
|
||||
>
|
||||
{t('auth:payment.process_payment', 'Procesar Pago')}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{bypassPayment && (
|
||||
<div className="text-center py-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
|
||||
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-text-primary mb-2">
|
||||
{t('auth:payment.payment_bypassed_title', 'Pago Bypassed')}
|
||||
</h4>
|
||||
<p className="text-text-secondary mb-6">
|
||||
{t('auth:payment.payment_bypassed_description', 'El proceso de pago ha sido omitido en modo desarrollo. El registro continuará normalmente.')}
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={onPaymentSuccess}
|
||||
className="w-full"
|
||||
>
|
||||
{t('auth:payment.continue_registration', 'Continuar con el Registro')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentForm;
|
||||
@@ -4,6 +4,13 @@ import { Button, Input, Card } from '../../ui';
|
||||
import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
|
||||
import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
|
||||
import { useToast } from '../../../hooks/ui/useToast';
|
||||
import { SubscriptionSelection } from './SubscriptionSelection';
|
||||
import PaymentForm from './PaymentForm';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { Elements } from '@stripe/react-stripe-js';
|
||||
|
||||
// Initialize Stripe - In production, use environment variable
|
||||
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345');
|
||||
|
||||
interface RegisterFormProps {
|
||||
onSuccess?: () => void;
|
||||
@@ -19,6 +26,9 @@ interface SimpleUserRegistration {
|
||||
acceptTerms: boolean;
|
||||
}
|
||||
|
||||
// Define the steps for the registration process
|
||||
type RegistrationStep = 'basic_info' | 'subscription' | 'payment';
|
||||
|
||||
export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||
onSuccess,
|
||||
onLoginClick,
|
||||
@@ -41,9 +51,15 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||
const isLoading = useAuthLoading();
|
||||
const error = useAuthError();
|
||||
const { success: showSuccessToast, error: showErrorToast } = useToast();
|
||||
|
||||
|
||||
// Multi-step form state
|
||||
const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
|
||||
const [selectedPlan, setSelectedPlan] = useState<string>('starter');
|
||||
const [useTrial, setUseTrial] = useState<boolean>(false);
|
||||
const [bypassPayment, setBypassPayment] = useState<boolean>(false);
|
||||
|
||||
// Helper function to determine password match status
|
||||
const getPasswordMatchStatus = () => {
|
||||
const getPasswordMatchStatus = () => {
|
||||
if (!formData.confirmPassword) return 'empty';
|
||||
if (formData.password === formData.confirmPassword) return 'match';
|
||||
return 'mismatch';
|
||||
@@ -89,19 +105,35 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
const handleNextStep = () => {
|
||||
if (currentStep === 'basic_info') {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
setCurrentStep('subscription');
|
||||
} else if (currentStep === 'subscription') {
|
||||
setCurrentStep('payment');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handlePreviousStep = () => {
|
||||
if (currentStep === 'subscription') {
|
||||
setCurrentStep('basic_info');
|
||||
} else if (currentStep === 'payment') {
|
||||
setCurrentStep('subscription');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegistrationSubmit = async (paymentMethodId?: string) => {
|
||||
try {
|
||||
const registrationData = {
|
||||
full_name: formData.full_name,
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
tenant_name: 'Default Bakery', // Default value since we're not collecting it
|
||||
subscription_plan: selectedPlan,
|
||||
use_trial: useTrial,
|
||||
payment_method_id: paymentMethodId,
|
||||
};
|
||||
|
||||
await register(registrationData);
|
||||
@@ -115,239 +147,373 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||
title: t('auth:alerts.error_create', 'Error al crear la cuenta')
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = () => {
|
||||
handleRegistrationSubmit(); // In a real app, you would pass the payment method ID
|
||||
};
|
||||
|
||||
const handleInputChange = (field: keyof SimpleUserRegistration) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handlePaymentError = (errorMessage: string) => {
|
||||
showErrorToast(errorMessage, {
|
||||
title: 'Error en el pago'
|
||||
});
|
||||
};
|
||||
|
||||
const handleInputChange = (field: keyof SimpleUserRegistration) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: undefined }));
|
||||
}
|
||||
};
|
||||
|
||||
// Render step indicator
|
||||
const renderStepIndicator = () => (
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`flex items-center justify-center w-8 h-8 rounded-full ${
|
||||
currentStep === 'basic_info' ? 'bg-color-primary text-white' :
|
||||
currentStep === 'subscription' || currentStep === 'payment' ? 'bg-color-success text-white' : 'bg-bg-secondary text-text-secondary'
|
||||
}`}>
|
||||
1
|
||||
</div>
|
||||
<div className="h-1 w-16 bg-border-primary"></div>
|
||||
<div className={`flex items-center justify-center w-8 h-8 rounded-full ${
|
||||
currentStep === 'subscription' ? 'bg-color-primary text-white' :
|
||||
currentStep === 'payment' ? 'bg-color-success text-white' : 'bg-bg-secondary text-text-secondary'
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
<div className="h-1 w-16 bg-border-primary"></div>
|
||||
<div className={`flex items-center justify-center w-8 h-8 rounded-full ${
|
||||
currentStep === 'payment' ? 'bg-color-primary text-white' : 'bg-bg-secondary text-text-secondary'
|
||||
}`}>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Render current step
|
||||
const renderCurrentStep = () => {
|
||||
switch (currentStep) {
|
||||
case 'basic_info':
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-text-primary mb-2">
|
||||
{t('auth:register.title', 'Crear Cuenta')}
|
||||
</h1>
|
||||
<p className="text-text-secondary text-lg">
|
||||
{t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
|
||||
</p>
|
||||
<p className="text-sm text-text-tertiary mt-2">
|
||||
Paso 1 de 3: Información Básica
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleNextStep(); }} className="space-y-6">
|
||||
<Input
|
||||
label={t('auth:register.first_name', 'Nombre Completo')}
|
||||
placeholder="Juan Pérez García"
|
||||
value={formData.full_name}
|
||||
onChange={handleInputChange('full_name')}
|
||||
error={errors.full_name}
|
||||
disabled={isLoading}
|
||||
required
|
||||
autoComplete="name"
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth:register.email', 'Correo Electrónico')}
|
||||
placeholder="tu.email@ejemplo.com"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={isLoading}
|
||||
required
|
||||
autoComplete="email"
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Contraseña"
|
||||
placeholder="Contraseña segura"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange('password')}
|
||||
error={errors.password}
|
||||
disabled={isLoading}
|
||||
maxLength={128}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
}
|
||||
rightIcon={
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="text-text-secondary hover:text-text-primary"
|
||||
aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
>
|
||||
{showPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Password Criteria - Show when user is typing */}
|
||||
{formData.password && (
|
||||
<PasswordCriteria
|
||||
password={formData.password}
|
||||
className="mt-2"
|
||||
showOnlyFailed={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
label="Confirmar Contraseña"
|
||||
placeholder="Repite tu contraseña"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange('confirmPassword')}
|
||||
error={errors.confirmPassword}
|
||||
disabled={isLoading}
|
||||
maxLength={128}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className={
|
||||
passwordMatchStatus === 'match' && formData.confirmPassword
|
||||
? 'border-color-success focus:border-color-success ring-color-success'
|
||||
: passwordMatchStatus === 'mismatch' && formData.confirmPassword
|
||||
? 'border-color-error focus:border-color-error ring-color-error'
|
||||
: ''
|
||||
}
|
||||
leftIcon={
|
||||
passwordMatchStatus === 'match' && formData.confirmPassword ? (
|
||||
<svg className="w-5 h-5 text-color-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
) : passwordMatchStatus === 'mismatch' && formData.confirmPassword ? (
|
||||
<svg className="w-5 h-5 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
rightIcon={
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="text-text-secondary hover:text-text-primary"
|
||||
aria-label={showConfirmPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Password Match Status Message */}
|
||||
{formData.confirmPassword && (
|
||||
<div className="mt-2 transition-all duration-300 ease-in-out">
|
||||
{passwordMatchStatus === 'match' ? (
|
||||
<div className="flex items-center space-x-2 text-color-success animate-fade-in">
|
||||
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-success/10 flex items-center justify-center">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium">¡Las contraseñas coinciden!</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-2 text-color-error animate-fade-in">
|
||||
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-error/10 flex items-center justify-center">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Las contraseñas no coinciden</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-4 border-t border-border-primary">
|
||||
<div className="flex items-start space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="acceptTerms"
|
||||
checked={formData.acceptTerms}
|
||||
onChange={handleInputChange('acceptTerms')}
|
||||
className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<label htmlFor="acceptTerms" className="text-sm text-text-secondary cursor-pointer">
|
||||
Acepto los{' '}
|
||||
<a href="#" className="text-color-primary hover:text-color-primary-dark underline">
|
||||
términos y condiciones
|
||||
</a>{' '}
|
||||
de uso
|
||||
</label>
|
||||
</div>
|
||||
{errors.acceptTerms && (
|
||||
<p className="text-color-error text-sm ml-7">{errors.acceptTerms}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<div></div> {/* Spacer for alignment */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
|
||||
className="w-48"
|
||||
>
|
||||
Siguiente
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'subscription':
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-text-primary mb-2">
|
||||
{t('auth:subscription.select_plan', 'Selecciona tu plan')}
|
||||
</h1>
|
||||
<p className="text-text-secondary text-lg">
|
||||
{t('auth:subscription.choose_plan', 'Elige el plan que mejor se adapte a tu negocio')}
|
||||
</p>
|
||||
<p className="text-sm text-text-tertiary mt-2">
|
||||
Paso 2 de 3: Plan de Suscripción
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SubscriptionSelection
|
||||
selectedPlan={selectedPlan}
|
||||
onPlanSelect={setSelectedPlan}
|
||||
showTrialOption={true}
|
||||
onTrialSelect={setUseTrial}
|
||||
trialSelected={useTrial}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={handlePreviousStep}
|
||||
disabled={isLoading}
|
||||
className="w-48"
|
||||
>
|
||||
Anterior
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="lg"
|
||||
onClick={handleNextStep}
|
||||
disabled={isLoading}
|
||||
className="w-48"
|
||||
>
|
||||
Siguiente
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'payment':
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-text-primary mb-2">
|
||||
{t('auth:payment.payment_info', 'Información de Pago')}
|
||||
</h1>
|
||||
<p className="text-text-secondary text-lg">
|
||||
{t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
|
||||
</p>
|
||||
<p className="text-sm text-text-tertiary mt-2">
|
||||
Paso 3 de 3: Procesamiento de Pago
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Elements stripe={stripePromise}>
|
||||
<PaymentForm
|
||||
onPaymentSuccess={handlePaymentSuccess}
|
||||
onPaymentError={handlePaymentError}
|
||||
bypassPayment={bypassPayment}
|
||||
onBypassToggle={() => setBypassPayment(!bypassPayment)}
|
||||
/>
|
||||
</Elements>
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={handlePreviousStep}
|
||||
disabled={isLoading}
|
||||
className="w-48"
|
||||
>
|
||||
Anterior
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`p-8 w-full max-w-md ${className || ''}`} role="main">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-text-primary mb-2">
|
||||
{t('auth:register.title', 'Crear Cuenta')}
|
||||
</h1>
|
||||
<p className="text-text-secondary text-lg">
|
||||
{t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
|
||||
</p>
|
||||
</div>
|
||||
<Card className={`p-8 w-full max-w-3xl ${className || ''}`} role="main">
|
||||
{renderStepIndicator()}
|
||||
{renderCurrentStep()}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<Input
|
||||
label={t('auth:register.first_name', 'Nombre Completo')}
|
||||
placeholder="Juan Pérez García"
|
||||
value={formData.full_name}
|
||||
onChange={handleInputChange('full_name')}
|
||||
error={errors.full_name}
|
||||
disabled={isLoading}
|
||||
required
|
||||
autoComplete="name"
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="email"
|
||||
label={t('auth:register.email', 'Correo Electrónico')}
|
||||
placeholder="tu.email@ejemplo.com"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange('email')}
|
||||
error={errors.email}
|
||||
disabled={isLoading}
|
||||
required
|
||||
autoComplete="email"
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
label="Contraseña"
|
||||
placeholder="Contraseña segura"
|
||||
value={formData.password}
|
||||
onChange={handleInputChange('password')}
|
||||
error={errors.password}
|
||||
disabled={isLoading}
|
||||
maxLength={128}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
leftIcon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
}
|
||||
rightIcon={
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="text-text-secondary hover:text-text-primary"
|
||||
aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
>
|
||||
{showPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Password Criteria - Show when user is typing */}
|
||||
{formData.password && (
|
||||
<PasswordCriteria
|
||||
password={formData.password}
|
||||
className="mt-2"
|
||||
showOnlyFailed={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
label="Confirmar Contraseña"
|
||||
placeholder="Repite tu contraseña"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleInputChange('confirmPassword')}
|
||||
error={errors.confirmPassword}
|
||||
disabled={isLoading}
|
||||
maxLength={128}
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className={
|
||||
passwordMatchStatus === 'match' && formData.confirmPassword
|
||||
? 'border-color-success focus:border-color-success ring-color-success'
|
||||
: passwordMatchStatus === 'mismatch' && formData.confirmPassword
|
||||
? 'border-color-error focus:border-color-error ring-color-error'
|
||||
: ''
|
||||
}
|
||||
leftIcon={
|
||||
passwordMatchStatus === 'match' && formData.confirmPassword ? (
|
||||
<svg className="w-5 h-5 text-color-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
) : passwordMatchStatus === 'mismatch' && formData.confirmPassword ? (
|
||||
<svg className="w-5 h-5 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
rightIcon={
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="text-text-secondary hover:text-text-primary"
|
||||
aria-label={showConfirmPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Password Match Status Message */}
|
||||
{formData.confirmPassword && (
|
||||
<div className="mt-2 transition-all duration-300 ease-in-out">
|
||||
{passwordMatchStatus === 'match' ? (
|
||||
<div className="flex items-center space-x-2 text-color-success animate-fade-in">
|
||||
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-success/10 flex items-center justify-center">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium">¡Las contraseñas coinciden!</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-2 text-color-error animate-fade-in">
|
||||
<div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-error/10 flex items-center justify-center">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Las contraseñas no coinciden</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-4 border-t border-border-primary">
|
||||
<div className="flex items-start space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="acceptTerms"
|
||||
checked={formData.acceptTerms}
|
||||
onChange={handleInputChange('acceptTerms')}
|
||||
className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<label htmlFor="acceptTerms" className="text-sm text-text-secondary cursor-pointer">
|
||||
Acepto los{' '}
|
||||
<a href="#" className="text-color-primary hover:text-color-primary-dark underline">
|
||||
términos y condiciones
|
||||
</a>{' '}
|
||||
de uso
|
||||
</label>
|
||||
</div>
|
||||
{errors.acceptTerms && (
|
||||
<p className="text-color-error text-sm ml-7">{errors.acceptTerms}</p>
|
||||
)}
|
||||
{error && currentStep !== 'payment' && (
|
||||
<div className="bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3 mt-4" role="alert">
|
||||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
loadingText="Creando cuenta..."
|
||||
disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
|
||||
className="w-full"
|
||||
onClick={(e) => {
|
||||
console.log('Button clicked!');
|
||||
// Let form submit handle it naturally
|
||||
}}
|
||||
>
|
||||
Crear Cuenta
|
||||
</Button>
|
||||
|
||||
{error && (
|
||||
<div className="bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3" role="alert">
|
||||
<svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Login Link */}
|
||||
{onLoginClick && (
|
||||
{/* Login Link - only show on first step */}
|
||||
{onLoginClick && currentStep === 'basic_info' && (
|
||||
<div className="mt-8 text-center border-t border-border-primary pt-6">
|
||||
<p className="text-text-secondary mb-4">
|
||||
¿Ya tienes una cuenta?
|
||||
@@ -366,4 +532,4 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterForm;
|
||||
export default RegisterForm;
|
||||
|
||||
237
frontend/src/components/domain/auth/SubscriptionSelection.tsx
Normal file
237
frontend/src/components/domain/auth/SubscriptionSelection.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, Button, Badge } from '../../ui';
|
||||
import { CheckCircle, Users, MapPin, Package, TrendingUp, Star, ArrowRight } from 'lucide-react';
|
||||
import { subscriptionService, type AvailablePlans } from '../../../api';
|
||||
|
||||
interface SubscriptionSelectionProps {
|
||||
selectedPlan: string;
|
||||
onPlanSelect: (planKey: string) => void;
|
||||
showTrialOption?: boolean;
|
||||
onTrialSelect?: (useTrial: boolean) => void;
|
||||
trialSelected?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const SubscriptionSelection: React.FC<SubscriptionSelectionProps> = ({
|
||||
selectedPlan,
|
||||
onPlanSelect,
|
||||
showTrialOption = false,
|
||||
onTrialSelect,
|
||||
trialSelected = false,
|
||||
className = ''
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPlans = async () => {
|
||||
try {
|
||||
const plans = await subscriptionService.getAvailablePlans();
|
||||
setAvailablePlans(plans);
|
||||
} catch (error) {
|
||||
console.error('Error fetching subscription plans:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPlans();
|
||||
}, []);
|
||||
|
||||
if (loading || !availablePlans) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleTrialToggle = () => {
|
||||
if (onTrialSelect) {
|
||||
onTrialSelect(!trialSelected);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`space-y-6 ${className}`}>
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-2xl font-bold text-text-primary mb-2">
|
||||
{t('auth:subscription.select_plan', 'Selecciona tu plan')}
|
||||
</h2>
|
||||
<p className="text-text-secondary">
|
||||
{t('auth:subscription.choose_plan', 'Elige el plan que mejor se adapte a tu negocio')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{showTrialOption && (
|
||||
<Card className="p-4 mb-6 bg-blue-50 border-blue-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<Star className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-text-primary">
|
||||
{t('auth:subscription.trial_title', 'Prueba gratuita')}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{t('auth:subscription.trial_description', 'Obtén 3 meses de prueba gratuita como usuario piloto')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant={trialSelected ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={handleTrialToggle}
|
||||
>
|
||||
{trialSelected
|
||||
? t('auth:subscription.trial_active', 'Activo')
|
||||
: t('auth:subscription.trial_activate', 'Activar')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{Object.entries(availablePlans.plans).map(([planKey, plan]) => {
|
||||
const isSelected = selectedPlan === planKey;
|
||||
const getPlanColor = () => {
|
||||
switch (planKey) {
|
||||
case 'starter': return 'border-blue-500/30 bg-blue-500/5';
|
||||
case 'professional': return 'border-purple-500/30 bg-purple-500/5';
|
||||
case 'enterprise': return 'border-amber-500/30 bg-amber-500/5';
|
||||
default: return 'border-border-primary bg-bg-secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={planKey}
|
||||
className={`relative p-6 cursor-pointer transition-all duration-200 hover:shadow-lg ${
|
||||
getPlanColor()
|
||||
} ${isSelected ? 'ring-2 ring-color-primary' : ''}`}
|
||||
onClick={() => onPlanSelect(planKey)}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<Badge variant="primary" className="px-3 py-1">
|
||||
<Star className="w-3 h-3 mr-1" />
|
||||
{t('auth:subscription.popular', 'Más Popular')}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h4 className="text-xl font-bold text-text-primary mb-2">{plan.name}</h4>
|
||||
<div className="text-3xl font-bold text-color-primary mb-1">
|
||||
{subscriptionService.formatPrice(plan.monthly_price)}
|
||||
<span className="text-lg text-text-secondary">/mes</span>
|
||||
</div>
|
||||
<p className="text-sm text-text-secondary">{plan.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Users className="w-4 h-4 text-color-primary" />
|
||||
<span>{plan.max_users === -1 ? 'Usuarios ilimitados' : `${plan.max_users} usuarios`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<MapPin className="w-4 h-4 text-color-primary" />
|
||||
<span>{plan.max_locations === -1 ? 'Ubicaciones ilimitadas' : `${plan.max_locations} ubicación${plan.max_locations > 1 ? 'es' : ''}`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Package className="w-4 h-4 text-color-primary" />
|
||||
<span>{plan.max_products === -1 ? 'Productos ilimitados' : `${plan.max_products} productos`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div className="border-t border-border-color pt-4 mb-6">
|
||||
<h5 className="text-sm font-semibold text-text-primary mb-3 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2 text-color-primary" />
|
||||
{t('auth:subscription.features', 'Funcionalidades Incluidas')}
|
||||
</h5>
|
||||
<div className="space-y-2">
|
||||
{(() => {
|
||||
const getPlanFeatures = (planKey: string) => {
|
||||
switch (planKey) {
|
||||
case 'starter':
|
||||
return [
|
||||
'✓ Panel de Control Básico',
|
||||
'✓ Gestión de Inventario',
|
||||
'✓ Gestión de Pedidos',
|
||||
'✓ Gestión de Proveedores',
|
||||
'✓ Punto de Venta Básico',
|
||||
'✗ Analytics Avanzados',
|
||||
'✗ Pronósticos IA',
|
||||
'✗ Insights Predictivos'
|
||||
];
|
||||
case 'professional':
|
||||
return [
|
||||
'✓ Panel de Control Avanzado',
|
||||
'✓ Gestión de Inventario Completa',
|
||||
'✓ Analytics de Ventas',
|
||||
'✓ Pronósticos con IA (92% precisión)',
|
||||
'✓ Análisis de Rendimiento',
|
||||
'✓ Optimización de Producción',
|
||||
'✓ Integración POS',
|
||||
'✗ Insights Predictivos Avanzados'
|
||||
];
|
||||
case 'enterprise':
|
||||
return [
|
||||
'✓ Todas las funcionalidades Professional',
|
||||
'✓ Insights Predictivos con IA',
|
||||
'✓ Analytics Multi-ubicación',
|
||||
'✓ Integración ERP',
|
||||
'✓ API Personalizada',
|
||||
'✓ Gestor de Cuenta Dedicado',
|
||||
'✓ Soporte 24/7 Prioritario',
|
||||
'✓ Demo Personalizada'
|
||||
];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
return getPlanFeatures(planKey).map((feature, index) => (
|
||||
<div key={index} className={`text-xs flex items-center gap-2 ${
|
||||
feature.startsWith('✓')
|
||||
? 'text-green-600'
|
||||
: 'text-text-secondary opacity-60'
|
||||
}`}>
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant={isSelected ? "primary" : plan.popular ? "primary" : "outline"}
|
||||
className="w-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onPlanSelect(planKey);
|
||||
}}
|
||||
>
|
||||
{isSelected ? (
|
||||
<>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{t('auth:subscription.selected', 'Seleccionado')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t('auth:subscription.select', 'Seleccionar Plan')}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -107,13 +107,6 @@ export const StatusCard: React.FC<StatusCardProps> = ({
|
||||
const primaryActions = sortedActions.filter(action => action.priority === 'primary');
|
||||
const secondaryActions = sortedActions.filter(action => action.priority !== 'primary');
|
||||
|
||||
// Debug logging for actions
|
||||
if (actions.length > 0) {
|
||||
console.log('StatusCard - Title:', title, 'Actions received:', actions.length);
|
||||
console.log('StatusCard - Actions:', actions);
|
||||
console.log('StatusCard - Primary actions:', primaryActions.length, primaryActions);
|
||||
console.log('StatusCard - Secondary actions:', secondaryActions.length, secondaryActions);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
|
||||
@@ -162,5 +162,37 @@
|
||||
"manage_sales": "Gestionar ventas",
|
||||
"view_reports": "Ver reportes",
|
||||
"manage_settings": "Gestionar configuración"
|
||||
},
|
||||
"subscription": {
|
||||
"select_plan": "Selecciona tu plan",
|
||||
"choose_plan": "Elige el plan que mejor se adapte a tu negocio",
|
||||
"trial_title": "Prueba gratuita",
|
||||
"trial_description": "Obtén 3 meses de prueba gratuita como usuario piloto",
|
||||
"trial_activate": "Activar",
|
||||
"trial_active": "Activo",
|
||||
"features": "Funcionalidades Incluidas",
|
||||
"selected": "Seleccionado",
|
||||
"popular": "Más Popular",
|
||||
"select": "Seleccionar Plan"
|
||||
},
|
||||
"payment": {
|
||||
"payment_info": "Información de Pago",
|
||||
"secure_payment": "Tu información de pago está protegida con encriptación de extremo a extremo",
|
||||
"dev_mode": "Modo Desarrollo",
|
||||
"payment_bypassed": "Pago Bypassed",
|
||||
"bypass_payment": "Bypass Pago",
|
||||
"cardholder_name": "Nombre del titular",
|
||||
"email": "Correo electrónico",
|
||||
"address_line1": "Dirección",
|
||||
"city": "Ciudad",
|
||||
"state": "Estado/Provincia",
|
||||
"postal_code": "Código Postal",
|
||||
"country": "País",
|
||||
"card_details": "Detalles de la tarjeta",
|
||||
"card_info_secure": "Tu información de tarjeta está segura",
|
||||
"process_payment": "Procesar Pago",
|
||||
"payment_bypassed_title": "Pago Bypassed",
|
||||
"payment_bypassed_description": "El proceso de pago ha sido omitido en modo desarrollo. El registro continuará normalmente.",
|
||||
"continue_registration": "Continuar con el Registro"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download } from 'lucide-react';
|
||||
import { Crown, Users, MapPin, Package, TrendingUp, RefreshCw, AlertCircle, CheckCircle, ArrowRight, Star, ExternalLink, Download, CreditCard, X } from 'lucide-react';
|
||||
import { Button, Card, Badge, Modal } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
@@ -18,6 +18,10 @@ const SubscriptionPage: React.FC = () => {
|
||||
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
|
||||
const [selectedPlan, setSelectedPlan] = useState<string>('');
|
||||
const [upgrading, setUpgrading] = useState(false);
|
||||
const [cancellationDialogOpen, setCancellationDialogOpen] = useState(false);
|
||||
const [cancelling, setCancelling] = useState(false);
|
||||
const [invoices, setInvoices] = useState<any[]>([]);
|
||||
const [invoicesLoading, setInvoicesLoading] = useState(false);
|
||||
|
||||
// Load subscription data on component mount
|
||||
React.useEffect(() => {
|
||||
@@ -94,6 +98,70 @@ const SubscriptionPage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancellationClick = () => {
|
||||
setCancellationDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleCancelSubscription = async () => {
|
||||
const tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
if (!tenantId) {
|
||||
addToast('Información de tenant no disponible', { type: 'error' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setCancelling(true);
|
||||
|
||||
// In a real implementation, this would call an API endpoint to cancel the subscription
|
||||
// const result = await subscriptionService.cancelSubscription(tenantId);
|
||||
|
||||
// For now, we'll simulate the cancellation
|
||||
addToast('Tu suscripción ha sido cancelada', { type: 'success' });
|
||||
|
||||
await loadSubscriptionData();
|
||||
setCancellationDialogOpen(false);
|
||||
} catch (error) {
|
||||
console.error('Error cancelling subscription:', error);
|
||||
addToast('Error al cancelar la suscripción', { type: 'error' });
|
||||
} finally {
|
||||
setCancelling(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadInvoices = async () => {
|
||||
const tenantId = currentTenant?.id || user?.tenant_id;
|
||||
|
||||
if (!tenantId) {
|
||||
addToast('No se encontró información del tenant', { type: 'error' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setInvoicesLoading(true);
|
||||
// In a real implementation, this would call an API endpoint to get invoices
|
||||
// const invoices = await subscriptionService.getInvoices(tenantId);
|
||||
|
||||
// For now, we'll simulate some invoices
|
||||
setInvoices([
|
||||
{ id: 'inv_001', date: '2023-10-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
||||
{ id: 'inv_002', date: '2023-09-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
||||
{ id: 'inv_003', date: '2023-08-01', amount: 49.00, status: 'paid', description: 'Plan Starter Mensual' },
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Error loading invoices:', error);
|
||||
addToast('Error al cargar las facturas', { type: 'error' });
|
||||
} finally {
|
||||
setInvoicesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadInvoice = (invoiceId: string) => {
|
||||
// In a real implementation, this would download the actual invoice
|
||||
console.log(`Downloading invoice: ${invoiceId}`);
|
||||
addToast(`Descargando factura ${invoiceId}`, { type: 'info' });
|
||||
};
|
||||
|
||||
const ProgressBar: React.FC<{ value: number; className?: string }> = ({ value, className = '' }) => {
|
||||
const getProgressColor = () => {
|
||||
if (value >= 90) return 'bg-red-500';
|
||||
@@ -148,7 +216,7 @@ const SubscriptionPage: React.FC = () => {
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
||||
<Crown className="w-5 h-5 mr-2 text-yellow-500" />
|
||||
Plan Actual: {subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}
|
||||
Plan Actual: {usageSummary.plan}
|
||||
</h3>
|
||||
<Badge
|
||||
variant={usageSummary.status === 'active' ? 'success' : 'default'}
|
||||
@@ -418,6 +486,118 @@ const SubscriptionPage: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Invoices Section */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center">
|
||||
<Download className="w-5 h-5 mr-2 text-blue-500" />
|
||||
Historial de Facturas
|
||||
</h3>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={loadInvoices}
|
||||
disabled={invoicesLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${invoicesLoading ? 'animate-spin' : ''}`} />
|
||||
{invoicesLoading ? 'Cargando...' : 'Actualizar'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{invoicesLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
|
||||
<p className="text-[var(--text-secondary)]">Cargando facturas...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : invoices.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-[var(--text-secondary)]">No hay facturas disponibles</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--border-color)]">
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">ID</th>
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Fecha</th>
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Descripción</th>
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Monto</th>
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Estado</th>
|
||||
<th className="text-left py-3 px-4 text-[var(--text-secondary)] font-medium">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invoices.map((invoice) => (
|
||||
<tr key={invoice.id} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
|
||||
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.id}</td>
|
||||
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.date}</td>
|
||||
<td className="py-3 px-4 text-[var(--text-primary)]">{invoice.description}</td>
|
||||
<td className="py-3 px-4 text-[var(--text-primary)]">{subscriptionService.formatPrice(invoice.amount)}</td>
|
||||
<td className="py-3 px-4">
|
||||
<Badge variant={invoice.status === 'paid' ? 'success' : 'default'}>
|
||||
{invoice.status === 'paid' ? 'Pagada' : 'Pendiente'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDownloadInvoice(invoice.id)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Descargar
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Subscription Management */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
||||
<CreditCard className="w-5 h-5 mr-2 text-red-500" />
|
||||
Gestión de Suscripción
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-[var(--text-primary)] mb-2">Cancelar Suscripción</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
||||
Si cancelas tu suscripción, perderás acceso a las funcionalidades premium al final del período de facturación actual.
|
||||
</p>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleCancellationClick}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Cancelar Suscripción
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-[var(--text-primary)] mb-2">Método de Pago</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
||||
Actualiza tu información de pago para asegurar la continuidad de tu servicio.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<CreditCard className="w-4 h-4" />
|
||||
Actualizar Método de Pago
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -436,7 +616,7 @@ const SubscriptionPage: React.FC = () => {
|
||||
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Plan actual:</span>
|
||||
<span>{subscriptionService.getPlanDisplayInfo(usageSummary.plan).name}</span>
|
||||
<span>{usageSummary.plan}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Nuevo plan:</span>
|
||||
@@ -469,8 +649,44 @@ const SubscriptionPage: React.FC = () => {
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* Cancellation Modal */}
|
||||
{cancellationDialogOpen && (
|
||||
<Modal
|
||||
isOpen={cancellationDialogOpen}
|
||||
onClose={() => setCancellationDialogOpen(false)}
|
||||
title="Cancelar Suscripción"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
¿Estás seguro de que deseas cancelar tu suscripción? Esta acción no se puede deshacer.
|
||||
</p>
|
||||
<p className="text-[var(--text-secondary)]">
|
||||
Perderás acceso a las funcionalidades premium al final del período de facturación actual.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setCancellationDialogOpen(false)}
|
||||
className="flex-1"
|
||||
>
|
||||
Volver
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleCancelSubscription}
|
||||
disabled={cancelling}
|
||||
className="flex-1"
|
||||
>
|
||||
{cancelling ? 'Cancelando...' : 'Confirmar Cancelación'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionPage;
|
||||
export default SubscriptionPage;
|
||||
|
||||
Reference in New Issue
Block a user