формик для скидок(в процессе)
This commit is contained in:
Tamara
parent
bc48cc0c33
commit
7700f534cc
@ -24,6 +24,19 @@ import { enqueueSnackbar } from "notistack";
|
||||
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";
|
||||
|
||||
interface Values {
|
||||
discountNameField: string,
|
||||
discountDescriptionField: string,
|
||||
discountFactorField: string,
|
||||
serviceType: string,
|
||||
discountType: DiscountType,
|
||||
purchasesAmountField: string,
|
||||
cartPurchasesAmountField: string,
|
||||
discountMinValueField: string,
|
||||
privilegeIdField: string,
|
||||
}
|
||||
|
||||
export default function CreateDiscount() {
|
||||
const theme = useTheme();
|
||||
@ -54,15 +67,30 @@ export default function CreateDiscount() {
|
||||
setServiceType(event.target.value as ServiceType);
|
||||
};
|
||||
|
||||
async function handleCreateDiscount() {
|
||||
const purchasesAmount = parseFloat(purchasesAmountField.replace(",", "."));
|
||||
const initialValues: Values = {
|
||||
discountNameField: "",
|
||||
discountDescriptionField: "",
|
||||
discountFactorField: "",
|
||||
serviceType: "",
|
||||
discountType: "purchasesAmount",
|
||||
purchasesAmountField: "",
|
||||
cartPurchasesAmountField: "",
|
||||
discountMinValueField: "",
|
||||
privilegeIdField: "",
|
||||
}
|
||||
|
||||
async function handleCreateDiscount(
|
||||
values: Values,
|
||||
formikHelpers: FormikHelpers<Values>
|
||||
) { //валидация?
|
||||
const purchasesAmount = parseFloat(values.purchasesAmountField.replace(",", "."));
|
||||
const discountFactor =
|
||||
(100 - parseFloat(discountFactorField.replace(",", "."))) / 100;
|
||||
(100 - parseFloat(values.discountFactorField.replace(",", "."))) / 100;
|
||||
const cartPurchasesAmount = parseFloat(
|
||||
cartPurchasesAmountField.replace(",", ".")
|
||||
values.cartPurchasesAmountField.replace(",", ".")
|
||||
);
|
||||
const discountMinValue = parseFloat(
|
||||
discountMinValueField.replace(",", ".")
|
||||
values.discountMinValueField.replace(",", ".")
|
||||
);
|
||||
|
||||
if (!isFinite(purchasesAmount))
|
||||
@ -87,13 +115,13 @@ export default function CreateDiscount() {
|
||||
discountFactor,
|
||||
discountMinValue,
|
||||
purchasesAmount,
|
||||
discountDescription: discountDescriptionField,
|
||||
discountName: discountNameField,
|
||||
discountDescription: values.discountDescriptionField,
|
||||
discountName: values.discountNameField,
|
||||
startDate: new Date().toISOString(),
|
||||
endDate: new Date(Date.now() + 1000 * 3600 * 24 * 30).toISOString(),
|
||||
serviceType,
|
||||
discountType,
|
||||
privilegeId: privilegeIdField,
|
||||
serviceType: values.serviceType,
|
||||
discountType: values.discountType,
|
||||
privilegeId: values.privilegeIdField,
|
||||
});
|
||||
|
||||
if (createdDiscountError) {
|
||||
@ -108,225 +136,235 @@ export default function CreateDiscount() {
|
||||
}
|
||||
|
||||
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={discountDescriptionField}
|
||||
onChange={(e) => setDiscountDescriptionField(e.target.value)}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
paddingLeft: "10px",
|
||||
}}
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleCreateDiscount}
|
||||
|
||||
>
|
||||
Условия:
|
||||
</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={discountTypes[type as DiscountType]}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{discountType === "purchasesAmount" && (
|
||||
<CustomTextField
|
||||
id="discount-purchases"
|
||||
label="Внесено больше"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
value={purchasesAmountField}
|
||||
onChange={(e) => setPurchasesAmountField(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
{discountType === "cartPurchasesAmount" && (
|
||||
<CustomTextField
|
||||
id="discount-cart-purchases"
|
||||
label="Объем в корзине"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
value={cartPurchasesAmountField}
|
||||
onChange={(e) => setCartPurchasesAmountField(e.target.value)}
|
||||
/>
|
||||
)}
|
||||
{discountType === "service" && (
|
||||
<>
|
||||
<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 === "privilege" && (
|
||||
<>
|
||||
<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>
|
||||
{(props) => (
|
||||
<Form style={{width: "100%"}} >
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
alignItems: "left",
|
||||
marginTop: "15px",
|
||||
width: "100%",
|
||||
padding: "16px",
|
||||
maxWidth: "600px",
|
||||
gap: "1em",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
id="discount-name"
|
||||
label="Название"
|
||||
name="discountNameField"
|
||||
|
||||
/>
|
||||
<Field
|
||||
id="discount-desc"
|
||||
label="Описание"
|
||||
name="discountDescriptionField"
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
width: "90%",
|
||||
fontWeight: "normal",
|
||||
color: theme.palette.grayDisabled.main,
|
||||
paddingLeft: "10px",
|
||||
}}
|
||||
>
|
||||
Условия:
|
||||
</Typography>
|
||||
<Field
|
||||
id="discount-factor"
|
||||
label="Процент скидки"
|
||||
name="discountFactorField"
|
||||
type="number"
|
||||
/>
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
id="discount-type"
|
||||
sx={{
|
||||
color: "white",
|
||||
"&.Mui-focused": {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Тип скидки
|
||||
</FormLabel>
|
||||
<Field
|
||||
as={RadioGroup}
|
||||
row
|
||||
aria-labelledby="discount-type"
|
||||
name="discountType"
|
||||
|
||||
onChange={handleDiscountTypeChange}
|
||||
>
|
||||
{Object.keys(discountTypes).map((type) => (
|
||||
<FormControlLabel
|
||||
key={type}
|
||||
value={type}
|
||||
control={<Radio color="secondary" />}
|
||||
label={discountTypes[type as DiscountType]}
|
||||
/>
|
||||
))}
|
||||
</Field>
|
||||
</FormControl>
|
||||
{discountType === "purchasesAmount" && (
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
id="discount-purchases"
|
||||
name="purchasesAmountField"
|
||||
label="Внесено больше"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{discountType === "cartPurchasesAmount" && (
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
id="discount-cart-purchases"
|
||||
label="Объем в корзине"
|
||||
name="cartPurchasesAmountField"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{discountType === "service" && (
|
||||
<>
|
||||
<Field
|
||||
as={Select}
|
||||
labelId="discount-service-label"
|
||||
id="discount-service"
|
||||
name="serviceType"
|
||||
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>
|
||||
))}
|
||||
</Field>
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
id="discount-min-value"
|
||||
name="discountMinValueField"
|
||||
label="Минимальное значение"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{discountType === "privilege" && (
|
||||
<>
|
||||
<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>
|
||||
<Form
|
||||
as={Select}
|
||||
labelId="privilege-select-label"
|
||||
id="privilege-select"
|
||||
name="privilegeIdField"
|
||||
label="Привилегия"
|
||||
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>
|
||||
))}
|
||||
</Form>
|
||||
</FormControl>
|
||||
<Field
|
||||
as={CustomTextField}
|
||||
id="discount-min-value"
|
||||
label="Минимальное значение"
|
||||
type="number"
|
||||
sx={{
|
||||
marginTop: "15px",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
width: "90%",
|
||||
marginTop: "55px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
type='submit'
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
height: "52px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@ -247,12 +247,6 @@ export default function CreateTariff() {
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
<Button
|
||||
className="btn_createTariffBackend"
|
||||
onClick={() => {console.log(props)}}
|
||||
>
|
||||
проверка
|
||||
</Button>
|
||||
</Container>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user