Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 11 Next »

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

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

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

We also will have the following fields inside this fieldset:

  • Image field

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

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

Task 3: 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

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.

DOD-LIKE

  • Respect all points from the Rules section

  • Implement unit tests

  • Validate the layout on: Web and native devices

  • No labels