Description:

Issue Overview:
So, here's the scoop: currently, even when no filters are selected, the clear button is still active. We need to make it disabled when there are no filters selected.

Implementation Steps:

• First stop, src\components\vertical-filters\VerticalFilters.jsx. Let's jazz it up with some Tailwind magic to disable the cursor when no filters are selected.
• To know if any filters are active, let's do a quick dive into src\routes\listings\HotelsSearch.jsx. There's a handy method called getActiveFilters hanging out there. It's got a const named filters that holds the selected state. Let's make use of that to figure out if we need to disable the clear button.

Screenshots

Description:

Issue Summary:
we want to extend the /hotels route to support the numGuests query parameter in the URL. This feature will enable users to directly navigate to a pre-filtered list of hotels based on the number of guests, improving the flexibility and user experience for booking accommodations.

Objective:
Enable the /hotels route to accept a numGuests query parameter in the URL, allowing users to directly navigate to a list of hotels that can accommodate the specified number of guests. This feature should support both direct URL entry (e.g., /hotels?numGuests=4) and navigation from within the application.

Implementation Steps:

1. Query Parameter Support:

   • Modify the hotels route to parse the numGuests query parameter from the URL. This involves checking the URL for any numGuests parameters upon route loading.

2. Prioritize Query Parameter:

   • Adjust the logic within the /hotels route to first check for a numGuests query parameter. If present, use this parameter to filter the hotel listings based on the available accommodations for the specified number of guests.
   • If the numGuests query parameter is not present, then fallback to using the existing state variable (guestsInputValue) as the source for the guest filter.
   • Consider reusing or modifying the existing useEffect hook that handles location changes to incorporate the numGuests parameter, similar to the implementation for the city parameter in issue #47.

References:

• See issue #47 for a similar implementation regarding the city query parameter.

Description:

Issue Summary:
Currently, the application supports navigating to the /hotels route with a city specified through internal state management, such as when a user searches for "Pune" from the homepage. However, this approach does not update the URL with the search parameters, limiting direct URL navigation and bookmarking capabilities. To improve usability and direct access, we aim to introduce support for URL query parameters, specifically for city selection.

Objective:
Enable the /hotels route to accept a city query parameter in the URL, allowing users to directly navigate to a pre-filtered list of hotels based on the city. This feature should support both direct URL entry (e.g., /hotels?city=pune) and navigation from within the application, enhancing flexibility and user experience.

Implementation Steps:

1. Query Parameter Support:

   • Modify the hotels route to parse the city query parameter from the URL. This involves checking the URL for any city parameters upon route loading.

2. Prioritize Query Parameter:

   • Adjust the logic within the /hotels route to first check for a city query parameter. If present, use this parameter as the locationInputValue to filter the hotel listings.
   • If the city query parameter is not present, then fallback to using the existing state variable (locationInputValue) as the source for the city filter.
   • There is already a useEffect on location, can we use that ? search for "const location = useLocation()" and see if we can use that, else you can implement as per your requirements.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Currently only few components are documented. Add documentation wherever required.

Describe alternatives you've considered
NA

Additional context
NA

• Github worflow: CI runs only component tests
• For e2e tests to work on ci we need use a package called wait-on which waits for npm start to be completed so e2e tests can be accessible on CI.

Description:

Problem Statement:
Users currently encounter difficulty reading large price numbers on the /hotels page, especially after selecting multiple rooms, due to the absence of commas in the total price and taxes displayed. This lack of formatting can lead to confusion and a less user-friendly experience.

Objective:
To improve readability and enhance the user experience, we aim to implement logic that dynamically inserts commas into price figures based on their length. This formatting should apply to both the total price and taxes displayed within the hotel booking details.

Detailed Requirements:

1. Comma Insertion Logic:

   • For prices with 3 digits, no commas should be added.
   • For prices with 4 digits, insert a comma after the first digit (e.g., 1,230).
   • For prices with 5 digits, insert a comma after the second digit (e.g., 12,230).
   • For prices with 6 digits, insert commas after the first and fourth digits (e.g., 1,21,320).

2. Application Scope:

   • The comma formatting logic should be applied to both the total and taxes state variables within the application.

3. Implementation Location:

   • The necessary changes should be made within the HotelBookingDetailsCard.jsx component, located at src/routes/hotel-details/components/hotel-booking-details-card.

4. Testing Tips:

   • To test various price formats, adjust the booking dates to generate higher total prices, ensuring the comma insertion logic works as expected across different price lengths.

Screenshots

Description:

Tasks:

1. Registration Page Adjustments (/register route):

   • Align the Register Button to the Right: Currently, the register button is positioned on the left.
   • Relocate the 'Already Registered? Login' Link: This link should be moved to the left side, swapping positions with the register button to better guide user flow and expectations.

2. Login Page Adjustments (/login route):

   • Align the Login Button to the Right: Similar to the registration page, the login button is also aligned to the left.
   • Reduce the Margin Below the 'Welcome Back' Message: There's currently excessive spacing below the 'Welcome back' greeting. Halving this bottom margin should make it look better.

Screenshots
Register page:

Login page:

Description:

Overview:
At the moment, clicking the logout button on our website does not perform any action. We aim to enhance user experience by making the logout button fully functional, allowing users to securely exit their session.

What Needs to Be Done:

1. Create Logout Handler: We need to implement a logout function within the NavbarItems component. The file to be updated is located at src/components/navbar-items/NavbarItems.jsx.
2. Call the Logout Endpoint: When the logout button is clicked, the handler should make a request to the api/logout endpoint. This action will effectively log the user out by removing their session from the backend.
3. Update Frontend State: After the backend has processed the logout request, utilize the AuthContext to invoke triggerAuthCheck(). This will update the frontend state by clearing any user-related information, ensuring the user is fully logged out.
4. Redirect to Login Page: Finally, redirect the user to the login page, signaling a complete logout process.

Additional Resources:

• For an example of how to implement similar functionality, please refer to the Login.jsx component at src/routes/login/Login.jsx. This file contains examples of making API calls and updating the frontend state, which can be helpful when working on the logout feature.

Screenshots

Describe the bug

• On the /hotels route, clicking the 'Clear Filters' button triggers an API call even when no filters are applied.

To Reproduce
Steps to reproduce the behavior:

1. Go to /hotels route
2. Dont apply any filters and click on 'clear' button from left (Vertical filters sections)
3. It causes data re-fetch

Expected behavior

• Should not trigger refetch when there are no active filters.

Screenshots

Additional context

• The issue needs to be addressed in the onClearFiltersAction function located in src\routes\listings\HotelsSearch.jsx

Description:

Issue Summary:
Users are currently able to select past dates when booking hotels on the /hotels route, which can lead to confusion and potential booking errors. This functionality needs to be corrected to ensure a logical and user-friendly booking experience.

Objective:
The goal is to enhance the date selection process within the hotel booking flow by preventing users from choosing dates that have already passed. Additionally, we aim to provide immediate feedback when a past date is selected, informing users to choose valid future dates.

Implementation Details:

1. Date Validation:

   • Within the HotelBookingDetailsCard.jsx component (located at src/routes/hotel-details/components/hotel-booking-details-card), implement a validation check in the date selection logic (handling of dateRange state variables) to verify that the selected dates are not in the past.

2. Error Messaging:

   • If a user selects a past date, do not update the dateRange state with the invalid selection. Instead, display an error message directly below the date and time selection area. Use a <small> HTML tag for the message, stating "Please select valid dates."
   • Style the error message in red to attract attention, utilizing Tailwind CSS for styling. An example class for this purpose could be text-red-500.

3. State Management for Error Message:

   • Introduce a new state variable to manage the visibility and content of the error message. Ensure that this error state is cleared and the message is hidden once the user selects a valid date range.

Screenshots

Is your feature request related to a problem? Please describe.
Currently, the footer contains links presented as plain text. We need to transform these into clickable links.

Describe the solution you'd like

• Encapsulate the text within anchor tags or utilize a Link component.
• For the "About Us" text, ensure navigation to the about-us route. For all other texts, navigate to the root / or the homepage for the time being.

Screenshot

• add basic validations for login route
• Validate input fields such as email field, should not allow invalid emails.
• show a basic error message when like a green check inside input field.

Description:

Problem:
Currently, when logged-in users proceed to the checkout page after selecting a hotel and specifying their booking details, they are required to manually enter their email address.

Objective:
The goal is to automatically fill in the email address field on the checkout page for users who are logged in, using the email associated with their account.

Implementation Steps:

1. Location of Changes:

   • The necessary modifications should be made within the Checkout.jsx component, located at src/routes/checkout. Focus on the formData state where the form values are managed.

2. Utilize AuthContext:

   • Leverage the AuthContext to access the currently logged-in user's details. If the user is logged in, their userDetails should include an email address.
   • Extract the email address from userDetails and automatically set it as the initial value for the email field in the formData state. Ensure this pre-population occurs only for authenticated users; otherwise, leave the email field in its default, empty state.

Screenshots

Description:

Issue Summary:
Currently, our application allows the submission of the registration form with empty fields, resulting in unnecessary requests to the staybooker-express-api. While the backend validations are robust and prevent account creation under these conditions, implementing frontend validations will enhance user experience by preventing invalid form submissions.

Required Frontend Validations:
To improve the registration process, we need to introduce client-side validation checks that must be passed before the form can be submitted. These validations include:

1. First Name Validation:

   • The firstName field should only accept input that is between 2 to 64 characters in length.

2. Last Name Validation:

   • The lastName field should only accept input that is between 2 to 64 characters in length.

3. Email Validation:

   • The email field must include an "@" symbol to ensure it follows a basic email format.

4. Password Confirmation:

   • The confirmPassword field must match exactly with the password field to proceed.

Implementation Notes:

• At this stage, the focus is on preventing the submission of the registration form if any of the above validations fail.
• The mechanism for displaying error messages to the user will be addressed in a subsequent update, allowing us to incrementally improve the registration flow.

Screenshot

Describe the solution you'd like

• Add about-us route, add dummy any dummy content
• Goal is to just make the page functional, UI can be changed later

Feature Request:
Enhance the user experience on the /login route by adding a "Forgot Password?" link beneath the password input field. This link aims to provide users with a straightforward path to recover their passwords, improving the overall usability of the application.

Implementation Details:

1. Link Addition: Insert a clickable text/link labeled "Forgot Password?" under the password input box on the /login page.
2. Navigation: Clicking the "Forgot Password?" link should redirect users to a new route, /forgot-password.
3. New Route and Component: Create a new route and component for the forgot password feature. The component should be located at src/routes/forgot-password/ForgotPassword.jsx.
4. Page Layout: The /forgot-password page should include a single email input field and a submit button. The functionality for the submit action will be developed at a later stage and is not required for this feature's initial implementation.

Screenshots

Additional context
Add any other context or screenshots about the feature request here.

• Add e2e tests

Is your feature request related to a problem? Please describe.

• Currently when a user clicks on book now button from hoteViewCard, an action redirects user to the hotel details route
• However we need to make the image as well the title clickable.

Describe the solution you'd like

• Make the image and title of hotel-view-card (src\components\hotel-view-card) clickable
• Add cursor on hover for title and image.
• Upon click, navigate user to hotelDetails component. Similar to book now button

Screenshots
HotelViewCard:

Description:

Issue Overview:
As the title says, remove console warnings.

Implementation Steps:

• Let's dive in and figure out how to kick those warnings to the curb

Screenshot:

Is your feature request related to a problem? Please describe.
NA

Describe the solution you'd like

• When a user logs in, there is no logout button(no need to implement its functionality) just UI
• Create a dropdown to display logout option.

Screenshots

Additional context

• When a user hover on my account, open the dropdown and show logout dropdown item

Description:

Problem Overview:
When users navigate to the hotels page (/hotels) and modify the location parameter to an empty string (effectively removing the default "Pune" city filter), the page currently displays an unlimited number of hotel results. This behavior can overwhelm users and affect the performance of the page.

Objective:
To enhance user experience and improve page performance, we aim to limit the number of displayed hotels to a maximum of 10 per page. This limit will serve as an interim solution until a paginated backend solution is implemented, and will also remain as a frontend safeguard.

Implementation Details:

1. Limit Displayed Hotels:

   • Modify the loop (e.g., for loop or array mapping function) that renders the hotel listings on the /hotels page to only display up to 10 hotels.

2. Use a Global Variable:

   • Define a global variable, MAX_HOTELS_RESULTS, set to 10, at the top of the relevant script or component file. Utilize this variable to control the number of hotels rendered, ensuring easy maintenance and configurability.

3. Edge Case Handling:

   • Ensure that the implementation gracefully handles scenarios where fewer than 10 hotels are available to display, without causing errors or unexpected behavior.

Is your feature request related to a problem? Please describe.

• Currently dismissible alerts are displayed, mainly when user logs-in with incorrect details and upon successful sign up
• The current alerts are not reusable and are duplicated once in login route and in registration route with random colors.

Describe the solution you'd like

• Create a generic and reusable toast service.

Describe alternatives you've considered
NA

Description:

Issue Overview:
currently, users can submit a review and ratings on any hotel page, even if they haven't selected any stars. They just hit submit, and off it goes!

Proposed Improvement:
Let's tighten things up a bit. We'll make sure users have selected stars before they can submit. The review can still be empty, but those stars need some love.

Implementation Steps:

• Head over to src\routes\hotel-details\components\user-reviews\UserReviews.jsx. This is the boss component where we've got the state for userRating and userReview, along with the action handler handleReviewSubmit. Let's stop submissions right here if the stars aren't shining bright.

Screenshot

Description:

Issue Overview:
When navigating to the /login route, a console warning appears indicating a best practice issue related to input elements. Specifically, the warning message is:

[DOM] Input elements should have autocomplete attributes

Objective:
The goal is to refactor the relevant code to remove this warning by ensuring all input elements on the /login page include appropriate autocomplete attributes.

Expected Outcome:

• Elimination of the console warning related to missing autocomplete attributes on input elements within the /login route.

Screenshots

Description:

Issue Overview:
Presently, when users visit any hotel page for booking, they have the option to submit a review. However, this feature is visible to both logged-in and non-logged-in users.

Proposed Improvement:
let's hide the UserRatingsSelector.jsx component for those who aren't logged in.

Implementation Steps:

1. We need to hide UserRatingsSelector.jsx component completely for non-logged in users.
2. We'll do this fancy move using the AuthContext and checking if the isAuthenticated prop is a go. We've got similar setups in the codebase for reference.

Screenshots

Description:

Issue Overview:

we need to move the Dropdown and Loader components into the ux folder within the src/components directory.

Implementation Steps for Contributors:

1. Locate the dropdown-button component at src/components/dropdown-button.
2. Move the entire dropdown-button folder to src/components/ux.
3. Locate the loader component at src/components/loader.
4. Move the entire loader folder to src/components/ux.
5. Ensure that all import paths in the project are updated to reflect the new locations of these components.

Description:

Issue Overview:

The buttons and links on the /login page are not responsive when viewed on mobile devices or when the browser width is reduced below 500px. Specifically, the "New here? Create an account," "Forgot your password?" links, and the "Log In" button need to be adjusted for better responsiveness.

Implementation Steps:

1. Navigate to the /login page and enable mobile view or resize the width of the page below 500px.
2. Observe the responsiveness of the "New here? Create an account," "Forgot your password?" links, and the "Log In" button.
3. Implement the following changes to improve responsiveness:
   • The "Log In" button should occupy the entire width of the container.
   • The "New here? Create an account" and "Forgot your password?" links should be positioned in one row below the "Log In" button, with appropriate spacing between them.
4. Test the changes across various screen sizes to ensure that the layout remains responsive and visually appealing. (Feel free to adjust the links and buttons as per your choice but the goal is just to make it look better and responsive)

Screenshots

Description:

Objective:
Display the number of nights a user will stay at a hotel, calculated based on the selected check-in and check-out dates. This feature aims to provide users with a clear understanding of their booking duration before finalizing their reservation.

Implementation Steps:

1. Target Component for Changes:

   • The modifications should be implemented within the FinalBookingSummary.jsx component, located at src/routes/checkout/components/final-booking-summary.

2. Utilize date-fns Library:

   • Leverage the date-fns library, which is already included in the project, to calculate the difference between the check-in and check-out dates. This calculation will determine the total number of nights for the stay.

Screenshots
can we implement something like this ?

Description:

Problem Statement:
Click on any hotel and scroll down to review section, you will see that your rating div/section is not stacking down on small screen sizes.

Objective:
The goal is to improve the responsiveness of the "Overall Rating" and "Your Rating" sections within the hotel details page, ensuring that these elements stack vertically and occupy the full width of the screen on mobile devices.

Implementation Steps:

1. Component Location:

   • The required changes should be made in the UserReviews.jsx component, which can be found at src/routes/hotel-details/components/user-reviews.

2. Responsive Design Adjustment:

   • Modify the CSS or Tailwind classes applied to the "Overall Rating" and "Your Rating" sections to ensure that they stack vertically and each occupies the full width of the container on screens smaller than the 'md' breakpoint.

Screenshots

Feature
User currently lack visual feedback on the navigation bar to indicate which page or route they are viewing.

Proposed Solution:
Implement an active state indication for navigation links to visually highlight the currently active route.

• Active State Style: Apply an underline effect to the navigation item corresponding to the currently active route, mirroring the existing hover effect style for consistency.
• Exception for Home Route: The 'Home' navigation item should not receive this active state styling to serve as an exception. This means the 'Home' link will not be underlined when active.
• Targeted Navigation Items: The active state should be applied to the following navbar items:
  1. Hotels
  2. About Us
  3. Login/Register

Screenshots