Checking in guest

src/App.jsx

@@ -13,6 +13,7 @@ import {
 	Login,
 	PageNotFound,
 	Booking,
+	Checkin,
 } from '@/pages';
 
 import AppLayout from '@/layouts/AppLayout';
@@ -42,6 +43,7 @@ export default function App() {
 							<Route path='dashboard' element={<Dashboard />} />
 							<Route path='bookings' element={<Bookings />} />
 							<Route path='bookings/:bookingId' element={<Booking />} />
+							<Route path='check-in/:bookingId' element={<Checkin />} />
 							<Route path='cabins' element={<Cabins />} />
 							<Route path='users' element={<Users />} />
 							<Route path='settings' element={<Settings />} />

src/features/bookings/BookingDetail.jsx

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 
-import BookingDataBox from './BookingDataBox';
 import { Row } from '@/ui/Grid';
 import { Heading, Tag } from '@/ui/Common';
 import { ButtonGroup, Button, ButtonText } from '@/ui/Buttons';
+import Spinner from '@/ui/Common/Spinner';
+import BookingDataBox from './BookingDataBox';
 
-import { useMoveBack } from '../../hooks/useMoveBack';
+import { useMoveBack } from '@/hooks/useMoveBack';
 import { useBooking } from './useBooking';
-import Spinner from '../../ui/Common/Spinner';
 
 const HeadingGroup = styled.div`
 	display: flex;
@@ -18,6 +19,7 @@ const HeadingGroup = styled.div`
 function BookingDetail() {
 	const { booking, isLoading } = useBooking();
 	const moveBack = useMoveBack();
+	const navigate = useNavigate();
 
 	if (isLoading) return <Spinner />;
 	const { status, id: bookingId } = booking;
@@ -44,7 +46,11 @@ function BookingDetail() {
 				<Button variation='secondary' onClick={moveBack}>
 					Back
 				</Button>
-				{status === 'unconfirmed' && <Button variation='primary'>Check in</Button>}
+				{status === 'unconfirmed' && (
+					<Button variation='primary' onClick={() => navigate(`/check-in/${bookingId}`)}>
+						Check in
+					</Button>
+				)}
 			</ButtonGroup>
 		</>
 	);

src/features/bookings/BookingRow.jsx

@@ -91,7 +91,7 @@ export default function BookingRow({
 					{status === 'unconfirmed' && (
 						<Menus.Button
 							icon={<HiArrowDownOnSquare />}
-							onClick={() => navigate(`/checkin/${bookingId}/edit`)}
+							onClick={() => navigate(`/check-in/${bookingId}`)}
 						>
 							Check in
 						</Menus.Button>

src/features/check-in-out/CheckinBooking.jsx

@@ -1,55 +1,85 @@
-import styled from "styled-components";
-import BookingDataBox from "../../features/bookings/BookingDataBox";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
 
-import Row from "../../ui/Row";
-import Heading from "../../ui/Heading";
-import ButtonGroup from "../../ui/ButtonGroup";
-import Button from "../../ui/Button";
-import ButtonText from "../../ui/ButtonText";
+import BookingDataBox from '@/features/bookings/BookingDataBox';
+import { Row } from '@/ui/Grid';
+import { Heading, Spinner } from '@/ui/Common';
+import { Checkbox } from '../../ui/FormComponent';
+import { ButtonGroup, Button, ButtonText } from '@/ui/Buttons';
 
-import { useMoveBack } from "../../hooks/useMoveBack";
+import { useMoveBack } from '@/hooks/useMoveBack';
+import { useBooking } from '../bookings/useBooking';
+import { formatCurrency } from '@/utils/helpers';
+import { useCheckin } from './useCheckin';
 
 const Box = styled.div`
-  /* Box */
-  background-color: var(--color-grey-0);
-  border: 1px solid var(--color-grey-100);
-  border-radius: var(--border-radius-md);
-  padding: 2.4rem 4rem;
+	/* Box */
+	background-color: var(--color-grey-0);
+	border: 1px solid var(--color-grey-100);
+	border-radius: var(--border-radius-md);
+	padding: 2.4rem 4rem;
 `;
 
 function CheckinBooking() {
-  const moveBack = useMoveBack();
-
-  const booking = {};
-
-  const {
-    id: bookingId,
-    guests,
-    totalPrice,
-    numGuests,
-    hasBreakfast,
-    numNights,
-  } = booking;
-
-  function handleCheckin() {}
-
-  return (
-    <>
-      <Row type="horizontal">
-        <Heading as="h1">Check in booking #{bookingId}</Heading>
-        <ButtonText onClick={moveBack}>&larr; Back</ButtonText>
-      </Row>
-
-      <BookingDataBox booking={booking} />
-
-      <ButtonGroup>
-        <Button onClick={handleCheckin}>Check in booking #{bookingId}</Button>
-        <Button variation="secondary" onClick={moveBack}>
-          Back
-        </Button>
-      </ButtonGroup>
-    </>
-  );
+	const [confirmPaid, setConfirmPaid] = useState(false);
+	const { booking, isLoading } = useBooking();
+	const moveBack = useMoveBack();
+	const { checkin, isCheckingIn } = useCheckin();
+
+	useEffect(() => {
+		setConfirmPaid(booking?.is_paid ?? false);
+	}, [booking]);
+
+	if (isLoading) return <Spinner />;
+	const {
+		id: bookingId,
+		guests,
+		total_price: totalPrice,
+		num_guests: numGuests,
+		has_breakfast: hasBreakfast,
+		num_nights: numNights,
+	} = booking;
+
+	function handleCheckin() {
+		setConfirmPaid((confirm) => !confirm);
+	}
+
+	function handleClick() {
+		if (!confirmPaid) return;
+		checkin(bookingId);
+	}
+
+	return (
+		<>
+			<Row type='horizontal'>
+				<Heading as='h1'>Check in booking #{bookingId}</Heading>
+				<ButtonText onClick={moveBack}>&larr; Back</ButtonText>
+			</Row>
+
+			<BookingDataBox booking={booking} />
+			{/* TODO: on confirm check box, it needs to disabled when payment is received when check in is commited. */}
+			{/* the query will be refetched and this checkbox will be disabled. at the moment we will live with this bug. */}
+			<Box>
+				<Checkbox
+					checked={confirmPaid}
+					onChange={handleCheckin}
+					id='confirm'
+					disabled={confirmPaid || isCheckingIn}
+				>
+					I confirm that {guests.full_name} has paid the total amount of{' '}
+					{formatCurrency(totalPrice)}.
+				</Checkbox>
+			</Box>
+			<ButtonGroup>
+				<Button onClick={handleClick} disabled={!confirmPaid}>
+					Check in booking #{bookingId}
+				</Button>
+				<Button variation='secondary' onClick={moveBack}>
+					Back
+				</Button>
+			</ButtonGroup>
+		</>
+	);
 }
 
 export default CheckinBooking;

src/features/check-in-out/useCheckin.js

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateBooking } from '@/services/apiBookings';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+
+export function useCheckin() {
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+	const { mutate: checkin, isLoading: isCheckingIn } = useMutation({
+		mutationFn: (bookingId) => updateBooking(bookingId, { status: 'checked-in', is_paid: true }),
+		// onSuccess is a callback that will be called when the mutation is successful
+		// it will receive the data returned by the mutationFn
+		onSuccess: (data) => {
+			toast.success(`Booking ${data.id} checked in successfully.`);
+			queryClient.invalidateQueries({ active: true }); // refetch the active bookings
+			navigate('/'); // navigate to the home page once successful
+		},
+		onError: (error) => {
+			toast.error('An error occurred while checking in the booking.');
+			console.error(error);
+		},
+	});
+
+	return { checkin, isCheckingIn };
+}

src/pages/Checkin.jsx

@@ -0,0 +1,4 @@
+import CheckinBooking from '@/features/check-in-out/CheckinBooking';
+export default function Checkin() {
+	return <CheckinBooking />;
+}

src/pages/index.js

@@ -1,11 +1,23 @@
 import Account from './Account';
 import Bookings from './Bookings';
 import Booking from './Booking';
+import Checkin from './Checkin';
 import Cabins from './Cabins';
 import Dashboard from './Dashboard';
 import Login from './Login';
 import PageNotFound from './PageNotFound';
 import Settings from './Settings';
 import Users from './Users';
 
-export { Account, Bookings, Booking, Cabins, Dashboard, Login, PageNotFound, Settings, Users };
+export {
+	Account,
+	Bookings,
+	Booking,
+	Checkin,
+	Cabins,
+	Dashboard,
+	Login,
+	PageNotFound,
+	Settings,
+	Users,
+};

src/ui/FormComponent/Checkbox.jsx

@@ -1,43 +1,36 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const StyledCheckbox = styled.div`
-  display: flex;
-  gap: 1.6rem;
+	display: flex;
+	gap: 1.6rem;
 
-  & input[type="checkbox"] {
-    height: 2.4rem;
-    width: 2.4rem;
-    outline-offset: 2px;
-    transform-origin: 0;
-    accent-color: var(--color-brand-600);
-  }
+	& input[type='checkbox'] {
+		height: 2.4rem;
+		width: 2.4rem;
+		outline-offset: 2px;
+		transform-origin: 0;
+		accent-color: var(--color-brand-600);
+	}
 
-  & input[type="checkbox"]:disabled {
-    accent-color: var(--color-brand-600);
-  }
+	& input[type='checkbox']:disabled {
+		accent-color: var(--color-brand-600);
+	}
 
-  & label {
-    flex: 1;
+	& label {
+		flex: 1;
 
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-  }
+		display: flex;
+		align-items: center;
+		gap: 0.8rem;
+	}
 `;
 
 function Checkbox({ checked, onChange, disabled = false, id, children }) {
-  return (
-    <StyledCheckbox>
-      <input
-        type="checkbox"
-        id={id}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
-      <label htmlFor={!disabled ? id : ""}>{children}</label>
-    </StyledCheckbox>
-  );
+	return (
+		<StyledCheckbox>
+			<input type='checkbox' id={id} checked={checked} onChange={onChange} disabled={disabled} />
+			<label htmlFor={!disabled ? id : ''}>{children}</label>
+		</StyledCheckbox>
+	);
 }
-
 export default Checkbox;

src/ui/FormComponent/index.js

@@ -1,9 +1,9 @@
-import CheckBox from './CheckBox';
 import Input from './Input';
 import Select from './Select';
 import Textarea from './Textarea';
 import FileInput from './FileInput';
 import Form from './Form';
 import FormRow from './FormRow';
+import Checkbox from './Checkbox';
 
-export { CheckBox, Input, Select, Textarea, FileInput, Form, FormRow };
+export { Checkbox, Input, Select, Textarea, FileInput, Form, FormRow };