Page Comparison

...

Layout position for desktop:

Our UX suggested initially something like this:

...

Your new sections and items will be above the “Add to Order” section. If the “Add to Order” is not enabled our feature will be in her place

...

Task summary

RBI Sanity Shared Schemas/Whitelabel CMS:

...

Task 1: Add a new toggle to show the addOn section as cart items and add service modes selection

...

Motivation: the toggle

• Toggle: this will help us on the FE logic to show in the cart (as cart items) only sections that have this toggle set as TRUE. Besides that, we’ll need to give to the user the power to choose in what service mode they want to show the items. If nothing is selected the section items will be available for all service modes.

• Service modes: for this feature, the client wants to show the bag only for Mobile Ordering types. To make a flexible solution will add this on Sanity and the brand can choose what wanted.

For the field “Show section items in cart”:

• 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 servicesneed mode.to If 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

...

• Only sections with showSectionItemsOnCart = TRUE on Sanity should be shown in the cart

  • This will not remove the item from the original “+ Add extras” feature

• If the feature flag is OFF all the feature features will be OFF

• If the user did not select any service mode on Sanity we’ll show the section and item for all the available service modes. If the user selects one or more service modes on Sanity we’ll only show the feature for that options

  • For the “Bag with Handles” feature we’ll show only for “Mobile Ordering” but as this feature is generic we can just configure this on Sanity

• The item should have the same style as the Upsell feature (title and button styles)

• When we click to add an item the item should be sent to the “Your cart” section with 1x in the quantity and after that should not be shown in the cart as an item as before

  • If we click on the “remove” button on the added item in the “Your cart” section the item should be removed from the “Your cart” section and appear again in the cart section

  • If the section has only one item remaining the entire section should be hidden/removed from the screen

• If the rendered section has only one item the visual should be as described above on task 4. If have more than one item the items should be presented horizontally with a scroll as the upsell feature

• For this new feature, we are using a good part of the “AddOn” feature which means:

  • We don't need to deal with item updates after adding the first time on the cart. Your only objective here is to add the first item successfully)

  • We can’t edit directly the item quantity (doc of AddOn extras feature) (as in the upselll feature) because of the way that the “AddOn” feature works. The items will be considered “extra items” by the application and to be able to edit the item we need to click on the “edit” button and change the quantity in the extra modal

  • All the logic for the “reordering”, “receipt”, “receipt email”, and etc, are already implemented by the “AddOn” feature… we're getting it for free 😃