Business problem to be solved

Enable the ability to edit an offer Combo/Picker after adding the item to the cart (for more details about adding a Combo/Picker offer item see the documents above)

Combo example - PoC results

Points of Impact

Checkout page cart item

Here we need to show the edit button

Show the edit item button for Combo/Picker offer items added through promo code field

Cart preview item

Show the edit item button for Combo/Picker offer items added through the promo code field
All items and information need to be correct if the user decides to go back to the home page or menu page

Cart item update flow

When editing the item and go back to the menu page the total value, items and sub-items need to be correct
After updating the item and going back to the checkout page the whole item needs to be correct (sub-items, total price, etc)

Tasks breakdown

Task 1 - Adjust the condition to show the edit button for Combo/Picker offer item at checkout/cart preview

Problems with the legacy code:

Checkout:
- File: src/components/cart-item/index.tsx
- We have a condition !loyaltyOffer that whenever an item is an offer type the edit button will not be shown. Besides this condition for some reason, the isSwap was returning true during the PoC tests
- We need to adjust this whole logic to show the button for our use case
Cart Preview:
- File: src/components/cart-preview/cart-preview-entry-image.tsx
- The condition on the cart preview will always be false because our item is a loyalty offer
- We need to adjust this condition to go through our flow/feature

Solution proposal

Create a new method to validate if the offer is a Combo/Picker
- We can create a new boolean method inside the src/state/order/index.js that will be returned by the useOrderContext and with this value we can then adjust the mentioned condition

const isOfferComboOrPicker = useCallback(
    cartEntry =>
      appliedOffers.some(
        offer =>
          offer.cartId === cartEntry.cartId &&
          (cartEntry.type === 'OfferCombo' || cartEntry.type === 'OfferItem')
      ),
    [appliedOffers]
  );

Checkout
- Reuse the created method mentioned above to improve this condition

const isComboOrPicker = useMemo(() => {
    return Boolean(isOfferComboOrPicker(item)) || (!loyaltyOffer && !isRewardDiscount && !isSwap);
  }, [isOfferComboOrPicker, isRewardDiscount, isSwap, item, loyaltyOffer]);
  
// rest of the code
{isEditCartEnabled && isComboOrPicker && (
  <CartItemButton
    aria-label={`${formatMessage({ id: 'edit' })} ${item.name} `}
    data-testid="edit-button"
    onClick={handleEditItem}
  >
    {formatMessage({ id: 'edit' })}
  </CartItemButton>
)}

Cart Preview:
- Reuse the created method mentioned above to add an OR to this condition

const {isOfferComboOrPicker } = useOrderContext();

  const isComboOrPicker = useMemo(() => {
    return Boolean(isOfferComboOrPicker(item));
  }, [isOfferComboOrPicker, item]);
  
  // rest of the code
  
  {(!isLoyaltyOffer || isComboOrPicker) && <CartPreviewEditButton />}

DOD

Update tests

Task 2 - Adjust the cart item (Combo/Picker offer) url to have the correct path

Adjusts to the implementation to add the items (developed here Tech refinement - Add offer Combo/Picker to the cart )

Before inserting the item for the first time we need to change the url property value to the following combination: menu/type-id (example: menu/combo-dc95c3c7-5b84-4e36-aee0-a0acee02ccda)
We need to use the picker/combo id and type from Sanity incentive item or the query. We can’t use the mainEntry from transformMenuObjectToCartItem because for Picker the id will be changed and this will cause a bug