feat: CreatePromocodeForm logic
This commit is contained in:
IlyaDoronin
parent
bd6dfc182e
commit
430a6c2436
@ -1,4 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { Formik, Field, Form } from "formik";
|
||||
import {
|
||||
Typography,
|
||||
TextField,
|
||||
@ -7,43 +9,46 @@ import {
|
||||
Radio,
|
||||
FormControlLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
} 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 { SERVICE_LIST } from "@root/model/privilege";
|
||||
import theme from "@root/theme";
|
||||
|
||||
import type { ChangeEvent } from "react";
|
||||
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;
|
||||
dueTo: number;
|
||||
activationCount: number;
|
||||
privilegeId: string;
|
||||
amount: string;
|
||||
layer: string;
|
||||
factor: string;
|
||||
amount: number;
|
||||
layer: 1 | 2;
|
||||
factor: number;
|
||||
target: string;
|
||||
threshold: string;
|
||||
threshold: number;
|
||||
};
|
||||
|
||||
type CustomTextFieldProps = {
|
||||
name: string;
|
||||
label: string;
|
||||
required?: boolean;
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
const CustomTextField = ({
|
||||
name,
|
||||
label,
|
||||
required = false,
|
||||
onChange,
|
||||
}: CustomTextFieldProps) => (
|
||||
<Field
|
||||
name={name}
|
||||
@ -52,6 +57,7 @@ const CustomTextField = ({
|
||||
variant="filled"
|
||||
color="secondary"
|
||||
as={TextField}
|
||||
onChange={onChange}
|
||||
sx={{ width: "100%", marginTop: "15px" }}
|
||||
InputProps={{
|
||||
style: {
|
||||
@ -65,51 +71,64 @@ const CustomTextField = ({
|
||||
/>
|
||||
);
|
||||
|
||||
const initialValues: FormValues = {
|
||||
codeword: "",
|
||||
description: "",
|
||||
greetings: "",
|
||||
dueTo: 0,
|
||||
activationCount: 0,
|
||||
privilegeId: "",
|
||||
amount: 0,
|
||||
layer: 1,
|
||||
factor: 0,
|
||||
target: "",
|
||||
threshold: 0,
|
||||
};
|
||||
|
||||
export const CreatePromocodeForm = () => {
|
||||
const [dueTo, setDueTo] = useState<Date | null>(new Date());
|
||||
const [bonusType, setBonusType] = useState<BonusType>("discount");
|
||||
const [layerType, setLayerType] = useState<LayerType>("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);
|
||||
const body = {
|
||||
...values,
|
||||
threshold: values.layer === 1 ? values.threshold : values.threshold * 100,
|
||||
};
|
||||
|
||||
console.log(body);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik initialValues={initialValues} onSubmit={createPromocode}>
|
||||
{(props) => (
|
||||
{({ values, handleChange, handleBlur, setFieldValue }) => (
|
||||
<Form
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "600px",
|
||||
padding: "0 10px",
|
||||
}}
|
||||
>
|
||||
<CustomTextField name="codeword" label="Кодовое слово" required />
|
||||
<CustomTextField name="description" label="Описание" required />
|
||||
<CustomTextField
|
||||
name="codeword"
|
||||
label="Кодовое слово"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<CustomTextField
|
||||
name="description"
|
||||
label="Описание"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<CustomTextField
|
||||
name="greetings"
|
||||
label="Приветственное сообщение"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
@ -126,10 +145,10 @@ export const CreatePromocodeForm = () => {
|
||||
name="dueTo"
|
||||
as={DesktopDatePicker}
|
||||
inputFormat="DD/MM/YYYY"
|
||||
value={dueTo}
|
||||
value={values.dueTo ? new Date(Number(values.dueTo) * 1000) : null}
|
||||
onChange={(date: Date | null) => {
|
||||
if (date) {
|
||||
setDueTo(date);
|
||||
setFieldValue("dueTo", moment(date).unix() || null);
|
||||
}
|
||||
}}
|
||||
renderInput={(params: TextFieldProps) => <TextField {...params} />}
|
||||
@ -146,6 +165,12 @@ export const CreatePromocodeForm = () => {
|
||||
<CustomTextField
|
||||
name="activationCount"
|
||||
label="Количество активаций промокода"
|
||||
onChange={({ target }) =>
|
||||
setFieldValue(
|
||||
"activationCount",
|
||||
Number(target.value.replace(/\D/g, ""))
|
||||
)
|
||||
}
|
||||
/>
|
||||
<RadioGroup
|
||||
row
|
||||
@ -155,7 +180,7 @@ export const CreatePromocodeForm = () => {
|
||||
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setBonusType(target.value as BonusType);
|
||||
}}
|
||||
onBlur={props.handleBlur}
|
||||
onBlur={handleBlur}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="discount"
|
||||
@ -173,25 +198,36 @@ export const CreatePromocodeForm = () => {
|
||||
<RadioGroup
|
||||
row
|
||||
name="layer"
|
||||
value={layerType}
|
||||
value={values.layer}
|
||||
sx={{ marginTop: "15px" }}
|
||||
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLayerType(target.value as LayerType);
|
||||
setFieldValue("target", "");
|
||||
setFieldValue("layer", Number(target.value));
|
||||
}}
|
||||
onBlur={props.handleBlur}
|
||||
onBlur={handleBlur}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="privilege"
|
||||
value="1"
|
||||
control={<Radio color="secondary" />}
|
||||
label="Привилегия"
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="service"
|
||||
value="2"
|
||||
control={<Radio color="secondary" />}
|
||||
label="Сервис"
|
||||
/>
|
||||
</RadioGroup>
|
||||
<CustomTextField name="factor" label="Процент скидки" required />
|
||||
<CustomTextField
|
||||
name="factor"
|
||||
label="Процент скидки"
|
||||
required
|
||||
onChange={({ target }) =>
|
||||
setFieldValue(
|
||||
"factor",
|
||||
Number(target.value.replace(/\D/g, ""))
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
@ -202,14 +238,12 @@ export const CreatePromocodeForm = () => {
|
||||
color: theme.palette.secondary.main,
|
||||
}}
|
||||
>
|
||||
{layerType === "privilege"
|
||||
? "Выбор привилегии"
|
||||
: "Выбор сервиса"}
|
||||
{values.layer === 1 ? "Выбор привилегии" : "Выбор сервиса"}
|
||||
</Typography>
|
||||
<Field
|
||||
name="target"
|
||||
as={Select}
|
||||
label={layerType === "privilege" ? "Привилегия" : "Сервис"}
|
||||
label={values.layer === 1 ? "Привилегия" : "Сервис"}
|
||||
sx={{
|
||||
width: "100%",
|
||||
border: "2px solid",
|
||||
@ -221,15 +255,15 @@ export const CreatePromocodeForm = () => {
|
||||
".MuiSvgIcon-root ": { fill: theme.palette.secondary.main },
|
||||
}}
|
||||
children={
|
||||
layerType === "privilege"
|
||||
values.layer === 1
|
||||
? privileges.map(({ name, privilegeId }) => (
|
||||
<MenuItem key={privilegeId} value={privilegeId}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))
|
||||
: cartData?.services.map(({ serviceKey }) => (
|
||||
: SERVICE_LIST.map(({ displayName, serviceKey }) => (
|
||||
<MenuItem key={serviceKey} value={serviceKey}>
|
||||
{serviceKey}
|
||||
{displayName}
|
||||
</MenuItem>
|
||||
))
|
||||
}
|
||||
@ -237,7 +271,12 @@ export const CreatePromocodeForm = () => {
|
||||
<CustomTextField
|
||||
name="threshold"
|
||||
label="При каком значении применяется скидка"
|
||||
required
|
||||
onChange={({ target }) =>
|
||||
setFieldValue(
|
||||
"threshold",
|
||||
Number(target.value.replace(/\D/g, ""))
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
@ -275,7 +314,17 @@ export const CreatePromocodeForm = () => {
|
||||
</MenuItem>
|
||||
))}
|
||||
/>
|
||||
<CustomTextField name="amount" label="Количество" required />
|
||||
<CustomTextField
|
||||
name="amount"
|
||||
label="Количество"
|
||||
required
|
||||
onChange={({ target }) =>
|
||||
setFieldValue(
|
||||
"amount",
|
||||
Number(target.value.replace(/\D/g, ""))
|
||||
)
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user