From 2a6c6fe5903a41e1f7231e92c8a88c6714684dd2 Mon Sep 17 00:00:00 2001 From: Riqwan Thamir Date: Thu, 29 Aug 2024 16:04:00 +0200 Subject: [PATCH] feat(dashboard,types): split damaged activity from received (#8859) what: - split damaged activity from received - adds a popover to view return details Screenshot 2024-08-28 at 23 23 10 RESOLVES CC-363 --- .../dashboard/src/i18n/translations/en.json | 8 +- .../order-activity-section/activity-items.tsx | 3 +- .../order-summary-section.tsx | 186 +++++++++++++----- .../return-info-popover.tsx | 85 ++++++++ packages/core/types/src/http/return/common.ts | 1 + 5 files changed, 236 insertions(+), 47 deletions(-) create mode 100644 packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/return-info-popover.tsx diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json index b2f4ddf713..cd5e23e8c1 100644 --- a/packages/admin-next/dashboard/src/i18n/translations/en.json +++ b/packages/admin-next/dashboard/src/i18n/translations/en.json @@ -924,8 +924,12 @@ "inboundShippingHint": "Choose which method you want to use.", "returnableQuantityLabel": "Returnable quantity", "refundableAmountLabel": "Refundable amount", - "returnRequestedInfo": "{{requestedItemsCount}}x item return requested", - "returnReceivedInfo": "{{requestedItemsCount}}x item return received", + "returnRequestedInfo": "{{requestedItemsCount}}x items return requested", + "returnReceivedInfo": "{{requestedItemsCount}}x items return received", + "itemReceived": "Items received", + "returnRequested": "Return requested", + "damagedItemReceived": "Damaged items received", + "damagedItemsReturned": "{{quantity}}x damaged items returned", "activeChangeError": "There is an active order change in progress on this order. Please finish or discard the change first.", "cancel": { "title": "Cancel Return", diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx index 857813e1ce..10d159b403 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-activity-section/activity-items.tsx @@ -44,6 +44,7 @@ function ActivityItems(props: ActivityItemsProps) { onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} autoFocus={false} + className="focus-visible:outline-none" > {title} @@ -53,7 +54,7 @@ function ActivityItems(props: ActivityItemsProps) {
{!!itemsToSend?.length && ( diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx index 61f6e1b907..cfebe166e8 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx @@ -52,6 +52,7 @@ import { import { getTotalCaptured } from "../../../../../lib/payment" import { getReturnableQuantity } from "../../../../../lib/rma" import { CopyPaymentLink } from "../copy-payment-link/copy-payment-link" +import ReturnInfoPopover from "./return-info-popover" type OrderSummarySectionProps = { order: AdminOrder @@ -565,6 +566,61 @@ const CostBreakdown = ({ order }: { order: AdminOrder }) => { ) } +const ReturnBreakdownWithDamages = ({ + orderReturn, + itemId, +}: { + orderReturn: AdminReturn + itemId: string +}) => { + const { t } = useTranslation() + + const item = orderReturn?.items?.find((ri) => ri.item_id === itemId) + const damagedQuantity = item?.damaged_quantity || 0 + + return ( + item && ( +
+
+ + + {t(`orders.returns.damagedItemsReturned`, { + quantity: damagedQuantity, + })} + + + {item?.note && ( + + + + )} + + {item?.reason && ( + + {item?.reason?.label} + + )} +
+ + + {t(`orders.returns.damagedItemReceived`)} + + + + + +
+ ) + ) +} + const ReturnBreakdown = ({ orderReturn, itemId, @@ -585,52 +641,72 @@ const ReturnBreakdown = ({ const isRequested = orderReturn.status === "requested" const item = orderReturn?.items?.find((ri) => ri.item_id === itemId) + const damagedQuantity = item?.damaged_quantity || 0 return ( item && ( -
-
- - - {t( - `orders.returns.${ - isRequested ? "returnRequestedInfo" : "returnReceivedInfo" - }`, - { - requestedItemsCount: - item?.[isRequested ? "quantity" : "received_quantity"], - } - )} - + <> + {damagedQuantity > 0 && ( + + )} +
+
+ + + {t( + `orders.returns.${ + isRequested ? "returnRequestedInfo" : "returnReceivedInfo" + }`, + { + requestedItemsCount: + item?.[isRequested ? "quantity" : "received_quantity"], + } + )} + - {item?.note && ( - - - + {item?.note && ( + + + + )} + + {item?.reason && ( + + {item?.reason?.label} + + )} +
+ + {orderReturn && isRequested && ( + + {getRelativeDate(orderReturn.created_at)} + + + + )} - {item?.reason && ( - - {item?.reason?.label} - + {orderReturn && !isRequested && ( + + {t(`orders.returns.itemReceived`)} + + + + + )}
- - {orderReturn && ( - - {getRelativeDate( - isRequested ? orderReturn.created_at : orderReturn.received_at - )} - - )} -
+ ) ) } @@ -657,7 +733,7 @@ const ClaimBreakdown = ({
- + {t(`orders.claims.outboundItemAdded`, { itemsCount: items.reduce( (acc, item) => (acc = acc + item.quantity), @@ -696,7 +772,7 @@ const ExchangeBreakdown = ({ >
- + {t(`orders.exchanges.outboundItemAdded`, { itemsCount: items.reduce( (acc, item) => (acc = acc + item.quantity), @@ -720,19 +796,39 @@ const Total = ({ order }: { order: AdminOrder }) => { return (
- + {t("fields.total")} - + {getStylizedAmount(order.total, order.currency_code)}
- + {t("fields.paidTotal")} - + {getStylizedAmount( getTotalCaptured(order.payment_collections || []), order.currency_code @@ -745,6 +841,7 @@ const Total = ({ order }: { order: AdminOrder }) => { className="text-ui-fg-subtle text-semibold" size="small" leading="compact" + weight="plus" > {t("orders.returns.outstandingAmount")} @@ -752,6 +849,7 @@ const Total = ({ order }: { order: AdminOrder }) => { className="text-ui-fg-subtle text-bold" size="small" leading="compact" + weight="plus" > {getStylizedAmount( order.summary.pending_difference || 0, diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/return-info-popover.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/return-info-popover.tsx new file mode 100644 index 0000000000..c73b4107bb --- /dev/null +++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/return-info-popover.tsx @@ -0,0 +1,85 @@ +import { InformationCircleSolid } from "@medusajs/icons" +import { AdminReturn } from "@medusajs/types" +import { Badge, Popover, Text } from "@medusajs/ui" +import { useState } from "react" +import { useTranslation } from "react-i18next" +import { formatDate } from "../../../../../components/common/date" + +type ReturnInfoPopoverProps = { + orderReturn: AdminReturn +} + +function ReturnInfoPopover({ orderReturn }: ReturnInfoPopoverProps) { + const { t } = useTranslation() + const [open, setOpen] = useState(false) + + const handleMouseEnter = () => { + setOpen(true) + } + + const handleMouseLeave = () => { + setOpen(false) + } + + let returnType = "Return" + let returnTypeId = orderReturn.id + + if (orderReturn.claim_id) { + returnType = "Claim" + returnTypeId = orderReturn.claim_id + } + + if (orderReturn.exchange_id) { + returnType = "Exchange" + returnTypeId = orderReturn.exchange_id + } + + if (typeof orderReturn !== "object") { + return + } + + return ( + + + + + + +
+ + {returnType}: #{returnTypeId.slice(-7)} + + + + + {t(`orders.returns.returnRequested`)} + + {" · "} + {formatDate(orderReturn.requested_at)} + + + + + {t(`orders.returns.itemReceived`)} + + {" · "} + {orderReturn.received_at + ? formatDate(orderReturn.received_at) + : "-"} + +
+ + + ) +} + +export default ReturnInfoPopover diff --git a/packages/core/types/src/http/return/common.ts b/packages/core/types/src/http/return/common.ts index 1745d2c2e5..5703b3acbb 100644 --- a/packages/core/types/src/http/return/common.ts +++ b/packages/core/types/src/http/return/common.ts @@ -2,6 +2,7 @@ export interface BaseReturnItem { id: string quantity: number received_quantity: number + damaged_quantity: number reason_id?: string note?: string item_id: string