Userstory 6 - Show the Shopping Cart list

[YuriPadilla]

Value Proposition

As a user, I want to see the shopping cart, so that I can see what I'm going to book.

Description

When clicking the shopping cart icon, the page "SelectedProducts" will be displayed. The user will see in this page all the selected products The user will be able to remove every selected product from the shopping cart by clicking the respective button "X" and also will be able to empty the whole shopping cart by clicking the button "Empty shopping cart". The user will be able to select how long to book the products and will be able to see the price for the selected products and period of time. See a visual description as follow...

Acceptance Criteria

• [x] Clicking the shopping cart icon displays the shopping cart,
• [x] The selected products are displayed in the shopping cart,
• [x] A button "Icon Remove" is displayed on every selected product on the shopping cart,
• [x] Clicking the button "Icon Remove" removes the respective product from the shopping cart,
• [x] Clicking the button "Empty shopping cart" remove all products from the shopping cart,
• [x] The Date input fields "from" and "until" are displayed,
• [x] Selecting a leasing time shows the quantity of the booking price for those days and for the respective selected products.
• [x] If there is no bikes and no date selected, the output must show: Select days and bikes,
• [x] If there is just no bikes selected, the output must show: Select bikes,
• [x] If there is just no date selected, the output must show: Select days,
• [x] If the selected date is incorrect (final date is earlier to initial date), the output must show: select days correctly,

Tasks

• [x] Create the page "ShoppingCartPage" (empty for now, returning for example "Hello World");
• [x] Add functionality so that when clicking the shopping cart icon the page "ShoppingCartPage" is displayed,
• [x] Add content to page "ShoppingCartPage"...
  • [x] ...add History of Links,
  • [x] ...create the component "SelectedProducts" to see the selected products and use it in this page "ShoppingCartPage",
  • [x] ...add the button "Empty shopping cart" and add functionality to it,
  • [x] ...add a form with the input fields "from" and "until" and the output, which is a component "LeaseTimeForm", and...
    • [x] ...add functionality to the form (input fields "from" and "until") so that it displays the quantity of the selected days with the respective price for it.
  • [x] ...make the form data to persist when changing pages, use global state (jotai) for it,
• [x] Add functionality to the respective button "Icon Remove" to remove the respective product from the shopping cart,

Complexity

XL

[SaschaRadojkovic]

the first word of your task has a little typo :)

[YuriPadilla]

Thanks, Sascha!!! 😂 👍