Repos that we’ll change

Whitelabel: https://github.com/rbilabs/intl-whitelabel-app

...

Figma: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/branch/GoVLc4x0gUZD9o6rna5biK/Popeyes?type=design&node-id=2988-77900&t=JyC6GSjXGNlwH92d-0

...

Solution overview

All the solution is based on the AddOn (add extras items) that already exists in the Whitelabel code! To make this work for our case will develop a generic feature that is based on some parts of the “Add extra” feature. We’ll use the useFeatureMenuAddOn and the useCartAddOns to make it easy and reduce the complexity of dealing with the cart orchestration:

• We’ll use the AddOn document from Sanity and add a new toggle and object block (for service modes). This will make our feature generic and independent from the bag solution (take a look at the Sanity task for more details).

• With this suggestion of implementation, we’re getting free all the order flow:

  • Receipt already implemented for extra items:

    

  • The implementation for the added extra item to the “Your cart” section

    

  • A modal to edit the extra item

  • 

    The item added to the cart on the home page

    

• The original “Add extra” feature working (that will give us what was shown above for free):

  Original Add extra feature.mp4

Figma and behavior

Figma was not made following the application consistency. I talked with our designers and we’ll follow the Upsell feature visual and behavior. Example of the Upsell behavior (visual styles and add/remove from the cart):

...

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: Create a new feature flag (enable-add-on-as-cart-item)

  • This flag will condition the exhibition of the new item in the cart.

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

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

  • This item will be used in Upsell and in our new AddOnsItemsContainer

• Task 4: Create the new component for AddOnsItemsContainer

• Task 5: Add the AddOnsItemsContainer to the cart-content

...

Tasks breakdown

RBI Sanity Shared Schemas

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

...

• Add the new toggle and service modes section in the Shared Schemas repo and test locally with the Whitelabel cms

  • We’ll add the toggle in the following file: https://github.com/rbilabs/rbi-sanity-shared-schemas/blob/main/src/schemas/menu/documents/add-on-section.tsx

• Open the PR and make the merge

• After the update of the package Shared Schemas, update the package.json in the Intl-whitelabel-cms repo. Run the cms locally to see if the toggle will be shown in the AddOn Section (without using the yarn link). Open the PR for the Whitelabel cms.

...

Whitelabel

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

...

We’ll refactor the UpsellItem to be a generic cart item component and with this, we’ll be able to use this comp in the Upsell itself and also in our new component.

...

• 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

Task 4: Create the new component for AddOnsItemsContainer

This component will be responsible to render the cart-item and also holding the integration with the hooks that we'll need (the container will also be responsible for the business requirements).

...

• Create the new AddOnItemsContainer

• Use and integrate into the component the useFeatureMenuAddOn and the useCartAddOns hooks

• Adjust the UI of the component to show the items and title as shown above in the “Add to Order” example

• Condition to show the section only if showSectionItemsOnCart is TRUE

• Condition to hide the section item if:

  • Section item was added in cart (cartEntries) and doesn’t have items after adding the last item

• Hide the item after adding it to the cart (your cart). We’ll need to look at the cartEntries prop value

• Condition to show section if service mode from sanity is null/undefined OR the selected service mode is equal to the checked ones from Sanity

• Map the sections that have showSectionItemsOnCart = TRUE and pass the mapped value to the initialSelections in useCartAddOns (we can also use the updateQuantityForItem but I think that this path will be more complex)

  • Extend the handleAddToCart to receive the updatedItem as a param and add a new logic to not add all the initialSelections when we click to add a specific item to the cart

• Implement the unit tests

Task 5: Add the AddOnsItemsContainer to the cart-content

This is an integration task.

...

• Add the new comp in the cart-content.tsx

• Condition the new component based on the feature flag created in Task 1

• Add a new integration test on the cart-content test

• Adjust the CSS GRID to be dynamic based on the sections configured to be shown in the cart as items

  • Adjust the unit test on src/pages/cart/content/tests/content.test.tsx

...

Behavior acceptance

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