diff --git a/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx b/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx index 61d4f67..74a81f5 100644 --- a/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx +++ b/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; - activationCount: string; + dueTo: number; + activationCount: number; privilegeId: string; - amount: string; - layer: string; - factor: string; + amount: number; + layer: 1 | 2; + factor: number; target: string; - threshold: string; + threshold: number; }; type CustomTextFieldProps = { name: string; label: string; required?: boolean; + onChange: (event: ChangeEvent) => void; }; const CustomTextField = ({ name, label, required = false, + onChange, }: CustomTextFieldProps) => ( ); +const initialValues: FormValues = { + codeword: "", + description: "", + greetings: "", + dueTo: 0, + activationCount: 0, + privilegeId: "", + amount: 0, + layer: 1, + factor: 0, + target: "", + threshold: 0, +}; + export const CreatePromocodeForm = () => { - const [dueTo, setDueTo] = useState(new Date()); const [bonusType, setBonusType] = useState("discount"); - const [layerType, setLayerType] = useState("privilege"); - const { privileges } = usePrivilegeStore(); - const { cartData } = useCartStore(); - - const initialValues: FormValues = { - codeword: "", - description: "", - greetings: "", - dueTo: "", - activationCount: "", - privilegeId: "", - amount: "", - layer: "", - factor: "", - target: "", - threshold: "", - }; 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 ( - {(props) => ( + {({ values, handleChange, handleBlur, setFieldValue }) => (
- - + + { 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) => } @@ -146,6 +165,12 @@ export const CreatePromocodeForm = () => { + setFieldValue( + "activationCount", + Number(target.value.replace(/\D/g, "")) + ) + } /> { onChange={({ target }: React.ChangeEvent) => { setBonusType(target.value as BonusType); }} - onBlur={props.handleBlur} + onBlur={handleBlur} > { ) => { - setLayerType(target.value as LayerType); + setFieldValue("target", ""); + setFieldValue("layer", Number(target.value)); }} - onBlur={props.handleBlur} + onBlur={handleBlur} > } label="Привилегия" /> } label="Сервис" /> - + + setFieldValue( + "factor", + Number(target.value.replace(/\D/g, "")) + ) + } + /> { color: theme.palette.secondary.main, }} > - {layerType === "privilege" - ? "Выбор привилегии" - : "Выбор сервиса"} + {values.layer === 1 ? "Выбор привилегии" : "Выбор сервиса"} { ".MuiSvgIcon-root ": { fill: theme.palette.secondary.main }, }} children={ - layerType === "privilege" + values.layer === 1 ? privileges.map(({ name, privilegeId }) => ( {name} )) - : cartData?.services.map(({ serviceKey }) => ( + : SERVICE_LIST.map(({ displayName, serviceKey }) => ( - {serviceKey} + {displayName} )) } @@ -237,7 +271,12 @@ export const CreatePromocodeForm = () => { + setFieldValue( + "threshold", + Number(target.value.replace(/\D/g, "")) + ) + } /> )} @@ -275,7 +314,17 @@ export const CreatePromocodeForm = () => { ))} /> - + + setFieldValue( + "amount", + Number(target.value.replace(/\D/g, "")) + ) + } + /> )}