Add subcription feature 2

frontend/src/pages/public/RegisterCompletePage.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Card, Button } from '../../components/ui';
+import { CheckCircle, AlertCircle } from 'lucide-react';
+import { showToast } from '../../utils/toast';
+
+export const RegisterCompletePage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    // Check for Stripe redirect parameters
+    const setupIntent = searchParams.get('setup_intent');
+    const redirectStatus = searchParams.get('redirect_status');
+    const setupIntentClientSecret = searchParams.get('setup_intent_client_secret');
+
+    if (redirectStatus === 'succeeded' && setupIntent) {
+      // Successful 3DS authentication
+      showToast.success(t('auth:register.3ds_success', 'Autenticación 3D Secure completada con éxito'), {
+        title: t('auth:alerts.success', 'Éxito')
+      });
+      
+      // Redirect to login page after successful authentication
+      setTimeout(() => {
+        navigate('/login', {
+          state: {
+            from3DS: true,
+            message: t('auth:register.3ds_complete', 'Tu tarjeta ha sido verificada. Por favor, inicia sesión.')
+          }
+        });
+      }, 3000);
+    } else if (redirectStatus === 'failed') {
+      // Failed 3DS authentication
+      showToast.error(t('auth:register.3ds_failed', 'La autenticación 3D Secure ha fallado'), {
+        title: t('auth:alerts.authentication_error', 'Error de autenticación')
+      });
+      
+      // Redirect to registration page to try again
+      setTimeout(() => {
+        navigate('/register', {
+          state: {
+            error: t('auth:register.3ds_failed_try_again', 'La autenticación 3D Secure ha fallado. Por favor, intenta de nuevo con otra tarjeta.')
+          }
+        });
+      }, 3000);
+    }
+  }, [searchParams, navigate, t]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-bg-primary p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="mb-6">
+          {searchParams.get('redirect_status') === 'succeeded' ? (
+            <CheckCircle className="w-16 h-16 text-success mx-auto mb-4" />
+          ) : (
+            <AlertCircle className="w-16 h-16 text-danger mx-auto mb-4" />
+          )}
+        </div>
+        
+        <h2 className="text-2xl font-bold text-text-primary mb-4">
+          {searchParams.get('redirect_status') === 'succeeded' 
+            ? t('auth:register.processing_3ds', 'Procesando autenticación')
+            : t('auth:register.3ds_error', 'Error de autenticación')}
+        </h2>
+        
+        <p className="text-text-secondary mb-6">
+          {searchParams.get('redirect_status') === 'succeeded' 
+            ? t('auth:register.3ds_redirect_message', 'Tu autenticación 3D Secure se ha completado. Serás redirigido en breve...')
+            : t('auth:register.3ds_failed_message', 'Hubo un problema con la autenticación 3D Secure. Serás redirigido para intentar de nuevo...')}
+        </p>
+        
+        <Button
+          variant="primary"
+          onClick={() => navigate('/login')}
+          className="w-full mb-3"
+        >
+          {t('auth:register.go_to_login', 'Ir a inicio de sesión')}
+        </Button>
+        
+        <Button
+          variant="outline"
+          onClick={() => navigate('/register')}
+          className="w-full"
+        >
+          {t('auth:register.try_again', 'Intentar registro de nuevo')}
+        </Button>
+      </Card>
+    </div>
+  );
+};