NOTE: as the design is not finished yet and we have some doubts about the delivery fee behavior this is a work-in-progress document and isn’t finished yet.

Table of Contents

For discovery information check: Improving delivery fee UX

Open

Regular fee example

Open

Fee with discount example - The problem that we want to solve

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 have deliveryFeeDiscount? If yes, show the “Delivery fee discount” as the current delivery fee value (meaning that this is 100%/free discount) ->>>> This is not making sense right now… back-end isn't consistent about this return. Update the discovery and open a thread on Slack to understand this better

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)