checkin with added break fast

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

@@ -29,10 +29,11 @@ function CheckinBooking() {
 	const { checkin, isCheckingIn } = useCheckin();
 	const { settings, isLoading: isLoadingSettings } = useSettings();
 
+	console.log('Why this is not working?: ', booking);
+
 	useEffect(() => {
 		setConfirmPaid(booking?.is_paid ?? false);
 	}, [booking]);
-
 	if (isLoading & isLoadingSettings) return <Spinner />;
 	const {
 		id: bookingId,
@@ -56,7 +57,19 @@ function CheckinBooking() {
 
 	function handleClick() {
 		if (!confirmPaid) return;
-		checkin(bookingId);
+		// why snakecase? because the API expects snakecase. see the table structure in the database.
+		if (addBreakfast) {
+			checkin({
+				bookingId,
+				breakfast: {
+					has_breakfast: true,
+					extras_price: optionBreakfastPrice,
+					total_price: totalPrice + optionBreakfastPrice,
+				},
+			});
+		} else {
+			checkin({ bookingId, breakfast: {} });
+		}
 	}
 
 	return (

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

@@ -7,10 +7,13 @@ 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 }),
+		mutationFn: ({ bookingId, breakfast }) => {
+			updateBooking(bookingId, { status: 'checked-in', is_paid: true, ...breakfast });
+		},
 		// onSuccess is a callback that will be called when the mutation is successful
 		// it will receive the data returned by the mutationFn
 		onSuccess: (data) => {
+			console.log(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

src/ui/ActionControls/Menus.jsx

@@ -81,7 +81,6 @@ function Menus({ children }) {
 	const [parentRef, setParentRef] = useState(null); // this will parent element.
 
 	const close = () => setOpenId('');
-	console.log('openId', openId);
 	const open = (openId) => setOpenId(openId);
 	return (
 		<MenusContext.Provider
@@ -103,7 +102,6 @@ function Toggle({ id }) {
 		});
 
 		setParentRef(e.currentTarget.parentEelement);
-		console.log(boundingRect);
 		openId === id ? close() : open(id);
 	};
 	return (