335 lines
14 KiB
TypeScript
335 lines
14 KiB
TypeScript
|
import { Box, Typography, Button, useTheme, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, InputLabel } from "@mui/material";
|
|||
|
|
import MenuItem from "@mui/material/MenuItem";
|
|||
|
|
import Select, { SelectChangeEvent } from "@mui/material/Select";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { SERVICE_LIST, ServiceType } from "@root/model/tariff";
|
|||
|
|
import { CustomTextField } from "@root/kitUI/CustomTextField";
|
|||
|
|
import { usePrivilegeStore } from "@root/stores/privileges";
|
|||
|
|
import { AnyDiscount } from "@root/model/cart";
|
|||
|
|
import { nanoid } from "nanoid";
|
|||
|
|
import { addDiscounts } from "@root/stores/discounts";
|
|||
|
|
import { enqueueSnackbar } from "notistack";
|
|||
|
|
|
|||
|
|
|
|||
|
|
const discountTypes = {
|
|||
|
|
"Лояльность": "purchasesAmount",
|
|||
|
|
"Корзина": "cartPurchasesAmount",
|
|||
|
|
"Сервис": "service",
|
|||
|
|
"Товар": "privilege",
|
|||
|
|
} as const;
|
|||
|
|
type DiscountType = keyof typeof discountTypes;
|
|||
|
|
|
|||
|
|
export default function CreateDiscount() {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const privileges = usePrivilegeStore(state => state.privileges);
|
|||
|
|
const [serviceType, setServiceType] = useState<ServiceType>("templategen");
|
|||
|
|
const [discountType, setDiscountType] = useState<DiscountType>("Лояльность");
|
|||
|
|
const [discountNameField, setDiscountNameField] = useState<string>("");
|
|||
|
|
const [discountDescription, setDiscountDescription] = useState<string>("");
|
|||
|
|
const [privilegeIdField, setPrivilegeIdField] = useState<string | "">("");
|
|||
|
|
const [discountFactorField, setDiscountFactorField] = useState<string>("0");
|
|||
|
|
const [purchasesAmountField, setPurchasesAmountField] = useState<string>("0");
|
|||
|
|
const [cartPurchasesAmountField, setCartPurchasesAmountField] = useState<string>("0");
|
|||
|
|
const [discountMinValueField, setDiscountMinValueField] = useState<string>("0");
|
|||
|
|
|
|||
|
|
const handleDiscountTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
setDiscountType(event.target.value as DiscountType);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleServiceTypeChange = (event: SelectChangeEvent) => {
|
|||
|
|
setServiceType(event.target.value as ServiceType);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function handleCreateDiscount() {
|
|||
|
|
const purchasesAmount = parseFloat(purchasesAmountField.replace(",", "."));
|
|||
|
|
const discountFactor = 1 - parseFloat(discountFactorField.replace(",", ".")) / 100;
|
|||
|
|
const cartPurchasesAmount = parseFloat(cartPurchasesAmountField.replace(",", "."));
|
|||
|
|
const discountMinValue = parseFloat(discountMinValueField.replace(",", "."));
|
|||
|
|
|
|||
|
|
if (!isFinite(purchasesAmount)) return enqueueSnackbar("Поле purchasesAmount не число");
|
|||
|
|
if (!isFinite(discountFactor)) return enqueueSnackbar("Поле discountFactor не число");
|
|||
|
|
if (!isFinite(cartPurchasesAmount)) return enqueueSnackbar("Поле cartPurchasesAmount не число");
|
|||
|
|
if (!isFinite(discountMinValue)) return enqueueSnackbar("Поле discountMinValue не число");
|
|||
|
|
|
|||
|
|
let discount: AnyDiscount;
|
|||
|
|
switch (discountType) {
|
|||
|
|
case "Лояльность": {
|
|||
|
|
discount = {
|
|||
|
|
_id: nanoid(6),
|
|||
|
|
name: discountNameField,
|
|||
|
|
description: discountDescription,
|
|||
|
|
disabled: false,
|
|||
|
|
conditionType: "purchasesAmount",
|
|||
|
|
condition: {
|
|||
|
|
purchasesAmount: purchasesAmount,
|
|||
|
|
},
|
|||
|
|
factor: discountFactor,
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "Корзина": {
|
|||
|
|
discount = {
|
|||
|
|
_id: nanoid(6),
|
|||
|
|
name: discountNameField,
|
|||
|
|
description: discountDescription,
|
|||
|
|
disabled: false,
|
|||
|
|
conditionType: "cartPurchasesAmount",
|
|||
|
|
condition: {
|
|||
|
|
cartPurchasesAmount: cartPurchasesAmount,
|
|||
|
|
},
|
|||
|
|
factor: discountFactor,
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "Сервис": {
|
|||
|
|
discount = {
|
|||
|
|
_id: nanoid(6),
|
|||
|
|
name: discountNameField,
|
|||
|
|
description: discountDescription,
|
|||
|
|
disabled: false,
|
|||
|
|
conditionType: "service",
|
|||
|
|
condition: {
|
|||
|
|
service: {
|
|||
|
|
id: serviceType,
|
|||
|
|
value: discountMinValue,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
target: {
|
|||
|
|
service: serviceType,
|
|||
|
|
factor: discountFactor,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
case "Товар": {
|
|||
|
|
discount = {
|
|||
|
|
_id: nanoid(6),
|
|||
|
|
name: discountNameField,
|
|||
|
|
description: discountDescription,
|
|||
|
|
disabled: false,
|
|||
|
|
conditionType: "privilege",
|
|||
|
|
condition: {
|
|||
|
|
privilege: {
|
|||
|
|
id: privilegeIdField,
|
|||
|
|
value: discountMinValue,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
target: {
|
|||
|
|
products: [{
|
|||
|
|
privilegeId: privilegeIdField,
|
|||
|
|
factor: discountFactor,
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addDiscounts([discount]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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={discountDescription}
|
|||
|
|
onChange={e => setDiscountDescription(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
<Typography
|
|||
|
|
variant="h4"
|
|||
|
|
sx={{
|
|||
|
|
width: "90%",
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
color: theme.palette.grayDisabled.main,
|
|||
|
|
paddingLeft: "10px",
|
|||
|
|
}}>
|
|||
|
|
Условия:
|
|||
|
|
</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={type} />
|
|||
|
|
)}
|
|||
|
|
</RadioGroup>
|
|||
|
|
</FormControl>
|
|||
|
|
{discountType === "Лояльность" &&
|
|||
|
|
<CustomTextField
|
|||
|
|
id="discount-purchases"
|
|||
|
|
label="Внесено больше"
|
|||
|
|
type="number"
|
|||
|
|
sx={{
|
|||
|
|
marginTop: "15px"
|
|||
|
|
}}
|
|||
|
|
value={purchasesAmountField}
|
|||
|
|
onChange={e => setPurchasesAmountField(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
{discountType === "Корзина" &&
|
|||
|
|
<CustomTextField
|
|||
|
|
id="discount-cart-purchases"
|
|||
|
|
label="Объем в корзине"
|
|||
|
|
type="number"
|
|||
|
|
sx={{
|
|||
|
|
marginTop: "15px"
|
|||
|
|
}}
|
|||
|
|
value={cartPurchasesAmountField}
|
|||
|
|
onChange={e => setCartPurchasesAmountField(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
{discountType === "Сервис" &&
|
|||
|
|
<>
|
|||
|
|
<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 === "Товар" &&
|
|||
|
|
<>
|
|||
|
|
<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 >
|
|||
|
|
);
|
|||
|
|
}
|