Page Comparison

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

...

Task 2: Update types and graphql after changes in the CMS repo

• Add the new interfaces props in the add-on-section.graphql query

  • Path: src/queries/sanity/fragments/add-on-section.graphql

  Image Removed

  • Add the new name for the free addon toggle

• Create a new fragment for the addOnSectionMenuOptions and update the add-on-section-option.graphql query

  • Path: ./src/queries/sanity/fragments/add-on-section-option.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

  We are not creating anything 100% new. All the new fields have something similar to the other structures from the add-on. We just need to follow the same pattern

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

...