merge

{/* Reject Booking Modal */}
            <Modal backdrop={"opaque"} isOpen={rejectModal.isOpen} onOpenChange={rejectModal.onOpenChange} isDismissable={false} size={"xl"} 
                classNames={{
                    body: " flex flex-grow size-full",
                    base: "border-[#292f46]text-[#a8b0d3] p-2",
                    header: "sm:justify-evenly",
                    footer: "justify-center",
                    closeButton: "hover:bg-[#F31260] bg-[#F31260] text-white text-xl",
                }} >
                <ModalContent>
                    {(onClose) => (<>
                        <ModalHeader className="flex flex-col gap-1 text-4xl font-black">Reject Booking?</ModalHeader>
                        <ModalBody>
                            <Textarea
                                variant="bordered"
                                label="Please provide a reason for rejecting this booking:"
                                isInvalid={isReasonEmpty}
                                errorMessage={isReasonEmpty && "Please enter a reason"}
                                labelPlacement="outside"
                                placeholder="Type here..."
                                value={reason}
                                onChange={(input) => {setReason(input.target.value); setIsReasonEmpty(false); console.log("reason", reason, "isEmpty", isReasonEmpty)}}
                                // onValueChange={setReason}
                            />
                        </ModalBody>
                        <ModalFooter>
                            <Button color="primary" variant="light" onPress={() => { setIsReasonEmpty(false); setReason(''); onClose() }}> Close </Button>
                            <Button color="danger" endContent={<Send2/>} onPress={() => { rejectBooking(accessTokenCookie, transaction?.id); reason !== '' ? onClose() : null; }}> Reject </Button>
                        </ModalFooter>
                    </>)}
                </ModalContent>
            </Modal>
            {showRejectSnackbar && (
                <Snackbar text="Booking rejected successfully!" icon={CheckCircleIcon} onClose={()=>setShowRejectSnackbar(false)} variant="success" />
            )}
            {showCancelSuccessSnackbar && (
                <Snackbar text="Booking cancelled successfully!" icon={CheckCircleIcon} onClose={()=>setShowCancelSuccessSnackbar(false)} variant="success" />
            )}
            {showCancelFailSnackbar && (
                <Snackbar text="Booking cancelled successfully!" icon={CheckCircleIcon} onClose={()=>setShowCancelFailSnackbar(false)} variant="warning" />
            )}
    </>
  );
}