This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the first part of our checkout section after the Cart where a user enters in either Delivery or Pickup details.
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the Delivery component and files in the following folder. Create these new files.
Delivery.jsx will render when the user hits the route garden/:id/shop/delivery
You will be getting passed the cart state through props which you will need to send to the next checkout page so it can be sent to orders when completed as well as all the details from the delivery form (like name, etc...). If Cart has not been completed, hardcode this object and any other data you may need.
Inside Delivery.jsx
[ ] Create a toggle button for pickup and delivery (using state) that conditionally renders the Delivery Form
Your form components will live elsewhere in Subcomponents rather than views.
[ ] Style it as closely as possible to the Figma using CSS Tailwind, If the payment page is simultaneously being made you will need to communicate with that team as you will share styling classnames.
[ ] make sure the checkout button navigates you to a checkout / payment route (frame name in the figma), make sure you send the delivery details and the cart, as it will later need to be sent to the orders db which has not yet been set up!
[ ] test, Run npm run lint, follow peer review process and PR flowchart
This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the first part of our checkout section after the Cart where a user enters in either Delivery or Pickup details.
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the Delivery component and files in the following folder. Create these new files.
Delivery.jsx will render when the user hits the route garden/:id/shop/delivery
You will be getting passed the cart state through props which you will need to send to the next checkout page so it can be sent to orders when completed as well as all the details from the delivery form (like name, etc...). If Cart has not been completed, hardcode this object and any other data you may need.
Inside Delivery.jsx
Your form components will live elsewhere in Subcomponents rather than views.