[Customer account & order] Change order totals to account for refunds #2179

ludoboludo · 2022-12-16T22:12:19Z

PR Summary:

In our customer pages, the total for orders never reflects refunds. So it creates a poor experience for the merchant's clients seeking confirmation that their order was in fact refunded.

Why are these changes introduced?

Fixes #2154

What approach did you take?

I switched our use of order.total_price to order.total_net_amount. In our docs, you can see the difference with order.total_price.

When I compare now the order from the admin and the customer account page, it reflects properly the information:

Screenshot of the main-account page

Screenshot of the main-order page

Other considerations

Gotta make sure we're not showing totals that are off. But based on the information from the admin it looks right.

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

It will change the totals on customer order pages and account summary.
It also adds a Refunded row when there has been a refund.

Testing steps/scenarios

You can test by creating an account, completing an order (test order), then partially or fully refunding it in the admin.
Then make sure the information reflected on your account page is correct.

Demo links

Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

dan-menard · 2022-12-19T15:25:49Z

sections/main-order.liquid

+                colspan="2"
+                data-label="{{ 'customer.order.total_refunded' | t }}"
+              >
+                {{ order.total_refunded_amount | money_with_currency }}


How certain is the math here? Like are we 100% sure that total_net_amount - total_refunded_amount = total_price?

If you haven't spoken from someone on the Orders team, we should pull someone in for 👀. Refunds can get really edge-case-y.

Ill double check but from what I'm seeing, some theme partners are using order.total_net_amount as well 👍 (Maestrooo)

I was wondering if the math worked well when you partially refund shipping on top of that and it worked well but the only thing is that we don't display the subsequent refunds. Unsure if it's relevant to buyers to be aware if there was multiple attempt to refund partially an order. 🤔

This is my test order #1041 admin

This is the storefront account

I feel like maybe it's added noise, I'm not sure how useful it is to be displaying each refund individually 🤔 Plus if we do that then it means we will also need a total which will add even more info/content to the order.

On the order object, there are the transactions information available but it doesn't contain much info. We can check if a transaction is a refund and output its amount, but again not sure how useful. Here is how it could look:

Screenshot

Here is the information available for transactions:

Screenshot

I think if we could have had more details about what was refunded in that transaction it'd be more useful but right now it doesn't seem to add much. The total refund amount seem enough.

The total refund amount seem enough

Aligned for now! 👍

For the maths and all, might be worth investigating how we communicate/implement these on the email confirmation that is sent. That might be an additional place to validate were good or not. 🙌

eugenekasimov · 2022-12-19T19:39:45Z

Everything looks good to me! 👍

You can test by creating an account, completing an order (test order), then partially or fully refunding it in the admin.
Then make sure the information reflected on your account page is correct.

The only minor thing I could think of was maybe we should confirm it with UX folks?
I mean this: total_refunded: "Refunded".

melissaperreault · 2022-12-20T04:27:07Z

The only minor thing I could think of was maybe we should confirm it with UX folks?
I mean this: total_refunded: "Refunded".

I am good with the term "Refunded" it aligns with how we communicate this information in the admin to merchants. This language is clear and have the same meaning for buyers. 👌

In this case we have both; Partially refunded or Refunded 👍

melissaperreault

Thank you Ludo for putting this together. 🎉

The only observation I have is how we can better communicate the Refunded or Partially refunded amount. Displaying a negative sign in front of the value will help do the math for customers. It would help bring more clarity as they read the table from the right only. It would follow the admin presentation as well.

melissaperreault · 2022-12-20T04:44:02Z

sections/main-order.liquid

+                colspan="2"
+                data-label="{{ 'customer.order.total_refunded' | t }}"
+              >
+                {{ order.total_refunded_amount | money_with_currency }}


I was wondering if the math worked well when you partially refund shipping on top of that and it worked well but the only thing is that we don't display the subsequent refunds. Unsure if it's relevant to buyers to be aware if there was multiple attempt to refund partially an order. 🤔

This is my test order #1041 admin

This is the storefront account

ludoboludo · 2022-12-20T16:19:42Z

sections/main-account.liquid

@@ -80,7 +80,7 @@
                    {{ order.fulfillment_status_label }}
                  </td>
                  <td headers="RowOrder ColumnTotal" role="cell" data-label="{{ 'customer.orders.total' | t }}">
-                    {{ order.total_price | money_with_currency }}
+                    {{ order.total_net_amount | money_with_currency }}


Let me know what you think is best @melissaperreault:

Screenshot

Outside the currency symbol - to validate if this would be different for other languages but it's best like that and aligns with the admin too 🙌 🎉

melissaperreault

I tested a full refund and a partial refund scenario. The placement and the clarity is good to me with the added negative sign in front. It really helps!

I cannot speak if this is the right implementation code to account for translations with the negative sign, but otherwise from Theme design UX layout, this improvement is good! Thanks Ludo! 🚀

eugenekasimov

It's looking good, Ludo!

The current implementation of negative sign looks fine too, I don't see any disadvantage of the way it added.

KaichenWang · 2023-01-27T18:22:43Z

Looks great!

As others have mentioned, it would be nice to follow up and more closely reflect the buyer email layout:

The total remains the total paid (unaffected by refunds)
Support for multiple refund amounts

ludoboludo · 2023-01-27T20:09:02Z

I created a separate branch to explore the changes it would mean to match the email notification a bit more and created a PR with the changes: #2264
I'll have a chat with Meli to see what she think. I'd rather ship once with the right layout than twice 😅

…Shopify#2179)

Change order totals to account for refunds

880832b

dan-menard reviewed Dec 19, 2022

View reviewed changes

eugenekasimov self-requested a review December 19, 2022 18:49

melissaperreault self-requested a review December 19, 2022 20:29

melissaperreault reviewed Dec 20, 2022

View reviewed changes

ludoboludo commented Dec 20, 2022

View reviewed changes

add minus in front of refund amount

5bc93f9

melissaperreault previously approved these changes Dec 20, 2022

View reviewed changes

eugenekasimov previously approved these changes Dec 20, 2022

View reviewed changes

Update 21 translation files

8d7706e

translation-platform bot dismissed stale reviews from eugenekasimov and melissaperreault via 8d7706e December 22, 2022 11:01

Update 9 translation files

a3cceda

eugenekasimov self-requested a review December 22, 2022 17:05

eugenekasimov approved these changes Dec 22, 2022

View reviewed changes

melissaperreault approved these changes Dec 24, 2022

View reviewed changes

ludoboludo self-assigned this Jan 9, 2023

KaichenWang approved these changes Jan 27, 2023

View reviewed changes

ludoboludo merged commit 53547c5 into main Jan 30, 2023

ludoboludo deleted the customer-order-refund-fix branch January 30, 2023 15:00

phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024

[Customer account & order] Change order totals to account for refunds (…

8544049

…Shopify#2179)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Customer account & order] Change order totals to account for refunds #2179

[Customer account & order] Change order totals to account for refunds #2179

ludoboludo commented Dec 16, 2022 •

edited by eugenekasimov

Loading

dan-menard Dec 19, 2022

ludoboludo Dec 19, 2022 •

edited

Loading

melissaperreault Dec 20, 2022

ludoboludo Dec 20, 2022

melissaperreault Dec 20, 2022 •

edited

Loading

melissaperreault Dec 20, 2022

eugenekasimov commented Dec 19, 2022 •

edited

Loading

melissaperreault commented Dec 20, 2022

melissaperreault left a comment •

edited

Loading

melissaperreault Dec 20, 2022

ludoboludo Dec 20, 2022 •

edited

Loading

melissaperreault Dec 20, 2022 •

edited

Loading

melissaperreault left a comment

eugenekasimov left a comment

KaichenWang commented Jan 27, 2023

ludoboludo commented Jan 27, 2023 •

edited

Loading

[Customer account & order] Change order totals to account for refunds #2179

[Customer account & order] Change order totals to account for refunds #2179

Conversation

ludoboludo commented Dec 16, 2022 • edited by eugenekasimov Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Other considerations

Decision log

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

dan-menard Dec 19, 2022

Choose a reason for hiding this comment

ludoboludo Dec 19, 2022 • edited Loading

Choose a reason for hiding this comment

melissaperreault Dec 20, 2022

Choose a reason for hiding this comment

ludoboludo Dec 20, 2022

Choose a reason for hiding this comment

melissaperreault Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

melissaperreault Dec 20, 2022

Choose a reason for hiding this comment

eugenekasimov commented Dec 19, 2022 • edited Loading

melissaperreault commented Dec 20, 2022

melissaperreault left a comment • edited Loading

Choose a reason for hiding this comment

melissaperreault Dec 20, 2022

Choose a reason for hiding this comment

ludoboludo Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

melissaperreault Dec 20, 2022 • edited Loading

Choose a reason for hiding this comment

melissaperreault left a comment

Choose a reason for hiding this comment

eugenekasimov left a comment

Choose a reason for hiding this comment

KaichenWang commented Jan 27, 2023

ludoboludo commented Jan 27, 2023 • edited Loading

ludoboludo commented Dec 16, 2022 •

edited by eugenekasimov

Loading

ludoboludo Dec 19, 2022 •

edited

Loading

melissaperreault Dec 20, 2022 •

edited

Loading

eugenekasimov commented Dec 19, 2022 •

edited

Loading

melissaperreault left a comment •

edited

Loading

ludoboludo Dec 20, 2022 •

edited

Loading

melissaperreault Dec 20, 2022 •

edited

Loading

ludoboludo commented Jan 27, 2023 •

edited

Loading