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 nothingthe isthe selectedtoggle the"show section items willin becart" availableis forON allyou services mode. Ifneed to select oneat orleast moreone options then the items will be shown just for these optionsservice mode.',
  name: 'sectionItemsServiceModes',
  type: 'object',
  fields: [
    {
      title: 'Pick Up',
      name: 'pickUpServiceMode',
      type: 'boolean',
    },
    ... and so on
  ],
  validation: ...,
  hidden: hideIfNoShowSectionItemsOnCart,
}

...

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

• Update the package.json with the new version for the Intl-whitelabel-cms

• 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

Task 3: Refactor UpsellItem comp to be a generic item for the cart

...

• Change the upsell-item.tsx em rename all the references of the word "upsell" to be "cart"... Ex: cart-item.tsx (instead of upsell-item.tsx)

• Move necessary styles to the new folder cart-item

  Adjust the interface of the comp in a way that the param for the item is optional now

• Remember: to adjust the logic that executes the addToCard to pass the item only if received

Motivation: This is necessary because for our new component, we’ll not need to pass the item but we need to maintain this for the upsell logic.

• Remember to adjust the data-testid that already exists and the unit tests

• Adjust the upsell.stories to use the new cart-item there

• Good to have: remove the use of React.FC from there and type in the right way

...