refactor: improvements in UI and book consultion option
- Login is not responsive - Add country field in book consultant any country - correct form submit of book consultant in mobile view - updatr email in privacy page - make home page slider responsive - redirect login whentokenexpired
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { ChevronRight, Gem } from "lucide-react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { ChevronRight, Gem, Search, ChevronDown } from "lucide-react";
|
||||
import authAxios from "@/utils/axios";
|
||||
import Image from "next/image";
|
||||
|
||||
@@ -13,14 +13,62 @@ const PremiumBanner = ({ data }) => {
|
||||
header_quote3,
|
||||
header_quote4,
|
||||
} = data || {};
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
country: "",
|
||||
});
|
||||
|
||||
const [message, setMessage] = useState("");
|
||||
const [countries, setCountries] = useState([]);
|
||||
const [filteredCountries, setFilteredCountries] = useState([]);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCountries = async () => {
|
||||
try {
|
||||
const response = await fetch("https://countriesnow.space/api/v0.1/countries/");
|
||||
const data = await response.json();
|
||||
if (!data.error && data.data) {
|
||||
setCountries(data.data);
|
||||
setFilteredCountries(data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching countries:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCountries();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchTerm) {
|
||||
const filtered = countries.filter(country =>
|
||||
country.country.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
setFilteredCountries(filtered);
|
||||
} else {
|
||||
setFilteredCountries(countries);
|
||||
}
|
||||
}, [searchTerm, countries]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
@@ -30,8 +78,24 @@ const PremiumBanner = ({ data }) => {
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCountrySearch = (e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
};
|
||||
|
||||
const selectCountry = (countryName) => {
|
||||
setFormData(prev => ({ ...prev, country: countryName }));
|
||||
setIsDropdownOpen(false);
|
||||
setSearchTerm("");
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.country) {
|
||||
setMessage("Please select your country.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await authAxios.post(
|
||||
"/consultation/booking/create/",
|
||||
@@ -43,6 +107,7 @@ const PremiumBanner = ({ data }) => {
|
||||
last_name: "",
|
||||
email: "",
|
||||
phone_number: "",
|
||||
country: "",
|
||||
});
|
||||
setMessage("Consultation experts will contact you shortly.");
|
||||
setTimeout(() => {
|
||||
@@ -61,8 +126,7 @@ const PremiumBanner = ({ data }) => {
|
||||
<div className="min-h-screen bg-white p-2 md:p-8 flex items-center justify-center">
|
||||
<div className="max-w-6xl w-full bg-white shadow-lg rounded-xl overflow-hidden p-4 md:p-12">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Left: Form Section */}
|
||||
<div className="bg-[#EDE8E0] p-2 md:p-14 flex flex-col justify-center rounded-lg ">
|
||||
<div className="bg-[#EDE8E0] p-2 md:p-14 flex flex-col justify-center rounded-lg">
|
||||
<h2 className="text-4xl font-serif text-center text-[#AC8C6B]">
|
||||
Book a Free Consultation
|
||||
</h2>
|
||||
@@ -107,9 +171,52 @@ const PremiumBanner = ({ data }) => {
|
||||
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<div
|
||||
className="w-full p-4 border rounded-md flex justify-between items-center cursor-pointer bg-white"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
>
|
||||
<span className={formData.country ? "text-black" : "text-gray-400"}>
|
||||
{formData.country || "Select Country"}
|
||||
</span>
|
||||
<ChevronDown className={`transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`} />
|
||||
</div>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg max-h-60 overflow-y-auto">
|
||||
<div className="sticky top-0 bg-white p-2 border-b">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search countries..."
|
||||
value={searchTerm}
|
||||
onChange={handleCountrySearch}
|
||||
className="w-full p-2 pl-8 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
||||
/>
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredCountries.length > 0 ? (
|
||||
filteredCountries.map((country, index) => (
|
||||
<div
|
||||
key={country.iso2 + index}
|
||||
className="p-3 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => selectCountry(country.country)}
|
||||
>
|
||||
{country.country}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-3 text-center text-gray-500">No countries found</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<p className="text-green-700 bg-green-100 py-2 text-center rounded-md">
|
||||
<p className={`py-2 text-center rounded-md ${message.includes("error") ? "text-red-700 bg-red-100" : "text-green-700 bg-green-100"}`}>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
@@ -123,7 +230,6 @@ const PremiumBanner = ({ data }) => {
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Right: Benefits & App Download */}
|
||||
<div className="p-14 flex flex-col justify-center">
|
||||
<h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
|
||||
{header1 ?? "Why Choose Our Consultation?"}
|
||||
@@ -149,7 +255,7 @@ const PremiumBanner = ({ data }) => {
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
||||
{header_quote3 ?? "Free initial text-based consultation"}
|
||||
{header_quote4 ?? "Free initial text-based consultation"}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user