fix(dashboard): cleanup Payments section (#9520)

**What**
- fix content breaking
- use a shorter payment ID in the UI

---

FIXES CC-572

packages/admin/dashboard/src/components/common/display-id/display-id.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next"
+import { useState } from "react"
+import copy from "copy-to-clipboard"
+
+import { clx, toast, Tooltip } from "@medusajs/ui"
+
+type DisplayIdProps = {
+  id: string
+  className?: string
+}
+
+function DisplayId({ id, className }: DisplayIdProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const onClick = () => {
+    copy(id)
+    toast.success(t("actions.idCopiedToClipboard"))
+  }
+
+  return (
+    <Tooltip maxWidth={260} content={id} open={open} onOpenChange={setOpen}>
+      <span onClick={onClick} className={clx("cursor-pointer", className)}>
+        #{id.slice(-7)}
+      </span>
+    </Tooltip>
+  )
+}
+
+export default DisplayId

packages/admin/dashboard/src/components/common/display-id/index.ts

@@ -0,0 +1 @@
+export * from "./display-id"

packages/admin/dashboard/src/i18n/translations/en.json

@@ -98,6 +98,8 @@
   "actions": {
     "save": "Save",
     "saveAsDraft": "Save as draft",
+    "copy": "Copy",
+    "copied": "Copied",
     "duplicate": "Duplicate",
     "publish": "Publish",
     "create": "Create",
@@ -117,6 +119,7 @@
     "showMore": "Show more",
     "continue": "Continue",
     "continueWithEmail": "Continue with Email",
+    "idCopiedToClipboard": "ID copied to clipboard",
     "addReason": "Add Reason",
     "addNote": "Add Note",
     "reset": "Reset",
@@ -902,9 +905,10 @@
     },
     "payment": {
       "title": "Payments",
-      "isReadyToBeCaptured": "Payment {{id}} is ready to be captured.",
+      "isReadyToBeCaptured": "Payment <0/> is ready to be captured.",
       "totalPaidByCustomer": "Total paid by customer",
       "capture": "Capture payment",
+      "capture_short": "Capture",
       "refund": "Refund",
       "markAsPaid": "Mark as paid",
       "statusLabel": "Payment status",

packages/admin/dashboard/src/routes/orders/order-detail/components/copy-payment-link/copy-payment-link.tsx

@@ -41,12 +41,12 @@ const CopyPaymentLink = React.forwardRef<any, CopyPaymentLinkProps>(
 
     React.useEffect(() => {
       if (done) {
-        setText("Copied")
+        setText(t("actions.copied"))
         return
       }
 
       setTimeout(() => {
-        setText("Copy")
+        setText(t("actions.copy"))
       }, 500)
     }, [done])
 

packages/admin/dashboard/src/routes/orders/order-detail/components/order-payment-section/order-payment-section.tsx

@@ -12,7 +12,7 @@ import {
   usePrompt,
 } from "@medusajs/ui"
 import { format } from "date-fns"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useCapturePayment } from "../../../../../hooks/api"
 import { formatCurrency } from "../../../../../lib/format-currency"
@@ -22,6 +22,7 @@ import {
 } from "../../../../../lib/money-amount-helpers"
 import { getOrderPaymentStatus } from "../../../../../lib/order-helpers"
 import { getTotalCaptured, getTotalPending } from "../../../../../lib/payment"
+import DisplayId from "../../../../../components/common/display-id/display-id"
 
 type OrderPaymentSectionProps = {
   order: HttpTypes.AdminOrder
@@ -176,21 +177,20 @@ const Payment = ({
     payment.captured_at ? ["Captured", "green"] : ["Pending", "orange"]
   ) as [string, "green" | "orange"]
 
-  const cleanId = payment.id.replace("pay_", "")
   const showCapture =
     payment.captured_at === null && payment.canceled_at === null
 
   return (
     <div className="divide-y divide-dashed">
-      <div className="text-ui-fg-subtle grid grid-cols-[1fr_1fr_1fr_1fr_20px] items-center gap-x-4 px-6 py-4">
-        <div className="w-full overflow-hidden">
+      <div className="text-ui-fg-subtle grid grid-cols-[1fr_1fr_1fr_20px] items-center gap-x-4 px-6 py-4 sm:grid-cols-[1fr_1fr_1fr_1fr_20px]">
+        <div className="w-full min-w-[60px] overflow-hidden">
           <Text
             size="small"
             leading="compact"
             weight="plus"
             className="truncate"
           >
-            {cleanId}
+            <DisplayId id={payment.id} />
           </Text>
           <Text size="small" leading="compact">
             {format(
@@ -199,7 +199,7 @@ const Payment = ({
             )}
           </Text>
         </div>
-        <div className="flex items-center justify-end">
+        <div className="hidden items-center justify-end sm:flex">
           <Text size="small" leading="compact" className="capitalize">
             {payment.provider_id}
           </Text>
@@ -232,16 +232,27 @@ const Payment = ({
       {showCapture && (
         <div className="bg-ui-bg-subtle flex items-center justify-between px-6 py-4">
           <div className="flex items-center gap-x-2">
-            <ArrowDownRightMini className="text-ui-fg-muted" />
+            <ArrowDownRightMini className="text-ui-fg-muted shrink-0" />
             <Text size="small" leading="compact">
-              {t("orders.payment.isReadyToBeCaptured", {
-                id: cleanId,
-              })}
+              <Trans
+                i18nKey="orders.payment.isReadyToBeCaptured"
+                components={[<DisplayId id={payment.id} />]}
+              />
             </Text>
           </div>
 
-          <Button size="small" variant="secondary" onClick={handleCapture}>
-            {t("orders.payment.capture")}
+          <Button
+            className="shrink-0"
+            size="small"
+            variant="secondary"
+            onClick={handleCapture}
+          >
+            <span className="hidden sm:block">
+              {t("orders.payment.capture")}
+            </span>
+            <span className="sm:hidden">
+              {t("orders.payment.capture_short")}
+            </span>
           </Button>
         </div>
       )}