Page Comparison

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

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: 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

...

As we’ll have the two items on the cart we’ll need to follow some behaviors

Rules:

• Case 1:

  The default from sanity is 1 free item for each configured item but we can have custom values for the quantity itself

• If the user selects one more menu item that offers a free item, the free quantity limit will be multiplied/added and available for the user to choose

• We can’t let the user buy paid items if he has free items available and if the user doesn’t select all the free items we need to remove the paid item and add one more free item for the user

  • This will happen if the user selects all free available items

  • Add one more paid item

  • Increase the main item quantity: now he’ll have more free items available

  • Use case example:

    • 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

• If the user increases the main item and selects all free available items and then goes back and decreases the main item we need to remove the extra free items that he has

• First of all, we’ll need to look at what’s configured on Sanity (the free quantity field)

• …Work in progress…

  • Use case example:

    • 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

PATH FOR THE SOLUTION

• First of all, we’ll need to look at what’s configured on Sanity (the free quantity field)

• Use the following methods from useOrderContext (./src/state/order/index.js) hook:

  • removeAllFromCart: here we’ll pass the array with cart id’s that we want to remove (paid items)

  • updateQuantity: here we’ll pass the cartId (for the updated item) and the quantity of free items after removing the paid item(s) or to remove free extras items (when changing the main item(s))

• Create a new useEffect in AddOnsItemsContainer (./src/pages/cart/addons-item-container/addons-item-container.tsx). We can use the cartEntries on the dependencies array.

  • Create a new method (or methods, feel free on that) in useAddOnsItemContainer (/src/pages/cart/addons-item-container/hook/use-addons-item-container.ts) that we’ll be used inside this useEffect

  • We can pass the cartEntries on these methods (we’ll need this on the further logics)

  • Pass the removeAllFromCart and updateQuantity as config items on the useAddOnsItemContainer and use these methods in the new logic

• Following the rules and business requirements we’ll need to make the logic

• Always remember that we can have one or more sections and one or more free items. The solution needs to be dynamic

DOD-LIKE

• Respect all points from the Rules section

• Implement the unit tests on the hook and on the container component

Task 2: Add the informative description to the free item on the cart

...