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
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
Task 4: Add a description on the AddOnsItemsContainer section for the addon-free items
Task 5: Deal with the free quantity item price on the extra modal and cart total price
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)
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
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
If we have on the
cartEntries
at least one menu item configured for the addon extra item that was added to the cart on the first load
If the user clicks on the primary button we’ll add all the items that come from Sanity into the cart
We can have some combinations here:
If we configure on Sanity to have the free item for two menu items and we add the two menu items to the cart we’ll offer to the user 2 free items (1 free item default per menu item)
If we configure on Sanity the menu items and fill the “quantity free” field this will be an override and we’ll need to offer the sum of the quantities
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
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:
`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
Respect all points from the Rules section
The styles should be as Figma
Implement the unit tests
Validate in web and native
Task 5: Deal with the free quantity item price on the extra modal and cart total price
… WORK IN PROGRESS … DISCOVERING
Add Comment