Repos that we’ll change

...

• 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: Add a logic on AddOnsItemsContainer to show the free item or 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

• Task 8: Adjust the extras modal quantity limit for the free item

...

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

...

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

...

• 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 on to the cart

• OBS: This will be something dynamic as the user can edit the items or add new items that can affect this

...

• 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

...

• Respect all points from the Rules section

• The styles should be as Figma

• Implement new unit tests

Task 8: Adjust the extras modal quantity limit for the free item

...

Rules:

• The quantity limit should respect the following rule:

  • sum the free quantity limits from Sanity (looking into each menu item because we can have all the items at the same time depending on the case)

  • Respect the maximum limit that is configured on Sanity (the default is 9). Well always need to respect this limit:

    • Even if the sum is equal 10 and the limit is 9 the maximum will be 9

  • If the maximum was reached the “+” button will be disabled

PATH FOR THE SOLUTION

• As the modal is already using the data from Sanity we’ll just need to develop this new logic for the limit

  • Create a new method to handle this

  • If we choose the creation of a new hook/context (task 7) perhaps we can catch this info from there and just use it on the modal when our flag is ON

DOD-LIKE

• Respect all points from the Rules section

• Implement new unit tests