fix(core-flows,utils,medusa): fix bug where payment collection across orders were getting updated (#8401)

This took embarrassingly long to debug. :|

what:

- fixes a bug where the payment collection of other orders were getting updated
- adds order status to payments section

<img width="1069" alt="Screenshot 2024-08-02 at 08 37 38" src="https://github.com/user-attachments/assets/31776bd3-e6b9-4d23-8be6-f972f7316cf3">
<img width="1072" alt="Screenshot 2024-08-02 at 08 37 48" src="https://github.com/user-attachments/assets/38cdd8a1-9f31-4920-91bf-a3554e298960">

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

@@ -24,6 +24,7 @@ import {
   getLocaleAmount,
   getStylizedAmount,
 } from "../../../../../lib/money-amount-helpers"
+import { getOrderPaymentStatus } from "../../../../../lib/order-helpers"
 
 type OrderPaymentSectionProps = {
   order: HttpTypes.AdminOrder
@@ -46,7 +47,7 @@ export const OrderPaymentSection = ({ order }: OrderPaymentSectionProps) => {
 
   return (
     <Container className="divide-y divide-dashed p-0">
-      <Header />
+      <Header order={order} />
 
       <PaymentBreakdown
         order={order}
@@ -60,12 +61,17 @@ export const OrderPaymentSection = ({ order }: OrderPaymentSectionProps) => {
   )
 }
 
-const Header = () => {
+const Header = ({ order }) => {
   const { t } = useTranslation()
+  const { label, color } = getOrderPaymentStatus(t, order.payment_status)
 
   return (
     <div className="flex items-center justify-between px-6 py-4">
       <Heading level="h2">{t("orders.payment.title")}</Heading>
+
+      <StatusBadge color={color} className="text-nowrap">
+        {label}
+      </StatusBadge>
     </div>
   )
 }