From 7700f534cc2bd84282904261ec1a443fd90f09ec Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Thu, 16 Nov 2023 16:33:01 +0300
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D0=B8=D0=BA=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D1=81=D0=BA=D0=B8=D0=B4=D0=BE=D0=BA(=D0=B2=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=BE=D1=86=D0=B5=D1=81=D1=81=D0=B5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiscountManagement/CreateDiscount.tsx     | 496 ++++++++++--------
 .../Content/Tariffs/CreateTariff.tsx          |   6 -
 2 files changed, 267 insertions(+), 235 deletions(-)

diff --git a/src/pages/dashboard/Content/DiscountManagement/CreateDiscount.tsx b/src/pages/dashboard/Content/DiscountManagement/CreateDiscount.tsx
index 4c78723..c20e856 100644
--- a/src/pages/dashboard/Content/DiscountManagement/CreateDiscount.tsx
+++ b/src/pages/dashboard/Content/DiscountManagement/CreateDiscount.tsx
@@ -24,6 +24,19 @@ import { enqueueSnackbar } from "notistack";
 import { DiscountType, discountTypes } from "@root/model/discount";
 import { createDiscount } from "@root/api/discounts";
 import usePrivileges from "@root/utils/hooks/usePrivileges";
+import { Formik, Field, Form, FormikHelpers } from "formik";
+
+interface Values {
+    discountNameField: string,
+    discountDescriptionField: string,
+    discountFactorField: string,
+    serviceType: string,
+    discountType: DiscountType,
+    purchasesAmountField: string,
+    cartPurchasesAmountField: string,
+    discountMinValueField: string,
+    privilegeIdField: string,
+}
 
 export default function CreateDiscount() {
   const theme = useTheme();
@@ -54,15 +67,30 @@ export default function CreateDiscount() {
     setServiceType(event.target.value as ServiceType);
   };
 
-  async function handleCreateDiscount() {
-    const purchasesAmount = parseFloat(purchasesAmountField.replace(",", "."));
+  const initialValues: Values = {
+      discountNameField: "",
+      discountDescriptionField: "",
+      discountFactorField: "",
+      serviceType: "",
+      discountType: "purchasesAmount",
+      purchasesAmountField: "",
+      cartPurchasesAmountField: "",
+      discountMinValueField: "",
+      privilegeIdField: "",
+  }
+
+  async function handleCreateDiscount(
+      values: Values,
+      formikHelpers: FormikHelpers<Values>
+  ) { //валидация?
+    const purchasesAmount = parseFloat(values.purchasesAmountField.replace(",", "."));
     const discountFactor =
-      (100 - parseFloat(discountFactorField.replace(",", "."))) / 100;
+      (100 - parseFloat(values.discountFactorField.replace(",", "."))) / 100;
     const cartPurchasesAmount = parseFloat(
-      cartPurchasesAmountField.replace(",", ".")
+      values.cartPurchasesAmountField.replace(",", ".")
     );
     const discountMinValue = parseFloat(
-      discountMinValueField.replace(",", ".")
+      values.discountMinValueField.replace(",", ".")
     );
 
     if (!isFinite(purchasesAmount))
@@ -87,13 +115,13 @@ export default function CreateDiscount() {
         discountFactor,
         discountMinValue,
         purchasesAmount,
-        discountDescription: discountDescriptionField,
-        discountName: discountNameField,
+        discountDescription: values.discountDescriptionField,
+        discountName: values.discountNameField,
         startDate: new Date().toISOString(),
         endDate: new Date(Date.now() + 1000 * 3600 * 24 * 30).toISOString(),
-        serviceType,
-        discountType,
-        privilegeId: privilegeIdField,
+        serviceType: values.serviceType,
+        discountType: values.discountType,
+        privilegeId: values.privilegeIdField,
       });
 
     if (createdDiscountError) {
@@ -108,225 +136,235 @@ export default function CreateDiscount() {
   }
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "left",
-        alignItems: "left",
-        marginTop: "15px",
-        width: "100%",
-        padding: "16px",
-        maxWidth: "600px",
-        gap: "1em",
-      }}
-    >
-      <CustomTextField
-        id="discount-name"
-        label="Название"
-        value={discountNameField}
-        onChange={(e) => setDiscountNameField(e.target.value)}
-      />
-      <CustomTextField
-        id="discount-desc"
-        label="Описание"
-        value={discountDescriptionField}
-        onChange={(e) => setDiscountDescriptionField(e.target.value)}
-      />
-      <Typography
-        variant="h4"
-        sx={{
-          width: "90%",
-          fontWeight: "normal",
-          color: theme.palette.grayDisabled.main,
-          paddingLeft: "10px",
-        }}
+      <Formik
+          initialValues={initialValues}
+          onSubmit={handleCreateDiscount}
+
       >
-        Условия:
-      </Typography>
-      <CustomTextField
-        id="discount-factor"
-        label="Процент скидки"
-        value={discountFactorField}
-        type="number"
-        onChange={(e) => setDiscountFactorField(e.target.value)}
-      />
-      <FormControl>
-        <FormLabel
-          id="discount-type"
-          sx={{
-            color: "white",
-            "&.Mui-focused": {
-              color: "white",
-            },
-          }}
-        >
-          Тип скидки
-        </FormLabel>
-        <RadioGroup
-          row
-          aria-labelledby="discount-type"
-          name="discount-type"
-          value={discountType}
-          onChange={handleDiscountTypeChange}
-        >
-          {Object.keys(discountTypes).map((type) => (
-            <FormControlLabel
-              key={type}
-              value={type}
-              control={<Radio color="secondary" />}
-              label={discountTypes[type as DiscountType]}
-            />
-          ))}
-        </RadioGroup>
-      </FormControl>
-      {discountType === "purchasesAmount" && (
-        <CustomTextField
-          id="discount-purchases"
-          label="Внесено больше"
-          type="number"
-          sx={{
-            marginTop: "15px",
-          }}
-          value={purchasesAmountField}
-          onChange={(e) => setPurchasesAmountField(e.target.value)}
-        />
-      )}
-      {discountType === "cartPurchasesAmount" && (
-        <CustomTextField
-          id="discount-cart-purchases"
-          label="Объем в корзине"
-          type="number"
-          sx={{
-            marginTop: "15px",
-          }}
-          value={cartPurchasesAmountField}
-          onChange={(e) => setCartPurchasesAmountField(e.target.value)}
-        />
-      )}
-      {discountType === "service" && (
-        <>
-          <Select
-            labelId="discount-service-label"
-            id="discount-service"
-            value={serviceType}
-            onChange={handleServiceTypeChange}
-            sx={{
-              color: theme.palette.secondary.main,
-              borderColor: theme.palette.secondary.main,
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme.palette.secondary.main,
-              },
-              ".MuiSvgIcon-root ": {
-                fill: theme.palette.secondary.main,
-              },
-            }}
-          >
-            {SERVICE_LIST.map((service) => (
-              <MenuItem key={service.serviceKey} value={service.serviceKey}>
-                {service.displayName}
-              </MenuItem>
-            ))}
-          </Select>
-          <CustomTextField
-            id="discount-min-value"
-            label="Минимальное значение"
-            type="number"
-            sx={{
-              marginTop: "15px",
-            }}
-            value={discountMinValueField}
-            onChange={(e) => setDiscountMinValueField(e.target.value)}
-          />
-        </>
-      )}
-      {discountType === "privilege" && (
-        <>
-          <FormControl
-            fullWidth
-            sx={{
-              color: theme.palette.secondary.main,
-              "& .MuiInputLabel-outlined": {
-                color: theme.palette.secondary.main,
-              },
-              "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
-                color: theme.palette.secondary.main,
-              },
-            }}
-          >
-            <InputLabel
-              id="privilege-select-label"
-              sx={{
-                color: theme.palette.secondary.main,
-                fontSize: "16px",
-                lineHeight: "19px",
-              }}
-            >
-              Привилегия
-            </InputLabel>
-            <Select
-              labelId="privilege-select-label"
-              id="privilege-select"
-              value={privilegeIdField}
-              label="Привилегия"
-              onChange={(e) => setPrivilegeIdField(e.target.value)}
-              sx={{
-                color: theme.palette.secondary.main,
-                borderColor: theme.palette.secondary.main,
-                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                  borderColor: theme.palette.secondary.main,
-                },
-                ".MuiSvgIcon-root ": {
-                  fill: theme.palette.secondary.main,
-                },
-              }}
-              inputProps={{ sx: { pt: "12px" } }}
-            >
-              {privileges.map((privilege, index) => (
-                <MenuItem key={index} value={privilege.privilegeId}>
-                  {privilege.description}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <CustomTextField
-            id="discount-min-value"
-            label="Минимальное значение"
-            type="number"
-            sx={{
-              marginTop: "15px",
-            }}
-            value={discountMinValueField}
-            onChange={(e) => setDiscountMinValueField(e.target.value)}
-          />
-        </>
-      )}
-      <Box
-        sx={{
-          width: "90%",
-          marginTop: "55px",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Button
-          variant="contained"
-          sx={{
-            backgroundColor: theme.palette.menu.main,
-            height: "52px",
-            fontWeight: "normal",
-            fontSize: "17px",
-            "&:hover": {
-              backgroundColor: theme.palette.grayMedium.main,
-            },
-          }}
-          onClick={handleCreateDiscount}
-        >
-          Cоздать
-        </Button>
-      </Box>
-    </Box>
+          {(props) => (
+              <Form style={{width: "100%"}} >
+                  <Box
+                      sx={{
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "left",
+                          alignItems: "left",
+                          marginTop: "15px",
+                          width: "100%",
+                          padding: "16px",
+                          maxWidth: "600px",
+                          gap: "1em",
+                      }}
+                  >
+                      <Field
+                          as={CustomTextField}
+                          id="discount-name"
+                          label="Название"
+                          name="discountNameField"
+
+                      />
+                      <Field
+                          id="discount-desc"
+                          label="Описание"
+                          name="discountDescriptionField"
+                      />
+                      <Typography
+                          variant="h4"
+                          sx={{
+                              width: "90%",
+                              fontWeight: "normal",
+                              color: theme.palette.grayDisabled.main,
+                              paddingLeft: "10px",
+                          }}
+                      >
+                          Условия:
+                      </Typography>
+                      <Field
+                          id="discount-factor"
+                          label="Процент скидки"
+                          name="discountFactorField"
+                          type="number"
+                      />
+                      <FormControl>
+                          <FormLabel
+                              id="discount-type"
+                              sx={{
+                                  color: "white",
+                                  "&.Mui-focused": {
+                                      color: "white",
+                                  },
+                              }}
+                          >
+                              Тип скидки
+                          </FormLabel>
+                          <Field
+                              as={RadioGroup}
+                              row
+                              aria-labelledby="discount-type"
+                              name="discountType"
+
+                              onChange={handleDiscountTypeChange}
+                          >
+                              {Object.keys(discountTypes).map((type) => (
+                                  <FormControlLabel
+                                      key={type}
+                                      value={type}
+                                      control={<Radio color="secondary" />}
+                                      label={discountTypes[type as DiscountType]}
+                                  />
+                              ))}
+                          </Field>
+                      </FormControl>
+                      {discountType === "purchasesAmount" && (
+                          <Field
+                              as={CustomTextField}
+                              id="discount-purchases"
+                              name="purchasesAmountField"
+                              label="Внесено больше"
+                              type="number"
+                              sx={{
+                                  marginTop: "15px",
+                              }}
+                          />
+                      )}
+                      {discountType === "cartPurchasesAmount" && (
+                          <Field
+                              as={CustomTextField}
+                              id="discount-cart-purchases"
+                              label="Объем в корзине"
+                              name="cartPurchasesAmountField"
+                              type="number"
+                              sx={{
+                                  marginTop: "15px",
+                              }}
+                          />
+                      )}
+                      {discountType === "service" && (
+                          <>
+                              <Field
+                                  as={Select}
+                                  labelId="discount-service-label"
+                                  id="discount-service"
+                                  name="serviceType"
+                                  sx={{
+                                      color: theme.palette.secondary.main,
+                                      borderColor: theme.palette.secondary.main,
+                                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                                          borderColor: theme.palette.secondary.main,
+                                      },
+                                      ".MuiSvgIcon-root ": {
+                                          fill: theme.palette.secondary.main,
+                                      },
+                                  }}
+                              >
+                                  {SERVICE_LIST.map((service) => (
+                                      <MenuItem key={service.serviceKey} value={service.serviceKey}>
+                                          {service.displayName}
+                                      </MenuItem>
+                                  ))}
+                              </Field>
+                              <Field
+                                  as={CustomTextField}
+                                  id="discount-min-value"
+                                  name="discountMinValueField"
+                                  label="Минимальное значение"
+                                  type="number"
+                                  sx={{
+                                      marginTop: "15px",
+                                  }}
+                              />
+                          </>
+                      )}
+                      {discountType === "privilege" && (
+                          <>
+                              <FormControl
+                                  fullWidth
+                                  sx={{
+                                      color: theme.palette.secondary.main,
+                                      "& .MuiInputLabel-outlined": {
+                                          color: theme.palette.secondary.main,
+                                      },
+                                      "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
+                                          color: theme.palette.secondary.main,
+                                      },
+                                  }}
+                              >
+                                  <InputLabel
+                                      id="privilege-select-label"
+                                      sx={{
+                                          color: theme.palette.secondary.main,
+                                          fontSize: "16px",
+                                          lineHeight: "19px",
+                                      }}
+                                  >
+                                      Привилегия
+                                  </InputLabel>
+                                  <Form
+                                      as={Select}
+                                      labelId="privilege-select-label"
+                                      id="privilege-select"
+                                      name="privilegeIdField"
+                                      label="Привилегия"
+                                      sx={{
+                                          color: theme.palette.secondary.main,
+                                          borderColor: theme.palette.secondary.main,
+                                          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                                              borderColor: theme.palette.secondary.main,
+                                          },
+                                          ".MuiSvgIcon-root ": {
+                                              fill: theme.palette.secondary.main,
+                                          },
+                                      }}
+                                      inputProps={{ sx: { pt: "12px" } }}
+                                  >
+                                      {privileges.map((privilege, index) => (
+                                          <MenuItem key={index} value={privilege.privilegeId}>
+                                              {privilege.description}
+                                          </MenuItem>
+                                      ))}
+                                  </Form>
+                              </FormControl>
+                              <Field
+                                  as={CustomTextField}
+                                  id="discount-min-value"
+                                  label="Минимальное значение"
+                                  type="number"
+                                  sx={{
+                                      marginTop: "15px",
+                                  }}
+                              />
+                          </>
+                      )}
+                      <Box
+                          sx={{
+                              width: "90%",
+                              marginTop: "55px",
+                              display: "flex",
+                              flexDirection: "column",
+                              justifyContent: "center",
+                              alignItems: "center",
+                          }}
+                      >
+                          <Button
+                              variant="contained"
+                              type='submit'
+                              sx={{
+                                  backgroundColor: theme.palette.menu.main,
+                                  height: "52px",
+                                  fontWeight: "normal",
+                                  fontSize: "17px",
+                                  "&:hover": {
+                                      backgroundColor: theme.palette.grayMedium.main,
+                                  },
+                              }}
+                          >
+                              Создать
+                          </Button>
+                      </Box>
+                  </Box>
+              </Form>
+              )}
+      </Formik>
+
   );
 }
diff --git a/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx b/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
index 8001eae..b1d2b7f 100644
--- a/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
+++ b/src/pages/dashboard/Content/Tariffs/CreateTariff.tsx
@@ -247,12 +247,6 @@ export default function CreateTariff() {
                   >
                     Создать
                   </Button>
-                  <Button
-                      className="btn_createTariffBackend"
-                      onClick={() => {console.log(props)}}
-                  >
-                    проверка
-                  </Button>
                 </Container>
               </Form>
               )}