Repos that we’ll change
...
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: (to be defined)
Description: (to be defined)
Rules:
Type
reference
to typeitem
(as the “Option” that we already have on the screen)Should be hidden if:
!ctx.isIntl
AND!ctxTest.document.enableAddonAsFreeItem
Required/invalid if:
context?.document?.enableAddonAsFreeItem && !value
(validation prop with custom rule)
...
“Menu items to offer the free item”
Label: (to be defined)
Description: (to be defined)
Rules:
Type
array
to typeaddOnSectionMenuOptions
(suggestion of name… we’ll create the new object that will be used here)Should be hidden if:
!ctx.isIntl
AND!ctxTest.document.enableAddonAsFreeItem
Required/invalid if:
context?.document?.enableAddonAsFreeItem && !value
(validation prop with custom rule)
...
For this object we’ll have:
“Free quantity”
Label: (to be defined)
Description: (to be defined)
Rules:
validation: (Rule: any) => Rule.min(1)
initialValue: 1
Type: number
“Menu item”
Label: (to be defined)
Description: (to be defined)
Rules:
Type
reference
to typeitem
(as the “Option” that we already have on the screen)validation: (Rule: any) => Rule.required()
...
Motivation: configure the add-ons free modal. The fieldset will help with the organization to group , by grouping 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
...
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
...
Create a new sub-component that will be used on the add-on free promotion info
...
Rules:
As we can have multiple sections on Sanity we’ll have to present the modal content with a “pagination” system
We can use the
nuka-carousel
lib (we already have this on the application)We can use simple buttons with arrows on the sides of the modal
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
...
Respect all points from the Rules section
Create the new component folder and necessary files
Implement unit tests
The colors for the background, buttons, and texts should follow the brand theme
Validate the layout on: Web and native devices
...