Tariq Jamal A
7e33e61d65
- 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
269 lines
9.2 KiB
JavaScript
269 lines
9.2 KiB
JavaScript
"use client";
|
|
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";
|
|
|
|
const PremiumBanner = ({ data }) => {
|
|
const {
|
|
header1,
|
|
description1,
|
|
header_quote1,
|
|
header_quote2,
|
|
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;
|
|
setFormData((prevState) => ({
|
|
...prevState,
|
|
[name]: value,
|
|
}));
|
|
};
|
|
|
|
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/",
|
|
formData
|
|
);
|
|
if (response.status === 201) {
|
|
setFormData({
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
country: "",
|
|
});
|
|
setMessage("Consultation experts will contact you shortly.");
|
|
setTimeout(() => {
|
|
setMessage("");
|
|
}, 5000);
|
|
} else {
|
|
setMessage("An error occurred. Please try again.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error submitting form:", error);
|
|
setMessage("An error occurred. Please try again.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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">
|
|
<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>
|
|
<p className="text-center text-gray-600 text-sm mt-2">
|
|
Get expert guidance tailored to your needs.
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5 mt-6">
|
|
<input
|
|
type="text"
|
|
name="first_name"
|
|
placeholder="First Name"
|
|
value={formData.first_name}
|
|
onChange={handleInputChange}
|
|
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
|
required
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="last_name"
|
|
placeholder="Last Name"
|
|
value={formData.last_name}
|
|
onChange={handleInputChange}
|
|
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
|
required
|
|
/>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
className="w-full p-4 border rounded-md focus:ring-[#AC8C6B] focus:border-[#AC8C6B]"
|
|
required
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="phone_number"
|
|
placeholder="Phone Number"
|
|
value={formData.phone_number}
|
|
onChange={handleInputChange}
|
|
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={`py-2 text-center rounded-md ${message.includes("error") ? "text-red-700 bg-red-100" : "text-green-700 bg-green-100"}`}>
|
|
{message}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#AC874C] text-white font-semibold py-4 rounded-md hover:bg-[#96724f] transition"
|
|
>
|
|
Request Consultation
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="p-14 flex flex-col justify-center">
|
|
<h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
|
|
{header1 ?? "Why Choose Our Consultation?"}
|
|
</h2>
|
|
<p className="text-center text-gray-600 text-sm mt-2">
|
|
{description1 ??
|
|
"Gain expert insights and personalized guidance."}
|
|
</p>
|
|
|
|
<ul className="mt-6 space-y-4 text-gray-700 text-lg">
|
|
<li className="flex items-center">
|
|
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
|
{header_quote1 ??
|
|
"Expert guidance from experienced professionals"}
|
|
</li>
|
|
<li className="flex items-center">
|
|
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
|
{header_quote2 ?? "Tailored advice for your specific needs"}
|
|
</li>
|
|
<li className="flex items-center">
|
|
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
|
{header_quote3 ?? "Unlock clarity and direction in life"}
|
|
</li>
|
|
<li className="flex items-center">
|
|
<ChevronRight className="text-[#AC8C6B] mr-2" />
|
|
{header_quote4 ?? "Free initial text-based consultation"}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PremiumBanner;
|