Table of Contents

For discovery information check: Improving delivery fee UX

Whitelabel APP

Our main objetive is split these information on the UI:

• The actual fee

• What’s the discount (if exists)

Tasks breakdown

Improve the information about delivery fee information (WIP)

[WIP - Add Figma screen proposed here]

From what I saw all the places that will show a Delivery Fee information will do that in a similar way. Normally isFreeDelivery will be true when delivery fee value is equal to zero

With all the details we need to (WIP - Add Figma proposals here too):

• Adjust the checkout page

  • Changing src/pages/cart/your-cart/totals/delivery-fees.tsx and src/pages/cart/your-cart/totals/taxes-and-fees.tsx as needed (we can also change something in the parent comp if necessary src/pages/cart/your-cart/totals/index.tsx)

• Adjust the receipt details information on the recent orders page

  • Changing the isFreeDeliverycondition block on src/pages/account/account-orders/details-modal/receipt-details/receipt-details.tsx

• Adjust the delivery confirmation page on the order details section

  • Changing the Delivery render function on src/pages/order-confirmation/delivery/delivery-details.tsx

• Note: In some cases backend will return that a product has $0.00 as a fee but will also return the deliveryFeeDiscount as $0.00 showing a strange UI (FREE $0.00). We don’t want to show information regarding a discount that is $0.00 and with that we’ll need to have a logic for the “Delivery fee discount” value:

  • deliveryFee === 0 AND deliveryFeeDiscount === 0? If yes, show the “Delivery fee discount” as the current delivery fee value (meaning that this is 100%/free discount)

DOD-LIKE

• Adjust the UI to show the informations as the Figma proposal

• No need to adjust the unit tests. From what I saw we don’t have tests covering this. Just check if anything will be good (precaution)