165 lines
6.2 KiB
TypeScript
165 lines
6.2 KiB
TypeScript
import { Typography, Container, Button, Select, MenuItem, FormControl, InputLabel, TextField, useTheme, Box } from "@mui/material";
|
||
import { Tariff } from "@root/model/tariff";
|
||
import { usePrivilegeStore } from "@root/stores/privileges";
|
||
import { useTariffStore } from "@root/stores/tariffs";
|
||
import { nanoid } from "nanoid";
|
||
import { ChangeEvent, HTMLInputTypeAttribute, useState } from "react";
|
||
|
||
|
||
export default function CreateTariff() {
|
||
const theme = useTheme();
|
||
const privileges = usePrivilegeStore(store => store.privileges);
|
||
const addTariffs = useTariffStore(store => store.addTariffs);
|
||
const [nameField, setNameField] = useState<string>("");
|
||
const [amountField, setAmountField] = useState<string>("");
|
||
const [customPriceField, setCustomPriceField] = useState<string>("");
|
||
const [privilegeIdField, setPrivilegeIdField] = useState<string | "">("");
|
||
|
||
const privilege = privileges.find(p => p.privilegeId === privilegeIdField);
|
||
|
||
function handleCreateTariffClick() {
|
||
const amount = Number(amountField);
|
||
const customPricePerUnit = Number(customPriceField);
|
||
|
||
if (isNaN(amount) || !privilege) return;
|
||
|
||
const newTariff: Tariff = {
|
||
id: nanoid(5),
|
||
name: nameField,
|
||
amount,
|
||
privilege,
|
||
customPricePerUnit: customPricePerUnit ? customPricePerUnit : undefined,
|
||
};
|
||
|
||
addTariffs([newTariff]);
|
||
}
|
||
|
||
return (
|
||
<Container sx={{
|
||
p: "20px",
|
||
border: "1px solid rgba(224, 224, 224, 1)",
|
||
borderRadius: "4px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "12px",
|
||
}}>
|
||
<Typography variant="h6" sx={{ textAlign: "center", mb: "16px" }}>Создание кастомного тарифа</Typography>
|
||
<FormControl
|
||
fullWidth
|
||
sx={{
|
||
height: "52px",
|
||
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,
|
||
border: "1px solid",
|
||
},
|
||
".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>
|
||
{privilege &&
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}>
|
||
<Typography>Имя: <span>{privilege.name}</span></Typography>
|
||
<Typography>Сервис: <span>{privilege.serviceKey}</span></Typography>
|
||
<Typography>Единица: <span>{privilege.type}</span></Typography>
|
||
<Typography>Стандартная цена за единицу: <span>{privilege.pricePerUnit}</span></Typography>
|
||
</Box>
|
||
}
|
||
<CustomTextField
|
||
id="tariff-name"
|
||
label="Название тарифа"
|
||
value={nameField}
|
||
setValue={e => setNameField(e.target.value)}
|
||
/>
|
||
<CustomTextField
|
||
id="tariff-amount"
|
||
label="Кол-во единиц привилегии"
|
||
value={amountField}
|
||
setValue={e => setAmountField(e.target.value)}
|
||
type="number"
|
||
/>
|
||
<CustomTextField
|
||
id="tariff-custom-price"
|
||
label="Кастомная цена за единицу (не обязательно)"
|
||
value={customPriceField}
|
||
setValue={e => setCustomPriceField(e.target.value)}
|
||
type="number"
|
||
/>
|
||
<Button
|
||
onClick={handleCreateTariffClick}
|
||
disabled={privilegeIdField === "" || amountField === "" || nameField === ""}
|
||
>Создать</Button>
|
||
</Container>
|
||
);
|
||
}
|
||
|
||
function CustomTextField({ id, label, value, type, setValue }: {
|
||
id: string;
|
||
label: string;
|
||
value: number | string | null;
|
||
type?: HTMLInputTypeAttribute;
|
||
setValue: (e: ChangeEvent<HTMLInputElement>) => void;
|
||
}) {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<TextField
|
||
fullWidth
|
||
id={id}
|
||
label={label}
|
||
variant="filled"
|
||
color="secondary"
|
||
type={type}
|
||
InputProps={{
|
||
style: {
|
||
backgroundColor: theme.palette.content.main,
|
||
color: theme.palette.secondary.main,
|
||
}
|
||
}}
|
||
InputLabelProps={{
|
||
style: {
|
||
color: theme.palette.secondary.main
|
||
}
|
||
}}
|
||
value={value ? value : ""}
|
||
onChange={setValue}
|
||
/>
|
||
);
|
||
} |