[Whitelabel] Handle with free and paid item on checkout page (cart)

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 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 (canceled)

  • 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 (CANCELED)

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

  • The fixed text should be in Lokalize

 

DOD-LIKE

  • Respect all points from the Rules section

  • The styles should be as Figma

  • The fixed text should be in Lokalize

  • Implement the unit tests

  • Validate in web and native

OBS: Task 2 was canceled because will not make sense to show this desc if we can have more than 1 item free crated on Sanity. This desc will be on the cart item for each item in an isolated way. Aligned with @Hainzenreder, Diego.

 

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.

Free example

 

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