146 lines
6.2 KiB
TypeScript
146 lines
6.2 KiB
TypeScript
import { Formik, Form } from "formik";
|
|
import * as Yup from "yup";
|
|
import { Button } from "@nextui-org/react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import InsertPostImage from "../components/InsertPostImage";
|
|
import NextUIFormikInput from "../components/NextUIFormikInput";
|
|
import { NextUIFormikDatePicker } from "../components/NextUIFormikDatePicker";
|
|
import instance from "../security/http";
|
|
import { ArrowUTurnLeftIcon } from "../icons";
|
|
|
|
// Validation schema
|
|
const validationSchema = Yup.object({
|
|
brandLogo: Yup.mixed().required("Brand logo is required"),
|
|
brand: Yup.string().trim().required("Brand name is required"),
|
|
description: Yup.string().trim().required("Brand name is required"),
|
|
expirationDate: Yup.date().required("Expiry date is required"),
|
|
quantityAvailable: Yup.number().typeError("Must be a number").positive("Must be a positive value").required("Quantity is required"),
|
|
code: Yup.string().trim().required("Code is required"),
|
|
});
|
|
|
|
// Initial form values
|
|
const initialValues = {
|
|
brandLogo: null,
|
|
brand: "",
|
|
description: "",
|
|
expirationDate: "",
|
|
quantityAvailable: "",
|
|
code: "",
|
|
};
|
|
|
|
export default function CreateVoucherPage() {
|
|
const navigate = useNavigate();
|
|
|
|
const handleSubmit = async (
|
|
values: any,
|
|
{ setSubmitting, resetForm, setFieldError, setFieldValue }: any
|
|
) => {
|
|
const formData = new FormData();
|
|
if (values.brandLogo) {
|
|
formData.append("brandLogo", values.brandLogo);
|
|
}
|
|
|
|
formData.append("brand", values.brand);
|
|
formData.append("description", values.description);
|
|
formData.append("expirationDate", values.expirationDate);
|
|
formData.append("quantityAvailable", values.quantityAvailable);
|
|
formData.append("code", values.code);
|
|
|
|
try {
|
|
const response = await instance.post("/vouchers", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
console.log("Voucher created successfully:", response.data);
|
|
resetForm(); // Clear form after successful submit
|
|
setFieldValue("brandLogo", null);
|
|
navigate(-1);
|
|
} else {
|
|
console.error("Error creating voucher:", response.statusText);
|
|
}
|
|
} catch (error: any) {
|
|
if (error.response && error.response.data && error.response.data.errors) {
|
|
const errors = error.response.data.errors;
|
|
Object.keys(errors).forEach((key) => {
|
|
setFieldError(key, errors[key]);
|
|
});
|
|
} else {
|
|
console.error("Unexpected error:", error);
|
|
}
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-full pb-12 pt-10">
|
|
<div className="w-[350px] mx-auto p-6 bg-red-50 dark:bg-primary-950 border border-primary-100 rounded-2xl ">
|
|
<div className="py-2">
|
|
<Button variant="light" isIconOnly onPress={() => navigate(-1)}>
|
|
<ArrowUTurnLeftIcon />
|
|
</Button>
|
|
</div>
|
|
<div className="flex-grow overflow-y-auto">
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{({ isValid, dirty, setFieldValue }) => (
|
|
<Form className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-5 w-[280px]">
|
|
<InsertPostImage
|
|
onImageSelected={(file) => {
|
|
setFieldValue("brandLogo", file);
|
|
}}
|
|
/>
|
|
<NextUIFormikInput
|
|
label="Brand name"
|
|
name="brand"
|
|
type="text"
|
|
placeholder="Jollibean, KFC.."
|
|
labelPlacement="inside"
|
|
/>
|
|
<NextUIFormikInput
|
|
label="Description"
|
|
name="description"
|
|
type="text"
|
|
placeholder="10% off"
|
|
labelPlacement="inside"
|
|
/>
|
|
<NextUIFormikDatePicker
|
|
label="Expiry date"
|
|
name="expirationDate"
|
|
className="max-w-[280px]"
|
|
/>
|
|
<NextUIFormikInput
|
|
label="Quantity"
|
|
name="quantityAvailable"
|
|
type="number"
|
|
placeholder="000"
|
|
labelPlacement="inside"
|
|
/>
|
|
<NextUIFormikInput
|
|
label="Code"
|
|
name="code"
|
|
type="text"
|
|
placeholder="SD4FRC"
|
|
labelPlacement="inside"
|
|
/>
|
|
</div>
|
|
<Button type="submit" color="primary" className="w-[90px]"
|
|
isDisabled={!isValid || !dirty}>
|
|
Create
|
|
</Button>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|