Added contact us page

2024-02-12 18:19:10 +00:00
parent 1cec89668b
commit ceb5933fef
4 changed files with 229 additions and 6 deletions
--- a/src/templates/ContactUs.tsx
+++ b/src/templates/ContactUs.tsx
@@ -0,0 +1,175 @@
+"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";
+
+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 }) => (
+  <div className="w-full">
+    <span className="text-mti-red">{message}</span>
+  </div>
+);
+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<FormValues>({
+    defaultValues: {
+      name: "",
+      email: "",
+      description: "",
+      subject: "",
+      type: "",
+    },
+  });
+
+  const { errors, isDirty, isValid } = formState;
+  console.log("formState", formState.isSubmitSuccessful);
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_APP_URL}/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 (
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+      <Navbar currentPage={page} language={language} />
+      <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
+        <div className="w-full h-full flex flex-col items-center justify-center">
+          <Title>{translation.title[language]}</Title>
+        </div>
+      </section>
+      <section className="w-full bg-white text-center p-8 md:p-16">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="form-control items-center gap-2 text-mti-black"
+        >
+          <input
+            id="name"
+            type="text"
+            placeholder={translation.name[language]}
+            {...register("name", { required: true })}
+            className="input input-bordered md:w-full sm:w-1/2  max-w-md"
+          />
+          {errors.name && errors.name.type === "required" && (
+            <ErrorMessage message={translation.fieldRequired[language]} />
+          )}
+
+          <input
+            id="email"
+            placeholder={translation.email[language]}
+            type="text"
+            {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
+            className="input input-bordered md:w-full sm:w-1/2  max-w-md"
+          />
+          {errors.email && errors.email.type === "required" && (
+            <ErrorMessage message={translation.fieldRequired[language]} />
+          )}
+          {errors.email && errors.email.type === "pattern" && (
+            <ErrorMessage message={translation.invalidEmail[language]} />
+          )}
+
+          <input
+            id="subject"
+            placeholder={translation.subject[language]}
+            type="text"
+            {...register("subject", { required: true })}
+            className="input input-bordered md:w-full sm:w-1/2 max-w-md"
+          />
+          {errors.subject && errors.subject.type === "required" && (
+            <ErrorMessage message={translation.fieldRequired[language]} />
+          )}
+          <select
+            id="type"
+            {...register("type", { required: true })}
+            className="select select-bordered md:w-full sm:w-1/2 max-w-md"
+          >
+            <option value="" disabled>
+              {translation.selectType[language]}
+            </option>
+            {selectOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          {errors.type && errors.type.type === "required" && (
+            <ErrorMessage message={translation.fieldRequired[language]} />
+          )}
+
+          <textarea
+            id="description"
+            placeholder={translation.description[language]}
+            {...register("description", { required: true })}
+            className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
+            rows={5}
+          />
+          {errors.description && errors.description.type === "required" && (
+            <ErrorMessage message={translation.fieldRequired[language]} />
+          )}
+
+          <input
+            type="submit"
+            className="btn"
+            disabled={!isDirty || !isValid}
+          />
+        </form>
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}