Page Comparison

Repos that we’ll change

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

...

• Rules:

  • The modal should have an 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

  • If the user clicks on the primary button (“add …”) we’ll add all the items that come from Sanity into the cart

    • We can have some combinations here:

    • If we configure on Sanity to have the free item for two menu items and we add the two menu items to the cart we’ll offer to the user 2 free items (1 free item default per menu item)

    If we configure on Sanity the menu items and fill the “quantity free” field this will be an override and we’ll need to offer the sum of the quantities

    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 closes

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

...

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

...