Repos that we’ll change

Whitelabel: https://github.com/rbilabs/intl-whitelabel-app

Figma: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/VNb1dzeeYVV0IphMPJo0lt/Popeyes?type=design&node-id=3189-125398&t=b8GDYgoS6YtWAr0K-0  

Task summary

Whitelabel:

• Task 1: Create a new component to show the add-on free modal

• Task 2: Add carousel logic in modal content

Tasks breakdown

Task 1: Create a new component to show the add-on free modal

Create a new sub-component that will be used on the add-on free promotion info

Open

Figma mobile proposal

• Rules:

  • The modal should have a fixed width and height to help us to deal with the carousel logics (render properly height/width)

  • The text for the title, description, and primary button (the orange one) will come from Sanity

    • The title and description should have a fixed height container and if the text is too big we’ll use the ellipsis technique to hide the rest of the text.

  • The text for the secondary button (“Not Now” ) will be fixed. We’ll add this to the main en.json file and run the lokalize after that

  • If the image is not configured on Sanity the empty space should not be there and we’ll show the image for the first item configured in the options of the section as a fallback

  • The modal should only be shown

    • If the respective toggle from Sanity is ON

    • The logic for the buttons: as this task is focused on the layout/styles and modal itself we’ll not need to implement the buttons here. He can do that on Task 2.

PATH FOR THE SOLUTION

• He has multiple examples of modals in the application (agreements modal, etc). I don’t see any component that will help us. The Dialog from ctg-components-library did not accept content from what I saw.

• For the architecture suggestion:

  • The idea is to have a new components folder for this new comp that will be responsible to deal with the modal

Open

• Suggested props/interface for the new component

  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; }

DOD-LIKE

• Respect all points from the Rules section

• Create the new component folder and necessary files

• Implement unit tests (if using a hook to isolate the logic)

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

• Validate the layout on: Web and native devices

Task 2: Add carousel logic in modal content

The modal content should be “paginated”. Well, need to use the nuka-carousel that already exists on the application. We made this in the past for the carousel Instagram feature (src/components/social-carousel/social-carousel.tsx).

As we can have multiple sections on Sanity we’ll have to present the modal content with a “pagination” system.

• Rules:

  • For the Desktop and tablet, we should show the arrows buttons but hide them on 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” (lokalized text)

        • “Not Now”:

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

        • “Close” button

          • The text will be changed to “Save and Exit” (lokalized 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

    • We need to hide (or disable, with a darker color if we can’t hide) the left arrow on the first page and the right arrow on the last page

  • 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

DOD-LIKE

• Respect all points from the Rules section

• Validate the layout on: Web and native devices

• Should be as described in Figma

Task 3: Add logic to show/hide the modal

In this task, we need to ensure that the modal will be shown only on the first load/journey (by order).

• If we have on the cartEntries at least one menu item configured for the addon extra item that was added to the cart on the first load/journey

  • Example case 1:

    • User enter the checkout pages and see the modal for the first time. He closes/interacts with the modal

    • User decides to go out of the checkout page and navigate through the app

    • User enter the checkout page again

    • Result: the modal will not be shown again as the user already saw the modal

  • Example case 2:

    • User add to the cart an item that has Ketchup as a free item

    • User enter the checkout pages and see the promotional modal for Ketchup for the first time. He closes/interacts with the modal

    • User decides to go out of the checkout page and navigate through the app

    • Now user adds another menu item that will offer ice cream as a free item

    • User enter the checkout page again

    • Result: the modal will be shown but with the promotional content for the ice cream. We should not show the content for the ketchup as the user already saw that information the first time that he enters the checkout

  • If use press F5 on the page we’ll not show the modal because he already saw it.