формик для страниц тарифов и скидок готово
This commit is contained in:
Tamara
parent
2503b7e499
commit
d4fede1016
@ -12,9 +12,7 @@ import {
|
||||
} 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 {
|
||||
resetPrivilegeArray,
|
||||
usePrivilegeStore,
|
||||
@ -25,7 +23,6 @@ import { DiscountType, discountTypes } from "@root/model/discount";
|
||||
import { createDiscount } from "@root/api/discounts";
|
||||
import usePrivileges from "@root/utils/hooks/usePrivileges";
|
||||
import { Formik, Field, Form, FormikHelpers } from "formik";
|
||||
import OutlinedInput from "@kitUI/outlinedInput";
|
||||
|
||||
interface Values {
|
||||
discountNameField: string,
|
||||
@ -42,32 +39,9 @@ interface Values {
|
||||
export default function CreateDiscount() {
|
||||
const theme = useTheme();
|
||||
const privileges = usePrivilegeStore((state) => state.privileges);
|
||||
const [serviceType, setServiceType] = useState<ServiceType>("templategen");
|
||||
const [discountType, setDiscountType] =
|
||||
useState<DiscountType>("purchasesAmount");
|
||||
const [discountNameField, setDiscountNameField] = useState<string>("");
|
||||
const [discountDescriptionField, setDiscountDescriptionField] =
|
||||
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");
|
||||
|
||||
usePrivileges({ onNewPrivileges: resetPrivilegeArray });
|
||||
|
||||
const handleDiscountTypeChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setDiscountType(event.target.value as DiscountType);
|
||||
};
|
||||
|
||||
const handleServiceTypeChange = (event: SelectChangeEvent) => {
|
||||
setServiceType(event.target.value as ServiceType);
|
||||
};
|
||||
|
||||
const initialValues: Values = {
|
||||
discountNameField: "",
|
||||
discountDescriptionField: "",
|
||||
@ -135,8 +109,12 @@ export default function CreateDiscount() {
|
||||
if (!isFinite(((100 - parseFloat(values.discountFactorField.replace(",", "."))) / 100))) {
|
||||
errors.discountFactorField = 'Поле "Процент скидки" не число'
|
||||
}
|
||||
if (values.discountType === "privilege" && !values.privilegeIdField)
|
||||
if (values.discountType === "privilege" && !values.privilegeIdField) {
|
||||
errors.privilegeIdField = "Привилегия не выбрана"
|
||||
}
|
||||
if (values.discountType === "service" && !values.serviceType) {
|
||||
errors.serviceType = "Сервис не выбран"
|
||||
}
|
||||
if (values.discountType === "purchasesAmount" && !isFinite(parseFloat(values.purchasesAmountField.replace(",", ".")))) {
|
||||
errors.purchasesAmountField = 'Поле "Внесено больше" не число'
|
||||
}
|
||||
@ -173,9 +151,10 @@ export default function CreateDiscount() {
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
as={TextField}
|
||||
id="discount-name"
|
||||
label="Название"
|
||||
variant="filled"
|
||||
name="discountNameField"
|
||||
error={props.touched.discountNameField && !!props.errors.discountNameField}
|
||||
helperText={
|
||||
@ -183,6 +162,17 @@ export default function CreateDiscount() {
|
||||
{props.errors.discountNameField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Field
|
||||
as={TextField}
|
||||
@ -220,16 +210,30 @@ export default function CreateDiscount() {
|
||||
>
|
||||
Условия:
|
||||
</Typography>
|
||||
<CustomTextField
|
||||
<Field
|
||||
as={TextField}
|
||||
id="discount-factor"
|
||||
label="Процент скидки"
|
||||
variant="filled"
|
||||
name="discountFactorField"
|
||||
error={props.touched.discountFactorField && !!props.errors.discountFactorField}
|
||||
value={props.values.discountFactorField}
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("discountFactorField", e.target.value.replace(/[^\d]/g, ''))
|
||||
helperText={
|
||||
<Typography sx={{fontSize: "12px", width: "200px"}}>
|
||||
{props.errors.discountFactorField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
onBlur={props.handleBlur}
|
||||
/>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
@ -266,9 +270,10 @@ export default function CreateDiscount() {
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{props.values.discountType === "purchasesAmount" && (
|
||||
<CustomTextField
|
||||
<TextField
|
||||
id="discount-purchases"
|
||||
name="purchasesAmountField"
|
||||
variant="filled"
|
||||
error={props.touched.purchasesAmountField && !!props.errors.purchasesAmountField}
|
||||
label="Внесено больше"
|
||||
onChange={(e) => {
|
||||
@ -279,13 +284,30 @@ export default function CreateDiscount() {
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
helperText={
|
||||
<Typography sx={{fontSize: "12px", width: "200px"}}>
|
||||
{props.errors.purchasesAmountField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{props.values.discountType === "cartPurchasesAmount" && (
|
||||
<CustomTextField
|
||||
<TextField
|
||||
id="discount-cart-purchases"
|
||||
label="Объем в корзине"
|
||||
name="cartPurchasesAmountField"
|
||||
variant="filled"
|
||||
error={props.touched.cartPurchasesAmountField && !!props.errors.cartPurchasesAmountField}
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("cartPurchasesAmountField", e.target.value.replace(/[^\d]/g, ''))
|
||||
@ -295,6 +317,22 @@ export default function CreateDiscount() {
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
helperText={
|
||||
<Typography sx={{fontSize: "12px", width: "200px"}}>
|
||||
{props.errors.cartPurchasesAmountField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{props.values.discountType === "service" && (
|
||||
@ -325,10 +363,12 @@ export default function CreateDiscount() {
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<CustomTextField
|
||||
<TextField
|
||||
id="discount-min-value"
|
||||
name="discountMinValueField"
|
||||
label="Минимальное значение"
|
||||
onBlur={props.handleBlur}
|
||||
variant="filled"
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("discountMinValueField", e.target.value.replace(/[^\d]/g, ''))
|
||||
}}
|
||||
@ -337,6 +377,22 @@ export default function CreateDiscount() {
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
helperText={
|
||||
<Typography sx={{fontSize: "12px", width: "200px"}}>
|
||||
{props.errors.discountMinValueField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
@ -393,18 +449,36 @@ export default function CreateDiscount() {
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<CustomTextField
|
||||
<TextField
|
||||
id="discount-min-value"
|
||||
name="discountMinValueField"
|
||||
label="Минимальное значение"
|
||||
onBlur={props.handleBlur}
|
||||
variant="filled"
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("discountMinValueField", e.target.value.replace(/[^\d]/g, ''))
|
||||
}}
|
||||
error={props.touched.discountMinValueField && !!props.errors.discountMinValueField}
|
||||
value={props.values.discountMinValueField}
|
||||
error={props.touched.discountMinValueField && !!props.errors.discountMinValueField}
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
helperText={
|
||||
<Typography sx={{fontSize: "12px", width: "200px"}}>
|
||||
{props.errors.discountMinValueField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
@ -8,11 +7,9 @@ import {
|
||||
FormControl,
|
||||
InputLabel,
|
||||
useTheme,
|
||||
Box,
|
||||
Box, TextField,
|
||||
} from "@mui/material";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import OutlinedInput from "@kitUI/outlinedInput";
|
||||
import { CustomTextField } from "@root/kitUI/CustomTextField";
|
||||
import { requestTariffs } from "@root/services/tariffs.service";
|
||||
import { createTariff } from "@root/api/tariffs";
|
||||
|
||||
@ -20,6 +17,7 @@ import {
|
||||
findPrivilegeById,
|
||||
usePrivilegeStore,
|
||||
} from "@root/stores/privilegesStore";
|
||||
import { PrivilegeWithAmount } from "@frontend/kitui";
|
||||
import { currencyFormatter } from "@root/utils/currencyFormatter";
|
||||
import { Formik, Field, Form, FormikHelpers } from "formik";
|
||||
|
||||
@ -28,6 +26,7 @@ interface Values {
|
||||
amountField: string,
|
||||
customPriceField: string,
|
||||
privilegeIdField: string,
|
||||
privilege: PrivilegeWithAmount | null
|
||||
}
|
||||
|
||||
export default function CreateTariff() {
|
||||
@ -35,13 +34,6 @@ export default function CreateTariff() {
|
||||
|
||||
const privileges = usePrivilegeStore((store) => store.privileges);
|
||||
|
||||
// const [nameField, setNameField] = useState<string>("");
|
||||
// const [amountField, setAmountField] = useState<string>("");
|
||||
// const [customPriceField, setCustomPriceField] = useState<string>("");
|
||||
const [privilegeIdField, setPrivilegeIdField] = useState<string>("");
|
||||
|
||||
const privilege = findPrivilegeById(privilegeIdField);
|
||||
|
||||
const checkFulledFields = (values: Values) => {
|
||||
const errors = {} as any;
|
||||
|
||||
@ -64,26 +56,27 @@ export default function CreateTariff() {
|
||||
amountField: "",
|
||||
customPriceField: "",
|
||||
privilegeIdField: "",
|
||||
privilege: null
|
||||
};
|
||||
|
||||
const createTariffBackend = async (
|
||||
values: Values,
|
||||
formikHelpers: FormikHelpers<Values>
|
||||
) => {
|
||||
if (privilege !== null) {
|
||||
if (values.privilege !== null) {
|
||||
const [_, createdTariffError] = await createTariff({
|
||||
name: values.nameField,
|
||||
price: Number(values.customPriceField) * 100,
|
||||
isCustom: false,
|
||||
privileges: [
|
||||
{
|
||||
name: privilege.name,
|
||||
privilegeId: privilege.privilegeId ?? "",
|
||||
serviceKey: privilege.serviceKey,
|
||||
description: privilege.description,
|
||||
type: privilege.type,
|
||||
value: privilege.value ?? "",
|
||||
price: privilege.price,
|
||||
name: values.privilege.name,
|
||||
privilegeId: values.privilege.privilegeId ?? "",
|
||||
serviceKey: values.privilege.serviceKey,
|
||||
description: values.privilege.description,
|
||||
type: values.privilege.type,
|
||||
value: values.privilege.value ?? "",
|
||||
price: values.privilege.price,
|
||||
amount: Number(values.amountField),
|
||||
},
|
||||
],
|
||||
@ -165,6 +158,9 @@ export default function CreateTariff() {
|
||||
error={props.touched.privilegeIdField && !!props.errors.privilegeIdField}
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("privilegeIdField", e.target.value)
|
||||
props.setFieldValue("privilege", findPrivilegeById(e.target.value))
|
||||
if (props.values.privilege === null)
|
||||
return enqueueSnackbar("Привилегия не найдена");
|
||||
}}
|
||||
onBlur={props.handleBlur}
|
||||
sx={{
|
||||
@ -191,7 +187,7 @@ export default function CreateTariff() {
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{privilege && (
|
||||
{props.values.privilege && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -199,21 +195,21 @@ export default function CreateTariff() {
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
Имя: <span>{privilege.name}</span>
|
||||
Имя: <span>{props.values.privilege.name}</span>
|
||||
</Typography>
|
||||
<Typography>
|
||||
Сервис: <span>{privilege.serviceKey}</span>
|
||||
Сервис: <span>{props.values.privilege.serviceKey}</span>
|
||||
</Typography>
|
||||
<Typography>
|
||||
Единица: <span>{privilege.type}</span>
|
||||
Единица: <span>{props.values.privilege.type}</span>
|
||||
</Typography>
|
||||
<Typography>
|
||||
Стандартная цена за единицу: <span>{currencyFormatter.format(privilege.price / 100)}</span>
|
||||
Стандартная цена за единицу: <span>{currencyFormatter.format(props.values.privilege.price / 100)}</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<Field
|
||||
as={OutlinedInput}
|
||||
as={TextField}
|
||||
id="tariff-name"
|
||||
name="nameField"
|
||||
variant="filled"
|
||||
@ -225,26 +221,67 @@ export default function CreateTariff() {
|
||||
{props.errors.nameField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<OutlinedInput
|
||||
<TextField
|
||||
id="amountField"
|
||||
name="amountField"
|
||||
variant="filled"
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("amountField", e.target.value.replace(/[^\d]/g,''))
|
||||
}}
|
||||
value={props.values.amountField}
|
||||
onBlur={props.handleBlur}
|
||||
label="Кол-во единиц привилегии"
|
||||
error={props.touched.amountField && !!props.errors.amountField}
|
||||
helperText={
|
||||
<Typography sx={{ fontSize: "12px", width: "200px" }}>
|
||||
{props.errors.amountField}
|
||||
</Typography>
|
||||
}
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<OutlinedInput
|
||||
<TextField
|
||||
id="tariff-custom-price"
|
||||
name="customPriceField"
|
||||
variant="filled"
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("customPriceField", e.target.value.replace(/[^\d]/g,''))
|
||||
}}
|
||||
value={props.values.customPriceField}
|
||||
onBlur={props.handleBlur}
|
||||
label="Кастомная цена (не обязательно)"
|
||||
InputProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
}
|
||||
}}
|
||||
InputLabelProps={{
|
||||
style: {
|
||||
color: theme.palette.secondary.main
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className="btn_createTariffBackend"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user