Page Comparison

...

• Suggested props/interface for the new component

  Code Block
  interface IAddOnsFreeModal { cartEntries: ICartEntry[]; // this is necessary to know if we'll show the modal based in whats in the cart entries addOnSections: IAddOnSection[]; // another option is to receive the addon free from the parent directly addItemToCart: (items: IBaseItem) => void; }

• I think that the modal should be responsible for our internal state to know if will be shown or not and if we click on the addToCart we’ll run the handleAddToCart from the parent component

DOD-LIKE

• Respect all points from the Rules section

• Create the new component folder and necessary files

• Implement unit tests

• The colors for the background, buttons, and texts should follow the brand theme

• Validate the layout on: Web and native devices

...

• Rules:

  • For the Desktop, we should show the arrows buttons but hide them on tablet/mobile

  • All the content should be inside the carousel

  • The logic for the buttons:

    • “Add” button:

      • Single item modal: adds 1 free item and closes the modal

      • Carousel modal: adds 1 free item and moves to the next page

        • “Add” button:

          • Disabled and his text will be changed to: “Added to Order” (localized text)

        • “Not Now”:

          • Button text will be changed to: “You can remove this item later at checkout” (localized text)

        • “Close” button

          • The text will be changed to “Save and Exit” (localized text)

        • Obs: these items will be made on the page that the user was on before clicking on the “add” button

    • “Not Now” button:

      • Single item modal: closes the modal without adding an item

      • Carousel modal: pass to the next page without adding the item

        • If the user is on the last page: close the modal without adding the last item, what was added before remains added, and what was not added will be available on the cart section

    • “Close” button (will be visible only if we have more than 1 item/carousel):

      • Closes the modal: what was added before remains added, and what was not added will be available on the cart section

  • I think that the modal should be responsible for our internal state to know if will be shown or not and if we click on the addToCart we’ll run the handleAddItemToCart from the parent component

PATH FOR THE SOLUTION

• Perhaps we’ll need to “group” all the content in one container to make the carousel knows the right height

• For the button states and texts on each page, we’ll need to use some state management. We can use context or use or useReducer. I think that the useState will be too weak for this

...