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

RBI Sanity Shared Schemas/Whitelabel CMS:

• Task 1: Add a new toggle to enable the “free items” on AddOnSection

  • Task 2: Add a new options section but for the selection of the items that will have free add-on items

  • Task 3: Create a new section (fieldset) for the free-addon modal

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

Tasks breakdown

RBI Sanity Shared Schemas

Order in UI

• New toggle

• New items selection section

• New fieldset with the fields:

  • Modal image field

  • Modal title

  • Modal description

  • Modal text button

Task 1: Add a new toggle to enable the “free items” on AddOnSection

• Motivation: this toggle will enable the new feature integration for “free/promotional items” on the cart

• Label: Make options in this section as free add-ons

• Description: By turning this on, guests will be able to add the options in the list of add-ons for free to their order. You can choose which items in the order are eligible to grant free add-ons and also how many add-on units will be free of charge per item.

• Rules:

  • Toggle should only be visible by Intl market: hidden: () => !ctx.isIntl

PATH FOR THE SOLUTION

• Add the new toggle on /src/schemas/menu/documents/add-on-section.tsx

DOD-LIKE

• The initial value for this toggle: FALSE

• This toggle should only be visible to Intl market hidden: () => !ctx.isIntl

Task 2: Add a new options section but for the selection of the items that will have free add-on items

• Motivation: this will help to know what items will be accepting promotional items. This new section will be like the “options” that we have above

• Label: Menu items that will grant free add-ons

• Description: The menu items selected here will grant the items selected in the “Options” section above as free add-ons

The modal for this section will be like the modal for the original options section but will not have the “Maximum Amount” field. Instead of this, we’ll have a new field

• Motivation: the client wants to control freely the number of items. This will solve other business problems.

• Label: Quantity of free add-ons

• Description: (to be defined)

PATH FOR THE SOLUTION

• As we’ll have other options we’ll have something equal to the original options (with different names)

• The original option is referenced in the document using the schema for the options. We’ll need to do the same thing here

  

  • We’ll create our new fragment/object in the src/schemas/menu/objects

DOD-LIKE

• Add the new options on the UI

• Condition the new options to be visible only if the new toggle is TRUE.

• The modal for “+ Add item” should have:

  • Quantity of free items field

  • Item dropdown

Task 3: Create a new section (fieldset) for the free-addon modal

• Motivation: configure the add-ons free modal. The fieldset will help with the organization to group 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 is TRUE

We also will have the following fields inside this fieldset:

• Image field

  

• Modal title field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal description field

  • Label: (to be defined)

  • Description: (to be defined)

• Modal button field

  • Label: (to be defined)

  • Description: (to be defined)

PATH FOR THE SOLUTION

• For the fieldset, we have the Hero example on the Intl CMS repo and the doc from Sanity above

• For the image, we can take a look at the item document from the CMS or other documents that have an image field and make the same

DOD-LIKE

• All the fields should be children of the modal fieldset

• The fieldset should not be collapsed when appears

• Condition the new fieldset to be visible only if the new toggle is TRUE

Whitelabel

Task 2: Update types and graphql after changes in the CMS repo

• Add the new interfaces in the add-on-section.graphql

  

  • Path: src/queries/sanity/fragments/add-on-section.graphql

  • yarn run apollo:generate

  • Clear the generated file just with the needed changes

• Update the Interface for the use-feature-menu-add-on.tsx

  • Path: src/hooks/use-feature-menu-add-on.tsx

  • Some unit tests will break and we’ll need to adjust them

PATH FOR THE SOLUTION

• As we’ll have other options we’ll have something equal to the original options (with different names). For the new toggle, we’ll have another flag as the “showSectionItemsOnCart”.

  • Create another Fragment for the new option following the example of the original options

DOD-LIKE

• 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