Table of Contents

For context and details:

• Discovery:Promo code at checkout page X config offer type (WIP)

• Tech refinement for the mentioned discovery: Tech refinement - Add offer Combo/Picker to the cart

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)

Points of Impact

Checkout page cart item

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

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

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

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

Solution proposal

• PS: This was not developed/tested during the PoC as we think that we don’t have anything impossible to solve here. Besides that, we are suggesting a path to this

• Create a new isolated method that will be responsible to only mount the desired URL

• This method needs to be used on:

  • Before the upsertCart call, changing the url property on the passed object

  • After we update the Combo/Picker item on the menu and go back to the checkout page

    • Option 1:

      • Get the cartEntries from useOrderContext and iterate and compare with the offers available at the appliedOffersfrom Redux state (useAppSelector(selectors.loyalty.selectAppliedOffers)) if we have an offer there. If yes, update the cart entry (updateCartEntry from useOrderContext) with the correct URL

    • Option 2:

      • Analyze where the URL is created on the code and adjust the code from there (hypothesis)

DOD

• Update tests