feat(dashboard): Order details page (#6538)

**What**
- Adds the different display cards to the order details page. This does not include any of the different forms for editing various aspects of an order.

packages/admin-next/dashboard/src/components/table/table-cells/common/money-amount-cell/money-amount-cell.tsx

@@ -1,5 +1,5 @@
 import { clx } from "@medusajs/ui"
-import { getPresentationalAmount } from "../../../../../lib/money-amount-helpers"
+import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
 import { PlaceholderCell } from "../placeholder-cell"
 
 type MoneyAmountCellProps = {
@@ -17,18 +17,7 @@ export const MoneyAmountCell = ({
     return <PlaceholderCell />
   }
 
-  const formatted = new Intl.NumberFormat(undefined, {
-    style: "currency",
-    currency: currencyCode,
-    currencyDisplay: "narrowSymbol",
-  }).format(0)
-
-  const symbol = formatted.replace(/\d/g, "").replace(/[.,]/g, "").trim()
-
-  const presentationAmount = getPresentationalAmount(amount, currencyCode)
-  const formattedTotal = new Intl.NumberFormat(undefined, {
-    style: "decimal",
-  }).format(presentationAmount)
+  const formatted = getStylizedAmount(amount, currencyCode)
 
   return (
     <div
@@ -37,9 +26,7 @@ export const MoneyAmountCell = ({
         "justify-end text-right": align === "right",
       })}
     >
-      <span className="truncate">
-        {symbol} {formattedTotal} {currencyCode.toUpperCase()}
-      </span>
+      <span className="truncate">{formatted}</span>
     </div>
   )
 }

packages/admin-next/dashboard/src/components/table/table-cells/order/country-cell/country-cell.tsx

@@ -0,0 +1,28 @@
+import { Country } from "@medusajs/medusa"
+import { Tooltip } from "@medusajs/ui"
+import ReactCountryFlag from "react-country-flag"
+import { PlaceholderCell } from "../../common/placeholder-cell"
+
+export const CountryCell = ({ country }: { country?: Country | null }) => {
+  if (!country) {
+    return <PlaceholderCell />
+  }
+
+  return (
+    <div className="flex size-5 items-center justify-center">
+      <Tooltip content={country.display_name}>
+        <div className="flex size-4 items-center justify-center overflow-hidden rounded-sm">
+          <ReactCountryFlag
+            countryCode={country.iso_2.toUpperCase()}
+            svg
+            style={{
+              width: "16px",
+              height: "16px",
+            }}
+            aria-label={country.display_name}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}

packages/admin-next/dashboard/src/components/table/table-cells/order/country-cell/index.ts

@@ -0,0 +1 @@
+export * from "./country-cell"

packages/admin-next/dashboard/src/components/table/table-cells/order/customer-cell/customer-cell.tsx

@@ -11,9 +11,7 @@ export const CustomerCell = ({ customer }: { customer: Customer | null }) => {
 
   return (
     <div className="flex h-full w-full items-center">
-      <div>
-        <span className="truncate">{name || email}</span>
-      </div>
+      <span className="truncate">{name || email}</span>
     </div>
   )
 }

packages/admin-next/dashboard/src/components/table/table-cells/order/fulfillment-status-cell/fulfillment-status-cell.tsx

@@ -12,24 +12,24 @@ export const FulfillmentStatusCell = ({
   const { t } = useTranslation()
 
   const [label, color] = {
-    not_fulfilled: [t("orders.fulfillmentStatus.notFulfilled"), "red"],
+    not_fulfilled: [t("orders.fulfillment.status.notFulfilled"), "red"],
     partially_fulfilled: [
-      t("orders.fulfillmentStatus.partiallyFulfilled"),
+      t("orders.fulfillment.status.partiallyFulfilled"),
       "orange",
     ],
-    fulfilled: [t("orders.fulfillmentStatus.fulfilled"), "green"],
+    fulfilled: [t("orders.fulfillment.status.fulfilled"), "green"],
     partially_shipped: [
-      t("orders.fulfillmentStatus.partiallyShipped"),
+      t("orders.fulfillment.status.partiallyShipped"),
       "orange",
     ],
-    shipped: [t("orders.fulfillmentStatus.shipped"), "green"],
+    shipped: [t("orders.fulfillment.status.shipped"), "green"],
     partially_returned: [
-      t("orders.fulfillmentStatus.partiallyReturned"),
+      t("orders.fulfillment.status.partiallyReturned"),
       "orange",
     ],
-    returned: [t("orders.fulfillmentStatus.returned"), "green"],
-    canceled: [t("orders.fulfillmentStatus.canceled"), "red"],
-    requires_action: [t("orders.fulfillmentStatus.requresAction"), "orange"],
+    returned: [t("orders.fulfillment.status.returned"), "green"],
+    canceled: [t("orders.fulfillment.status.canceled"), "red"],
+    requires_action: [t("orders.fulfillment.status.requresAction"), "orange"],
   }[status] as [string, "red" | "orange" | "green"]
 
   return <StatusCell color={color}>{label}</StatusCell>

packages/admin-next/dashboard/src/components/table/table-cells/order/items-cell/index.ts

@@ -1 +0,0 @@
-export * from "./items-cell"

packages/admin-next/dashboard/src/components/table/table-cells/order/items-cell/items-cell.tsx

@@ -1,26 +0,0 @@
-import type { LineItem } from "@medusajs/medusa"
-import { useTranslation } from "react-i18next"
-
-export const ItemsCell = ({ items }: { items: LineItem[] }) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="flex h-full w-full items-center overflow-hidden">
-      <span className="truncate">
-        {t("general.items", {
-          count: items.length,
-        })}
-      </span>
-    </div>
-  )
-}
-
-export const ItemsHeader = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="flex h-full w-full items-center">
-      <span className="truncate">{t("fields.items")}</span>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/table/table-cells/order/payment-status-cell/payment-status-cell.tsx

@@ -10,13 +10,16 @@ export const PaymentStatusCell = ({ status }: PaymentStatusCellProps) => {
   const { t } = useTranslation()
 
   const [label, color] = {
-    not_paid: [t("orders.paymentStatus.notPaid"), "red"],
-    awaiting: [t("orders.paymentStatus.awaiting"), "orange"],
-    captured: [t("orders.paymentStatus.captured"), "green"],
-    refunded: [t("orders.paymentStatus.refunded"), "green"],
-    partially_refunded: [t("orders.paymentStatus.partiallyRefunded"), "orange"],
-    canceled: [t("orders.paymentStatus.canceled"), "red"],
-    requires_action: [t("orders.paymentStatus.requresAction"), "orange"],
+    not_paid: [t("orders.payment.status.notPaid"), "red"],
+    awaiting: [t("orders.payment.status.awaiting"), "orange"],
+    captured: [t("orders.payment.status.captured"), "green"],
+    refunded: [t("orders.payment.status.refunded"), "green"],
+    partially_refunded: [
+      t("orders.payment.status.partiallyRefunded"),
+      "orange",
+    ],
+    canceled: [t("orders.payment.status.canceled"), "red"],
+    requires_action: [t("orders.payment.status.requresAction"), "orange"],
   }[status] as [string, "red" | "orange" | "green"]
 
   return <StatusCell color={color}>{label}</StatusCell>