Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

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

  • Rules:

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

 

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

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

  • 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

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, we should show the arrows buttons but hide them on tablet/mobile

    • All the content should be inside the carousel

PATH FOR THE SOLUTION

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

 

DOD-LIKE

  • Respect all points from the Rules section

  • Validate the layout on: Web and native devices

  • Should be as described in Figma

  • No labels