Improve public pages

frontend/src/components/domain/auth/RegisterForm.tsx

@@ -6,9 +6,11 @@ import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/au
 import { useToast } from '../../../hooks/ui/useToast';
 import { SubscriptionSelection } from './SubscriptionSelection';
 import PaymentForm from './PaymentForm';
+import PilotBanner from './PilotBanner';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import { CheckCircle } from 'lucide-react';
+import { usePilotDetection } from '../../../hooks/usePilotDetection';
 
 // Initialize Stripe - In production, use environment variable
 const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345');
@@ -47,20 +49,23 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     marketingConsent: false,
     analyticsConsent: false
   });
-  
+
   const [errors, setErrors] = useState<Partial<SimpleUserRegistration>>({});
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  
+
   const { register } = useAuthActions();
   const isLoading = useAuthLoading();
   const error = useAuthError();
   const { success: showSuccessToast, error: showErrorToast } = useToast();
-  
+
+  // Detect pilot program participation
+  const { isPilot, couponCode, trialMonths } = usePilotDetection();
+
   // Multi-step form state
- const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
+  const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
   const [selectedPlan, setSelectedPlan] = useState<string>('starter');
-  const [useTrial, setUseTrial] = useState<boolean>(false);
+  const [useTrial, setUseTrial] = useState<boolean>(isPilot);  // Auto-enable trial for pilot customers
   const [bypassPayment, setBypassPayment] = useState<boolean>(false);
   
   // Helper function to determine password match status
@@ -139,6 +144,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         subscription_plan: selectedPlan,
         use_trial: useTrial,
         payment_method_id: paymentMethodId,
+        // Include coupon code if pilot customer
+        coupon_code: isPilot ? couponCode : undefined,
         // Include consent data
         terms_accepted: formData.acceptTerms,
         privacy_accepted: formData.acceptTerms,
@@ -148,7 +155,11 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
       await register(registrationData);
 
-      showSuccessToast(t('auth:register.registering', '¡Bienvenido! Tu cuenta ha sido creada correctamente.'), {
+      const successMessage = isPilot
+        ? '¡Bienvenido al programa piloto! Tu cuenta ha sido creada con 3 meses gratis.'
+        : '¡Bienvenido! Tu cuenta ha sido creada correctamente.';
+
+      showSuccessToast(t('auth:register.registering', successMessage), {
         title: t('auth:alerts.success_create', 'Cuenta creada exitosamente')
       });
       onSuccess?.();
@@ -157,7 +168,7 @@ 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
@@ -486,10 +497,14 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               </p>
             </div>
 
+            {isPilot && couponCode && (
+              <PilotBanner couponCode={couponCode} trialMonths={trialMonths} />
+            )}
+
             <SubscriptionSelection
               selectedPlan={selectedPlan}
               onPlanSelect={setSelectedPlan}
-              showTrialOption={true}
+              showTrialOption={!isPilot}
               onTrialSelect={setUseTrial}
               trialSelected={useTrial}
             />