diff --git a/src/model/promocodes.ts b/src/model/promocodes.ts index 599508c..e51ddd5 100644 --- a/src/model/promocodes.ts +++ b/src/model/promocodes.ts @@ -8,6 +8,7 @@ export type CreatePromocodeBody = { privilege: { privilegeID: string; amount: number; + serviceKey: string; }; discount: { layer: number; diff --git a/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx b/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx index 8b99a10..7c26bd9 100644 --- a/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx +++ b/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx @@ -1,12 +1,12 @@ import { - Button, - FormControlLabel, - MenuItem, - Radio, - RadioGroup, - Select, - TextField, - Typography, + Button, + FormControlLabel, + MenuItem, + Radio, + RadioGroup, + Select, + TextField, + Typography, } from "@mui/material"; import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker"; import { Field, Form, Formik } from "formik"; @@ -25,345 +25,373 @@ import type { ChangeEvent } from "react"; type BonusType = "discount" | "privilege"; type FormValues = { - codeword: string; - description: string; - greetings: string; - dueTo: number; - activationCount: number; - privilegeId: string; - amount: number; - layer: 1 | 2; - factor: number; - target: string; - threshold: number; + codeword: string; + description: string; + greetings: string; + dueTo: number; + activationCount: number; + privilegeId: string; + amount: number; + layer: 1 | 2; + factor: number; + target: string; + threshold: number; + serviceKey: string; +}; + +type SelectChangeProps = { + target: { + name: string; + value: string; + }; }; const initialValues: FormValues = { - codeword: "", - description: "", - greetings: "", - dueTo: 0, - activationCount: 0, - privilegeId: "", - amount: 0, - layer: 1, - factor: 0, - target: "", - threshold: 0, + codeword: "", + description: "", + greetings: "", + dueTo: 0, + activationCount: 0, + privilegeId: "", + amount: 0, + layer: 1, + factor: 0, + target: "", + threshold: 0, + serviceKey: "", }; type Props = { - createPromocode: (body: CreatePromocodeBody) => Promise; + createPromocode: (body: CreatePromocodeBody) => Promise; }; export const CreatePromocodeForm = ({ createPromocode }: Props) => { - const [bonusType, setBonusType] = useState("discount"); - const { privileges } = usePrivilegeStore(); + const [bonusType, setBonusType] = useState("discount"); + const { privileges } = usePrivilegeStore(); - useEffect(() => { - requestPrivileges(); - }, []); + useEffect(() => { + requestPrivileges(); + }, []); - const submitForm = (values: FormValues) => { - const body = { - ...values, - threshold: values.layer === 1 ? values.threshold : values.threshold * 100, - }; - - const factorFromDiscountValue = 1 - body.factor / 100; - - return createPromocode({ - codeword: body.codeword, - description: body.description, - greetings: body.greetings, - dueTo: body.dueTo, - activationCount: body.activationCount, - bonus: { - privilege: { privilegeID: body.privilegeId, amount: body.amount }, - discount: { - layer: body.layer, - factor: factorFromDiscountValue, - target: body.target, - threshold: body.threshold, - }, - }, - }); + const submitForm = (values: FormValues) => { + const body = { + ...values, + threshold: values.layer === 1 ? values.threshold : values.threshold * 100, }; - return ( - - {({ values, handleChange, handleBlur, setFieldValue }) => ( -
- - - - - Время существования промокода - - { - setFieldValue("dueTo", event.$d.getTime() / 1000 || null); - }} - renderInput={(params: TextFieldProps) => } - InputProps={{ - sx: { - height: "40px", - color: theme.palette.secondary.main, - border: "1px solid", - borderColor: theme.palette.secondary.main, - "& .MuiSvgIcon-root": { color: theme.palette.secondary.main }, - }, - }} - /> - - setFieldValue( - "activationCount", - Number(target.value.replace(/\D/g, "")) - ) - } - /> - ) => { - setBonusType(target.value as BonusType); - }} - onBlur={handleBlur} - > - } - label="Скидка" - /> - } - label="Привилегия" - /> - - {bonusType === "discount" && ( - <> - ) => { - setFieldValue("target", ""); - setFieldValue("layer", Number(target.value)); - }} - onBlur={handleBlur} - > - } - label="Привилегия" - /> - } - label="Сервис" - /> - - { - setFieldValue( - "factor", - Number(target.value.replace(/\D/g, "")) - ); - }} - /> - - {values.layer === 1 ? "Выбор привилегии" : "Выбор сервиса"} - - ( - - {name} - - )) - : SERVICE_LIST.map(({ displayName, serviceKey }) => ( - - {displayName} - - )) - } - /> - - setFieldValue( - "threshold", - Number(target.value.replace(/\D/g, "")) - ) - } - /> - - )} - {bonusType === "privilege" && ( - <> - - Выбор привилегии - - ( - - {name} - - ))} - /> - - setFieldValue( - "amount", - Number(target.value.replace(/\D/g, "")) - ) - } - /> - - )} - - - )} -
- ); + const factorFromDiscountValue = 1 - body.factor / 100; + + return createPromocode({ + codeword: body.codeword, + description: body.description, + greetings: body.greetings, + dueTo: body.dueTo, + activationCount: body.activationCount, + bonus: { + privilege: { + privilegeID: body.privilegeId, + amount: body.amount, + serviceKey: body.serviceKey, + }, + discount: { + layer: body.layer, + factor: factorFromDiscountValue, + target: body.target, + threshold: body.threshold, + }, + }, + }); + }; + + return ( + + {({ values, handleChange, handleBlur, setFieldValue }) => ( +
+ + + + + Время существования промокода + + { + setFieldValue("dueTo", event.$d.getTime() / 1000 || null); + }} + renderInput={(params: TextFieldProps) => } + InputProps={{ + sx: { + height: "40px", + color: theme.palette.secondary.main, + border: "1px solid", + borderColor: theme.palette.secondary.main, + "& .MuiSvgIcon-root": { color: theme.palette.secondary.main }, + }, + }} + /> + + setFieldValue( + "activationCount", + Number(target.value.replace(/\D/g, "")) + ) + } + /> + ) => { + setBonusType(target.value as BonusType); + }} + onBlur={handleBlur} + > + } + label="Скидка" + /> + } + label="Привилегия" + /> + + {bonusType === "discount" && ( + <> + ) => { + setFieldValue("target", ""); + setFieldValue("layer", Number(target.value)); + }} + onBlur={handleBlur} + > + } + label="Привилегия" + /> + } + label="Сервис" + /> + + { + setFieldValue( + "factor", + Number(target.value.replace(/\D/g, "")) + ); + }} + /> + + {values.layer === 1 ? "Выбор привилегии" : "Выбор сервиса"} + + { + if (values.layer === 1) { + const currentPrivilege = privileges.find( + (item) => item.privilegeId === target.value + ); + + setFieldValue("serviceKey", currentPrivilege?.serviceKey); + setFieldValue("privilegeId", currentPrivilege?.privilegeId); + + return; + } + + setFieldValue("privilegeId", target.value); + }} + sx={{ + width: "100%", + border: "2px solid", + color: theme.palette.secondary.main, + borderColor: theme.palette.secondary.main, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + ".MuiSvgIcon-root ": { fill: theme.palette.secondary.main }, + }} + value={values.privilegeId} + children={ + values.layer === 1 + ? privileges.map(({ name, privilegeId }) => ( + + {name} + + )) + : SERVICE_LIST.map(({ displayName, serviceKey }) => ( + + {displayName} + + )) + } + /> + + setFieldValue( + "threshold", + Number(target.value.replace(/\D/g, "")) + ) + } + /> + + )} + {bonusType === "privilege" && ( + <> + + Выбор привилегии + + ( + + {name} + + ))} + /> + + setFieldValue( + "amount", + Number(target.value.replace(/\D/g, "")) + ) + } + /> + + )} + + + )} +
+ ); }; type CustomTextFieldProps = { - name: string; - label: string; - required?: boolean; - onChange: (event: ChangeEvent) => void; + name: string; + label: string; + required?: boolean; + onChange: (event: ChangeEvent) => void; }; const CustomTextField = ({ - name, - label, - required = false, - onChange, + name, + label, + required = false, + onChange, }: CustomTextFieldProps) => ( - + );