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;
|