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

...

Repos that we’ll change

Whitelabel: https://github.com/rbilabs/intl-whitelabel-cmsapp

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

...

• 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: Update types and graphql after changes in the CMS repo

• Task 3: Create a new component to show the add-on free modal

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

• Task 5: Deal with Add a logic on AddOnsItemsContainer to show the free quantity item price on the extra modal and cart total priceor the paid item

• Task 6: Add a logic to deal with the quantity of free items and paid items on the cart

• Task 7: Add the informative description to the free item on the cart

...

Tasks breakdown

RBI Sanity Shared Schemas

...

We’ll have two new fields: “Free addon item” and “Menu items to offer the free item” on the add-on-section-option.ts:

“Free addon Item”

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • Type reference to type item (as the “Option” that we already have on the screen)

  • Should be hidden if:

    • !ctx.isIntl AND !ctxTest.document.enableAddonAsFreeItem

  • Required/invalid if:

    • context?.document?.enableAddonAsFreeItem && !value (validation prop with custom rule)

...

“Menu items to offer the free item”

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • Type array to type addOnSectionMenuOptions (suggestion of name… we’ll create the new object that will be used here)

  • Should be hidden if:

    • !ctx.isIntl AND !ctxTest.document.enableAddonAsFreeItem

  • Required/invalid if:

    • context?.document?.enableAddonAsFreeItem && !value (validation prop with custom rule)

...

For this object we’ll have:

“Free quantity”

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • validation: (Rule: any) => Rule.min(1)

  • initialValue: 1

  • Type: number

“Menu item”

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • Type reference to type item (as the “Option” that we already have on the screen)

  • validation: (Rule: any) => Rule.required()

...

• Motivation: configure the add-ons free modal. The fieldset will help the organization, by grouping the fields

• Label: (to be defined)

• Description: (to be defined)

• Rules:

  • The fieldset should not be collapsed when appears (DOC)

  • All fields should be children of the fieldset

  • The fieldset should only be visible if the toggle for add-on free items is ON

...

• Modal toggle (to show/hide on the Whitelabel App):

  • Label: (to be defined)

  • Description: (to be defined)

• Modal title field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal description field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal primary button field

  • Label: (to be defined)

  • Description: (to be defined)

• Rules:

  • If the toggle is ON

    • The title and primary button should be filled in and are required. This is needed to prevent the user from publishing the document and to not show an empty modal on the Whitelabel App

    • Description and image fields are optional

...

• After adding the new interfaces open the AddOnsItemsContainer component and add a console log to see if the values from Sanity will be available in the sections. Do some tests (changing the values on Sanity) to see if all is good

Task 3: Create a new component to show the add-on free modal (PENDING)

Create a new sub-component that will be used on the add-on free promotion info

...

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

• This change new feature will be made inside the AddOnsItemsContainerfeature 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 5: 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 we have added on 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

Task 6: 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 7: 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 the cart-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 the unit tests

• Validate in web and native

Task 5: Deal with the free quantity item price on the extra modal and cart total price

...

• new unit tests