As a User,
I want to be able to add bikes to the basket,
so that I can book them later.
Description
When the page "Details" is displayed and the user click on "Add to shopping cart", the current bike will be added to the shopping cart and the previous page "Bikes" will be showed again with the particularity that the product added to the shopping cart won't be there on page "Bikes" anymore. Also the icon which represents the shopping cart will be showed as shown on the Excalidraw picture and it will be showed on every page while there is products on the shopping cart.
Acceptance Criteria
[x] The button "Add to shopping cart" is displayed,
[x] Clicking on "Add to shopping cart" adds the current bike to the shopping cart,
[x] Clicking on "Add to shopping cart" redirects to the page "Bikes",
[x] The shopping cart icon is displayed on every page on top - right while there is products on the shopping cart,
[x] The selected bike won't be displayed on "Bikes" anymore,
[x] The quantity of products is shown on the shopping cart icon.
Tasks
[x] Add the button "Add to shopping cart" (the exact position of the button is not so important for now),
[x] Use the "useLocalStorageState" to keep the array of the bike local in the browser (npm i use-local-storage-state),
[x] Create the array for the shopping cart "selectedProducts" to save there the selected bikes, save this array in local storage (use "useLocalStorageState"),
[x] ...Add functionality to the button "Add to shopping cart" (Add the bike to the shopping cart and shows page "Bikes"):
[x] ...create the function "handleAddToShoppingCart" to handle "Add to shopping cart",
[x] ...add functionality so that the respective selected bike is added to the array of the shopping cart "selectedProducts" saved in the local storage,
[x] ...add functionality so that the page "Bikes" is shown after clicking the button "Add to shopping cart",
[x] Add functionality so that the respective selected bike won't be shown in page "Bikes" anymore.
[x] Create the component "ShoppingCart" which will be the icon for the shopping cart, you can use styled components for it.
[x] ...create component "SVGIcon", which will be use to display the icon for the shopping cart,
[x] ...set this component in the position top-right on every page,
[x] ...add functionality so that the shopping cart icon (with quantity of products) is displayed just when there is products on it.
Value Proposition
As a User, I want to be able to add bikes to the basket, so that I can book them later.
Description
When the page "Details" is displayed and the user click on "Add to shopping cart", the current bike will be added to the shopping cart and the previous page "Bikes" will be showed again with the particularity that the product added to the shopping cart won't be there on page "Bikes" anymore. Also the icon which represents the shopping cart will be showed as shown on the Excalidraw picture and it will be showed on every page while there is products on the shopping cart.
Acceptance Criteria
Tasks
Complexity
XL