...

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

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

• Task 4: Add

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

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

  Image Removed

  • 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 for add-on free items is ON

We also will have the following fields inside this fieldset:

• Image field

  Image Removed

...

• 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

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

  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

...

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

• Respect all points from the Rules section

• The styles should be as Figma

• Implement the unit tests

• Validate in web and native

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

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

...

• Rules:

  • The text for the title, description, and primary button (the orange one) will come from Sanity

  • The text for the secondary button will be fixed on the “Not Now” label. We’ll add this to the main en.json file and run the lokalize after that

  • If the image is not configured on Sanity the empty space should not be there

  • The modal should only be shown

    • If the respective toggle from Sanity is ON

    • If we have on the cartEntries at least one menu item configured for the addon extra item that was added to the cart

  • If the user clicks on the primary button we’ll add all the items that come from Sanity into the cart

PATH FOR THE SOLUTION

• He has multiple examples of modals in the application (agreements modal, etc). I don’t see any component that will help us. The Dialog from ctg-components-library did not accept content from what I saw.

• For the architecture suggestion:

  • The idea is to have a new components folder for this new comp that will be responsible to deal with the modal

...

• Suggested props/interface for the new component

  Code Block
  language typescript
  interface IAddOnsFreeModal { cartEntries: ICartEntry[]; // this is necessary to know if we'll show the modal based in whats in the cart entries addOnSections: IAddOnSection[]; // another option is to receive the addon free from the parent directly addToCart: (items: IBaseItem) => void; }

• I think that the modal should be responsible for our internal state to know if will be shown or not and if we click on the addToCart we’ll run the handleAddToCart from the parent component

DOD-LIKE

• Respect all points from the Rules section

• Create the new component folder and necessary files

• Implement unit tests

• Validate the layout on: Web and native devices

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

...

Rules:

• If the add-on free toggle is ON we’ll show the description in the section

PATH FOR THE SOLUTION

• This text will be fixed on the code but concatenated with the dynamic info. Example:

  • Code Block
    language typescript
    `You can add up to ${quantityFromSanity} extra ${item.name} for your order. Additional ${item.name} will cost ${item.price}`

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

• This change new feature will be made inside the AddOnsItemsContainer

DOD-LIKE

• • Task 2: Add carousel logic in modal content