@mercurjs/admin 2.2.0-canary.5 → 2.2.0-canary.51

package/dist/{chunk-KJSCFEXT.js → chunk-3WCK2FT4.js}

@@ -1,34 +1,48 @@
-import {
-  useOrderTableColumns
-} from "./chunk-DBYUB2YI.js";
 import {
   useCustomerGroupTableColumns
 } from "./chunk-54EPH67T.js";
-import {
-  useOrderTableFilters
-} from "./chunk-J4MAIN7L.js";
 import {
   useCustomerGroupTableFilters
-} from "./chunk-CMHI2RPL.js";
+} from "./chunk-LPIPSLR7.js";
+import {
+  useOrderGroupTableFilters
+} from "./chunk-LXNWSQOE.js";
 import {
   useOrderTableQuery
-} from "./chunk-3B6MTW5G.js";
+} from "./chunk-QUHSHIAC.js";
 import {
   useCustomerGroupTableQuery
-} from "./chunk-VKOE5J66.js";
+} from "./chunk-3XOE4NV5.js";
 import {
-  _DataTable,
-  useDataTable
-} from "./chunk-NQEXDLYH.js";
+  FulfillmentStatusCell,
+  FulfillmentStatusHeader,
+  PaymentStatusCell,
+  PaymentStatusHeader
+} from "./chunk-TZSOL34K.js";
 import {
-  NoRecords
-} from "./chunk-634XVU3D.js";
+  DateCell,
+  DateHeader
+} from "./chunk-25LYVP3C.js";
+import {
+  getStylizedAmount
+} from "./chunk-PXYDR7WQ.js";
+import {
+  TextCell,
+  TextHeader
+} from "./chunk-JHIMVLB2.js";
 import {
   TwoColumnPage
 } from "./chunk-E74OUNA3.js";
 import {
-  useOrders
-} from "./chunk-N3BYBEDV.js";
+  _DataTable,
+  useDataTable
+} from "./chunk-GRFWCCUW.js";
+import {
+  NoRecords
+} from "./chunk-7PPT3477.js";
+import {
+  useOrderGroups
+} from "./chunk-PYF5EER5.js";
 import {
   useBatchCustomerCustomerGroups,
   useCustomer,
@@ -36,7 +50,7 @@ import {
   useDeleteCustomer,
   useDeleteCustomerAddress,
   useRemoveCustomersFromGroup
-} from "./chunk-PRBE5CM3.js";
+} from "./chunk-AFYILTAC.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
@@ -47,11 +61,13 @@ import {
 // src/pages/customers/customer-detail/customer-detail.tsx
 import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
+import { WidgetZone, useLinkQuery } from "@mercurjs/dashboard-shared";
 
 // src/pages/customers/customer-detail/components/customer-address-section/customer-address-section.tsx
-import { clx, Container, Heading, toast, usePrompt } from "@medusajs/ui";
+import { Button, clx, Container, Heading, toast, usePrompt } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { Trash } from "@medusajs/icons";
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
 import { Link, useNavigate } from "react-router-dom";
 
 // src/components/common/listicle/listicle.tsx
@@ -98,9 +114,7 @@ var CustomerAddressSection = ({
     }
     await deleteAddress(address.id, {
       onSuccess: () => {
-        toast.success(
-          t2("general.success", { name: address.address_name ?? "address" })
-        );
+        toast.success(t2("customers.addresses.delete.successToast"));
         navigate(`/customers/${customer.id}`, { replace: true });
       },
       onError: (e) => {
@@ -111,7 +125,7 @@ var CustomerAddressSection = ({
   return /* @__PURE__ */ jsxs2(Container, { className: "p-0", "data-testid": "customer-address-section", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "customer-address-section-header", children: [
       /* @__PURE__ */ jsx2(Heading, { level: "h2", "data-testid": "customer-address-section-heading", children: t2("addresses.title") }),
-      /* @__PURE__ */ jsx2(Link, { to: `create-address`, className: "text-ui-fg-muted text-xs", "data-testid": "customer-address-section-add-link", children: "Add" })
+      /* @__PURE__ */ jsx2(Link, { to: `create-address`, "data-testid": "customer-address-section-add-link", children: /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", "data-testid": "customer-address-section-create-button", children: t2("actions.create") }) })
     ] }),
     addresses.length === 0 && /* @__PURE__ */ jsx2("div", { "data-testid": "customer-address-section-no-records", children: /* @__PURE__ */ jsx2(
       NoRecords,
@@ -120,8 +134,8 @@ var CustomerAddressSection = ({
           "flex h-full flex-col overflow-hidden border-t p-6": true
         }),
         icon: null,
-        title: t2("general.noRecordsTitle"),
-        message: t2("general.noRecordsMessage")
+        title: t2("customers.addresses.emptyTitle"),
+        message: t2("customers.addresses.emptyMessage")
       }
     ) }),
     addresses.map((address) => {
@@ -135,6 +149,15 @@ var CustomerAddressSection = ({
             {
               "data-testid": `customer-address-section-address-${address.id}-actions`,
               groups: [
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx2(PencilSquare, {}),
+                      label: t2("actions.edit"),
+                      to: `edit-address/${address.id}`
+                    }
+                  ]
+                },
                 {
                   actions: [
                     {
@@ -151,12 +174,13 @@ var CustomerAddressSection = ({
           )
         }
       ) }, address.id);
-    })
+    }),
+    /* @__PURE__ */ jsx2(DisplayExtensionZone, { model: "customer", zone: "addresses", data: customer })
   ] });
 };
 
 // src/pages/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
-import { PencilSquare, Trash as Trash2 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
 import {
   Container as Container2,
   Heading as Heading2,
@@ -167,7 +191,9 @@ import {
 } from "@medusajs/ui";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { useNavigate as useNavigate2 } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GENERAL_FIELD_IDS = ["email", "status", "name", "company_name", "phone"];
 var CustomerGeneralSection = ({
   customer
 }) => {
@@ -208,9 +234,9 @@ var CustomerGeneralSection = ({
   };
   return /* @__PURE__ */ jsxs3(Container2, { className: "divide-y p-0", "data-testid": "customer-general-section", children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "customer-general-section-header", children: [
-      /* @__PURE__ */ jsx3(Heading2, { "data-testid": "customer-general-section-email", children: customer.email }),
+      /* @__PURE__ */ jsx3(DisplayField, { model: "customer", zone: "general", id: "email", data: customer, children: /* @__PURE__ */ jsx3(Heading2, { "data-testid": "customer-general-section-email", children: customer.email }) }),
       /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", "data-testid": "customer-general-section-actions", children: [
-        /* @__PURE__ */ jsx3(StatusBadge, { color: statusColor, "data-testid": "customer-general-section-status-badge", children: statusText }),
+        /* @__PURE__ */ jsx3(DisplayField, { model: "customer", zone: "general", id: "status", data: customer, children: /* @__PURE__ */ jsx3(StatusBadge, { color: statusColor, "data-testid": "customer-general-section-status-badge", children: statusText }) }),
         /* @__PURE__ */ jsx3(
           ActionMenu,
           {
@@ -220,7 +246,7 @@ var CustomerGeneralSection = ({
                 actions: [
                   {
                     label: t2("actions.edit"),
-                    icon: /* @__PURE__ */ jsx3(PencilSquare, {}),
+                    icon: /* @__PURE__ */ jsx3(PencilSquare2, {}),
                     to: "edit"
                   }
                 ]
@@ -239,24 +265,33 @@ var CustomerGeneralSection = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-name-row", children: [
+    /* @__PURE__ */ jsx3(DisplayField, { model: "customer", zone: "general", id: "name", data: customer, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-name-row", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "customer-general-section-name-label", children: t2("fields.name") }),
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", "data-testid": "customer-general-section-name-value", children: name || "-" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-company-row", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx3(DisplayField, { model: "customer", zone: "general", id: "company_name", data: customer, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-company-row", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "customer-general-section-company-label", children: t2("fields.company") }),
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", "data-testid": "customer-general-section-company-value", children: customer.company_name || "-" })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-phone-row", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx3(DisplayField, { model: "customer", zone: "general", id: "phone", data: customer, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "customer-general-section-phone-row", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "customer-general-section-phone-label", children: t2("fields.phone") }),
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", "data-testid": "customer-general-section-phone-value", children: customer.phone || "-" })
-    ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(
+      DisplayExtensionZone2,
+      {
+        model: "customer",
+        zone: "general",
+        data: customer,
+        builtInFieldIds: GENERAL_FIELD_IDS
+      }
+    )
   ] });
 };
 
 // src/pages/customers/customer-detail/components/customer-group-section/customer-group-section.tsx
 import {
-  Button,
+  Button as Button2,
   Checkbox,
   Container as Container3,
   Heading as Heading3,
@@ -266,13 +301,15 @@ import {
 import { createColumnHelper } from "@tanstack/react-table";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { PencilSquare as PencilSquare2, Trash as Trash3 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare3, Trash as Trash3 } from "@medusajs/icons";
+import { DisplayExtensionZone as DisplayExtensionZone3 } from "@mercurjs/dashboard-shared";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { Link as Link2 } from "react-router-dom";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "cusgr";
+var DEFAULT_ORDER = "-created_at";
 var CustomerGroupSection = ({
   customer
 }) => {
@@ -285,7 +322,8 @@ var CustomerGroupSection = ({
   const { customer_groups, count, isLoading, isError, error } = useCustomerGroups(
     {
       ...searchParams,
-      fields: "+customers.id",
+      order: searchParams.order || DEFAULT_ORDER,
+      fields: "+customers.id,+seller.id,+seller.name",
       customers: { id: customer.id }
     },
     {
@@ -311,11 +349,12 @@ var CustomerGroupSection = ({
   });
   const handleRemove = async () => {
     const customerGroupIds = Object.keys(rowSelection);
+    const selectedGroups = customer_groups?.filter((g) => customerGroupIds.includes(g.id)) ?? [];
+    const names = selectedGroups.map((g) => g.name);
+    const isSingle = selectedGroups.length === 1;
     const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("customers.groups.removeMany", {
-        groups: customer_groups?.filter((g) => customerGroupIds.includes(g.id)).map((g) => g.name).join(",")
-      }),
+      title: t("customers.groups.removeTitle"),
+      description: isSingle ? t("customers.groups.remove", { name: names[0] }) : t("customers.groups.removeMany", { groups: names.join(", ") }),
       confirmText: t("actions.remove"),
       cancelText: t("actions.cancel")
     });
@@ -327,8 +366,8 @@ var CustomerGroupSection = ({
       {
         onSuccess: () => {
           toast3.success(
-            t("customers.groups.removed.success", {
-              groups: customer_groups.filter((cg) => customerGroupIds.includes(cg.id)).map((cg) => cg?.name)
+            isSingle ? t("customers.groups.removed.successOne", { groups: names[0] }) : t("customers.groups.removed.successMany", {
+              groups: names.join(", ")
             })
           );
         },
@@ -344,7 +383,7 @@ var CustomerGroupSection = ({
   return /* @__PURE__ */ jsxs4(Container3, { className: "divide-y p-0", "data-testid": "customer-group-section", children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "customer-group-section-header", children: [
       /* @__PURE__ */ jsx4(Heading3, { level: "h2", "data-testid": "customer-group-section-heading", children: t("customerGroups.domain") }),
-      /* @__PURE__ */ jsx4(Link2, { to: `/customers/${customer.id}/add-customer-groups`, "data-testid": "customer-group-section-add-link", children: /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "small", "data-testid": "customer-group-section-add-button", children: t("general.add") }) })
+      /* @__PURE__ */ jsx4(Link2, { to: `/customers/${customer.id}/add-customer-groups`, "data-testid": "customer-group-section-add-link", children: /* @__PURE__ */ jsx4(Button2, { variant: "secondary", size: "small", "data-testid": "customer-group-section-add-button", children: t("general.add") }) })
     ] }),
     /* @__PURE__ */ jsx4(
       _DataTable,
@@ -364,6 +403,7 @@ var CustomerGroupSection = ({
           { key: "created_at", label: t("fields.createdAt") },
           { key: "updated_at", label: t("fields.updatedAt") }
         ],
+        defaultOrder: DEFAULT_ORDER,
         commands: [
           {
             action: handleRemove,
@@ -373,10 +413,13 @@ var CustomerGroupSection = ({
         ],
         queryObject: raw,
         noRecords: {
-          message: t("customers.groups.list.noRecordsMessage")
+          title: t("customers.groups.list.emptyTitle"),
+          message: t("customers.groups.list.noRecordsMessage"),
+          icon: null
         }
       }
-    )
+    ),
+    /* @__PURE__ */ jsx4(DisplayExtensionZone3, { model: "customer", zone: "groups", data: customer })
   ] });
 };
 var CustomerGroupRowActions = ({
@@ -388,7 +431,7 @@ var CustomerGroupRowActions = ({
   const { mutateAsync } = useRemoveCustomersFromGroup(group.id);
   const onRemove = async () => {
     const res = await prompt({
-      title: t2("general.areYouSure"),
+      title: t2("customers.groups.removeTitle"),
       description: t2("customers.groups.remove", {
         name: group.name
       }),
@@ -399,6 +442,11 @@ var CustomerGroupRowActions = ({
       return;
     }
     await mutateAsync([customerId], {
+      onSuccess: () => {
+        toast3.success(
+          t2("customers.groups.removed.successOne", { groups: group.name })
+        );
+      },
       onError: (error) => {
         toast3.error(error.message);
       }
@@ -413,7 +461,7 @@ var CustomerGroupRowActions = ({
           actions: [
             {
               label: t2("actions.edit"),
-              icon: /* @__PURE__ */ jsx4(PencilSquare2, {}),
+              icon: /* @__PURE__ */ jsx4(PencilSquare3, {}),
               to: `/customer-groups/${group.id}/edit`
             },
             {
@@ -457,6 +505,14 @@ var useColumns = (customerId) => {
         }
       }),
       ...columns,
+      columnHelper.display({
+        id: "owner",
+        header: t("fields.owner"),
+        cell: ({ row }) => {
+          const seller = row.original.seller;
+          return /* @__PURE__ */ jsx4("span", { "data-testid": `customer-group-section-owner-${row.original.id}`, children: seller?.name ?? "-" });
+        }
+      }),
       columnHelper.display({
         id: "actions",
         cell: ({ row }) => /* @__PURE__ */ jsx4(
@@ -473,17 +529,69 @@ var useColumns = (customerId) => {
 };
 
 // src/pages/customers/customer-detail/components/customer-order-section/customer-order-section.tsx
-import { ArrowPath } from "@medusajs/icons";
-import { Container as Container4, Heading as Heading4 } from "@medusajs/ui";
+import { ArrowPath, TriangleRightMini } from "@medusajs/icons";
+import { Container as Container4, Heading as Heading4, IconButton, clx as clx2 } from "@medusajs/ui";
 import { keepPreviousData as keepPreviousData2 } from "@tanstack/react-query";
 import { createColumnHelper as createColumnHelper2 } from "@tanstack/react-table";
 import { useMemo as useMemo2 } from "react";
 import { useTranslation as useTranslation4 } from "react-i18next";
+import { DisplayExtensionZone as DisplayExtensionZone4 } from "@mercurjs/dashboard-shared";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var PREFIX2 = "cusord";
 var PAGE_SIZE2 = 10;
-var DEFAULT_RELATIONS = "*customer,*items,*sales_channel";
-var DEFAULT_FIELDS = "id,status,display_id,created_at,email,fulfillment_status,payment_status,total,currency_code";
+var DEFAULT_FIELDS = [
+  "id",
+  "display_id",
+  "customer_id",
+  "seller_count",
+  "total",
+  "created_at",
+  "updated_at",
+  "orders.id",
+  "orders.display_id",
+  "orders.created_at",
+  "orders.updated_at",
+  "orders.payment_status",
+  "orders.fulfillment_status",
+  "orders.total",
+  "orders.currency_code",
+  "*orders.seller"
+].join(",");
+function transformOrderGroups(orderGroups, t2) {
+  return orderGroups.map((group) => {
+    const orders = group.orders ?? [];
+    const orderIds = orders.map((o) => `#${o.display_id}`).join(", ");
+    const currencyCode = orders[0]?.currency_code ?? "usd";
+    const children = orders.map((order) => ({
+      _type: "order",
+      id: order.id,
+      display_id: `#${order.display_id}`,
+      order_ids: "",
+      store: order.seller?.name ?? "-",
+      created_at: new Date(order.created_at),
+      updated_at: new Date(order.updated_at),
+      payment_status: order.payment_status ?? null,
+      fulfillment_status: order.fulfillment_status ?? null,
+      total: order.total ?? null,
+      currency_code: order.currency_code ?? "usd",
+      children: []
+    }));
+    return {
+      _type: "group",
+      id: group.id,
+      display_id: `#G${group.display_id}`,
+      order_ids: orderIds,
+      store: t2("orders.fields.vendorsCount", { count: group.seller_count }),
+      created_at: new Date(group.created_at),
+      updated_at: new Date(group.updated_at),
+      payment_status: null,
+      fulfillment_status: null,
+      total: group.total ?? null,
+      currency_code: currencyCode,
+      children
+    };
+  });
+}
 var CustomerOrderSection = ({
   customer
 }) => {
@@ -492,22 +600,31 @@ var CustomerOrderSection = ({
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
   });
-  const { orders, count, isLoading, isError, error } = useOrders(
+  const { order_groups, count, isLoading, isError, error } = useOrderGroups(
     {
       ...searchParams,
       customer_id: customer.id,
-      fields: DEFAULT_FIELDS + "," + DEFAULT_RELATIONS
+      fields: DEFAULT_FIELDS
     },
     {
       placeholderData: keepPreviousData2
     }
   );
+  const rows = useMemo2(
+    () => transformOrderGroups(order_groups ?? [], t2),
+    [order_groups, t2]
+  );
+  const filters = useOrderGroupTableFilters().filter(
+    (f) => f.key !== "customer_id"
+  );
   const columns = useColumns2();
-  const filters = useOrderTableFilters();
   const { table } = useDataTable({
-    data: orders ?? [],
+    data: rows,
     columns,
     enablePagination: true,
+    enableExpandableRows: true,
+    getSubRows: (row) => row.children,
+    getRowId: (row) => row.id,
     count,
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
@@ -523,35 +640,42 @@ var CustomerOrderSection = ({
         columns,
         table,
         pagination: true,
-        navigateTo: (row) => `/orders/${row.original.id}`,
-        filters,
+        navigateTo: (row) => row.original._type === "order" ? `/orders/${row.original.id}` : "",
+        onRowClick: (row) => {
+          if (row.getCanExpand()) {
+            row.toggleExpanded();
+          }
+        },
         count,
         isLoading,
         pageSize: PAGE_SIZE2,
+        filters,
         orderBy: [
           { key: "display_id", label: t2("orders.fields.displayId") },
           { key: "created_at", label: t2("fields.createdAt") },
           { key: "updated_at", label: t2("fields.updatedAt") }
         ],
+        defaultOrder: "-display_id",
         search: true,
         queryObject: raw,
         prefix: PREFIX2
       }
-    )
+    ),
+    /* @__PURE__ */ jsx5(DisplayExtensionZone4, { model: "customer", zone: "orders", data: customer })
   ] });
 };
-var CustomerOrderActions = ({ order }) => {
+var CustomerOrderActions = ({ orderId }) => {
   const { t: t2 } = useTranslation4();
   return /* @__PURE__ */ jsx5(
     ActionMenu,
     {
-      "data-testid": `customer-order-section-row-actions-${order.id}`,
+      "data-testid": `customer-order-section-row-actions-${orderId}`,
       groups: [
         {
           actions: [
             {
               label: t2("transferOwnership.label"),
-              to: `${order.id}/transfer`,
+              to: `${orderId}/transfer`,
               icon: /* @__PURE__ */ jsx5(ArrowPath, {})
             }
           ]
@@ -562,16 +686,108 @@ var CustomerOrderActions = ({ order }) => {
 };
 var columnHelper2 = createColumnHelper2();
 var useColumns2 = () => {
-  const base = useOrderTableColumns({ exclude: ["customer"] });
+  const { t: t2 } = useTranslation4();
   return useMemo2(
     () => [
-      ...base,
+      columnHelper2.accessor("display_id", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("orders.fields.groupId") }),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "order") {
+            return null;
+          }
+          const expandHandler = row.getToggleExpandedHandler();
+          return /* @__PURE__ */ jsxs5("div", { className: "flex size-full items-center gap-x-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx5("div", { className: "flex size-7 items-center justify-center", children: row.getCanExpand() ? /* @__PURE__ */ jsx5(
+              IconButton,
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  expandHandler();
+                },
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-fg-subtle",
+                "data-testid": `customer-order-group-expand-${row.original.id}`,
+                children: /* @__PURE__ */ jsx5(
+                  TriangleRightMini,
+                  {
+                    className: clx2({
+                      "rotate-90 transition-transform will-change-transform": row.getIsExpanded()
+                    })
+                  }
+                )
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx5("span", { className: "truncate", children: getValue() })
+          ] });
+        }
+      }),
+      columnHelper2.accessor("order_ids", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("orders.fields.orderIds") }),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return /* @__PURE__ */ jsx5(TextCell, { text: getValue() });
+          }
+          return /* @__PURE__ */ jsx5(TextCell, { text: row.original.display_id });
+        }
+      }),
+      columnHelper2.accessor("store", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("fields.store") }),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx5(TextCell, { text: getValue() })
+      }),
+      columnHelper2.accessor("created_at", {
+        header: () => /* @__PURE__ */ jsx5(DateHeader, {}),
+        cell: ({ getValue }) => /* @__PURE__ */ jsx5(DateCell, { date: getValue() })
+      }),
+      columnHelper2.accessor("payment_status", {
+        header: () => /* @__PURE__ */ jsx5(PaymentStatusHeader, {}),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return null;
+          }
+          const status = getValue();
+          if (!status) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(PaymentStatusCell, { status });
+        }
+      }),
+      columnHelper2.accessor("fulfillment_status", {
+        header: () => /* @__PURE__ */ jsx5(FulfillmentStatusHeader, {}),
+        cell: ({ row, getValue }) => {
+          if (row.original._type === "group") {
+            return null;
+          }
+          const status = getValue();
+          if (!status) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(FulfillmentStatusCell, { status });
+        }
+      }),
+      columnHelper2.accessor("total", {
+        header: () => /* @__PURE__ */ jsx5(TextHeader, { text: t2("fields.total") }),
+        cell: ({ row, getValue }) => {
+          const total = getValue();
+          if (total == null) {
+            return "-";
+          }
+          return /* @__PURE__ */ jsx5(
+            TextCell,
+            {
+              text: getStylizedAmount(total, row.original.currency_code)
+            }
+          );
+        }
+      }),
       columnHelper2.display({
         id: "actions",
-        cell: ({ row }) => /* @__PURE__ */ jsx5(CustomerOrderActions, { order: row.original })
+        cell: ({ row }) => row.original._type === "order" ? /* @__PURE__ */ jsx5(CustomerOrderActions, { orderId: row.original.id }) : null
       })
     ],
-    [base]
+    [t2]
   );
 };
 
@@ -580,11 +796,10 @@ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const { id } = useParams();
   const initialData = useLoaderData();
-  const { customer, isLoading, isError, error } = useCustomer(
-    id,
-    { fields: "+*addresses" },
-    { initialData }
-  );
+  const query = useLinkQuery("customer", "+*addresses");
+  const { customer, isLoading, isError, error } = useCustomer(id, query, {
+    initialData
+  });
   if (isLoading || !customer) {
     return /* @__PURE__ */ jsx6(SingleColumnPageSkeleton, { sections: 2, showJSON: true, showMetadata: true });
   }
@@ -592,12 +807,12 @@ var Root = ({ children }) => {
     throw error;
   }
   return Children.count(children) > 0 ? /* @__PURE__ */ jsx6(TwoColumnPage, { data: customer, hasOutlet: true, showJSON: true, showMetadata: true, children }) : /* @__PURE__ */ jsxs6(TwoColumnPage, { data: customer, hasOutlet: true, showJSON: true, showMetadata: true, children: [
-    /* @__PURE__ */ jsxs6(TwoColumnPage.Main, { children: [
+    /* @__PURE__ */ jsx6(TwoColumnPage.Main, { children: /* @__PURE__ */ jsxs6(WidgetZone, { id: "customers.detail.main", data: customer, children: [
       /* @__PURE__ */ jsx6(CustomerGeneralSection, { customer }),
       /* @__PURE__ */ jsx6(CustomerOrderSection, { customer }),
       /* @__PURE__ */ jsx6(CustomerGroupSection, { customer })
-    ] }),
-    /* @__PURE__ */ jsx6(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx6(CustomerAddressSection, { customer }) })
+    ] }) }),
+    /* @__PURE__ */ jsx6(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx6(WidgetZone, { id: "customers.detail.side", data: customer, children: /* @__PURE__ */ jsx6(CustomerAddressSection, { customer }) }) })
   ] });
 };
 var CustomerDetailPage = Object.assign(Root, {