Page Comparison

...

• Base interface:

  Code Block
  language typescript
  { title: 'Show section items in cart', description: 'All the items from this section will be available directly in the cart. The section name will be the header title', name: 'showSectionItemsOnCart', type: 'boolean', initialValue: false, hidden: () => ctx.isUS validation: ... }

• The hidden key will be important to not show the toggle for the US market

• Use the validation field and add logic to show an error in Sanity if this the toggle is false but has some service mode selectedON but the user doesn’t select any mode (we changed what I showed in the video above to improve the UX)

For the “Service Modes” toggles:

...

{
  title: 'Service Modes',
  description:
    'If the the toggle "show section items in cart" is ON you need to select at least one service mode.',
  name: 'sectionItemsServiceModes',
  type: 'object',
  fields: [
    {
      title: 'Pick Up',
      name: 'pickUpServiceMode',
      type: 'boolean',
    },
    ... and so on
  ],
  validation: ...,
  hidden: hideIfNoShowSectionItemsOnCart,
}

...

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

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

  Code Block
  language graphql
  fragment AddOnSectionFragment on AddOnSection { ... showSectionItemsOnCart sectionItemsServiceModes { pickUpServiceMode driveThruServiceMode curbsideServiceMode dineInServiceMode tableServiceMode } }

  • 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

    Code Block
    language typescript
    export interface IAddOnSection { ..., showSectionItemsOnCart: boolean,; sectionItemsServiceModes: { pickUpServiceMode: boolean,; driveThruServiceMode: boolean,; curbsideServiceMode: boolean,; dineInServiceMode: boolean,; tableServiceMode: boolean,; } }

• Some unit tests will break and we’ll need to adjust them

...