Repos that we’ll change
Whitelabel: https://github.com/rbilabs/intl-whitelabel-app
RBI Sanity Shared Schemas: https://github.com/rbilabs/rbi-sanity-shared-schemas
Whitelabel CMS: https://github.com/rbilabs/intl-whitelabel-cms
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: Add a logic to deal with the quantity of free items and paid items on the cart
Task 2: Add the informative description to the free item on the cart
Tasks breakdown
Task 1: Add a logic to deal with the quantity of free items and paid items on the cart
As we’ll have the two items on the cart we’ll need to follow some behaviors
Rules:
Case 1:
The client configures on Sanity that we’ll offer 4 free ketchup for “The sandwich menu” item
The user adds all the free items but decides to add an extra paid ketchup
If the user changes the quantity of “The sandwich menu” to 2
Now we’ll offer 8 free items for the client (always double from what’s in Sanity)
With that, we’ll need to remove the paid ketchup and add 1 to the free items (4 → 5). The client should not pay for an item if the free quantity has been increased
Case 2:
The client configures on Sanity that we’ll offer 4 free ketchup for “The sandwich menu” item
The user changes the quantity of “The sandwich menu” to 2
Now the user selects all 8 free ketchup items on the cart
Then, the user decides to change the quantity of “The sandwich menu” to 1 again
Now we’ll need to remove 4 from the free quantity (8 → 4)
Case 3:
The client configures on Sanity that we’ll offer 4 free ketchup for “The sandwich menu” item and for the 4 for some chicken
The user adds “The sandwich menu” on the cart
Now he has 4 free ketchups available to select
The user goes out of the checkout page and goes to the menu. Then, selects the chicken
Now the user has 8 free ketchups available (4 + 4)
…. and so on hahahaha, this can be very dynamic
PATH FOR THE SOLUTION
First of all, we’ll need to look at what’s configured on Sanity (the free quantity field)
…Work in progress…
DOD-LIKE
Respect all points from the Rules section
Task 2: Add the informative description to the free item on the cart
I think that we’ll not need to involve the back end for this functionality. My main idea is to let this responsibility for the FE application (to reduce the complexity)
Rules:
The quantity of free offered items must be the sum of all the offered items (considering the configuration of the menu item on Sanity)
This quantity can also change by the combination of the items on the cart
Condition this description to be shown only if our flag is ON, the free toggle is ON and the price is zero (just to be secure about the behavior)
PATHS FOR THE SOLUTION (2 options)
Use the
useFeatureMenuAddOn
to get the information from Sanity and develop the new logic inside thecart-item
(./src/components/cart-item/index.tsx) component (shown above)Create a new context/hook that will be responsible to get this information and share between the components (description in the addon section and on
cart-item
)
DOD-LIKE
Respect all points from the Rules section
The styles should be as Figma
Implement new unit tests
0 Comments