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

Hardcoded the platform URL due to problems with using ENV variables when deploying

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-13 00:50:38 +00:00
parent 653bcf7f93
commit c31a74b835
1 changed files with 129 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/templates/ContactUs.tsx
View File

@@ -1,6 +1,6 @@
"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";
@@ -8,175 +8,142 @@ import translation from "@/translation/contactus.json";
import Image from "next/image"; import Image from "next/image";
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); console.log("formState", formState.isSubmitSuccessful);
const onSubmit: SubmitHandler<FormValues> = async (data) => { const onSubmit: SubmitHandler<FormValues> = async (data) => {
try { try {
const response = await fetch( const response = await fetch(`https://platform.encoach.com/api/tickets`, {
`${process.env.NEXT_PUBLIC_APP_URL}/api/tickets`, method: "POST",
{ headers: {
method: "POST", "Content-Type": "application/json",
headers: { },
"Content-Type": "application/json", body: JSON.stringify({
}, reporter: {
body: JSON.stringify({ name: data.name,
reporter: { email: data.email,
name: data.name, },
email: data.email, subject: data.subject,
}, type: data.type,
subject: data.subject, reportedFrom: window.location.href,
type: data.type, status: "submitted",
reportedFrom: window.location.href, date: new Date().toISOString(),
status: "submitted", description: data.description,
date: new Date().toISOString(), }),
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); console.log(data);
return; return;
} }
} catch (err) {} } catch (err) {}
}; };
return ( return (
<main className="text-mti-black flex h-screen w-full flex-col bg-white"> <main className="text-mti-black flex h-screen w-full flex-col bg-white" dir={language === "ar" ? "rtl" : "ltr"}>
<Navbar currentPage={page} language={language} /> <Navbar currentPage={page} language={language} />
<section className="w-full bg-mti-purple text-white text-center p-8 md:p-16"> <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"> <div className="w-full h-full flex flex-col items-center justify-center">
<Title>{translation.title[language]}</Title> <Title>{translation.title[language]}</Title>
</div> </div>
</section> </section>
<section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32"> <section className="w-full bg-white text-center p-8 md:p-16 flex justify-center items-center gap-32">
<form <form onSubmit={handleSubmit(onSubmit)} className="form-control items-center gap-2 text-mti-black flex flex-col w-96">
onSubmit={handleSubmit(onSubmit)} <input
className="form-control items-center gap-2 text-mti-black flex flex-col w-96" id="name"
> type="text"
<input placeholder={translation.name[language]}
id="name" {...register("name", {required: true})}
type="text" className="input input-bordered md:w-full sm:w-1/2 max-w-md"
placeholder={translation.name[language]} />
{...register("name", { required: true })} {errors.name && errors.name.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
className="input input-bordered md:w-full sm:w-1/2 max-w-md" <input
/> id="email"
{errors.name && errors.name.type === "required" && ( placeholder={translation.email[language]}
<ErrorMessage message={translation.fieldRequired[language]} /> type="text"
)} {...register("email", {required: true, pattern: /^\S+@\S+$/i})}
<input className="input input-bordered md:w-full sm:w-1/2 max-w-md"
id="email" />
placeholder={translation.email[language]} {errors.email && errors.email.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
type="text" {errors.email && errors.email.type === "pattern" && <ErrorMessage message={translation.invalidEmail[language]} />}
{...register("email", { required: true, pattern: /^\S+@\S+$/i })} <input
className="input input-bordered md:w-full sm:w-1/2 max-w-md" id="subject"
/> placeholder={translation.subject[language]}
{errors.email && errors.email.type === "required" && ( type="text"
<ErrorMessage message={translation.fieldRequired[language]} /> {...register("subject", {required: true})}
)} className="input input-bordered md:w-full sm:w-1/2 max-w-md"
{errors.email && errors.email.type === "pattern" && ( />
<ErrorMessage message={translation.invalidEmail[language]} /> {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">
<input <option value="" disabled>
id="subject" {translation.selectType[language]}
placeholder={translation.subject[language]} </option>
type="text" {selectOptions.map((option) => (
{...register("subject", { required: true })} <option key={option.value} value={option.value}>
className="input input-bordered md:w-full sm:w-1/2 max-w-md" {option.label}
/> </option>
{errors.subject && errors.subject.type === "required" && ( ))}
<ErrorMessage message={translation.fieldRequired[language]} /> </select>
)} {errors.type && errors.type.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
<select <textarea
id="type" id="description"
{...register("type", { required: true })} placeholder={translation.description[language]}
className="select select-bordered md:w-full sm:w-1/2 max-w-md" {...register("description", {required: true})}
> className="textarea textarea-bordered md:w-full sm:w-1/2 max-w-md"
<option value="" disabled> rows={5}
{translation.selectType[language]} />
</option> {errors.description && errors.description.type === "required" && <ErrorMessage message={translation.fieldRequired[language]} />}
{selectOptions.map((option) => ( <input type="submit" className="btn" disabled={!isDirty || !isValid} value={translation.submit[language]} />
<option key={option.value} value={option.value}> </form>
{option.label} <div className="flex flex-col">
</option> <Image src="/person_laptop_focus.jpg" alt="Contact Us" width={500} height={340} className="rounded-xl" />
))} </div>
</select> </section>
{errors.type && errors.type.type === "required" && ( <Footer language={language} />
<ErrorMessage message={translation.fieldRequired[language]} /> </main>
)} );
<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>
);
} }