From 5bb3be0aa48cd97f96f0b5ceea8f9de8b14bab87 Mon Sep 17 00:00:00 2001
From: Tariq Jamal A <tariqjamal4267324@gmail.com>
Date: Tue, 13 May 2025 05:57:34 +0530
Subject: [PATCH] refactor: add country field in registration form

---
 app/accounts/login/page.jsx | 143 +++++++++++++++++++++++++++++-------
 app/contexts/mainContext.js |   2 +-
 2 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/app/accounts/login/page.jsx b/app/accounts/login/page.jsx
index a357598..1cdfb77 100644
--- a/app/accounts/login/page.jsx
+++ b/app/accounts/login/page.jsx
@@ -4,6 +4,8 @@ import MainContext from "@/app/contexts/mainContext";
 import { backendUrl, serAxios } from "@/utils/axios";
 import Image from "next/image";
 import React, { useContext, useEffect, useState } from "react";
+import { ChevronDown, Search } from "lucide-react";
+import { useCurrency } from "@/app/contexts/currencyContext";
 
 const getAuthPageData = async () => {
   // Fetch data from external API
@@ -26,7 +28,15 @@ const LoginSignup = () => {
     email: "",
     password: "",
     confirmPassword: "",
+    country: "",
   });
+  const [countries, setCountries] = useState([]);
+  const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredCountries, setFilteredCountries] = useState([]);
+  const { setUserCountry } = useCurrency();
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({
@@ -35,25 +45,69 @@ const LoginSignup = () => {
     }));
   };
 
+  const handleCountrySelect = (country) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      country: country,
+    }));
+    setIsCountryDropdownOpen(false);
+    setSearchTerm("");
+  };
+
+  const fetchCountries = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('https://countriesnow.space/api/v0.1/countries/');
+      const data = await response.json();
+      if (!data.error) {
+        setCountries(data.data);
+        setFilteredCountries(data.data);
+      }
+    } catch (error) {
+      console.error("Error fetching countries:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (isLogin) {
       loginUser(formData);
     } else {
+      // If registering, also set the user's country for currency purposes
+      if (formData.country) {
+        setUserCountry(formData.country);
+      }
       registerUser(formData);
     }
   };
 
   const toggleMode = () => {
     setIsLogin(!isLogin);
-    setFormData({ email: "", password: "", confirmPassword: "" });
+    setFormData({ email: "", password: "", confirmPassword: "", country: "" });
+    setSearchTerm("");
   };
 
   useEffect(() => {
     getAuthPageData().then((data) => {
       setLoginPageData(data);
     });
-  }, []);
+    
+    if (!isLogin) {
+      fetchCountries();
+    }
+  }, [isLogin]);
+
+  // Filter countries based on search term
+  useEffect(() => {
+    if (countries.length > 0) {
+      const filtered = countries.filter(country => 
+        country.country.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredCountries(filtered);
+    }
+  }, [searchTerm, countries]);
 
   return (
     <div className="flex h-screen bg-gray-100">
@@ -126,22 +180,68 @@ const LoginSignup = () => {
                 />
               </div>
               {!isLogin && (
-                <div>
-                  <label htmlFor="confirm-password" className="sr-only">
-                    Confirm Password
-                  </label>
-                  <input
-                    id="confirm-password"
-                    name="confirmPassword"
-                    type="password"
-                    autoComplete="new-password"
-                    required
-                    className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
-                    placeholder="Confirm Password"
-                    value={formData.confirmPassword}
-                    onChange={handleInputChange}
-                  />
-                </div>
+                <>
+                  <div>
+                    <label htmlFor="confirm-password" className="sr-only">
+                      Confirm Password
+                    </label>
+                    <input
+                      id="confirm-password"
+                      name="confirmPassword"
+                      type="password"
+                      autoComplete="new-password"
+                      required
+                      className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
+                      placeholder="Confirm Password"
+                      value={formData.confirmPassword}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className="relative">
+                    <button
+                      type="button"
+                      onClick={() => setIsCountryDropdownOpen(!isCountryDropdownOpen)}
+                      className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm text-left flex justify-between items-center"
+                    >
+                      {formData.country ? formData.country : "Select your country"}
+                      <ChevronDown className={`w-4 h-4 transition-transform ${isCountryDropdownOpen ? 'rotate-180' : ''}`} />
+                    </button>
+                    
+                    {isCountryDropdownOpen && (
+                      <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                        <div className="p-2 border-b">
+                          <div className="relative">
+                            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
+                            <input
+                              type="text"
+                              placeholder="Search countries..."
+                              value={searchTerm}
+                              onChange={(e) => setSearchTerm(e.target.value)}
+                              className="w-full pl-8 pr-4 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            />
+                          </div>
+                        </div>
+                        
+                        {isLoading ? (
+                          <div className="p-3 text-center text-gray-500">Loading countries...</div>
+                        ) : filteredCountries.length > 0 ? (
+                          filteredCountries.map((countryData) => (
+                            <button
+                              key={countryData.iso2}
+                              type="button"
+                              className="block w-full px-4 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+                              onClick={() => handleCountrySelect(countryData.country)}
+                            >
+                              {countryData.country}
+                            </button>
+                          ))
+                        ) : (
+                          <div className="p-3 text-center text-gray-500">No countries found</div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </>
               )}
             </div>
 
@@ -155,13 +255,6 @@ const LoginSignup = () => {
             </div>
           </form>
           <div className="text-center">
-            {/* <h2 className="text-[#AC8C6B] font-semibold">
-              Manage subscriptions
-            </h2> */}
-            {/* <h2 className="text-xl my-3">or</h2>
-            <h2 className="capitalize border-2 px-5 py-3">
-              Continue with google
-            </h2> */}
             <button
               onClick={toggleMode}
               className="font-medium text-[#C19A5B] mt-10"
diff --git a/app/contexts/mainContext.js b/app/contexts/mainContext.js
index a7764de..4f3faab 100644
--- a/app/contexts/mainContext.js
+++ b/app/contexts/mainContext.js
@@ -57,7 +57,7 @@ export const ContextProvider = ({ children }) => {
             setToken(response.data.token)
             localStorage.setItem('token', response.data.token)
             toast.success('Registration Successful');
-            router.push('/')
+            router.push('/accounts/login')
 
             return response.data;
         } catch (error) {