87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
import FormBox from "../components/FormBox";
|
|
import { useState } from "react";
|
|
import FormField from "../components/FormField";
|
|
import FormInput from "../components/FormInput";
|
|
import { Search } from "lucide-react";
|
|
import Button from "../components/Button";
|
|
import { AnimatePresence } from "motion/react";
|
|
import Notification from "../components/Notification";
|
|
import { useToast } from "../hooks/useToast";
|
|
import { lockerService } from "../services/locker.service";
|
|
import { useLoading } from "../hooks/useLoading";
|
|
import { useNavigate } from "react-router-dom";
|
|
import FieldsWrapper from "../components/FieldsWrapper";
|
|
|
|
function CheckInOutManagement() {
|
|
const [accountNumber, setAccountNumber] = useState("");
|
|
const [notification, setNotification] = useState({ message: "", type: "" });
|
|
|
|
const showToast = useToast();
|
|
const { setIsLoading } = useLoading();
|
|
const navigate = useNavigate();
|
|
|
|
const handleNext = async (e) => {
|
|
e.preventDefault();
|
|
if (accountNumber === "") {
|
|
showToast("Account Number is required", "error");
|
|
return;
|
|
}
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await lockerService.preCheckIn(accountNumber);
|
|
console.log(response.data);
|
|
if (response.status === 200) {
|
|
const data = response.data;
|
|
if (data.code === 1) {
|
|
navigate("log", { state: { accountNumber } });
|
|
} else if (data.code === 2) {
|
|
setNotification({
|
|
visible: true,
|
|
message:
|
|
"Monthly access limit exceeded. A fine will be charged for each additional access.",
|
|
type: "warning",
|
|
});
|
|
} else if (data.code === 3) {
|
|
setNotification({
|
|
visible: true,
|
|
message:
|
|
"Rent for this account is due. Please pay the rent amount in full to access the locker.",
|
|
type: "error",
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
setNotification(error.message, "error");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
return (
|
|
<div>
|
|
<AnimatePresence>
|
|
{ notification.message !== "" && <Notification {...notification} /> }
|
|
</AnimatePresence>
|
|
<FormBox title="Check In/Out">
|
|
<FieldsWrapper>
|
|
<FormField
|
|
label="Account Number"
|
|
icon={{ icon: <Search size={17} />, onClick: () => {} }}
|
|
>
|
|
<FormInput
|
|
props={{
|
|
type: "text",
|
|
value: accountNumber,
|
|
onChange: (e) => setAccountNumber(e.target.value),
|
|
}}
|
|
/>
|
|
</FormField>
|
|
</FieldsWrapper>
|
|
<Button text="Next" onClick={handleNext} />
|
|
</FormBox>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CheckInOutManagement;
|