Product Overview - mini/git-brunching GitHub Wiki

Landing Page

landing_page_mock

The landing page is the first page the user is greeted with when they access Git Brunching. The landing page contains functionality to allow users to select a restaurant and make a new booking, view an existing booking and allow restaurant managers to check all the bookings made to their restaurant. All the available restaurants are displayed in cards in a grid layout in the main section of the page. To create a new booking, the user can select a restaurant by clicking on it's card and will then be taken to the date/time selection page where they can begin the booking. The user can view an existing booking by clicking on the edit booking button which will open a popup, prompting the user to enter a booking code generated when the booking was originally created. Successfully entering the booking code will display a summary of the booking details and give the option to edit or delete the booking. The user also has the option to search for a specific restaurant using the search bar which filters the restaurant card by the text entered. (search functionality has not yet been implemented)

Restaurant managers can view summaries of all the bookings made to their restaurant by clicking on the restaurant button. (The app only supports checking the bookings of one restaurant at this stage of development).

Booking

Time/Date Selection

booking_page

Once the client has selected a restaurant they want to make a booking for they will be taken to this page. On initial load the page only displays the date and number of seats inputs. Once the user has selected both a date and a number of seats the times are displayed. The times which are unavailable for this date and number of people will be grayed out. Once the user has selected what time and date they want for their reservation they can continue to the next page which is where they input their details. Along the top of the page is a progress bar showing the user what stage of booking they are in, within this page Times is highlighted. Should the user want to return to the landing page they can click the logo at the top of the page to take them back.

In order to select a date a material UI datepicker is used. To supplement this the date-fns javascript library is used.

User Details

details

Upon heading to the user details page the progress bar along the top will update to show Details highlighted. Within this page the user has four input text fields. The first three, Name, phone number and email are required, while the last one, notes, is optional and can be used to make special requests. Once the user has entered their details they can continue to confirm their booking. Optionally, they can also go back and edit their selection for the date and time, if they changed their mind. Like the previous page if the user wants to return to the landing page they can click the logo at the top.

Confirmation Page

confirmation_page

Once the user has chosen when they want to eat and provided their details they are taken to a confirmation page. This page provides the user a summary of all the booking information they have provided allowing them to review it. If they are unhappy with what they have input they can go back to the other two pages and change their inputs. If they are happy they can click next and they will be taken to a page informing them of their completed booking and providing them with a code to track their booking. This can be done from the landing page and can be used to edit their booking.

Editing a Booking

If the user wishes to view or change their booking they can do so by clicking the edit booking button from the landing page. This opens the modal seen below, entering a code will allow them to view their booking.

booking_id

booking_summary

If the user enters their booking code they are provided with a summary of the information about their booking. From here they have two options. Firstly, they can delete their booking, this removes it from the database, so they won't be able to view it again. Secondly, they can edit their booking, this takes them through the same booking process outlined above. Starting at the Time and date selection and finishing with the confirmation. The only difference is the inputs are pre-filled with the old values and when the changes are confirmed the current booking is updated, ensuring the booking code remains the same.

Page Mapping

This section includes a mapping of the pages shown above to there corresponding file/folder locations

Landing Page - Folder: frontend\src\landing

  • LandingPage.js - Provides the base level page layout
  • NoRestaurants.js - Provides a placeholder if no restaurants are found on database query
  • RestaurantTile.js - Provides the restaurant cards/tile in the grid layout
  • SearchBar.js - Provides the search bar at the top of the landing page

Booking Page - Folder: frontend\src\booking

  • ContentContainer.js - Hold the progress bar and one of the three containers below based on the stage of the booking

  • Time/Date Selection Page - Folder: frontend\src\booking

    • TimeContainer.js - Provides the page to select the time, date and number of seats

  • User Details Page - Folder: frontend\src\booking

    • DetailsContainer.js - Provides the page to enter user details

  • Confirmation Page - Folder: frontend\src\booking

    • ConfirmationContainer.js - Provides the page to show a booking summary for confirmation

Booking Editing Modals - Folder: frontend\src\landing\edit

  • BookingEditPopupButton.js - Wraps the buttons to use for the edit booking modal
  • BookingEditPopupDialog.js - Holds the modal to edit and view your booking (as well as the modal to enter the code

The RestaurantViewBookingPage.js file is used to show the current reservations for restaurants, feature not yet complete.