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

Owned by Augusto Romao, Vinicius
Last updated: Jun 29, 2023
6 min read

Repos that we’ll change

RBI Sanity Shared Schemas Intl Sanity Shared Schemas: https://github.com/rbilabs/intl-sanity-shared-schemas/

Whitelabel CMS: https://github.com/rbilabs/intl-whitelabel-cms - Connect your Github account

Figma: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/VNb1dzeeYVV0IphMPJo0lt/Popeyes?type=design&node-id=3189-125398&t=b8GDYgoS6YtWAr0K-0

 

Task summary

RBI Sanity Shared Schemas/Whitelabel CMS:

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

    • Task 2: Extend the Option item to have new fields

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

 

Whitelabel:

  • Task 1: 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. Note: to list add-ons as free, there needs to be a 0.00 PLU item configured respectively to the regular price PLU.

 

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

 

Task 2: Extend the Option item to have new fields

Example of the UI with the free items toggle ON

  • Motivation: we’ll need to configure the addon free configuration for each add-on (paid) selected on the main page of the section

 

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: Free Option

  • Description: The free option needs to be a 0.00 PLU version of the regular price option. If the options listed here are not 0.00 PLU, they will NOT appear as free for the guest.

  • Rules:

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

    • Should be hidden if:

      • !ctxTest.document.enableAddonAsFreeItem

    • Required/invalid if:

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

 

“Menu items to offer the free item”

  • Label: Menu Options that Offer the Free Options Above

  • Description: The option listed above in the “Free option” section will be offered by the ones listed here for the guests that have them in their cart at checkout.

  • Rules:

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

    • Should be hidden if:

      • !ctxTest.document.enableAddonAsFreeItem

    • Required/invalid if:

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

 

Hide the field Maximum amount

  • Motivation: we’ll use the sum of the menu items limit to configure on the Whitelabel UI the desired limits for each item (configured on the new object below)

 

Create the new object (addOnSectionMenuOptions)

  • File name: add-on-section-menu-options.ts

  • Folder: ./src/schemas/menu/objects

  • Put it on the build-shared-schemas: ./src/build-shared-schemas.ts

  • This file will have a structure similar to the add-on-section-option.ts

  • Configure the preview on the object to show the item name and the free quantity info

 

For this object we’ll have:

“Free quantity”

  • Label: Maximum Free Add-On Amount

  • Description: This is the max limit for the Free Add On Item that will be offered by this Menu Option.

  • Rules:

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

    • Required (can’t be empty)

    • initialValue: 1

    • Type: number

 

“Menu item”

  • Label: Menu Option

  • Rules:

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

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

 

DOD-LIKE

  • Add the new fields on the UI

  • Create the new object for the menu item options

  • Follow the rules for each field

    • “Free addon item” should be filled if the free addon toggle is ON

    • “Menu items to offer the free item” should have at least one item if the free addon toggle is ON

  • Hide the maximum amount field

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

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

  • Label: Free Add On Modal

  • Description: When a guest has a Menu Option that offers a Free Add On Item in their cart at checkout, this modal will appear for them to add the Free Add On Item.

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

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

    • Label: Show Free Add-On Modal at Checkout

  • Image field

  • Modal title field

    • Label: Title

  • Modal description field

    • Label: Description

    • Description: Used to provide context to the guest why they‘re seeing the modal and what is the offer.

  • Modal primary button field

    • Label: CTA

    • Description: This is the action to add the Free Add-On item to the order.

  • 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

      • Important: these fields need to be localized ones

 

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

  • Add the new props in the add-on-section.graphql query

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

    • Add the new name for the free addon toggle

  • Create a new fragment for the addOnSectionMenuOptions and update the add-on-section-option.graphql query

    • Path: ./src/queries/sanity/fragments/add-on-section-option.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

  • We are not creating anything 100% new. All the new fields have something similar to the other structures from the add-on. We just need to follow the same pattern

  • To know the correct name and interface that we’ll need on the graphql query we can take a look in what was implemented here:

 

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