varimg images отправляют новую модель content Image Description

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("введена некорректная почта");
     }

lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx

@@ -21,6 +21,7 @@ export const CountrySelector: FC<CountrySelectorProps> = ({ setMask }) => {
       value={country}
       onChange={handleChange}
       renderValue={(value) => value}
+      // autoComplete={true}
       MenuProps={{
         PaperProps: {
           style: {

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<TextFieldProps>;
+let first = true;
 
-export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: InputProps) => {
+function phoneChange(e: ChangeEvent<HTMLInputElement>, 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 (
     <Box m="10px 0">
       <Typography
@@ -36,9 +56,11 @@ export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: Inpu
       </Typography>
 
       <TextField
-        inputRef={isPhone ? ref : null}
+        // inputRef={isPhone ? ref : null}
-        onChange={onChange}
+        //@ts-ignore
-        type={type}
+        onChange={isPhone ? (e: ChangeEvent<HTMLInputElement>) => onChange(phoneChange(e, mask)) : onChange}
+        type={isPhone ? "tel" : type}
+        value={value}
         sx={{
           width: isMobile ? "100%" : "390px",
           backgroundColor: theme.palette.background.default,

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 = (
     <CustomInput
-      onChange={({ target }) => 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 = (
     <CustomInput
-      onChange={({ target }) => 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 || "Номер телефона"}

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,
       });
     }