Repos that we’ll change
Whitelabel: https://github.com/rbilabs/intl-whitelabel-app
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
Add Comment