Shopping Cart (User Account) Page (+100)

[AndrewMotevich]

Shopping Cart (User Account) Page (+100)

These two pages are visually similar and represent either the added booking to a cart or already finished ones.

Shopping Cart page:

• [x] - The Shopping Cart page should display a table with all previously added bookings that are awaiting payment.
• [x] - The table should have the following columns: flight number, destination(s), flight type, departure and arrival date and time, passenger amount, and price.
• [x] - Each row should have a checkbox on the left-hand side, which allows users to select multiple bookings for payment.
• [x] - On each row, there’s the three-dot icon with a select menu that allows editing or deleting the booking. For editing a booking, take a user to the Booking Process Page with pre-filled data
• [x] - There should be a "Select All" checkbox at the top of the table, which allows users to select all the bookings in the cart with one click.
• [x] - There should be a "Continue to Payment" button at the bottom of the page, which finishes the checkout process.

User Account page:

• [x] - The User Account page should display a table with all the bookings made by the user.
• [x] - The table should have the same columns as the Shopping Cart page.
• [x] - Each row should have a clickable link that navigates the user to the Booking Summary page.
• [x] - The Booking Summary page should display all the information about the booking, but without the option to modify or cancel the booking.
• [x] - There should be a "Return to Account" button on the Booking Summary page, which takes the user back to the User Account page.

[Iogsotot]

• Layout

• [ ] desktops: 1128+

• [ ] laptops: 960+

• [ ] tablets: 540+

• [ ] smartphones: 420+

General Requirements:

• [ ] The web app must be responsive, i.e., it should adapt to various screen sizes and resolutions, such as desktops, laptops, tablets, and smartphones.
• [x] The web app should follow the same style guide across all the pages, including the color scheme, typography, and visual elements.
• [ ] All the forms should have client-side validation that prevents submission and shows invalid fields if any of the required data is missing. The validation rule should correspond to the expected data type (e.g. email, phone number, name, etc.)

Content Container: The content container is the dynamic part of the app that’s changing on router navigation and should contain the main content of the web page, such as flight search results, flight details, booking form, payment form, etc.