Table of contents

Definition

❓ Open questions

Requirements

Problem statement

Acceptance criteria

Success metrics

🤔 Assumptions

Solution

Scenarios

General (independent of the Scenario/solution)

Position for the new Bag section with the button:

• Desktop: Bag on top of "Add to Order"

• Mobile: below total info

OBS: to make this work we’ll need to adjust the javascript logic that generates the positions for the template grid CSS (I’ll give more details in the tech refinement).

Scenario 1: Use the useCartAddOns method and all the addOn extras feature that already exists in the application (validating)

Add extras feature: /wiki/spaces/FE/pages/3497590902

• Create a new section above the “Add to Order” as in Figma

• Create a new specific component to deal with the bag item in the cart

• Create a hook to get data from Sanity and perhaps hold the logic to consume the other hooks that we need for the addOn extras (update the quantity in the cart, etc)

• Adjust the CSS grid logic to deal with these new items on the screen

Advantages

• The feature is complete and will deal with all the cart, reordering, receipts, and so on for us in a free way. (prevent bugs or missing things in the flow)

• The development will be faster as the method is already generic to receive more than one section

Disadvantages

• Only the edit part will be different from what we have on Figma (editing through the Extras modal and etc)

Sanity

The Sanity part is already made for the proposed Solution

This is the vision of the created Add On Section for the bag example. We can click on the “+ Add item” and find the bag in the list (after register the item in MDS)

Important points:

• When we added your item through the useCartAddOns we cant edit the extra item quantity directly (more info about this on the Extras documentation). For this, we’ll need to click on the “edit” button to edit the quantity through the Extras modal.

Questions

• Extras items limit can be affected when the bag is added?

  • R: No. The AddOn feature has the ability to create exclusive sections that have your own limit for the items that will hold on.

    Extras sections.mp4

• Can we think of something more generic? To not be looking at a specific item from Sanity

  • R:

Scenario 2: Transform the Upsell component into something generic to be reusable

Today we have an Upsell feature which is a section to add extra items to the Order.

The idea here is:

• Transform this specific component to be something generic and with this, the component can be used in the specific Upsell section in Sanity (as is today) but will also be possible to use this component for other desired sections (today this component is not generic)

• Create a new document/section in Sanity for the bag

• Implement the new UI in the Whitelabel (as proposed in Figma) where the new generic Upsell will be used with the data from the bag section

Advantages

• The edit is free and we can have the “-” and “+” to control the item inside the “Your cart section”

• If the component is generic we’ll be using the original idea but in an adapted way. Perhaps this will not cause many bugs and the generic new Upsel will work as the original (inheriting your bugs and features)

Disadvantages

• The complexity to understand how the component works and transform all the mechanics and sub-components into something generic that will need to accept any section from Sanity.

Questions

• Today from what I saw until now if we click on the “edit” when using the Upsell feature this will send us to the menu item page. Do we’ll have a page for the bag item? (with info and etc.)

  • R:

Design

Figma design here: [insert link]

Development

Release