Page Comparison

...

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

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

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

...