diff --git a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx index bcfc4b5..9ca3acb 100644 --- a/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx @@ -114,6 +114,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => { async function handleShowResultsClick() { const FC = settings.cfg.formContact.fields; + console.log(phone); if (FC["email"].used !== EMAIL_REGEXP.test(email)) { return enqueueSnackbar("введена некорректная почта"); } diff --git a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx index 0cc9702..d1f7345 100644 --- a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx @@ -21,6 +21,7 @@ export const CountrySelector: FC = ({ setMask }) => { value={country} onChange={handleChange} renderValue={(value) => value} + // autoComplete={true} MenuProps={{ PaperProps: { style: { diff --git a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx index 4be59fa..b3182fe 100644 --- a/lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx @@ -1,9 +1,9 @@ import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts"; import { useQuizSettings } from "@contexts/QuizDataContext.ts"; -import { useIMask } from "react-imask"; +import { useIMask, IMask } from "react-imask"; import { quizThemes } from "@utils/themes/Publication/themePublication.ts"; -import { FC, HTMLInputTypeAttribute, useState } from "react"; +import { ChangeEvent, FC, HTMLInputTypeAttribute, useEffect, useState } from "react"; import { CountrySelector } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx"; import { phoneMasksByCountry } from "@utils/phoneMasksByCountry.tsx"; @@ -18,13 +18,33 @@ type InputProps = { }; const TextField = MuiTextField as unknown as FC; +let first = true; -export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: InputProps) => { +function phoneChange(e: ChangeEvent, mask: string) { + console.log(e); + const masked = IMask.createMask({ + mask: "+7 (000) 000-00-00", + // ...and other options + }); + masked.value = e.target.value; + console.log(masked); + console.log(masked.typedValue); + console.log(masked.parse); + const a = IMask.pipe(e.target.value, { + mask, + }); + console.log(a); + return a || ""; +} + +export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type, value }: InputProps) => { const theme = useTheme(); const isMobile = useRootContainerSize() < 600; const { settings } = useQuizSettings(); const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]); - const { ref } = useIMask({ mask }); + console.log(mask); + // const { ref } = useIMask({ mask }); + return ( ) => onChange(phoneChange(e, mask)) : onChange} + type={isPhone ? "tel" : type} + value={value} sx={{ width: isMobile ? "100%" : "390px", backgroundColor: theme.palette.background.default, diff --git a/lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx b/lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx index 72383c4..0a9c28c 100644 --- a/lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx +++ b/lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx @@ -6,6 +6,7 @@ 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"; type InputsProps = { name: string; @@ -47,7 +48,11 @@ export const Inputs = ({ ); const Email = ( setEmail(target.value.replaceAll(/\s/g, ""))} + onChange={({ target }) => { + console.log("onChange of email"); + console.log(target.value); + setEmail(target.value.replaceAll(/\s/g, "")); + }} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} @@ -57,7 +62,12 @@ export const Inputs = ({ ); const Phone = ( setPhone(target.value)} + onChange={(phone: string) => { + console.log("onChange of phone"); + console.log(phone); + setPhone(phone); + }} + value={phone} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "Номер телефона"} diff --git a/lib/utils/sendQuestionAnswer.ts b/lib/utils/sendQuestionAnswer.ts index f416793..bf66ce3 100644 --- a/lib/utils/sendQuestionAnswer.ts +++ b/lib/utils/sendQuestionAnswer.ts @@ -42,12 +42,15 @@ export function sendQuestionAnswer( case "images": { const variant = question.content.variants.find((v) => v.id === questionAnswer.answer); if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`); - const body = variant.extendedText.split("/").pop(); + const body = { + Image: variant.extendedText, + Description: variant.answer, + }; if (!body) throw new Error(`Body of answer in question ${question.id} is undefined`); return sendAnswer({ questionId: question.id, - body, + body: JSON.stringify(body), qid: quizId, }); } @@ -119,12 +122,15 @@ export function sendQuestionAnswer( case "varimg": { const variant = question.content.variants.find((v) => v.id === questionAnswer.answer); if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`); - const body = variant.extendedText.split("/").pop(); + const body = { + Image: variant.extendedText, + Description: variant.answer, + }; if (!body) throw new Error(`Body of answer in question ${question.id} is undefined`); return sendAnswer({ questionId: question.id, - body, + body: JSON.stringify(body), qid: quizId, }); }