payment gateways and plans billing and signup pages refactored

frontend/src/components/auth/SignUpFormUnified.tsx

@@ -2,29 +2,24 @@
  * Unified Signup Form with Integrated Pricing Selection
  * Combines free and paid signup flows in one modern interface
  * 
- * Payment Methods:
- * - Most countries: Credit/Debit Card (Stripe) + PayPal
- * - Pakistan (PK): Credit/Debit Card (Stripe) + Bank Transfer
+ * Payment Flow (Simplified):
+ * 1. User selects plan and fills in details
+ * 2. User selects country from dropdown
+ * 3. On submit: account created, redirected to /account/plans for payment
+ * 
+ * NO payment method selection at signup - this happens on /account/plans
  */
 
 import { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { Link, useNavigate } from 'react-router-dom';
-import { ChevronLeftIcon, EyeCloseIcon, EyeIcon, CreditCardIcon, Building2Icon, WalletIcon, CheckIcon, Loader2Icon, CheckCircleIcon } from '../../icons';
+import { ChevronLeftIcon, EyeCloseIcon, EyeIcon, CheckIcon, Loader2Icon, CheckCircleIcon, GlobeIcon } from '../../icons';
 import Label from '../form/Label';
 import Input from '../form/input/InputField';
 import Checkbox from '../form/input/Checkbox';
 import Button from '../ui/button/Button';
-import SelectDropdown from '../form/SelectDropdown';
 import { useAuthStore } from '../../store/authStore';
 
-// PayPal icon component
-const PayPalIcon = ({ className }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-    <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/>
-  </svg>
-);
-
 interface Plan {
   id: number;
   name: string;
@@ -40,22 +35,9 @@ interface Plan {
   features: string[];
 }
 
-interface PaymentMethodConfig {
-  id: number;
-  payment_method: string;
-  display_name: string;
-  instructions: string | null;
-  country_code: string;
-  is_enabled: boolean;
-}
-
-// Payment method option type
-interface PaymentOption {
-  id: string;
-  type: string;
+interface Country {
+  code: string;
   name: string;
-  description: string;
-  icon: React.ReactNode;
 }
 
 interface SignUpFormUnifiedProps {
@@ -63,7 +45,6 @@ interface SignUpFormUnifiedProps {
   selectedPlan: Plan | null;
   onPlanSelect: (plan: Plan) => void;
   plansLoading: boolean;
-  countryCode?: string; // Optional: 'PK' for Pakistan-specific, empty for global
 }
 
 export default function SignUpFormUnified({
@@ -71,7 +52,6 @@ export default function SignUpFormUnified({
   selectedPlan,
   onPlanSelect,
   plansLoading,
-  countryCode = '', // Default to global (empty = show Credit Card + PayPal)
 }: SignUpFormUnifiedProps) {
   const [showPassword, setShowPassword] = useState(false);
   const [isChecked, setIsChecked] = useState(false);
@@ -83,13 +63,12 @@ export default function SignUpFormUnified({
     email: '',
     password: '',
     accountName: '',
-    billingCountry: countryCode || 'US',
+    billingCountry: 'US',
   });
 
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('stripe');
-  const [availablePaymentOptions, setAvailablePaymentOptions] = useState<PaymentOption[]>([]);
-  const [backendPaymentMethods, setBackendPaymentMethods] = useState<PaymentMethodConfig[]>([]);
-  const [paymentMethodsLoading, setPaymentMethodsLoading] = useState(false);
+  // Countries for dropdown
+  const [countries, setCountries] = useState<Country[]>([]);
+  const [countriesLoading, setCountriesLoading] = useState(true);
   const [error, setError] = useState('');
 
   const navigate = useNavigate();
@@ -97,9 +76,6 @@ export default function SignUpFormUnified({
 
   const isPaidPlan = selectedPlan && parseFloat(String(selectedPlan.price || 0)) > 0;
 
-  // Determine if this is a Pakistan-specific signup
-  const isPakistanSignup = countryCode === 'PK';
-
   // Update URL when plan changes
   useEffect(() => {
     if (selectedPlan) {
@@ -109,108 +85,61 @@ export default function SignUpFormUnified({
     }
   }, [selectedPlan]);
 
-  // Load payment methods from backend and determine available options
+  // Load countries from backend and detect user's country
   useEffect(() => {
-    if (!isPaidPlan) {
-      setAvailablePaymentOptions([]);
-      return;
-    }
-
-    const loadPaymentMethods = async () => {
-      setPaymentMethodsLoading(true);
+    const loadCountriesAndDetect = async () => {
+      setCountriesLoading(true);
       try {
         const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || 'https://api.igny8.com/api';
-        const response = await fetch(`${API_BASE_URL}/v1/billing/payment-configs/payment-methods/`);
+        const response = await fetch(`${API_BASE_URL}/v1/auth/countries/`);
 
-        if (!response.ok) {
-          throw new Error('Failed to load payment methods');
-        }
-
-        const data = await response.json();
-
-        let methodsList: PaymentMethodConfig[] = [];
-        if (Array.isArray(data)) {
-          methodsList = data;
-        } else if (data.success && data.data) {
-          methodsList = Array.isArray(data.data) ? data.data : data.data.results || [];
-        } else if (data.results) {
-          methodsList = data.results;
-        }
-
-        const enabledMethods = methodsList.filter((m: PaymentMethodConfig) => m.is_enabled);
-        setBackendPaymentMethods(enabledMethods);
-
-        // Build payment options based on signup type (PK vs Global)
-        const options: PaymentOption[] = [];
-
-        // Always show Credit/Debit Card (Stripe) if enabled
-        const stripeEnabled = enabledMethods.some(m => m.payment_method === 'stripe');
-        if (stripeEnabled) {
-          options.push({
-            id: 'stripe',
-            type: 'stripe',
-            name: 'Credit/Debit Card',
-            description: 'Pay securely with Visa, Mastercard, or other cards',
-            icon: <CreditCardIcon className="w-6 h-6" />,
-          });
-        }
-
-        // For Pakistan signup (/signup/pk): show Bank Transfer
-        // For Global signup (/signup): show PayPal
-        if (isPakistanSignup) {
-          // Pakistan: show Bank Transfer as 2nd option
-          const bankTransferEnabled = enabledMethods.some(
-            m => m.payment_method === 'bank_transfer' && (!m.country_code || m.country_code === 'PK')
-          );
-          if (bankTransferEnabled) {
-            options.push({
-              id: 'bank_transfer',
-              type: 'bank_transfer',
-              name: 'Bank Transfer',
-              description: 'Pay via bank transfer (PKR)',
-              icon: <Building2Icon className="w-6 h-6" />,
-            });
-          }
+        if (response.ok) {
+          const data = await response.json();
+          setCountries(data.countries || []);
         } else {
-          // Global: show PayPal as 2nd option
-          const paypalEnabled = enabledMethods.some(m => m.payment_method === 'paypal');
-          if (paypalEnabled) {
-            options.push({
-              id: 'paypal',
-              type: 'paypal',
-              name: 'PayPal',
-              description: 'Pay with your PayPal account',
-              icon: <PayPalIcon className="w-6 h-6" />,
-            });
-          }
+          // Fallback countries if backend fails
+          setCountries([
+            { code: 'US', name: 'United States' },
+            { code: 'GB', name: 'United Kingdom' },
+            { code: 'CA', name: 'Canada' },
+            { code: 'AU', name: 'Australia' },
+            { code: 'PK', name: 'Pakistan' },
+            { code: 'IN', name: 'India' },
+          ]);
         }
 
-        setAvailablePaymentOptions(options);
-
-        // Set default payment method
-        if (options.length > 0 && !options.find(o => o.type === selectedPaymentMethod)) {
-          setSelectedPaymentMethod(options[0].type);
-        }
-      } catch (err: any) {
-        console.error('Failed to load payment methods:', err);
-        // Fallback to default options
-        setAvailablePaymentOptions([
-          {
-            id: 'stripe',
-            type: 'stripe',
-            name: 'Credit/Debit Card',
-            description: 'Pay securely with Visa, Mastercard, or other cards',
-            icon: <CreditCardIcon className="w-6 h-6" />,
+        // Try to detect user's country for default selection
+        try {
+          const geoResponse = await fetch('https://ipapi.co/country_code/', {
+            signal: AbortSignal.timeout(3000),
+          });
+          if (geoResponse.ok) {
+            const countryCode = await geoResponse.text();
+            if (countryCode && countryCode.length === 2) {
+              setFormData(prev => ({ ...prev, billingCountry: countryCode.trim() }));
+            }
           }
+        } catch {
+          // Silently fail - keep default US
+        }
+      } catch (err) {
+        console.error('Failed to load countries:', err);
+        // Fallback countries
+        setCountries([
+          { code: 'US', name: 'United States' },
+          { code: 'GB', name: 'United Kingdom' },
+          { code: 'CA', name: 'Canada' },
+          { code: 'AU', name: 'Australia' },
+          { code: 'PK', name: 'Pakistan' },
+          { code: 'IN', name: 'India' },
         ]);
-        setSelectedPaymentMethod('stripe');
       } finally {
-        setPaymentMethodsLoading(false);
+        setCountriesLoading(false);
       }
     };
 
-    loadPaymentMethods();
-  }, [isPaidPlan, isPakistanSignup]);
+    loadCountriesAndDetect();
+  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
@@ -236,11 +165,6 @@ export default function SignUpFormUnified({
       return;
     }
 
-    if (isPaidPlan && !selectedPaymentMethod) {
-      setError('Please select a payment method');
-      return;
-    }
-
     try {
       const username = formData.email.split('@')[0];
 
@@ -252,35 +176,20 @@ export default function SignUpFormUnified({
         last_name: formData.lastName,
         account_name: formData.accountName,
         plan_slug: selectedPlan.slug,
+        billing_country: formData.billingCountry,
       };
 
-      if (isPaidPlan) {
-        registerPayload.payment_method = selectedPaymentMethod;
-        registerPayload.billing_email = formData.email;
-        registerPayload.billing_country = formData.billingCountry;
-      }
-
       const user = (await register(registerPayload)) as any;
 
-      // Log full registration response for debugging
       console.log('Registration response:', {
         user: user,
-        checkoutUrl: user?.checkout_url,
-        selectedPaymentMethod: selectedPaymentMethod,
-        accountStatus: user?.account?.status
+        accountStatus: user?.account?.status,
+        planSlug: selectedPlan.slug,
       });
 
-      // CRITICAL: Verify auth state is actually set in Zustand store
+      // Verify auth state is actually set in Zustand store
       const currentAuthState = useAuthStore.getState();
       
-      console.log('Post-registration auth state check:', {
-        isAuthenticated: currentAuthState.isAuthenticated,
-        hasUser: !!currentAuthState.user,
-        hasToken: !!currentAuthState.token,
-        userData: user,
-        checkoutUrl: user?.checkout_url
-      });
-
       // If for some reason state wasn't set, force set it again
       if (!currentAuthState.isAuthenticated || !currentAuthState.user || !currentAuthState.token) {
         console.error('Auth state not properly set after registration, forcing update...');
@@ -306,41 +215,16 @@ export default function SignUpFormUnified({
         throw new Error('Failed to authenticate after registration. Please try logging in manually.');
       }
 
-      // Handle payment gateway redirects
-      const checkoutUrl = user?.checkout_url;
-      
-      console.log('Payment redirect decision:', {
-        checkoutUrl,
-        selectedPaymentMethod,
-        isPaidPlan,
-        fullUserResponse: user,
-      });
-      
-      // For Stripe or PayPal with checkout URL - redirect to payment gateway
-      if (checkoutUrl && (selectedPaymentMethod === 'stripe' || selectedPaymentMethod === 'paypal')) {
-        console.log(`Redirecting to ${selectedPaymentMethod} checkout:`, checkoutUrl);
-        window.location.href = checkoutUrl;
-        return;
-      }
-
-      // For bank_transfer ONLY - go to plans page to show payment instructions
-      // This is the expected flow for bank transfer
-      if (selectedPaymentMethod === 'bank_transfer') {
-        console.log('Bank transfer selected, redirecting to plans page for payment confirmation');
+      // Simplified navigation:
+      // - Paid plans: Go to /account/plans to select payment method and complete payment
+      // - Free plans: Go to sites page
+      if (isPaidPlan) {
+        console.log('Paid plan selected, redirecting to /account/plans for payment');
         navigate('/account/plans', { replace: true });
-        return;
+      } else {
+        console.log('Free plan selected, redirecting to /sites');
+        navigate('/sites', { replace: true });
       }
-      
-      // If Stripe/PayPal but no checkout URL (error case) - still go to plans page
-      // User can retry payment from there
-      if (isPaidPlan && !checkoutUrl) {
-        console.warn('Paid plan selected but no checkout URL received - going to plans page');
-        navigate('/account/plans', { replace: true });
-        return;
-      }
-      
-      // For free plans - go to sites page
-      navigate('/sites', { replace: true });
     } catch (err: any) {
       setError(err.message || 'Registration failed. Please try again.');
     }
@@ -527,77 +411,35 @@ export default function SignUpFormUnified({
               </div>
             </div>
 
-            {isPaidPlan && (
-              <div className="pt-4 border-t border-gray-200 dark:border-gray-700 space-y-4">
-                {/* Payment Method Selection - Card Style */}
-                <div>
-                  <Label className="mb-3">
-                    Select Payment Method<span className="text-error-500">*</span>
-                  </Label>
-                  {paymentMethodsLoading ? (
-                    <div className="flex items-center justify-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                      <Loader2Icon className="w-5 h-5 animate-spin text-brand-500 mr-2" />
-                      <span className="text-sm text-gray-500">Loading payment options...</span>
-                    </div>
-                  ) : availablePaymentOptions.length === 0 ? (
-                    <div className="p-4 bg-warning-50 border border-warning-200 rounded-lg text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200">
-                      <p className="text-sm">No payment methods available for your region</p>
-                    </div>
-                  ) : (
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                      {availablePaymentOptions.map((option) => (
-                        <button
-                          key={option.id}
-                          type="button"
-                          onClick={() => setSelectedPaymentMethod(option.type)}
-                          className={`relative p-4 rounded-xl border-2 text-left transition-all ${
-                            selectedPaymentMethod === option.type
-                              ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
-                              : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'
-                          }`}
-                        >
-                          {selectedPaymentMethod === option.type && (
-                            <div className="absolute top-2 right-2">
-                              <div className="w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center">
-                                <CheckIcon className="w-3 h-3 text-white" />
-                              </div>
-                            </div>
-                          )}
-                          <div className="flex items-start gap-3">
-                            <div className={`flex items-center justify-center w-10 h-10 rounded-lg ${
-                              selectedPaymentMethod === option.type
-                                ? 'bg-brand-500 text-white'
-                                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
-                            }`}>
-                              {option.icon}
-                            </div>
-                            <div className="flex-1 min-w-0">
-                              <h4 className={`font-semibold text-sm ${
-                                selectedPaymentMethod === option.type
-                                  ? 'text-brand-700 dark:text-brand-400'
-                                  : 'text-gray-900 dark:text-white'
-                              }`}>
-                                {option.name}
-                              </h4>
-                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                                {option.description}
-                              </p>
-                            </div>
-                          </div>
-                        </button>
-                      ))}
-                    </div>
-                  )}
+            {/* Country Selection */}
+            <div>
+              <Label className="flex items-center gap-1.5">
+                <GlobeIcon className="w-4 h-4 text-gray-500" />
+                Country<span className="text-error-500">*</span>
+              </Label>
+              {countriesLoading ? (
+                <div className="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                  <Loader2Icon className="w-4 h-4 animate-spin text-brand-500 mr-2" />
+                  <span className="text-sm text-gray-500">Loading countries...</span>
                 </div>
-
-                {/* Pakistan signup notice */}
-                {isPakistanSignup && (
-                  <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
-                    <span>🇵🇰</span> Pakistan - Bank transfer available
-                  </p>
-                )}
-              </div>
-            )}
+              ) : (
+                <select
+                  name="billingCountry"
+                  value={formData.billingCountry}
+                  onChange={handleChange}
+                  className="w-full px-4 py-3 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:ring-2 focus:ring-brand-500 focus:border-transparent appearance-none cursor-pointer"
+                >
+                  {countries.map((country) => (
+                    <option key={country.code} value={country.code}>
+                      {country.name}
+                    </option>
+                  ))}
+                </select>
+              )}
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                Your country determines available payment methods
+              </p>
+            </div>
 
             <div className="flex items-start gap-3 pt-2">
               <Checkbox className="w-5 h-5 mt-0.5" checked={isChecked} onChange={setIsChecked} />
@@ -620,7 +462,7 @@ export default function SignUpFormUnified({
                   Creating your account...
                 </span>
               ) : isPaidPlan ? (
-                'Create Account & Continue to Payment'
+                'Create Account'
               ) : (
                 'Start Free Trial'
               )}