120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
|
|
import NameIcon from "@icons/ContactFormIcon/NameIcon.tsx";
|
|
import EmailIcon from "@icons/ContactFormIcon/EmailIcon.tsx";
|
|
import TextIcon from "@icons/ContactFormIcon/TextIcon.tsx";
|
|
import AddressIcon from "@icons/ContactFormIcon/AddressIcon.tsx";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { CustomInput } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx";
|
|
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon.tsx";
|
|
import PhoneInput from "react-phone-number-input";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type InputsProps = {
|
|
name: string;
|
|
setName: Dispatch<SetStateAction<string>>;
|
|
email: string;
|
|
setEmail: Dispatch<SetStateAction<string>>;
|
|
phone: string;
|
|
setPhone: Dispatch<SetStateAction<string>>;
|
|
text: string;
|
|
setText: Dispatch<SetStateAction<string>>;
|
|
adress: string;
|
|
setAdress: Dispatch<SetStateAction<string>>;
|
|
crutch: {
|
|
disableEmail: boolean;
|
|
};
|
|
};
|
|
|
|
export const Inputs = ({
|
|
name,
|
|
setName,
|
|
email,
|
|
setEmail,
|
|
phone,
|
|
setPhone,
|
|
text,
|
|
setText,
|
|
adress,
|
|
setAdress,
|
|
crutch,
|
|
}: InputsProps) => {
|
|
const { settings } = useQuizSettings();
|
|
const { t } = useTranslation();
|
|
const FC = settings.cfg.formContact.fields;
|
|
|
|
if (!FC) return null;
|
|
const Name = (
|
|
<CustomInput
|
|
onChange={({ target }) => setName(target.value)}
|
|
id={name}
|
|
title={FC["name"].innerText || `${t("Enter")} ${t("Name").toLowerCase()}`}
|
|
desc={FC["name"].text || t("Name")}
|
|
Icon={NameIcon}
|
|
/>
|
|
);
|
|
const Email = (
|
|
<CustomInput
|
|
onChange={({ target }) => {
|
|
setEmail(target.value.replaceAll(/\s/g, ""));
|
|
}}
|
|
id={email}
|
|
title={FC["email"].innerText || `${t("Enter")} Email`}
|
|
desc={FC["email"].text || "Email"}
|
|
Icon={EmailIcon}
|
|
type="email"
|
|
/>
|
|
);
|
|
const Phone = (
|
|
<CustomInput
|
|
onChange={({ target }) => setText(target.value)}
|
|
onChangePhone={(phone: string) => {
|
|
setPhone(phone);
|
|
}}
|
|
value={phone}
|
|
id={phone}
|
|
title={FC["phone"].innerText || `${t("Enter")} ${t("Phone number").toLowerCase()}`}
|
|
desc={FC["phone"].text || t("Phone number")}
|
|
Icon={PhoneIcon}
|
|
isPhone={true}
|
|
/>
|
|
);
|
|
const Text = (
|
|
<CustomInput
|
|
onChange={({ target }) => setText(target.value)}
|
|
id={text}
|
|
title={FC["text"].text || `${t("Enter")} ${t("Last name").toLowerCase()}`}
|
|
desc={FC["text"].innerText || t("Last name")}
|
|
Icon={TextIcon}
|
|
/>
|
|
);
|
|
const Adress = (
|
|
<CustomInput
|
|
onChange={({ target }) => setAdress(target.value)}
|
|
id={adress}
|
|
title={FC["address"].innerText || `${t("Enter")} ${t("Address").toLowerCase()}`}
|
|
desc={FC["address"].text || t("Address")}
|
|
Icon={AddressIcon}
|
|
/>
|
|
);
|
|
|
|
if (Object.values(FC).some((data) => data.used)) {
|
|
return (
|
|
<>
|
|
{FC["name"].used ? Name : <></>}
|
|
{FC["email"].used && !crutch.disableEmail ? Email : <></>}
|
|
{FC["phone"].used ? Phone : <></>}
|
|
{FC["text"].used ? Text : <></>}
|
|
{FC["address"].used ? Adress : <></>}
|
|
</>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
{Name}
|
|
{Email}
|
|
{Phone}
|
|
</>
|
|
);
|
|
}
|
|
};
|