Order details show refunded shipping lines in refund summary

[kidinov]

Closes: #6714

Description

Adds more info in the refund lines.

Possible cases:

• Refunded: 1 product
• Refunded: 2 products
• Refunded: 1 product, shipping
• Refunded: 1 product, fees
• Refunded: 1 product, shipping, fees
• Refunded: shipping, fees
• Refunded: fees
• Refunded: shipping

@joe-keenan @joshheald wdyt about this approach?

Testing instructions

Images/gif

[peril-woocommerce]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[peril-woocommerce]

	Warnings
⚠️	PR is not assigned to a milestone.

Generated by 🚫 dangerJS

[joshheald]

@joe-keenan @joshheald wdyt about this approach?

I think Android's font is more forgiving than iOS's!

Removing the word "and" helps too, even though it doesn't seem quite as polished. On iOS, the English text still reaches more than half way across the row with a comma instead of "and", so I'm still worried about truncation for localizations with longer words or in larger dynamic type sizes.

Joe is taking a look at other options too.

Another difference: on iOS we style these lines with colour, to indicate that they can be tapped to show more detail. Has Android never had that?

Perhaps they should have a disclosure indicator instead, but perhaps the reason they don't is that it would take the amounts out of alignment in the tableview.

[wpmobilebot]

You can test the changes on this Pull Request by downloading an installable build, or scanning this QR code:

[joe-keenan]

Another difference: on iOS we style these lines with colour, to indicate that they can be tapped to show more detail. Has Android never had that?

🤯
That’s why they’re pink on iOS? I’ve been looking at this screen so much and I never thought to tap those refund rows. I just thought it was calling out the negative value!

Perhaps they should have a disclosure indicator instead, but perhaps the reason they don't is that it would take the amounts out of alignment in the tableview.

I think an indicator of some sort would be a lot more accessible, but you’re right about it being tricky to find a spot for it. I’ll add it to my list of things to think about.

[kidinov]

@joe-keenan @joshheald

Another difference: on iOS we style these lines with colour, to indicate that they can be tapped to show more detail. Has Android never had that?

yep, on android it's not clickable at all. Just the text

[AnirudhBhat]

❓ What do you think about writing tests that verify multiple products?
Like
"2 products, shipping"
"5 products, fees"
"10 products, shipping, fees"

[kidinov]

Added more tests here - 7677549

[AnirudhBhat]

@kidinov Thank you for working on this! I've tested the changes and it works as expected. The code changes look good as well. I've left a minor comment related to unit tests and it is not blocking at all.

I read in the linked issue that the designs are not finalized for this. I'll not merge this PR as of now. Feel free to merge this if you think that the design part can be taken in a separate PR.

[kidinov]

@joe-keenan @joshheald I'll merge this PR for now (it goes to a feature branch so no changes to production) and add a comment to our P2 with the changes between iOS and Android here so we can decide on what platform extra changes are needed