handleChangeDate(newDate)}
48 | moveRangeOnFirstSelection={false}
49 | ranges={date}
50 | className={styles.datePicker}
51 | />
52 | )}
53 |
54 | );
55 | };
56 |
57 | export default DateCheck;
58 |
59 | DateCheck.propTypes = {
60 | handleSetDate: PropTypes.func,
61 | isDateOpened: PropTypes.bool,
62 | toggleDate: PropTypes.func,
63 | dateValues: PropTypes.object,
64 | };
65 |
--------------------------------------------------------------------------------
/src/pages/Hotel/components/HotelReviews/HotelReviews.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import PropTypes from "prop-types";
3 | import styles from "./style.module.css";
4 | import CustomButton from "../../../../components/CustomButton";
5 |
6 | const HotelReviews = ({ hotelGuestReviews }) => {
7 | const [visibleReviews, setVisibleReviews] = useState(3);
8 |
9 | const loadMoreReviews = () => {
10 | setVisibleReviews((prevVisibleReviews) => prevVisibleReviews + 3);
11 | };
12 |
13 | const loadLessReviews = () => {
14 | setVisibleReviews(3);
15 | };
16 |
17 | const sortedReviews = hotelGuestReviews
18 | .slice()
19 | .sort((a, b) => b.rating - a.rating);
20 |
21 | return (
22 |
23 |
What guests loved the most:
24 |
25 | {sortedReviews.slice(0, visibleReviews).map((review) => (
26 |
27 |
28 |
{review.customerName}
29 |
Rating: {review.rating}
30 |
31 |
{review.description}
32 |
33 | ))}
34 |
35 |
36 |
44 | {visibleReviews < hotelGuestReviews.length
45 | ? "Load More"
46 | : "Load Less"}
47 |
48 |
49 |
25 |
32 |
42 | Booking
43 |
44 |
45 |
46 |
52 |
57 |
62 | Logout
63 |
64 |
65 |
66 |
67 |
68 | );
69 | };
70 |
71 | export default AppBarComponent;
72 |
--------------------------------------------------------------------------------
/src/pages/Home/components/FeaturedDeals/DealCard.jsx:
--------------------------------------------------------------------------------
1 | import styles from "./style.module.css";
2 | import StarRating from "../../../../components/StarRating";
3 | import { useNavigate } from "react-router-dom";
4 | import { getHotelDetails } from "../../../../services/hotelPageServices";
5 | import LocationOnIcon from "@mui/icons-material/LocationOn";
6 | import PropTypes from "prop-types";
7 |
8 | const DealCard = ({ deal }) => {
9 | const {
10 | hotelId,
11 | roomPhotoUrl,
12 | hotelName,
13 | cityName,
14 | hotelStarRating,
15 | originalRoomPrice,
16 | finalPrice,
17 | } = deal;
18 |
19 | const navigate = useNavigate();
20 |
21 | const handleDealClick = async () => {
22 | try {
23 | await getHotelDetails(hotelId);
24 | navigate(`/hotel/${hotelId}`);
25 | } catch (error) {
26 | console.error("Error fetching hotel details:", error);
27 | }
28 | };
29 |
30 | return (
31 |
32 |
33 |
34 |
35 |
{hotelName}
36 |
38 |
39 |
40 |
45 |
46 |
${originalRoomPrice}
47 |
${finalPrice}
48 |
49 |
50 |
51 |
23 | {error && (
24 |
25 | Failed to fetch. please try again later.
26 |
27 | )}
28 |
29 |
30 |
31 |
44 |
45 |
49 |
50 |
51 |
30 |
33 | Create New City
34 |
39 | {({ errors, touched, isSubmitting }) => (
40 |
49 |
50 |
51 | );
52 | };
53 |
54 | export default CreateCityDialog;
55 |
56 | CreateCityDialog.propTypes = {
57 | addCity: PropTypes.func.isRequired,
58 | snackbarProps: PropTypes.shape({
59 | open: PropTypes.bool.isRequired,
60 | message: PropTypes.string,
61 | severity: PropTypes.string,
62 | handleCloseSnackbar: PropTypes.func,
63 | showSuccessSnackbar: PropTypes.func,
64 | showErrorSnackbar: PropTypes.func,
65 | }),
66 | };
67 |
--------------------------------------------------------------------------------
/src/pages/Hotel/hooks/useHotelData.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import {
3 | getHotelDetails,
4 | getHotelGuestReviews,
5 | getHotelPicturesGallery,
6 | getHotelAvailableRooms,
7 | } from "../../../services/hotelPageServices";
8 | import useComponentLoader from "../../../hooks/useComponentLoader";
9 |
10 | export const useHotelData = (
11 | hotelId,
12 | checkInDate,
13 | checkOutDate,
14 | isThereDates
15 | ) => {
16 | const [hotelDetails, setHotelDetails] = useState(null);
17 | const [hotelGuestReviews, setHotelGuestReviews] = useState([]);
18 | const [hotelGallery, setHotelGallery] = useState([]);
19 | const [hotelAvailableRooms, setHotelAvailableRooms] = useState([]);
20 | const { isLoading, stopLoading } = useComponentLoader();
21 | const [error, setError] = useState("");
22 |
23 | const fetchHotelData = async () => {
24 | setError("");
25 |
26 | Promise.allSettled([
27 | getHotelDetails(hotelId),
28 | getHotelGuestReviews(hotelId),
29 | getHotelPicturesGallery(hotelId),
30 | isThereDates
31 | ? getHotelAvailableRooms(hotelId, checkInDate, checkOutDate)
32 | : Promise.resolve([]),
33 | ])
34 | .then((results) => {
35 | results.forEach((result, index) => {
36 | if (result.status === "fulfilled") {
37 | switch (index) {
38 | case 0:
39 | setHotelDetails(result.value);
40 | break;
41 | case 1:
42 | setHotelGuestReviews(result.value);
43 | break;
44 | case 2:
45 | setHotelGallery(result.value);
46 | break;
47 | case 3:
48 | setHotelAvailableRooms(result.value);
49 | break;
50 | }
51 | } else {
52 | console.error(result.reason);
53 | setError(
54 | (prev) =>
55 | `${prev} ${
56 | result.reason?.data?.message ||
57 | result.reason?.statusText ||
58 | "Error fetching data"
59 | }. `
60 | );
61 | }
62 | });
63 | })
64 | .finally(() => stopLoading());
65 | };
66 |
67 | useEffect(() => {
68 | fetchHotelData();
69 | }, [hotelId, checkInDate, checkOutDate]);
70 |
71 | return {
72 | hotelDetails,
73 | hotelGuestReviews,
74 | hotelGallery,
75 | hotelAvailableRooms,
76 | isLoading,
77 | error,
78 | };
79 | };
80 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Rooms/components/CreateRoomDialog/CreateRoomDialog.jsx:
--------------------------------------------------------------------------------
1 | import { Dialog, DialogTitle } from "@mui/material";
2 | import { Formik } from "formik";
3 | import PropTypes from "prop-types";
4 | import { postNewRoom } from "../../../../../../services/manageRooms";
5 | import CreateEntityDialog from "../../../../components/CreateEntityDialog";
6 | import CreateButton from "../../../../components/CreateButton/CreateButton";
7 | import { fields, initialValues, validationSchema } from "../../roomConfig";
8 | import useDialogState from "../../../../hooks/useDialogState";
9 |
10 | const CreateRoomDialog = ({ addRoom, snackbarProps }) => {
11 | const { isDialogOpen, handleDialogOpen, handleDialogClose } =
12 | useDialogState();
13 |
14 | const handleCreateEntity = async (values, actions) => {
15 | try {
16 | const newEntity = await postNewRoom(
17 | parseInt(values.hotelId),
18 | values.roomNumber,
19 | parseInt(values.cost)
20 | );
21 | console.log("Room created:", newEntity);
22 | snackbarProps.showSuccessSnackbar("New Room created successfully!");
23 | addRoom(newEntity);
24 | } catch (error) {
25 | snackbarProps.showErrorSnackbar(`Whoops! ${error.message}`);
26 | } finally {
27 | handleDialogClose();
28 | actions.setSubmitting(false);
29 | }
30 | };
31 |
32 | return (
33 |
34 |
36 | Create New Room
37 |
38 |
43 | {({ errors, touched, isSubmitting }) => (
44 |
53 |
54 |
55 | );
56 | };
57 |
58 | export default CreateRoomDialog;
59 |
60 | CreateRoomDialog.propTypes = {
61 | addRoom: PropTypes.func.isRequired,
62 | snackbarProps: PropTypes.shape({
63 | open: PropTypes.bool,
64 | message: PropTypes.string,
65 | severity: PropTypes.string,
66 | handleCloseSnackbar: PropTypes.func,
67 | showSuccessSnackbar: PropTypes.func,
68 | showErrorSnackbar: PropTypes.func,
69 | }),
70 | };
71 |
--------------------------------------------------------------------------------
/src/pages/Home/components/TrendingDestinations/TrendingDestinationsWithoutLoading.jsx:
--------------------------------------------------------------------------------
1 | import { Grid, Card, CardContent, Typography, CardMedia } from "@mui/material";
2 | import GenericSnackbar from "../../../../components/GenericSnackbar";
3 | import LocationOnIcon from "@mui/icons-material/LocationOn";
4 | import PropTypes from "prop-types";
5 |
6 | const TrendingDestinationsWithoutLoading = ({
7 | trendingDestinations,
8 | snackbar,
9 | handleCloseSnackbar,
10 | }) => {
11 | return (
12 | <>
13 |
14 | {trendingDestinations.map((item) => (
15 |
16 |
24 |
33 |
43 |
48 |
49 |
50 |
51 | ))}
52 |
53 |
54 |
42 |
43 |
44 |
45 |
46 | Field
47 | Value
48 |
49 |
50 |
51 | {fields.map((field, index) => (
52 |
56 | {field.label}
57 | {field.value}
58 |
59 | ))}
60 |
61 |
62 |
63 |
64 | );
65 | };
66 |
67 | export default ConfirmationTable;
68 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Hotels/components/CreateHotelDialog/CreateHotelDialog.jsx:
--------------------------------------------------------------------------------
1 | import { Dialog, DialogTitle } from "@mui/material";
2 | import { Formik } from "formik";
3 | import PropTypes from "prop-types";
4 | import { postNewHotel } from "../../../../../../services/manageHotels";
5 | import CreateButton from "../../../../components/CreateButton/CreateButton";
6 | import { fields, initialValues, validationSchema } from "../../hotelConfig";
7 | import CreateEntityDialog from "../../../../components/CreateEntityDialog";
8 | import useDialogState from "../../../../hooks/useDialogState";
9 |
10 | const CreateHotelDialog = ({ addHotel, snackbarProps }) => {
11 | const { isDialogOpen, handleDialogOpen, handleDialogClose } =
12 | useDialogState();
13 |
14 | const handleCreateHotel = async (values, actions) => {
15 | try {
16 | const newHotel = await postNewHotel(
17 | parseInt(values.cityId),
18 | values.name,
19 | values.description,
20 | parseInt(values.hotelType),
21 | parseFloat(values.starRating),
22 | parseFloat(values.latitude),
23 | parseFloat(values.longitude)
24 | );
25 | console.log("Hotel created:", newHotel);
26 | snackbarProps.showSuccessSnackbar("New Hotel created successfully!");
27 | addHotel(newHotel);
28 | } catch (error) {
29 | snackbarProps.showErrorSnackbar(`Whoops! ${error.message}`);
30 | } finally {
31 | handleDialogClose();
32 | actions.setSubmitting(false);
33 | }
34 | };
35 |
36 | return (
37 |
38 |
40 | Create New Hotel
41 |
46 | {({ errors, touched, isSubmitting }) => (
47 |
56 |
57 |
58 | );
59 | };
60 |
61 | export default CreateHotelDialog;
62 |
63 | CreateHotelDialog.propTypes = {
64 | addHotel: PropTypes.func.isRequired,
65 | snackbarProps: PropTypes.shape({
66 | open: PropTypes.bool.isRequired,
67 | message: PropTypes.string,
68 | severity: PropTypes.string,
69 | handleCloseSnackbar: PropTypes.func,
70 | showSuccessSnackbar: PropTypes.func,
71 | showErrorSnackbar: PropTypes.func,
72 | }),
73 | };
74 |
--------------------------------------------------------------------------------
/src/pages/Home/components/RecentlyVisitedHotels/RecentlyVisitedHotelsWithoutLoading.jsx:
--------------------------------------------------------------------------------
1 | import { Grid, Card, CardContent, CardMedia, Typography } from "@mui/material";
2 | import GenericSnackbar from "../../../../components/GenericSnackbar";
3 | import PropTypes from "prop-types";
4 |
5 | function RecentlyVisitedHotelsWithoutLoading({
6 | lastVisitedHotels,
7 | handleNavigation,
8 | snackbar,
9 | handleCloseSnackbar,
10 | }) {
11 | return (
12 | <>
13 |
14 | {lastVisitedHotels.map((hotel) => (
15 |
16 | handleNavigation(hotel.hotelId)}
18 | style={{
19 | cursor: "pointer",
20 | display: "flex",
21 | flexDirection: "column",
22 | boxShadow:
23 | "2px 2px 4px rgba(8, 12, 2, 0.2), -2px -2px 4px rgba(8, 12, 2, 0.2)",
24 | }}
25 | >
26 |
35 |
36 | {hotel.hotelName}
37 |
38 |
43 | {`${hotel.cityName} | ${hotel.starRating} Stars | Price Range: $${hotel.priceLowerBound} - $${hotel.priceUpperBound}`}
44 |
45 |
46 |
47 |
48 | ))}
49 |
50 |
51 |
65 |
Featured Deals
66 | {error &&
Something went wrong. Please try again later.
}
67 |
68 | {isLoading ? (
69 |
70 | {[1, 2, 3].map((_, index) => (
71 |
74 | ) : (
75 |
76 |
77 | {deals.map((deal) => (
78 |
81 |
82 | )}
83 |
84 |
85 |
42 |
48 |
49 |
51 |
52 |
53 | Update City
54 |
55 |
56 |
62 | {({ errors, touched, isSubmitting }) => (
63 |
73 | )}
74 |
75 |
76 |
77 | );
78 | };
79 |
80 | export default UpdateCityForm;
81 |
82 | UpdateCityForm.propTypes = {
83 | open: PropTypes.bool,
84 | onClose: PropTypes.func,
85 | entityData: PropTypes.shape({
86 | id: PropTypes.number.isRequired,
87 | name: PropTypes.string,
88 | description: PropTypes.string,
89 | }),
90 | onUpdate: PropTypes.func,
91 | };
92 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Rooms/Rooms.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import LeftNavigation from "../../components/LeftNavigation";
3 | import SearchBar from "./components/SearchBar";
4 | import { CssBaseline, Box, Container } from "@mui/material";
5 | import UpdateRoomForm from "./components/UpdateRoomForm";
6 | import GenericSnackbar from "../../../../components/GenericSnackbar";
7 | import useSnackbar from "../../../../hooks/useSnackbar";
8 | import { deleteRoom } from "../../../../services/manageRooms";
9 | import CreateRoomDialog from "./components/CreateRoomDialog";
10 | import RoomsDetailedGrid from "./components/RoomsDetailedGrid";
11 |
12 | const Rooms = () => {
13 | const [rooms, setRooms] = useState([]);
14 | const {
15 | snackbar,
16 | handleCloseSnackbar,
17 | showErrorSnackbar,
18 | showSuccessSnackbar,
19 | } = useSnackbar();
20 |
21 | const handleAddRoom = (newRoom) => {
22 | setRooms((prevRooms) => [...prevRooms, newRoom]);
23 | };
24 |
25 | const handleUpdateRooms = (updatedRoom) => {
26 | setRooms((prevRooms) =>
27 | prevRooms.map((room) => (room.id === updatedRoom.id ? updatedRoom : room))
28 | );
29 | };
30 |
31 | const handleDeleteRoom = async (selectedRoom) => {
32 | try {
33 | await deleteRoom(2, selectedRoom.id);
34 | console.log("deleted room " + selectedRoom.id + " successfully");
35 | showSuccessSnackbar("Room deleted successfully!");
36 | setRooms((prevRooms) =>
37 | prevRooms.filter((room) => room.id !== selectedRoom.id)
38 | );
39 | } catch (error) {
40 | showErrorSnackbar(`Whoops! ${error.message}`);
41 | }
42 | };
43 |
44 | return (
45 |
46 |
48 |
56 |
68 |
69 |
70 |
81 |
82 |
83 |
90 | );
91 | };
92 |
93 | export default Rooms;
94 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Rooms/components/UpdateRoomForm/UpdateRoomForm.jsx:
--------------------------------------------------------------------------------
1 | import { Drawer, IconButton, Typography, Box } from "@mui/material";
2 | import { ChevronRight as ChevronRightIcon } from "@mui/icons-material";
3 | import { Formik, Form } from "formik";
4 | import PropTypes from "prop-types";
5 | import { updateRoom } from "../../../../../../services/manageRooms";
6 | import { fields, validationSchema } from "../../roomConfig";
7 | import UpdateButton from "../../../../components/UpdateButton";
8 | import UpdateEntityForm from "../../../../components/UpdateEntityForm";
9 |
10 | const UpdateRoomForm = ({ open, onClose, entityData, onUpdate }) => {
11 | if (!entityData) {
12 | return null;
13 | }
14 |
15 | const handleUpdateClick = async (values, actions) => {
16 | try {
17 | await updateRoom(entityData.id, values.roomNumber, values.cost);
18 | const updatedRoom = {
19 | ...entityData,
20 | roomNumber: values.roomNumber,
21 | cost: values.cost,
22 | };
23 | if (onUpdate) {
24 | onUpdate(updatedRoom);
25 | }
26 | console.log("Room updated:", updatedRoom);
27 | } catch (error) {
28 | console.log(error.message);
29 | } finally {
30 | onClose();
31 | actions.setSubmitting(false);
32 | }
33 | };
34 |
35 | const updatedFields = fields.filter((field) => field.name !== "hotelId");
36 |
37 | const initialValues = fields.reduce((values, field) => {
38 | values[field.name] =
39 | entityData && entityData[field.name] !== undefined
40 | ? entityData[field.name]
41 | : field.type === "number"
42 | ? 0
43 | : "";
44 | return values;
45 | }, {});
46 |
47 | return (
48 |
49 |
55 |
56 |
58 |
59 | Update Room
60 |
61 |
67 | {({ errors, touched, isSubmitting }) => (
68 |
78 | )}
79 |
80 |
81 |
82 | );
83 | };
84 |
85 | export default UpdateRoomForm;
86 |
87 | UpdateRoomForm.propTypes = {
88 | open: PropTypes.bool,
89 | onClose: PropTypes.func,
90 | entityData: PropTypes.shape({
91 | id: PropTypes.number.isRequired,
92 | name: PropTypes.string,
93 | description: PropTypes.string,
94 | }),
95 | onUpdate: PropTypes.func,
96 | };
97 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Rooms/components/RoomsDetailedGrid/RoomsDetailedGrid.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import {
3 | Paper,
4 | Table,
5 | TableBody,
6 | TableCell,
7 | TableContainer,
8 | TableHead,
9 | TableRow,
10 | Container,
11 | IconButton,
12 | } from "@mui/material";
13 | import DeleteIcon from "@mui/icons-material/Delete";
14 | import PropTypes from "prop-types";
15 |
16 | const RoomsDetailedGrid = ({
17 | data,
18 | columns,
19 | onUpdate,
20 | onDelete,
21 | EntityFormComponent,
22 | }) => {
23 | const [isDrawerOpen, setIsDrawerOpen] = useState(false);
24 | const [selectedEntity, setSelectedEntity] = useState(null);
25 |
26 | const handleRowClick = (entity) => {
27 | setSelectedEntity(entity);
28 | setIsDrawerOpen(true);
29 | };
30 |
31 | const closeDrawer = () => {
32 | setIsDrawerOpen(false);
33 | };
34 |
35 | const handleUpdate = (updatedEntity) => {
36 | onUpdate(updatedEntity);
37 | closeDrawer();
38 | };
39 |
40 | const handleDelete = (entity, event) => {
41 | event.stopPropagation();
42 | onDelete(entity);
43 | };
44 |
45 | return (
46 | <>
47 |
48 |
49 |
50 |
51 |
52 | {columns.map((column) => (
53 | {column.headerName}
54 | ))}
55 | Action
56 |
57 |
58 |
59 |
60 | {data.map((row) => (
61 | handleRowClick(row)}
65 | >
66 | {columns.map((column) => (
67 |
68 | {row[column.field]}
69 |
70 | ))}
71 |
72 | handleDelete(row, e)}
75 | >
76 |
78 |
79 |
80 | ))}
81 |
82 |
83 |
84 |
85 |
86 | {EntityFormComponent && (
87 |
50 |
51 |
52 | Admin Page
53 |
54 |
55 |
58 | {adminLinks.map((item) => (
59 |
64 |
65 | {item.icon}
66 |
68 |
69 | ))}
70 |
71 |
72 |
73 |
75 |
77 |
78 |
79 |
80 | );
81 |
82 | return (
83 | <>
84 | {renderDrawer()}
85 |
93 |
102 |
104 |
105 |
106 | );
107 | };
108 |
109 | export default LeftNavigation;
110 |
--------------------------------------------------------------------------------
/src/pages/Admin/pages/Hotels/components/UpdateHotelForm/UpdateHotelForm.jsx:
--------------------------------------------------------------------------------
1 | import { Drawer, IconButton, Typography, Box } from "@mui/material";
2 | import { ChevronRight as ChevronRightIcon } from "@mui/icons-material";
3 | import { Formik, Form } from "formik";
4 | import PropTypes from "prop-types";
5 | import { updateHotel } from "../../../../../../services/manageHotels";
6 | import { fields, validationSchema } from "../../hotelConfig";
7 | import UpdateEntityForm from "../../../../components/UpdateEntityForm";
8 | import UpdateButton from "../../../../components/UpdateButton";
9 |
10 | const UpdateHotelForm = ({ open, onClose, entityData, onUpdate }) => {
11 | if (!entityData) {
12 | return null;
13 | }
14 |
15 | const handleUpdateClick = async (values, actions) => {
16 | try {
17 | await updateHotel(
18 | entityData.id,
19 | values.name,
20 | values.description,
21 | values.hotelType,
22 | values.starRating,
23 | values.latitude,
24 | values.longitude
25 | );
26 |
27 | const updatedHotel = {
28 | ...entityData,
29 | name: values.name,
30 | description: values.description,
31 | hotelType: values.hotelType,
32 | starRating: values.starRating,
33 | latitude: values.latitude,
34 | longitude: values.longitude,
35 | };
36 |
37 | if (onUpdate) {
38 | onUpdate(updatedHotel);
39 | }
40 | console.log("Hotel updated:", updatedHotel);
41 | } catch (error) {
42 | console.log(error.message);
43 | } finally {
44 | onClose();
45 | actions.setSubmitting(false);
46 | }
47 | };
48 |
49 | const updatedFields = fields.filter((field) => field.name !== "cityId");
50 |
51 | const initialValues = fields.reduce((values, field) => {
52 | values[field.name] =
53 | entityData && entityData[field.name] !== undefined
54 | ? entityData[field.name]
55 | : field.type === "number"
56 | ? 0
57 | : "";
58 | return values;
59 | }, {});
60 |
61 | return (
62 |
63 |
69 |
70 |
72 |
73 |
74 | Update Hotel
75 |
76 |
77 |
83 | {({ errors, touched, isSubmitting }) => (
84 |
94 | )}
95 |
96 |
97 |
98 | );
99 | };
100 |
101 | export default UpdateHotelForm;
102 |
103 | UpdateHotelForm.propTypes = {
104 | open: PropTypes.bool,
105 | onClose: PropTypes.func,
106 | entityData: PropTypes.shape({
107 | id: PropTypes.number.isRequired,
108 | name: PropTypes.string,
109 | description: PropTypes.string,
110 | }),
111 | onUpdate: PropTypes.func,
112 | };
113 |
--------------------------------------------------------------------------------
/src/pages/SearchPage/components/SearchResultItem/SearchResultItem.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 | import {
3 | Card,
4 | CardContent,
5 | CardMedia,
6 | Typography,
7 | Button,
8 | Chip,
9 | Box,
10 | } from "@mui/material";
11 | import StarRating from "../../../../components/StarRating";
12 |
13 | const SearchResultItem = ({ hotel }) => {
14 | const {
15 | hotelName,
16 | starRating,
17 | roomType,
18 | roomPrice,
19 | roomPhotoUrl,
20 | cityName,
21 | amenities,
22 | } = hotel;
23 |
24 | return (
25 |
26 |
37 |
54 |
64 | {hotelName}
65 |
67 |
68 |
69 | {hotelName} in {cityName} offers {roomType} rooms.
70 |
71 |
72 |
73 | {amenities.map((amenity, index) => (
74 |
88 |
89 |
90 |
91 | US${roomPrice}/night
92 |
93 |
94 |
95 |
96 |
104 | See Availability
105 |
106 |
107 |
108 |
109 |
110 | );
111 | };
112 |
113 | export default SearchResultItem;
114 |
115 | SearchResultItem.propTypes = {
116 | hotel: PropTypes.shape({
117 | hotelName: PropTypes.string.isRequired,
118 | starRating: PropTypes.number.isRequired,
119 | roomType: PropTypes.string.isRequired,
120 | roomPrice: PropTypes.number.isRequired,
121 | roomPhotoUrl: PropTypes.string.isRequired,
122 | cityName: PropTypes.string.isRequired,
123 | amenities: PropTypes.arrayOf(PropTypes.object).isRequired,
124 | }),
125 | };
126 |
--------------------------------------------------------------------------------
/src/pages/Login/Login.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import styles from "./style.module.css";
3 | import { Formik, Form, Field, ErrorMessage } from "formik";
4 | import * as Yup from "yup";
5 | import { useNavigate } from "react-router-dom";
6 | import { loginAPI } from "../../services/authService";
7 | import GenericSnackbar from "../../components/GenericSnackbar";
8 | import useSnackbar from "../../hooks/useSnackbar";
9 | import { AuthContext } from "../../context/authContext";
10 | import CustomButton from "../../components/CustomButton";
11 |
12 | const loginSchema = Yup.object().shape({
13 | username: Yup.string().required("⚠️ Username is a required field"),
14 | password: Yup.string().required("⚠️ Password is a required field"),
15 | });
16 |
17 | const Login = () => {
18 | const navigate = useNavigate();
19 | const { loginUser } = useContext(AuthContext);
20 | const {
21 | snackbar,
22 | handleCloseSnackbar,
23 | showErrorSnackbar,
24 | showSuccessSnackbar,
25 | } = useSnackbar();
26 |
27 | const handleLogin = async (values, { setSubmitting }) => {
28 | setSubmitting(true);
29 | try {
30 | const response = await loginAPI(values);
31 | loginUser(response); // loginUser is a function from AuthContext => returns {userType, authentication}
32 | if (response.userType === "User" || response.userType === "Admin") {
33 | showSuccessSnackbar("Welcome, you're successfully logged in!");
34 | setTimeout(() => {
35 | navigate(response.userType === "User" ? "/home" : "/adminDashboard");
36 | }, 600);
37 | }
38 | } catch (error) {
39 | showErrorSnackbar(
40 | "Login failed! Unable to login with provided credentials."
41 | );
42 | }
43 | setSubmitting(false);
44 | };
45 |
46 | return (
47 |
48 |
53 | {({ values, errors, isSubmitting }) => {
54 | const areFieldsFilled = values.username && values.password;
55 | const areThereErrors = errors.username || errors.password;
56 | const buttonClassName =
57 | areFieldsFilled && !areThereErrors ? "activeBtn" : "defaultBtn";
58 |
59 | return (
60 |
61 |
86 |
87 | );
88 | }}
89 |
90 |
91 |
97 |
91 | {isLoading ? (
92 |
93 | ) : finalResults.length > 0 ? (
94 | finalResults.map((hotel) => (
95 |
100 |
101 |
102 | ))
103 | ) : (
104 | !isLoading && (
105 |
106 | No hotels available for the selected criteria. Please refine your
107 | search parameters and try again.
108 |
109 | )
110 | )}
111 |
112 |
113 |
62 |
63 |
64 |
65 |
66 | {columns.map((column) => (
67 | {column.headerName}
68 | ))}
69 | Action
70 |
71 |
72 |
73 |
74 | {data.length > 0 ? (
75 | data
76 | .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
77 | .map((row) => (
78 | handleRowClick(row)}
82 | >
83 | {columns.map((column) => (
84 |
85 | {row[column.field]}
86 |
87 | ))}
88 |
89 |
90 | handleDelete(row, e)}
93 | >
94 |
96 |
97 |
98 | ))
99 | ) : (
100 |
101 |
102 | No data were found
103 |
104 |
105 | )}
106 |
107 |
108 |
109 |
110 |
120 |
121 | {EntityFormComponent && (
122 |
86 |
88 |
99 |
111 |
112 |
113 |
129 |
130 |
131 |
138 | );
139 | };
140 |
141 | export default Cities;
142 |
--------------------------------------------------------------------------------
/src/pages/Hotel/components/AvailableRooms/AvailableRooms.jsx:
--------------------------------------------------------------------------------
1 | import { useContext, useEffect } from "react";
2 | import PropTypes from "prop-types";
3 | import styles from "./style.module.css";
4 | import CustomButton from "../../../../components/CustomButton";
5 | import PersonIcon from "@mui/icons-material/Person";
6 | import ChildFriendlyIcon from "@mui/icons-material/ChildFriendly";
7 | import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
8 | import { renderAmenityIcon } from "../../../../helpers/helpers";
9 | import useCartContext from "../../../../hooks/useCartContext";
10 | import useSnackbar from "../../../../hooks/useSnackbar";
11 | import GenericSnackbar from "../../../../components/GenericSnackbar";
12 | import { SearchContext } from "../../../../context/searchContext";
13 |
14 | const AvailableRooms = ({ hotelAvailableRooms }) => {
15 | const { addToCart, isRoomAlreadyInCart } = useCartContext();
16 | const { snackbar, showSuccessSnackbar, handleCloseSnackbar, showSnackbar } =
17 | useSnackbar();
18 | const { checkInDate, checkOutDate } = useContext(SearchContext);
19 |
20 | useEffect(() => {
21 | hotelAvailableRooms &&
22 | hotelAvailableRooms.length === 0 &&
23 | showSnackbar(
24 | `There are no available rooms between ${checkInDate} and ${checkOutDate}.`,
25 | "info"
26 | );
27 | }, [hotelAvailableRooms, checkInDate, checkOutDate]);
28 |
29 | const handleAddToCart = (room) => {
30 | if (!isRoomAlreadyInCart(room.roomId)) {
31 | addToCart(room);
32 | showSuccessSnackbar(`${room.roomType} Room Added to cart!`);
33 | }
34 | };
35 |
36 | const availableRooms = hotelAvailableRooms.filter(
37 | (room) => room.availability
38 | );
39 |
40 | return (
41 | <>
42 | Available Rooms
43 | {hotelAvailableRooms && hotelAvailableRooms.length === 0 && (
44 | <>
45 |
46 | {`There are no available rooms between ${checkInDate} and ${checkOutDate}.`}
47 |
48 |
49 | )}
50 |
51 |
52 | {availableRooms.map((room, index) => (
53 |
54 |
59 |
60 |
{room.roomType} Room
61 |
${room.price}/night
62 |
63 |
64 |
65 |
68 |
Adults: {room.capacityOfAdults}
69 |
70 |
71 |
72 |
74 |
Children: {room.capacityOfChildren}
75 |
76 |
77 |
78 | {room.roomAmenities.map((amenity, amenityIndex) => (
79 |
80 | {renderAmenityIcon(amenity.name)} {amenity.name}:{" "}
81 | {amenity.description}
82 |
83 | ))}
84 |
85 |
86 |
87 |
handleAddToCart(room)}
94 | >
95 | {isRoomAlreadyInCart(room.roomId) ? "Added!" : "Add to Cart"}
96 | {!isRoomAlreadyInCart(room.roomId) && (
97 |
100 |
101 | ))}
102 |
71 |
Payment Information
72 |
73 | To complete your booking, please provide your personal details and
74 | payment information. Additionally, feel free to include any special
75 | requests or remarks.
76 |
77 |
82 |
136 |
137 |
138 |
144 |
90 |
92 |
103 |
115 |
116 |
117 |
138 |
139 |
140 |
147 | );
148 | };
149 |
150 | export default Hotels;
151 |
--------------------------------------------------------------------------------
/src/pages/Checkout/components/CartItems/CartItems.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Typography,
3 | Card,
4 | CardContent,
5 | CardActions,
6 | Avatar,
7 | Grid,
8 | Box,
9 | Button,
10 | Chip,
11 | } from "@mui/material";
12 | import DeleteIcon from "@mui/icons-material/Delete";
13 | import ShopCartIcon from "@mui/icons-material/ShoppingCart";
14 | import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";
15 | import useCartContext from "../../../../hooks/useCartContext";
16 | import { SearchContext } from "../../../../context/searchContext";
17 | import { useContext } from "react";
18 |
19 | const CartItems = () => {
20 | const { cart, removeFromCart, getCartTotalPrice } = useCartContext();
21 | const { totalCost } = getCartTotalPrice();
22 | const { getNumberOfNights } = useContext(SearchContext);
23 |
24 | return (
25 |
26 |
42 | Your Cart
44 | {cart.length === 0 ? (
45 |
49 | Your cart is empty.
51 | ) : (
52 |
53 | {cart.map((item, index) => (
54 |
55 |
61 |
62 |
70 |
76 |
86 | {item.roomType}
87 |
88 |
89 |
90 |
95 | ${item.price} (x {getNumberOfNights()}{" "}
96 | {getNumberOfNights() > 1 ? "nights" : "night"})
97 |
98 |
99 |
100 |
101 |
102 | Room Number: {item.roomNumber}
103 |
104 |
105 |
106 | Capacity: {item.capacityOfAdults} Adults and{" "}
107 | {item.capacityOfChildren} Children
108 |
109 |
110 |
111 | {item.roomAmenities.map((amenity, amenityIndex) => (
112 |
121 |
122 |
123 |
124 |
125 |
134 |
135 |
136 | ))}
137 |
138 | )}
139 |
140 |
141 | Total cost: ${totalCost * getNumberOfNights()}
142 |
143 |
144 |
145 | );
146 | };
147 |
148 | export default CartItems;
149 |
--------------------------------------------------------------------------------
/src/__tests__/Login.test.jsx:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent, waitFor } from "@testing-library/react";
2 | import { MemoryRouter } from "react-router-dom";
3 | import Login from "../pages/Login";
4 | import AuthContextProvider from "../context/authContext";
5 | import { loginAPI } from "../services/authService";
6 |
7 | jest.mock("../services/authService", () => ({
8 | loginAPI: jest.fn(),
9 | }));
10 |
11 | describe("Login Component", () => {
12 | it("renders Login component", () => {
13 | render(
14 |
15 |
16 |
18 |
19 | );
20 | const headerElement = screen.getByText(/Login 👋/i);
21 | expect(headerElement).toBeInTheDocument();
22 | });
23 |
24 | it("submits the form with valid credentials when trying to login as user", async () => {
25 | loginAPI.mockResolvedValue({ userType: "User" });
26 |
27 | render(
28 |
29 |
30 |
32 |
33 | );
34 |
35 | const usernameInput = screen.getByPlaceholderText(/Username/i);
36 | const passwordInput = screen.getByPlaceholderText(/Password/i);
37 | const loginButton = screen.getByText(/Log in/i);
38 |
39 | fireEvent.change(usernameInput, { target: { value: "user" } });
40 | fireEvent.change(passwordInput, { target: { value: "user" } });
41 |
42 | await waitFor(() => {
43 | expect(usernameInput).toHaveValue("user");
44 | expect(passwordInput).toHaveValue("user");
45 | });
46 |
47 | fireEvent.click(loginButton);
48 |
49 | await waitFor(() => {
50 | expect(loginAPI).toHaveBeenCalledWith({
51 | username: "user",
52 | password: "user",
53 | });
54 | });
55 |
56 | await waitFor(() => {
57 | const successMessage = screen.getByText(
58 | /Welcome, you're successfully logged in!/i
59 | );
60 | expect(successMessage).toBeInTheDocument();
61 | });
62 | });
63 |
64 | it("displays error message for invalid credentials when trying to login as user", async () => {
65 | loginAPI.mockRejectedValue(new Error("Invalid credentials"));
66 |
67 | render(
68 |
69 |
70 |
72 |
73 | );
74 |
75 | const usernameInput = screen.getByPlaceholderText(/Username/i);
76 | const passwordInput = screen.getByPlaceholderText(/Password/i);
77 | const loginButton = screen.getByText(/Log in/i);
78 |
79 | fireEvent.change(usernameInput, { target: { value: "user" } });
80 | fireEvent.change(passwordInput, { target: { value: "wrongPassword" } });
81 |
82 | fireEvent.click(loginButton);
83 |
84 | await waitFor(() => {
85 | expect(loginAPI).toHaveBeenCalledWith({
86 | username: "user",
87 | password: "wrongPassword",
88 | });
89 | });
90 |
91 | await waitFor(() => {
92 | const errorMessage = screen.getByText(
93 | /Login failed! Unable to login with provided credentials./i
94 | );
95 | expect(errorMessage).toBeInTheDocument();
96 | });
97 | });
98 | });
99 |
100 | it("submits the form with valid credentials when trying to login as admin", async () => {
101 | loginAPI.mockResolvedValue({ userType: "Admin" });
102 |
103 | render(
104 |
105 |
106 |
108 |
109 | );
110 |
111 | const usernameInput = screen.getByPlaceholderText(/Username/i);
112 | const passwordInput = screen.getByPlaceholderText(/Password/i);
113 | const loginButton = screen.getByText(/Log in/i);
114 |
115 | fireEvent.change(usernameInput, { target: { value: "admin" } });
116 | fireEvent.change(passwordInput, { target: { value: "admin" } });
117 |
118 | await waitFor(() => {
119 | expect(usernameInput).toHaveValue("admin");
120 | expect(passwordInput).toHaveValue("admin");
121 | });
122 |
123 | fireEvent.click(loginButton);
124 |
125 | await waitFor(() => {
126 | expect(loginAPI).toHaveBeenCalledWith({
127 | username: "admin",
128 | password: "admin",
129 | });
130 | });
131 |
132 | await waitFor(() => {
133 | const successMessage = screen.getByText(
134 | /Welcome, you're successfully logged in!/i
135 | );
136 | expect(successMessage).toBeInTheDocument();
137 | });
138 | });
139 |
140 | it("displays error message for invalid credentials when trying to login as admin", async () => {
141 | loginAPI.mockRejectedValue(new Error("Invalid credentials"));
142 |
143 | render(
144 |
145 |
146 |
148 |
149 | );
150 |
151 | const usernameInput = screen.getByPlaceholderText(/Username/i);
152 | const passwordInput = screen.getByPlaceholderText(/Password/i);
153 | const loginButton = screen.getByText(/Log in/i);
154 |
155 | fireEvent.change(usernameInput, { target: { value: "admin" } });
156 | fireEvent.change(passwordInput, { target: { value: "wrongPassword" } });
157 |
158 | fireEvent.click(loginButton);
159 |
160 | await waitFor(() => {
161 | expect(loginAPI).toHaveBeenCalledWith({
162 | username: "admin",
163 | password: "wrongPassword",
164 | });
165 | });
166 |
167 | await waitFor(() => {
168 | const errorMessage = screen.getByText(
169 | /Login failed! Unable to login with provided credentials./i
170 | );
171 | expect(errorMessage).toBeInTheDocument();
172 | });
173 | });
174 |
--------------------------------------------------------------------------------