feat(dashboard,core-flows,types,utils,medusa): Order cancelations will refund payments (#10667)

* feat(order, types): Add Credit Line to order module

* chore: add action to inject credit lines

* WIP

* chore: add fixes + observe

* chore: fix balances

* chore: add canceled badge

* chore: fix i18n schema

* chore: remove redunddant query

* chore: add changeset

* chore: add credit lines for all cancel cases

* chore: add accounting total

* chore: address review & cleanup

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

@@ -1,4 +1,5 @@
 import { XCircle } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import {
   Container,
   Copy,
@@ -9,13 +10,14 @@ import {
 } from "@medusajs/ui"
 import { format } from "date-fns"
 import { useTranslation } from "react-i18next"
+import { isPresent } from "../../../../../../../../core/utils/src/common/is-present"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useCancelOrder } from "../../../../../hooks/api/orders"
 import {
+  getCanceledOrderStatus,
   getOrderFulfillmentStatus,
   getOrderPaymentStatus,
 } from "../../../../../lib/order-helpers"
-import { HttpTypes } from "@medusajs/types"
 
 type OrderGeneralSectionProps = {
   order: HttpTypes.AdminOrder
@@ -60,6 +62,7 @@ export const OrderGeneralSection = ({ order }: OrderGeneralSectionProps) => {
       </div>
       <div className="flex items-center gap-x-4">
         <div className="flex items-center gap-x-1.5">
+          <OrderBadge order={order} />
           <PaymentBadge order={order} />
           <FulfillmentBadge order={order} />
         </div>
@@ -108,3 +111,18 @@ const PaymentBadge = ({ order }: { order: HttpTypes.AdminOrder }) => {
     </StatusBadge>
   )
 }
+
+const OrderBadge = ({ order }: { order: HttpTypes.AdminOrder }) => {
+  const { t } = useTranslation()
+  const orderStatus = getCanceledOrderStatus(t, order.status)
+
+  if (!isPresent(orderStatus)) {
+    return
+  }
+
+  return (
+    <StatusBadge color={orderStatus.color} className="text-nowrap">
+      {orderStatus.label}
+    </StatusBadge>
+  )
+}

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

@@ -1,5 +1,9 @@
 import { ArrowDownRightMini, DocumentText, XCircle } from "@medusajs/icons"
-import { AdminPaymentCollection, HttpTypes } from "@medusajs/types"
+import {
+  AdminPayment,
+  AdminPaymentCollection,
+  HttpTypes,
+} from "@medusajs/types"
 import {
   Badge,
   Button,
@@ -14,6 +18,7 @@ import {
 import { format } from "date-fns"
 import { Trans, useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
+import DisplayId from "../../../../../components/common/display-id/display-id"
 import { useCapturePayment } from "../../../../../hooks/api"
 import { formatCurrency } from "../../../../../lib/format-currency"
 import {
@@ -22,7 +27,6 @@ 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
@@ -173,9 +177,20 @@ const Payment = ({
     )
   }
 
-  const [status, color] = (
-    payment.captured_at ? ["Captured", "green"] : ["Pending", "orange"]
-  ) as [string, "green" | "orange"]
+  const getPaymentStatusAttributes = (payment: AdminPayment) => {
+    if (payment.canceled_at) {
+      return ["Canceled", "red"]
+    } else if (payment.captured_at) {
+      return ["Captured", "green"]
+    } else {
+      return ["Pending", "orange"]
+    }
+  }
+
+  const [status, color] = getPaymentStatusAttributes(payment) as [
+    string,
+    "green" | "orange" | "red",
+  ]
 
   const showCapture =
     payment.captured_at === null && payment.canceled_at === null