Page Comparison

Repos that we’ll change

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

...

• Rules:

  • The modal should have a fixed width 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 text for the secondary button will be fixed on the “Not Now” label. 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

  • The modal should only be shown

    • If the respective toggle from Sanity is ON

    • 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 the user clicks on the primary button (“add …”) we’ll add all the items that come from Sanity into the cart

    • We’ll add always 1 free item independent of the maximum quantity

  • If the user clicks on the secondary button (“Not Now”) → WORK IN PROGRESS

  • If the user clicks on the “close” button the modal closesThe logic for the buttons:

    • “Add” button:

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

      • Carrossel 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

      • Carrossel 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/carrousel):

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

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

...