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

Solution overview

We’ll extend the “AddOn section” (that we already use for the “Bag with Handles” solution) and add there the new logic to handle add-on free items.

Task summary

Whitelabel:

• Task 1: Create a new feature flag (enable-free-addon-on-cart)

  • This flag will condition the new logic added in the AddOnsItemsContainer

• Task 2: Add a description on the AddOnsItemsContainer section for the addon-free items

• Task 3: Add a logic on AddOnsItemsContainer to show the free item or the paid item

Tasks breakdown

Task 2: Add a description on the AddOnsItemsContainer section for the addon-free items

Rules:

• If the add-on free toggle is ON we’ll show the description in the section

PATH FOR THE SOLUTION

• This text will be fixed on the code but concatenated with the dynamic info. Example:

  • `You can add up to ${quantityFromSanity} extra ${item.name} for your order. Additional ${item.name} will cost ${item.price}`

OBS: this is only an example and will not be exactly this.

• This change new feature will be made inside the AddOnsItemsContainer

DOD-LIKE

• Respect all points from the Rules section

• The styles should be as Figma

• Implement the unit tests

• Validate in web and native

Task 3: Add a logic on AddOnsItemsContainer to show the free item and the paid item

The behavior that we want on the UI is to show the desired addon (free or paid) based on the below rules. We’ll not want to see the two items in the section at the same time. It’s always one or the other.

Rules:

• Hide the paid item:

  • If the max quantity of free items is selected on the cart

• Show the paid item:

  • If the max quantity of free items was not selected yet

• Show the free or paid item:

  • Besides the logic above we also need to see if the match happens = The configured menu item(s) on Sanity match with what we have added to the cart

• OBS: This will be something dynamic as the user can edit the items or add new items that can affect this

PATHS FOR THE SOLUTION (2 options)

• We can adjust the methods responsible to render the items inside the section to have this behavior

• We can create a new subcomponent to be responsible to render the items

DOD-LIKE

• Respect all points from the Rules section

• Implement new unit tests for the new behavior