devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added toast on form submit

Browse Source
This commit is contained in:
Joao Ramos
2024-02-13 15:17:24 +00:00
parent 339f86e112
commit 12f9285058
5 changed files with 191 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"react-hook-form": "^7.50.1", "react-hook-form": "^7.50.1",
"react-icons": "^4.11.0", "react-icons": "^4.11.0",
"react-string-replace": "^1.1.1", "react-string-replace": "^1.1.1",
"react-toastify": "^10.0.4",
"sharp": "^0.32.6" "sharp": "^0.32.6"
}, },
"devDependencies": { "devDependencies": {

1
src/app/layout.tsx
View File

@@ -1,6 +1,7 @@
/* eslint-disable @next/next/no-page-custom-font */ /* eslint-disable @next/next/no-page-custom-font */
import clsx from "clsx"; import clsx from "clsx";
import "./globals.css"; import "./globals.css";
import "react-toastify/dist/ReactToastify.css";
import type {Metadata} from "next"; import type {Metadata} from "next";
import {Inter} from "next/font/google"; import {Inter} from "next/font/google";
import {Almarai} from "next/font/google"; import {Almarai} from "next/font/google";

298
src/templates/ContactUs.tsx
View File

@@ -1,149 +1,189 @@
"use client"; "use client";
import React from "react"; import React from "react";
import {useForm, SubmitHandler, Controller} from "react-hook-form"; import { useForm, SubmitHandler, Controller } from "react-hook-form";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Title from "@/components/Title"; import Title from "@/components/Title";
import translation from "@/translation/contactus.json"; import translation from "@/translation/contactus.json";
import Image from "next/image"; import Image from "next/image";
import { toast, ToastContainer } from "react-toastify";
type FormValues = { type FormValues = {
name: string; name: string;
email: string; email: string;
description: string; description: string;
subject: string; subject: string;
type: "feedback" | "bug" | "help" | ""; type: "feedback" | "bug" | "help" | "";
}; };
interface Props { interface Props {
language: "en" | "ar"; language: "en" | "ar";
page: string; page: string;
} }
const ErrorMessage = ({message}: {message: string}) => ( const ErrorMessage = ({ message }: { message: string }) => (
<div className="w-full"> <div className="w-full">
<span className="text-mti-red">{message}</span> <span className="text-mti-red">{message}</span>
</div> </div>
); );
export default function App({language, page}: Props) { export default function App({ language, page }: Props) {
const selectOptions = [ const selectOptions = [
{ {
label: translation.feedback[language], label: translation.feedback[language],
value: "feedback", value: "feedback",
}, },
{ {
label: translation.bug[language], label: translation.bug[language],
value: "bug", value: "bug",
}, },
{ {
label: translation.help[language], label: translation.help[language],
value: "help", value: "help",
}, },
]; ];
const {register, control, handleSubmit, formState} = useForm<FormValues>({ const { register, control, handleSubmit, formState } = useForm<FormValues>({
defaultValues: { defaultValues: {
name: "", name: "",
email: "", email: "",
description: "", description: "",
subject: "", subject: "",
type: "", type: "",
}, },
}); });
const {errors, isDirty, isValid} = formState; const { errors, isDirty, isValid } = formState;
console.log("formState", formState.isSubmitSuccessful); const onSubmit: SubmitHandler<FormValues> = async (data) => {
const onSubmit: SubmitHandler<FormValues> = async (data) => { try {
try { const response = await fetch(`https://platform.encoach.com/api/tickets`, {
const response = await fetch(`https://platform.encoach.com/api/tickets`, { method: "POST",
method: "POST", headers: {
headers: { "Content-Type": "application/json",
"Content-Type": "application/json", },
}, body: JSON.stringify({
body: JSON.stringify({ reporter: {
reporter: { name: data.name,
name: data.name, email: data.email,
email: data.email, },
}, subject: data.subject,
subject: data.subject, type: data.type,
type: data.type, reportedFrom: window.location.href,
reportedFrom: window.location.href, status: "submitted",
status: "submitted", date: new Date().toISOString(),
date: new Date().toISOString(), description: data.description,
description: data.description, }),
}), });
});
if (response.status === 200) { if (response.status === 200) {
const data = await response.json(); const data = await response.json();
// Pass data to the page via props // Pass data to the page via props
console.log(data); if (data.ok) {
return; toast.success(translation.ticketSuccess[language]);
} return;
} catch (err) {} }
}; }
} catch (err) {}
return ( toast.error(translation.ticketError[language]);
<main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}> };
<Navbar currentPage={page} language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> return (
<div className="w-full h-full flex flex-col items-center justify-center"> <>
<Title>{translation.title[language]}</Title> <ToastContainer />
</div> <main
</section> className="text-mti-black flex h-screen w-full flex-col bg-white"
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32"> dir={language === "ar" ? "rtl" : "ltr"}
<form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96"> >
<input <Navbar currentPage={page} language={language} />
id="name" <section className="w-full bg-mti-purple text-white text-center p-8 md:p-16">
type="text" <div className="w-full h-full flex flex-col items-center justify-center">
placeholder={translation.name[language]} <Title>{translation.title[language]}</Title>
{...register("name", {required: true})} </div>
className="input input-bordered md:w-full sm:w-1/2 max-w-md" </section>
/> <section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
{errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />} <form
<input onSubmit={handleSubmit(onSubmit)}
id="email" className="form-control items-center gap-2 text-mti-black flex flex-col w-96"
placeholder={translation.email[language]} >
type="text" <input
{...register("email", {required: true, pattern: /^\S+@\S+$/i})} id="name"
className="input input-bordered md:w-full sm:w-1/2 max-w-md" type="text"
/> placeholder={translation.name[language]}
{errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />} {...register("name", { required: true })}
{errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />} className="input input-bordered md:w-full sm:w-1/2 max-w-md"
<input />
id="subject" {errors.name && errors.name.type === "required" && (
placeholder={translation.subject[language]} <ErrorMessage message={translation.fieldRequired[language]} />
type="text" )}
{...register("subject", {required: true})} <input
className="input input-bordered md:w-full sm:w-1/2 max-w-md" id="email"
/> placeholder={translation.email[language]}
{errors.subject && errors.subject.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />} type="text"
<select id="type" {...register("type", {required: true})} className="select select-bordered md:w-full sm:w-1/2 max-w-md"> {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
<option value="" disabled> className="input input-bordered md:w-full sm:w-1/2 max-w-md"
{translation.selectType[language]} />
</option> {errors.email && errors.email.type === "required" && (
{selectOptions.map((option) => ( <ErrorMessage message={translation.fieldRequired[language]} />
<option key={option.value} value={option.value}> )}
{option.label} {errors.email && errors.email.type === "pattern" && (
</option> <ErrorMessage message={translation.invalidEmail[language]} />
))} )}
</select> <input
{errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />} id="subject"
<textarea placeholder={translation.subject[language]}
id="description" type="text"
placeholder={translation.description[language]} {...register("subject", { required: true })}
{...register("description", {required: true})} className="input input-bordered md:w-full sm:w-1/2 max-w-md"
className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md" />
rows={5} {errors.subject && errors.subject.type === "required" && (
/> <ErrorMessage message={translation.fieldRequired[language]} />
{errors.description && errors.description.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />} )}
<input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} /> <select
</form> id="type"
<div className="flex flex-col"> {...register("type", { required: true })}
<Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" /> className="select select-bordered md:w-full sm:w-1/2 max-w-md"
</div> >
</section> <option value="" disabled>
<Footer language={language} /> {translation.selectType[language]}
</main> </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}
value={translation.submit[language]}
/>
</form>
<div className="flex flex-col">
<Image
src="/person_laptop_focus.jpg"
alt="Contact Us"
width={500}
height={340}
className="rounded-xl"
/>
</div>
</section>
<Footer language={language} />
</main>
</>
);
} }

8
src/translation/contactus.json
View File

@@ -46,5 +46,13 @@
"invalidEmail": { "invalidEmail": {
"en": "Invalid email", "en": "Invalid email",
"ar": "بريد إلكتروني خطأ" "ar": "بريد إلكتروني خطأ"
},
"ticketSuccess": {
"en": "Ticket submitted successfully!",
"ar": ""
},
"ticketError": {
"en": "Failed to submit the ticket!",
"ar": ""
} }
} }

12
yarn.lock
View File

@@ -623,6 +623,11 @@ clsx@^2.0.0:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b" resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
clsx@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
color-convert@^2.0.1: color-convert@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2273,6 +2278,13 @@ react-string-replace@^1.1.1:
resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.1.tgz#8413a598c60e397fe77df3464f2889f00ba25989" resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.1.tgz#8413a598c60e397fe77df3464f2889f00ba25989"
integrity sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ== integrity sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==
react-toastify@^10.0.4:
version "10.0.4"
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.4.tgz#6ecdbbf923a07fc45850e69b0566efc7bf733283"
integrity sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==
dependencies:
clsx "^2.1.0"
react@^18: react@^18:
version "18.2.0" version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"