diff --git a/src/index.tsx b/src/index.tsx index 99f5b6d..3f4aa62 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,7 +20,7 @@ import Users from "@pages/dashboard/Content/Users"; import Entities from "@pages/dashboard/Content/Entities"; import Tariffs from "@pages/dashboard/Content/Tariffs"; import DiscountManagement from "@root/pages/dashboard/Content/DiscountManagement/DiscountManagement"; -import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement"; +import { PromocodeManagement } from "@root/pages/dashboard/Content/PromocodeManagement"; import { SettingRoles } from "@pages/Setting/SettingRoles"; import Support from "@pages/dashboard/Content/Support/Support"; @@ -104,7 +104,11 @@ root.render( } /> {componentsArray.map((element) => ( - + ))} diff --git a/src/pages/dashboard/Content/PromocodeManagement.tsx b/src/pages/dashboard/Content/PromocodeManagement.tsx deleted file mode 100644 index aab03ed..0000000 --- a/src/pages/dashboard/Content/PromocodeManagement.tsx +++ /dev/null @@ -1,436 +0,0 @@ -import { Box, Typography, TextField, Checkbox, Button } from "@mui/material"; -import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; -import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; -import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker"; -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -import TableCell from "@mui/material/TableCell"; -import TableRow from "@mui/material/TableRow"; -import TableContainer from "@mui/material/TableContainer"; -import Paper from "@mui/material/Paper"; -import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid"; -import MenuItem from "@mui/material/MenuItem"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; -import theme from "../../../theme"; -import { usePromocodeStore } from "../../../stores/promocodes"; -import { useRef, useState } from "react"; -import { ServiceType } from "@root/model/tariff"; - - -const columns: GridColDef[] = [ - { - field: "id", - headerName: "ID", - width: 30, - sortable: false, - }, - { - field: "name", - headerName: "Название промокода", - width: 200, - sortable: false, - }, - { - field: "endless", - headerName: "Бесконечный", - width: 120, - sortable: false, - }, - { - field: "from", - headerName: "От", - width: 120, - sortable: false, - }, - { - field: "dueTo", - headerName: "До", - width: 120, - sortable: false, - }, - { - field: "privileges", - headerName: "Привилегии", - width: 210, - sortable: false, - } -]; - -const PromocodeManagement: React.FC = () => { - const [checkboxState, setCheckboxState] = useState(false); - const toggleCheckbox = () => { setCheckboxState(!checkboxState); }; - - const [value1, setValue1] = useState(new Date()); - const [value2, setValue2] = useState(new Date()); - - const [service, setService] = useState("templategen"); - const handleChange = (event: SelectChangeEvent) => { - setService(event.target.value as ServiceType); - }; - - const promocodes = usePromocodeStore(state => state.promocodes); - const addPromocodes = usePromocodeStore(state => state.addPromocodes); - - function createPromocode() { - // TODO - } - - // const promocodeArrayConverted = promocodes.map((item) => { - // const dateFrom = item.from ? new Date(Number(item.from)) : ""; - // const dateDueTo = item.from ? new Date(Number(item.dueTo)) : ""; - - // const strFrom = dateFrom - // ? `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}` - // : "-"; - - // const strDueTo = dateDueTo - // ? `${dateDueTo.getDate()}.${dateDueTo.getMonth()}.${dateDueTo.getFullYear()}` - // : "-"; - - // if (item.privileges.length) { - // const result = item.privileges.reduce((acc, privilege) => { - // acc = acc - // ? `${acc}, ${privilege.serviceKey} - ${privilege.discount}%` - // : `${privilege.serviceKey} - ${privilege.discount * 100}%`; - - // return acc; - // }, ""); - - // return { ...item, privileges: result, from: strFrom, dueTo: strDueTo }; - // } else { - // return { ...item, from: strFrom, dueTo: strDueTo }; - // } - // }); - - // const createPromocode = (name: string, discount: number) => { - // const newPromocode = { - // id: new Date().getTime(), - // name, - // endless: checkboxState, - // from: checkboxState ? "" : new Date(value1).getTime() + "", - // dueTo: checkboxState ? "" : new Date(value2).getTime() + "", - // privileges: [{ - // good: service, - // discount: discount / 100 - // }] - // }; - - // const promocodeArrayUpdated = [...promocodes, newPromocode]; - // addPromocodes(promocodeArrayUpdated); - // }; - - const promocodeGridData = promocodes.map(procomode => { - // TODO - }) - - const fieldName = useRef(null); - const fieldDiscount = useRef(null); - - // const checkFields = () => { - // if (fieldName.current != null && fieldDiscount.current != null) { - // createPromocode(fieldName.current.value, Number(fieldDiscount.current.value)); - // } - // }; - - return ( - <> - - - ПРОМОКОД - - - - {/**/} - {/* Название:*/} - {/**/} - - - - Условия: - - - - - - - - - - - - Работает, если заплатите 100500 денег - - - - - Вы должны будете продать душу дьяволу - - - -
- - - - Дата действия: - - - - С - - { if (e) { setValue1(e); } }} - renderInput={(params) => } - InputProps={{ - sx: { - height: "40px", - color: theme.palette.secondary.main, - border: "1px solid", - borderColor: theme.palette.secondary.main, - "& .MuiSvgIcon-root": { color: theme.palette.secondary.main } - } - }} - /> - - по - - { if (e) { setValue2(e); } }} - renderInput={(params) => } - InputProps={{ - sx: { - height: "40px", - color: theme.palette.secondary.main, - border: "1px solid", - borderColor: theme.palette.secondary.main, - "& .MuiSvgIcon-root": { color: theme.palette.secondary.main } - } - }} - /> - - - - - - toggleCheckbox()} /> - - - Бессрочно - - - - - - - - - - - - console.log("datagrid select")} - /> - - - - - - ); -}; - - -export default PromocodeManagement; diff --git a/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx b/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx new file mode 100644 index 0000000..61d4f67 --- /dev/null +++ b/src/pages/dashboard/Content/PromocodeManagement/CreatePromocodeForm.tsx @@ -0,0 +1,300 @@ +import { useEffect, useState } from "react"; +import { + Typography, + TextField, + Button, + RadioGroup, + Radio, + FormControlLabel, + Select, +} 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 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; + privilegeId: string; + amount: string; + layer: string; + factor: string; + target: string; + threshold: string; +}; + +type CustomTextFieldProps = { + name: string; + label: string; + required?: boolean; +}; + +const CustomTextField = ({ + name, + label, + required = false, +}: CustomTextFieldProps) => ( + +); + +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); + }; + + return ( + + {(props) => ( +
+ + + + + Время существования промокода + + { + if (date) { + setDueTo(date); + } + }} + 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 }, + }, + }} + /> + + ) => { + setBonusType(target.value as BonusType); + }} + onBlur={props.handleBlur} + > + } + label="Скидка" + /> + } + label="Привилегия" + /> + + {bonusType === "discount" && ( + <> + ) => { + setLayerType(target.value as LayerType); + }} + onBlur={props.handleBlur} + > + } + label="Привилегия" + /> + } + label="Сервис" + /> + + + + {layerType === "privilege" + ? "Выбор привилегии" + : "Выбор сервиса"} + + ( + + {name} + + )) + : cartData?.services.map(({ serviceKey }) => ( + + {serviceKey} + + )) + } + /> + + + )} + {bonusType === "privilege" && ( + <> + + Выбор привилегии + + ( + + {name} + + ))} + /> + + + )} + + + )} +
+ ); +}; diff --git a/src/pages/dashboard/Content/PromocodeManagement/PromocodesList.tsx b/src/pages/dashboard/Content/PromocodeManagement/PromocodesList.tsx new file mode 100644 index 0000000..ef88c39 --- /dev/null +++ b/src/pages/dashboard/Content/PromocodeManagement/PromocodesList.tsx @@ -0,0 +1,56 @@ +import { Box } from "@mui/material"; +import { DataGrid, GridColDef, GridToolbar } from "@mui/x-data-grid"; + +import { usePromocodeStore } from "@root/stores/promocodes"; + +import theme from "@root/theme"; + +const columns: GridColDef[] = [ + { field: "id", headerName: "ID", width: 30, sortable: false }, + { + field: "name", + headerName: "Название промокода", + width: 200, + sortable: false, + }, + { field: "endless", headerName: "Бесконечный", width: 120, sortable: false }, + { field: "from", headerName: "От", width: 120, sortable: false }, + { field: "dueTo", headerName: "До", width: 120, sortable: false }, + { + field: "privileges", + headerName: "Привилегии", + width: 210, + sortable: false, + }, +]; + +export const PromocodesList = () => { + const { promocodes } = usePromocodeStore(); + + return ( + + + console.log("datagrid select")} + /> + + + ); +}; diff --git a/src/pages/dashboard/Content/PromocodeManagement/index.tsx b/src/pages/dashboard/Content/PromocodeManagement/index.tsx new file mode 100644 index 0000000..835cbfc --- /dev/null +++ b/src/pages/dashboard/Content/PromocodeManagement/index.tsx @@ -0,0 +1,30 @@ +import { Typography } from "@mui/material"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; + +import { PromocodesList } from "./PromocodesList"; +import { CreatePromocodeForm } from "./CreatePromocodeForm"; + +import theme from "@root/theme"; + +export const PromocodeManagement = () => ( + + + Создание промокода + + + + +);