From 55ab7996139613c38fcdc5c1bf659ee195dc8212 Mon Sep 17 00:00:00 2001 From: musiur Date: Thu, 9 Jan 2025 14:35:27 +0600 Subject: [PATCH 1/2] remove redundant code --- src/app/meet-with-yeatiq/_utils/sections/bottom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/meet-with-yeatiq/_utils/sections/bottom.tsx b/src/app/meet-with-yeatiq/_utils/sections/bottom.tsx index 3ce70f9..2de3c98 100644 --- a/src/app/meet-with-yeatiq/_utils/sections/bottom.tsx +++ b/src/app/meet-with-yeatiq/_utils/sections/bottom.tsx @@ -1,5 +1,5 @@ import WhatsAppIcon from "@/components/assets/whatsapp"; -import { CheckCheckIcon, Mail, Phone } from "lucide-react"; +import { Mail, Phone } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; From 7ff3ca93c7173b5f79591befd1554efb905685b5 Mon Sep 17 00:00:00 2001 From: musiur Date: Wed, 15 Jan 2025 10:34:11 +0600 Subject: [PATCH 2/2] update meet with yeatiq hero section --- src/app/contact-us/contact-form.tsx | 327 ++++++++++++++++++ src/app/contact-us/page.tsx | 296 +--------------- .../_utils/sections/free-online-dialogue.tsx | 24 ++ .../meet-with-yeatiq/_utils/sections/hero.tsx | 11 +- 4 files changed, 361 insertions(+), 297 deletions(-) create mode 100644 src/app/contact-us/contact-form.tsx create mode 100644 src/app/meet-with-yeatiq/_utils/sections/free-online-dialogue.tsx diff --git a/src/app/contact-us/contact-form.tsx b/src/app/contact-us/contact-form.tsx new file mode 100644 index 0000000..11c6b18 --- /dev/null +++ b/src/app/contact-us/contact-form.tsx @@ -0,0 +1,327 @@ +"use client"; + +import ReCAPTCHA from "react-google-recaptcha"; +import { Button } from "@/components/ui/button"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { useEffect, useState } from "react"; +import ErrorMessages from "@/components/molecule/errors-messages"; +import Loader from "@/components/molecule/loader"; +import { useToast } from "@/components/ui/use-toast"; +import { Building, MessageCircle, Phone } from "lucide-react"; +import Link from "next/link"; +import ANIM__FadeInOutOnScroll from "@/components/anims/fadein.anim"; +import { Action___POST__SendMail } from "./actions"; + +// Function to track contact form submissions +function trackContactFormSubmission(formData: any) { + if (typeof window !== "undefined") { + window[`dataLayer`] = window?.dataLayer || []; + + window.dataLayer.push({ + event: "contactFormSubmission", + formName: "contact_form", + formData, + }); + } +} + +// Function to track contact form submissions which is abandoned +function trackContactFormSubmissionA(formData: any) { + if (typeof window !== "undefined") { + window[`dataLayer`] = window?.dataLayer || []; + + window.dataLayer.push({ + event: "contactFormSubmissionAbandoned", + formName: "Contact_form_abandoned", + formData, + }); + } +} + +const ContactUs = () => { + const { toast } = useToast(); + const [currentTab, setCurrentTab] = useState(1); + const [loading, setLoading] = useState(false); + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + services: [], + message: "", + subject: "Contact Us", + title: "Contact Us Form Submission", + }); + const [errors, setErrors] = useState({}); + const [captcha, setCaptcha] = useState(false); + + // testing api route + const SendEmail = async (formData: any) => { + setLoading(true); + try { + const result = await Action___POST__SendMail(formData, "contact"); + console.log(result); + if (result?.success) { + toast({ + title: "Message Sending", + description: "Successful! Mail send successfully.", + }); + setLoading(false); + trackContactFormSubmission(formData); + setFormData({ + name: "", + email: "", + phone: "", + services: [], + message: "", + subject: "Contact Us", + title: "Contact Us Form Submission", + }); + } + } catch (error) { + setLoading(false); + toast({ + variant: "error", + title: "Message Sending", + description: "Failed! Something went wrong.", + }); + } + }; + + const handleOnChange = (e: any) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + useEffect(() => { + trackContactFormSubmissionA(formData); + }, [formData]); + const handleOnSubmit = (e: any) => { + e.preventDefault(); + const validationErrors = validation(); + + if (Object.keys(validationErrors).length === 0) { + trackContactFormSubmissionA(formData); + SendEmail(formData); + } else { + setErrors(validationErrors); + } + }; + + const validation = () => { + let obj: any = {}; + if (!formData.name.trim()) { + obj.name = "Name is required!"; + } + if (!formData.email.trim()) { + obj.email = "Email is required!"; + } + + if (!formData.phone.trim()) { + obj.phone = "Phone is required!"; + } + + if ( + formData.services.length < 1 || + (formData.services.length > 1 && !Array.isArray(formData.services)) + ) { + obj.services = "Choose at least one!"; + } + + if (currentTab !== 1) { + if (!formData.budgetRange.trim()) { + obj.budgetRange = "Budget range is required!"; + } + } + + return obj; + }; + const ContactInfo = [ + { + id: 0, + icon: , + title: "Make a Call", + info: "+971507477541", + }, + { + id: 1, + icon: , + title: "Main Office", + info: "Business Center 1, M Floor, Nad Al Sheba, Dubai, U.A.E", + }, + { + id: 2, + icon: , + title: "WhatsApp", + info: "+971507477541", + }, + ]; + return ( +
+
+

+ Get in Touch With Us +

+
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+
+
+ +
+ {ServicesList.map((item: any) => { + return ( +
  • + + setFormData({ + ...formData, + services: value + ? [...formData.services, item.value] + : [ + ...formData.services.filter( + (service: any) => service !== item.value + ), + ], + }) + } + /> + +
    • + ); + })} +
    + +
    + +
    + +