Strikethrough

...

{
"0":{
"app":{
"discount":400,
"serviceFeeDiscount":300,
"fee":400,
"serviceFee":300
} → fee (400) - discount (400) = 0, so I go to lowest tier and read how the fee was supposed to be (400)
},
"10":{
"app":{
"discount":300,
"serviceFeeDiscount":200,
"fee":300,
"serviceFee":200
} → fee (300) - discount (300) = 0, so I go to lowest tier and read how the fee was supposed to be (400)
},
"20":{
"app":{
"discount":200,
"serviceFeeDiscount":100,
"fee":200,
"serviceFee":100
}→ fee (200) - discount (200) = 0, so I go to lowest tier and read how the fee was supposed to be (400)
}
}

...

{
"0":{
"app":{
"discount":0,
"serviceFeeDiscount":0,
"fee":400,
"serviceFee":300
} → fee (400) - discount (0) = 400, so I don’t show FREE and strikethrough
},
"10":{
"app":{
"discount":0,
"serviceFeeDiscount":0,
"fee":300,
"serviceFee":200
} → fee (300) - discount (0) = 300, so I don’t show FREE and strikethrough
},
"20":{
"app":{
"discount":200,
"serviceFeeDiscount":100,
"fee":200,
"serviceFee":100
}→ fee (200) - discount (200) = 0, so I go to lowest tier and read how the fee was supposed to be (400)
}
}

When it doesn’t have promotion (discount and serviceDiscount), we check if the fee for the cart current tier results in zero. If yes, it means that it’s FREE. So we show in the strikethrough the value of the fee from the LOWEST tier.

Solution

To achieve the goal, will be necessary calculate the value (fee - discountFee) to show the correct value (the old code make a calculus for the delivery fee, but no for the service fee).

The value will show always will be the highest value fee possible (even the lowest fee/high value already have a discount in modal).