diff --git a/package.json b/package.json index 01fabc1..e548f69 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,13 @@ "axios": "^1.5.1", "clsx": "^2.0.0", "currency-symbol-map": "^5.1.0", + "daisyui": "^4.6.3", "lodash": "^4.17.21", "moment": "^2.29.4", "next": "13.5.4", "react": "^18", "react-dom": "^18", + "react-hook-form": "^7.50.1", "react-icons": "^4.11.0", "react-string-replace": "^1.1.1", "sharp": "^0.32.6" diff --git a/public/person_laptop_focus.jpg b/public/person_laptop_focus.jpg new file mode 100644 index 0000000..3ac393a Binary files /dev/null and b/public/person_laptop_focus.jpg differ diff --git a/src/app/ar/contact/page.tsx b/src/app/ar/contact/page.tsx index 4d72b14..dcb32c6 100644 --- a/src/app/ar/contact/page.tsx +++ b/src/app/ar/contact/page.tsx @@ -1,6 +1,5 @@ -import About from "@/templates/About"; -import ComingSoon from "@/templates/ComingSoon"; +import ContactUs from "@/templates/ContactUs"; export default function Page() { - return ; + return ; } diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index f3392ac..94d974a 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -1,6 +1,5 @@ -import About from "@/templates/About"; -import ComingSoon from "@/templates/ComingSoon"; +import ContactUs from "@/templates/ContactUs"; export default function Page() { - return ; + return ; } diff --git a/src/templates/ContactUs.tsx b/src/templates/ContactUs.tsx new file mode 100644 index 0000000..337dcf7 --- /dev/null +++ b/src/templates/ContactUs.tsx @@ -0,0 +1,149 @@ +"use client"; +import React from "react"; +import {useForm, SubmitHandler, Controller} from "react-hook-form"; +import Footer from "@/components/Footer"; +import Navbar from "@/components/Navbar"; +import Title from "@/components/Title"; +import translation from "@/translation/contactus.json"; +import Image from "next/image"; + +type FormValues = { + name: string; + email: string; + description: string; + subject: string; + type: "feedback" | "bug" | "help" | ""; +}; + +interface Props { + language: "en" | "ar"; + page: string; +} + +const ErrorMessage = ({message}: {message: string}) => ( +
+ {message} +
+); +export default function App({language, page}: Props) { + const selectOptions = [ + { + label: translation.feedback[language], + value: "feedback", + }, + { + label: translation.bug[language], + value: "bug", + }, + { + label: translation.help[language], + value: "help", + }, + ]; + + const {register, control, handleSubmit, formState} = useForm({ + defaultValues: { + name: "", + email: "", + description: "", + subject: "", + type: "", + }, + }); + + const {errors, isDirty, isValid} = formState; + console.log("formState", formState.isSubmitSuccessful); + const onSubmit: SubmitHandler = async (data) => { + try { + const response = await fetch(`https://platform.encoach.com/api/tickets`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + reporter: { + name: data.name, + email: data.email, + }, + subject: data.subject, + type: data.type, + reportedFrom: window.location.href, + status: "submitted", + date: new Date().toISOString(), + description: data.description, + }), + }); + + if (response.status === 200) { + const data = await response.json(); + // Pass data to the page via props + console.log(data); + return; + } + } catch (err) {} + }; + + return ( +
+ +
+
+ {translation.title[language]} +
+
+
+
+ + {errors.name && errors.name.type === "required" && } + + {errors.email && errors.email.type === "required" && } + {errors.email && errors.email.type === "pattern" && } + + {errors.subject && errors.subject.type === "required" && } + + {errors.type && errors.type.type === "required" && } +