Page Comparison

Repos that we’ll change

...

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

...

• The initial value for this toggle: FALSE

• This toggle should only be visible to Intl market hidden: () => !ctx.isIntl

Task 2:

...

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

...

Extend the Option item to have new fields

...

• 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: (to be defined)

• Description: (to be defined)

• Rules:

  • Type reference to type item (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 type addOnSectionMenuOptions (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)

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: (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)

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

• 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 options fields on the UICondition

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

object for the menu item options

• Follow the rules for each field

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

...

• 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

...