Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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 type item (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

...