feat(dashboard,types): split damaged activity from received

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",

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"
       >
         <Text size="small" leading="compact" weight="plus">
           {title}
@@ -53,7 +54,7 @@ function ActivityItems(props: ActivityItemsProps) {
       <Popover.Content
         align="center"
         side="top"
-        className="bg-ui-bg-component p-0 max-w-[200px]"
+        className="bg-ui-bg-component p-0 max-w-[200px] focus-visible:outline-none"
       >
         <div className="flex flex-col">
           {!!itemsToSend?.length && (

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,26 +566,17 @@ const CostBreakdown = ({ order }: { order: AdminOrder }) => {
   )
 }
 
-const ReturnBreakdown = ({
+const ReturnBreakdownWithDamages = ({
   orderReturn,
   itemId,
 }: {
   orderReturn: AdminReturn
   itemId: string
 }) => {
   const { t } = useTranslation()
-  const { getRelativeDate } = useDate()
 
-  if (
-    !["requested", "received", "partially_received"].includes(
-      orderReturn.status || ""
-    )
-  ) {
-    return null
-  }
-
-  const isRequested = orderReturn.status === "requested"
   const item = orderReturn?.items?.find((ri) => ri.item_id === itemId)
+  const damagedQuantity = item?.damaged_quantity || 0
 
   return (
     item && (
@@ -594,16 +586,10 @@ const ReturnBreakdown = ({
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
-          <Text>
-            {t(
-              `orders.returns.${
-                isRequested ? "returnRequestedInfo" : "returnReceivedInfo"
-              }`,
-              {
-                requestedItemsCount:
-                  item?.[isRequested ? "quantity" : "received_quantity"],
-              }
-            )}
+          <Text size="small">
+            {t(`orders.returns.damagedItemsReturned`, {
+              quantity: damagedQuantity,
+            })}
           </Text>
 
           {item?.note && (
@@ -623,18 +609,108 @@ const ReturnBreakdown = ({
           )}
         </div>
 
-        {orderReturn && (
-          <Text size="small" leading="compact" className="text-ui-fg-muted">
-            {getRelativeDate(
-              isRequested ? orderReturn.created_at : orderReturn.received_at
-            )}
-          </Text>
-        )}
+        <Text size="small" leading="compact" className="text-ui-fg-muted">
+          {t(`orders.returns.damagedItemReceived`)}
+
+          <span className="ml-2">
+            <ReturnInfoPopover orderReturn={orderReturn} />
+          </span>
+        </Text>
       </div>
     )
   )
 }
 
+const ReturnBreakdown = ({
+  orderReturn,
+  itemId,
+}: {
+  orderReturn: AdminReturn
+  itemId: string
+}) => {
+  const { t } = useTranslation()
+  const { getRelativeDate } = useDate()
+
+  if (
+    !["requested", "received", "partially_received"].includes(
+      orderReturn.status || ""
+    )
+  ) {
+    return null
+  }
+
+  const isRequested = orderReturn.status === "requested"
+  const item = orderReturn?.items?.find((ri) => ri.item_id === itemId)
+  const damagedQuantity = item?.damaged_quantity || 0
+
+  return (
+    item && (
+      <>
+        {damagedQuantity > 0 && (
+          <ReturnBreakdownWithDamages
+            orderReturn={orderReturn}
+            itemId={itemId}
+          />
+        )}
+        <div
+          key={item.id}
+          className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle flex flex-row justify-between gap-y-2 border-t-2 border-dotted px-6 py-4"
+        >
+          <div className="flex items-center gap-2">
+            <ArrowDownRightMini className="text-ui-fg-muted" />
+            <Text size="small">
+              {t(
+                `orders.returns.${
+                  isRequested ? "returnRequestedInfo" : "returnReceivedInfo"
+                }`,
+                {
+                  requestedItemsCount:
+                    item?.[isRequested ? "quantity" : "received_quantity"],
+                }
+              )}
+            </Text>
+
+            {item?.note && (
+              <Tooltip content={item.note}>
+                <DocumentText className="text-ui-tag-neutral-icon ml-1 inline" />
+              </Tooltip>
+            )}
+
+            {item?.reason && (
+              <Badge
+                size="2xsmall"
+                className="cursor-default select-none capitalize"
+                rounded="full"
+              >
+                {item?.reason?.label}
+              </Badge>
+            )}
+          </div>
+
+          {orderReturn && isRequested && (
+            <Text size="small" leading="compact" className="text-ui-fg-muted">
+              {getRelativeDate(orderReturn.created_at)}
+              <span className="ml-2">
+                <ReturnInfoPopover orderReturn={orderReturn} />
+              </span>
+            </Text>
+          )}
+
+          {orderReturn && !isRequested && (
+            <Text size="small" leading="compact" className="text-ui-fg-muted">
+              {t(`orders.returns.itemReceived`)}
+
+              <span className="ml-2">
+                <ReturnInfoPopover orderReturn={orderReturn} />
+              </span>
+            </Text>
+          )}
+        </div>
+      </>
+    )
+  )
+}
+
 const ClaimBreakdown = ({
   claim,
   itemId,
@@ -657,7 +733,7 @@ const ClaimBreakdown = ({
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
 
-          <Text>
+          <Text size="small">
             {t(`orders.claims.outboundItemAdded`, {
               itemsCount: items.reduce(
                 (acc, item) => (acc = acc + item.quantity),
@@ -696,7 +772,7 @@ const ExchangeBreakdown = ({
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
-          <Text>
+          <Text size="small">
             {t(`orders.exchanges.outboundItemAdded`, {
               itemsCount: items.reduce(
                 (acc, item) => (acc = acc + item.quantity),
@@ -720,19 +796,39 @@ const Total = ({ order }: { order: AdminOrder }) => {
   return (
     <div className=" flex flex-col gap-y-2 px-6 py-4">
       <div className="text-ui-fg-base flex items-center justify-between">
-        <Text className="text-ui-fg-subtle" size="small" leading="compact">
+        <Text
+          weight="plus"
+          className="text-ui-fg-subtle"
+          size="small"
+          leading="compact"
+        >
           {t("fields.total")}
         </Text>
-        <Text className="text-ui-fg-subtle" size="small" leading="compact">
+        <Text
+          weight="plus"
+          className="text-ui-fg-subtle"
+          size="small"
+          leading="compact"
+        >
           {getStylizedAmount(order.total, order.currency_code)}
         </Text>
       </div>
 
       <div className="text-ui-fg-base flex items-center justify-between">
-        <Text className="text-ui-fg-subtle" size="small" leading="compact">
+        <Text
+          weight="plus"
+          className="text-ui-fg-subtle"
+          size="small"
+          leading="compact"
+        >
           {t("fields.paidTotal")}
         </Text>
-        <Text className="text-ui-fg-subtle" size="small" leading="compact">
+        <Text
+          weight="plus"
+          className="text-ui-fg-subtle"
+          size="small"
+          leading="compact"
+        >
           {getStylizedAmount(
             getTotalCaptured(order.payment_collections || []),
             order.currency_code
@@ -745,13 +841,15 @@ const Total = ({ order }: { order: AdminOrder }) => {
           className="text-ui-fg-subtle text-semibold"
           size="small"
           leading="compact"
+          weight="plus"
         >
           {t("orders.returns.outstandingAmount")}
         </Text>
         <Text
           className="text-ui-fg-subtle text-bold"
           size="small"
           leading="compact"
+          weight="plus"
         >
           {getStylizedAmount(
             order.summary.pending_difference || 0,

packages/admin-next/dashboard/src/routes/orders/order-detail/components/order-summary-section/return-info-popover.tsx

@@ -0,0 +1,70 @@
+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)
+  }
+
+  if (typeof orderReturn !== "object") {
+    return
+  }
+
+  return (
+    <Popover open={open}>
+      <Popover.Trigger
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        autoFocus={false}
+        className="focus-visible:outline-none align-sub"
+      >
+        <InformationCircleSolid />
+      </Popover.Trigger>
+
+      <Popover.Content
+        align="center"
+        side="top"
+        className="bg-ui-bg-component focus-visible:outline-none p-2"
+      >
+        <div className="flex flex-col">
+          <Badge size="2xsmall" className="mb-2" rounded="full">
+            #{orderReturn.id.replace("return_", "")}
+          </Badge>
+
+          <Text size="xsmall">
+            <span className="text-ui-fg-subtle">
+              {t(`orders.returns.returnRequested`)}
+            </span>
+            {" · "}
+            {formatDate(orderReturn.requested_at)}
+          </Text>
+
+          <Text size="xsmall">
+            <span className="text-ui-fg-subtle">
+              {t(`orders.returns.itemReceived`)}
+            </span>
+            {" · "}
+            {formatDate(orderReturn.received_at)}
+          </Text>
+        </div>
+      </Popover.Content>
+    </Popover>
+  )
+}
+
+export default ReturnInfoPopover

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