...

Repos that we’ll change

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

...

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.

Because of problems to deal with quantity free X quantity paid on a single cart item we choose to have two items (free item and paid item) on the cart.

...

Task summary

Path for solution in objectives. The breakdown is broken in separate US (other confluence pages, children of this page)

RBI Sanity Shared Schemas/Whitelabel CMS:

• [RBI Sanity Shared Schemas] Extend AddOn section to handle with free items

  • 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 Extend the Option item to have new fields

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

 Whitelabel:Whitelabel:

• [Whitelabel] Handle with free and paid item on checkout page (cart)

  • 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

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)

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

  Image Removed

...

• 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)

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

  Image Removed

  • 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

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

  • Task 3: Add a logic on AddOnsItemsContainer to show the free item or the paid item

• [Whitelabel] Handle with free and paid item on cart (Your cart section)

  • 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

• [Whitelabel] Handle with quantity limit on the extras modal

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

• [Whitelabel] Add free extras modal on checkout page (cart)

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

  • Task 2: Add carousel logic in modal content