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/hooks/table/columns/use-order-table-columns.tsx

@@ -9,6 +9,11 @@ import {
   DateCell,
   DateHeader,
 } from "../../../components/table/table-cells/common/date-cell"
+import { CountryCell } from "../../../components/table/table-cells/order/country-cell"
+import {
+  CustomerCell,
+  CustomerHeader,
+} from "../../../components/table/table-cells/order/customer-cell"
 import {
   DisplayIdCell,
   DisplayIdHeader,
@@ -17,10 +22,6 @@ import {
   FulfillmentStatusCell,
   FulfillmentStatusHeader,
 } from "../../../components/table/table-cells/order/fulfillment-status-cell"
-import {
-  ItemsCell,
-  ItemsHeader,
-} from "../../../components/table/table-cells/order/items-cell"
 import {
   PaymentStatusCell,
   PaymentStatusHeader,
@@ -62,6 +63,14 @@ export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
           return <DateCell date={date} />
         },
       }),
+      columnHelper.accessor("customer", {
+        header: () => <CustomerHeader />,
+        cell: ({ getValue }) => {
+          const customer = getValue()
+
+          return <CustomerCell customer={customer} />
+        },
+      }),
       columnHelper.accessor("sales_channel", {
         header: () => <SalesChannelHeader />,
         cell: ({ getValue }) => {
@@ -86,14 +95,6 @@ export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
           return <FulfillmentStatusCell status={status} />
         },
       }),
-      columnHelper.accessor("items", {
-        header: () => <ItemsHeader />,
-        cell: ({ getValue }) => {
-          const items = getValue()
-
-          return <ItemsCell items={items} />
-        },
-      }),
       columnHelper.accessor("total", {
         header: () => <TotalHeader />,
         cell: ({ getValue, row }) => {
@@ -103,6 +104,14 @@ export const useOrderTableColumns = (props: UseOrderTableColumnsProps) => {
           return <TotalCell currencyCode={currencyCode} total={total} />
         },
       }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          const country = row.original.shipping_address?.country
+
+          return <CountryCell country={country} />
+        },
+      }),
     ],
     []
   )

packages/admin-next/dashboard/src/hooks/table/filters/use-order-table-filters.tsx

@@ -54,36 +54,36 @@ export const useOrderTableFilters = (): Filter[] => {
 
   const paymentStatusFilter: Filter = {
     key: "payment_status",
-    label: t("orders.paymentStatusLabel"),
+    label: t("orders.payment.statusLabel"),
     type: "select",
     multiple: true,
     options: [
       {
-        label: t("orders.paymentStatus.notPaid"),
+        label: t("orders.payment.status.notPaid"),
         value: "not_paid",
       },
       {
-        label: t("orders.paymentStatus.awaiting"),
+        label: t("orders.payment.status.awaiting"),
         value: "awaiting",
       },
       {
-        label: t("orders.paymentStatus.captured"),
+        label: t("orders.payment.status.captured"),
         value: "captured",
       },
       {
-        label: t("orders.paymentStatus.refunded"),
+        label: t("orders.payment.status.refunded"),
         value: "refunded",
       },
       {
-        label: t("orders.paymentStatus.partiallyRefunded"),
+        label: t("orders.payment.status.partiallyRefunded"),
         value: "partially_refunded",
       },
       {
-        label: t("orders.paymentStatus.canceled"),
+        label: t("orders.payment.status.canceled"),
         value: "canceled",
       },
       {
-        label: t("orders.paymentStatus.requresAction"),
+        label: t("orders.payment.status.requresAction"),
         value: "requires_action",
       },
     ],
@@ -91,44 +91,44 @@ export const useOrderTableFilters = (): Filter[] => {
 
   const fulfillmentStatusFilter: Filter = {
     key: "fulfillment_status",
-    label: t("orders.fulfillmentStatusLabel"),
+    label: t("orders.fulfillment.statusLabel"),
     type: "select",
     multiple: true,
     options: [
       {
-        label: t("orders.fulfillmentStatus.notFulfilled"),
+        label: t("orders.fulfillment.status.notFulfilled"),
         value: "not_fulfilled",
       },
       {
-        label: t("orders.fulfillmentStatus.fulfilled"),
+        label: t("orders.fulfillment.status.fulfilled"),
         value: "fulfilled",
       },
       {
-        label: t("orders.fulfillmentStatus.partiallyFulfilled"),
+        label: t("orders.fulfillment.status.partiallyFulfilled"),
         value: "partially_fulfilled",
       },
       {
-        label: t("orders.fulfillmentStatus.returned"),
+        label: t("orders.fulfillment.status.returned"),
         value: "returned",
       },
       {
-        label: t("orders.fulfillmentStatus.partiallyReturned"),
+        label: t("orders.fulfillment.status.partiallyReturned"),
         value: "partially_returned",
       },
       {
-        label: t("orders.fulfillmentStatus.shipped"),
+        label: t("orders.fulfillment.status.shipped"),
         value: "shipped",
       },
       {
-        label: t("orders.fulfillmentStatus.partiallyShipped"),
+        label: t("orders.fulfillment.status.partiallyShipped"),
         value: "partially_shipped",
       },
       {
-        label: t("orders.fulfillmentStatus.canceled"),
+        label: t("orders.fulfillment.status.canceled"),
         value: "canceled",
       },
       {
-        label: t("orders.fulfillmentStatus.requresAction"),
+        label: t("orders.fulfillment.status.requresAction"),
         value: "requires_action",
       },
     ],