Skip to content

Commit 008f5bb

Browse files
authored
feat(dashboard): Improve fully refunded order details (medusajs#14077)
## Summary **What** — What changes are introduced in this PR? Improve fully refunded order details in the order list of Admin UI. **Why** — Why are these changes relevant or necessary? Fully refunded orders did not show a value for the `total` column and its `payment_status` color badge expressed a happy path. **How** — How have these changes been implemented? Added the refund amount with line through style for fully refunded orders in the `total` column of order list table and changed the `payment_status` badge color to red **Testing** — How have these changes been tested, or how can the reviewer test the feature? Validated UI looks as expected --- ## Examples Provide examples or code snippets that demonstrate how this feature works, or how it can be used in practice. This helps with documentation and ensures maintainers can quickly understand and verify the change. ```ts // Example usage ``` --- ## Checklist Please ensure the following before requesting a review: - [x] I have added a **changeset** for this PR - Every non-breaking change should be marked as a **patch** - To add a changeset, run `yarn changeset` and follow the prompts - [ ] The changes are covered by relevant **tests** - [x] I have verified the code works as intended locally - [x] I have linked the related issue(s) if applicable --- ## Additional Context Add any additional context, related issues, or references that might help the reviewer understand this PR. --- > [!NOTE] > Show refunded amounts with muted strikethrough in the total column for fully refunded orders and set the refunded payment badge to red, fetching `payment_collections` as needed. > > - **Admin Dashboard — Order List**: > - **Total column**: For `payment_status === "refunded"`, display the sum of `payment_collections.refunded_amount` with `text-ui-fg-muted` and `line-through` via `TotalCell` `className`. > - **Payment status**: Change `refunded` badge color to red. > - **Component**: `TotalCell` now accepts optional `className`. > - **Data**: > - Add `*payment_collections` to `DEFAULT_RELATIONS` for orders. > - **Changeset**: > - Patch release for `@medusajs/dashboard`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 802d243. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>
1 parent 56ed9cf commit 008f5bb

File tree

5 files changed

+28
-8
lines changed

5 files changed

+28
-8
lines changed

.changeset/mighty-jokes-rest.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@medusajs/dashboard": patch
3+
---
4+
5+
feat(dashboard): Improve fully refunded order details

packages/admin/dashboard/src/components/table/table-cells/order/total-cell/total-cell.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import { PlaceholderCell } from "../../common/placeholder-cell"
55
type TotalCellProps = {
66
currencyCode: string
77
total: number | null
8+
className?: string
89
}
910

10-
export const TotalCell = ({ currencyCode, total }: TotalCellProps) => {
11+
export const TotalCell = ({ currencyCode, total, className }: TotalCellProps) => {
1112
if (!total) {
1213
return <PlaceholderCell />
1314
}
1415

1516
return (
16-
<MoneyAmountCell currencyCode={currencyCode} amount={total} align="right" />
17+
<MoneyAmountCell currencyCode={currencyCode} amount={total} className={className} align="right" />
1718
)
1819
}
1920

packages/admin/dashboard/src/hooks/table/columns/use-order-table-columns.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,24 @@ export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
9898
columnHelper.accessor("total", {
9999
header: () => <TotalHeader />,
100100
cell: ({ getValue, row }) => {
101-
const total = getValue()
102-
const currencyCode = row.original.currency_code
103-
104-
return <TotalCell currencyCode={currencyCode} total={total} />
101+
const isFullyRefunded = row.original.payment_status === "refunded"
102+
const total = !isFullyRefunded
103+
? getValue()
104+
: row.original.payment_collections.reduce(
105+
(acc, payCol) => acc + (payCol.refunded_amount ?? 0),
106+
0
107+
)
108+
const currencyCode = row.original.currency_code
109+
110+
return (
111+
<TotalCell
112+
currencyCode={currencyCode}
113+
total={total}
114+
className={
115+
isFullyRefunded ? "text-ui-fg-muted line-through" : ""
116+
}
117+
/>
118+
)
105119
},
106120
}),
107121
columnHelper.display({

packages/admin/dashboard/src/lib/order-helpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const getOrderPaymentStatus = (
2424
],
2525
awaiting: [t("orders.payment.status.awaiting"), "orange"],
2626
captured: [t("orders.payment.status.captured"), "green"],
27-
refunded: [t("orders.payment.status.refunded"), "green"],
27+
refunded: [t("orders.payment.status.refunded"), "red"],
2828
partially_refunded: [
2929
t("orders.payment.status.partiallyRefunded"),
3030
"orange",

packages/admin/dashboard/src/routes/orders/order-list/const.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const DEFAULT_PROPERTIES = [
1111
"currency_code",
1212
]
1313

14-
export const DEFAULT_RELATIONS = ["*customer", "*sales_channel"]
14+
export const DEFAULT_RELATIONS = ["*customer", "*sales_channel", "*payment_collections"]
1515

1616
export const DEFAULT_FIELDS = `${DEFAULT_PROPERTIES.join(
1717
","

0 commit comments

Comments
 (0)