fix(dashboard): disable RMAs if there is no shipped items (#8652)

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

@@ -44,6 +44,7 @@ import {
   getStylizedAmount,
 } from "../../../../../lib/money-amount-helpers"
 import { getTotalCaptured } from "../../../../../lib/payment.ts"
+import { getReturnableQuantity } from "../../../../../lib/rma.ts"
 
 type OrderSummarySectionProps = {
   order: AdminOrder
@@ -147,6 +148,11 @@ const Header = ({
 }) => {
   const { t } = useTranslation()
 
+  // is ture if there is no shipped items ATM
+  const shouldDisableReturn = order.items.every(
+    (i) => !(getReturnableQuantity(i) > 0)
+  )
+
   return (
     <div className="flex items-center justify-between px-6 py-4">
       <Heading level="h2">{t("fields.summary")}</Heading>
@@ -169,6 +175,7 @@ const Header = ({
                 to: `/orders/${order.id}/returns`,
                 icon: <ArrowUturnLeft />,
                 disabled:
+                  shouldDisableReturn ||
                   !!orderPreview?.order_change?.exchange_id ||
                   !!orderPreview?.order_change?.claim_id,
               },
@@ -181,6 +188,7 @@ const Header = ({
                 to: `/orders/${order.id}/exchanges`,
                 icon: <ArrowPath />,
                 disabled:
+                  shouldDisableReturn ||
                   (!!orderPreview?.order_change?.return_id &&
                     !!!orderPreview?.order_change?.exchange_id) ||
                   !!orderPreview?.order_change?.claim_id,
@@ -194,6 +202,7 @@ const Header = ({
                 to: `/orders/${order.id}/claims`,
                 icon: <ExclamationCircle />,
                 disabled:
+                  shouldDisableReturn ||
                   (!!orderPreview?.order_change?.return_id &&
                     !!!orderPreview?.order_change?.claim_id) ||
                   !!orderPreview?.order_change?.exchange_id,
@@ -431,7 +440,7 @@ const ReturnBreakdown = ({
     item && (
       <div
         key={orderReturn.id}
-        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle border-dotted border-t-2 border-b-2 flex flex-row justify-between gap-y-2 px-6 py-4"
+        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle flex flex-row justify-between gap-y-2 border-b-2 border-t-2 border-dotted px-6 py-4"
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
@@ -449,7 +458,7 @@ const ReturnBreakdown = ({
 
           {item?.note && (
             <Tooltip content={item.note}>
-              <DocumentText className="text-ui-tag-neutral-icon inline ml-1" />
+              <DocumentText className="text-ui-tag-neutral-icon ml-1 inline" />
             </Tooltip>
           )}
 
@@ -493,7 +502,7 @@ const ClaimBreakdown = ({
     !!items.length && (
       <div
         key={claim.id}
-        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle border-dotted border-t-2 border-b-2 flex flex-row justify-between gap-y-2 px-6 py-4"
+        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle flex flex-row justify-between gap-y-2 border-b-2 border-t-2 border-dotted px-6 py-4"
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />
@@ -532,7 +541,7 @@ const ExchangeBreakdown = ({
     !!items.length && (
       <div
         key={exchange.id}
-        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle border-dotted border-t-2 border-b-2 flex flex-row justify-between gap-y-2 px-6 py-4"
+        className="txt-compact-small-plus text-ui-fg-subtle bg-ui-bg-subtle flex flex-row justify-between gap-y-2 border-b-2 border-t-2 border-dotted px-6 py-4"
       >
         <div className="flex items-center gap-2">
           <ArrowDownRightMini className="text-ui-fg-muted" />