feat: CreatePromocodeForm logic

src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import moment from "moment";
+import { Formik, Field, Form } from "formik";
 import {
   Typography,
   TextField,
@@ -7,43 +9,46 @@ import {
   Radio,
   FormControlLabel,
   Select,
+  MenuItem,
 } from "@mui/material";
-import { Formik, Field, Form } from "formik";
 import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
-import MenuItem from "@mui/material/MenuItem";
+
-import theme from "../../../../theme";
 import { requestPrivileges } from "@root/services/privilegies.service";
 import { usePrivilegeStore } from "@root/stores/privilegesStore";
-import { useCartStore } from "@root/stores/cart";
 
+import { SERVICE_LIST } from "@root/model/privilege";
+import theme from "@root/theme";
+
+import type { ChangeEvent } from "react";
 import type { TextFieldProps } from "@mui/material";
 
 type BonusType = "discount" | "privilege";
-type LayerType = "privilege" | "service";
 type FormValues = {
   codeword: string;
   description: string;
   greetings: string;
-  dueTo: string;
+  dueTo: number;
-  activationCount: string;
+  activationCount: number;
   privilegeId: string;
-  amount: string;
+  amount: number;
-  layer: string;
+  layer: 1 | 2;
-  factor: string;
+  factor: number;
   target: string;
-  threshold: string;
+  threshold: number;
 };
 
 type CustomTextFieldProps = {
   name: string;
   label: string;
   required?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
 const CustomTextField = ({
   name,
   label,
   required = false,
+  onChange,
 }: CustomTextFieldProps) => (
   <Field
     name={name}
@@ -52,6 +57,7 @@ const CustomTextField = ({
     variant="filled"
     color="secondary"
     as={TextField}
+    onChange={onChange}
     sx={{ width: "100%", marginTop: "15px" }}
     InputProps={{
       style: {
@@ -65,51 +71,64 @@ const CustomTextField = ({
   />
 );
 
-export const CreatePromocodeForm = () => {
+const initialValues: FormValues = {
-  const [dueTo, setDueTo] = useState<Date | null>(new Date());
-  const [bonusType, setBonusType] = useState<BonusType>("discount");
-  const [layerType, setLayerType] = useState<LayerType>("privilege");
-
-  const { privileges } = usePrivilegeStore();
-  const { cartData } = useCartStore();
-
-  const initialValues: FormValues = {
   codeword: "",
   description: "",
   greetings: "",
-    dueTo: "",
+  dueTo: 0,
-    activationCount: "",
+  activationCount: 0,
   privilegeId: "",
-    amount: "",
+  amount: 0,
-    layer: "",
+  layer: 1,
-    factor: "",
+  factor: 0,
   target: "",
-    threshold: "",
+  threshold: 0,
-  };
+};
+
+export const CreatePromocodeForm = () => {
+  const [bonusType, setBonusType] = useState<BonusType>("discount");
+  const { privileges } = usePrivilegeStore();
 
   useEffect(() => {
     requestPrivileges();
   }, []);
 
   const createPromocode = (values: FormValues) => {
-    console.log(values);
+    const body = {
+      ...values,
+      threshold: values.layer === 1 ? values.threshold : values.threshold * 100,
+    };
+
+    console.log(body);
   };
 
   return (
     <Formik initialValues={initialValues} onSubmit={createPromocode}>
-      {(props) => (
+      {({ values, handleChange, handleBlur, setFieldValue }) => (
         <Form
           style={{
             width: "100%",
             maxWidth: "600px",
+            padding: "0 10px",
           }}
         >
-          <CustomTextField name="codeword" label="Кодовое слово" required />
+          <CustomTextField
-          <CustomTextField name="description" label="Описание" required />
+            name="codeword"
+            label="Кодовое слово"
+            required
+            onChange={handleChange}
+          />
+          <CustomTextField
+            name="description"
+            label="Описание"
+            required
+            onChange={handleChange}
+          />
           <CustomTextField
             name="greetings"
             label="Приветственное сообщение"
             required
+            onChange={handleChange}
           />
           <Typography
             variant="h4"
@@ -126,10 +145,10 @@ export const CreatePromocodeForm = () => {
             name="dueTo"
             as={DesktopDatePicker}
             inputFormat="DD/MM/YYYY"
-            value={dueTo}
+            value={values.dueTo ? new Date(Number(values.dueTo) * 1000) : null}
             onChange={(date: Date | null) => {
               if (date) {
-                setDueTo(date);
+                setFieldValue("dueTo", moment(date).unix() || null);
               }
             }}
             renderInput={(params: TextFieldProps) => <TextField {...params} />}
@@ -146,6 +165,12 @@ export const CreatePromocodeForm = () => {
           <CustomTextField
             name="activationCount"
             label="Количество активаций промокода"
+            onChange={({ target }) =>
+              setFieldValue(
+                "activationCount",
+                Number(target.value.replace(/\D/g, ""))
+              )
+            }
           />
           <RadioGroup
             row
@@ -155,7 +180,7 @@ export const CreatePromocodeForm = () => {
             onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
               setBonusType(target.value as BonusType);
             }}
-            onBlur={props.handleBlur}
+            onBlur={handleBlur}
           >
             <FormControlLabel
               value="discount"
@@ -173,25 +198,36 @@ export const CreatePromocodeForm = () => {
               <RadioGroup
                 row
                 name="layer"
-                value={layerType}
+                value={values.layer}
                 sx={{ marginTop: "15px" }}
                 onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
-                  setLayerType(target.value as LayerType);
+                  setFieldValue("target", "");
+                  setFieldValue("layer", Number(target.value));
                 }}
-                onBlur={props.handleBlur}
+                onBlur={handleBlur}
               >
                 <FormControlLabel
-                  value="privilege"
+                  value="1"
                   control={<Radio color="secondary" />}
                   label="Привилегия"
                 />
                 <FormControlLabel
-                  value="service"
+                  value="2"
                   control={<Radio color="secondary" />}
                   label="Сервис"
                 />
               </RadioGroup>
-              <CustomTextField name="factor" label="Процент скидки" required />
+              <CustomTextField
+                name="factor"
+                label="Процент скидки"
+                required
+                onChange={({ target }) =>
+                  setFieldValue(
+                    "factor",
+                    Number(target.value.replace(/\D/g, ""))
+                  )
+                }
+              />
               <Typography
                 variant="h4"
                 sx={{
@@ -202,14 +238,12 @@ export const CreatePromocodeForm = () => {
                   color: theme.palette.secondary.main,
                 }}
               >
-                {layerType === "privilege"
+                {values.layer === 1 ? "Выбор привилегии" : "Выбор сервиса"}
-                  ? "Выбор привилегии"
-                  : "Выбор сервиса"}
               </Typography>
               <Field
                 name="target"
                 as={Select}
-                label={layerType === "privilege" ? "Привилегия" : "Сервис"}
+                label={values.layer === 1 ? "Привилегия" : "Сервис"}
                 sx={{
                   width: "100%",
                   border: "2px solid",
@@ -221,15 +255,15 @@ export const CreatePromocodeForm = () => {
                   ".MuiSvgIcon-root ": { fill: theme.palette.secondary.main },
                 }}
                 children={
-                  layerType === "privilege"
+                  values.layer === 1
                     ? privileges.map(({ name, privilegeId }) => (
                         <MenuItem key={privilegeId} value={privilegeId}>
                           {name}
                         </MenuItem>
                       ))
-                    : cartData?.services.map(({ serviceKey }) => (
+                    : SERVICE_LIST.map(({ displayName, serviceKey }) => (
                         <MenuItem key={serviceKey} value={serviceKey}>
-                          {serviceKey}
+                          {displayName}
                         </MenuItem>
                       ))
                 }
@@ -237,7 +271,12 @@ export const CreatePromocodeForm = () => {
               <CustomTextField
                 name="threshold"
                 label="При каком значении применяется скидка"
-                required
+                onChange={({ target }) =>
+                  setFieldValue(
+                    "threshold",
+                    Number(target.value.replace(/\D/g, ""))
+                  )
+                }
               />
             </>
           )}
@@ -275,7 +314,17 @@ export const CreatePromocodeForm = () => {
                   </MenuItem>
                 ))}
               />
-              <CustomTextField name="amount" label="Количество" required />
+              <CustomTextField
+                name="amount"
+                label="Количество"
+                required
+                onChange={({ target }) =>
+                  setFieldValue(
+                    "amount",
+                    Number(target.value.replace(/\D/g, ""))
+                  )
+                }
+              />
             </>
           )}
           <Button