@medusajs/dashboard 3.0.0-preview-20250211091350 → 3.0.0-preview-20250406180144

package/dist/{customer-detail-MWT2NNQK.mjs → customer-detail-HJPJLMMO.mjs}

@@ -1,10 +1,16 @@
 import {
   useCustomerGroupTableColumns
 } from "./chunk-ZJRFL6ZN.mjs";
+import {
+  useCustomerGroupTableQuery
+} from "./chunk-MOSRJHJ3.mjs";
 import {
   useOrderTableColumns
-} from "./chunk-3OJ4LCJL.mjs";
-import "./chunk-B4FQDBC3.mjs";
+} from "./chunk-KHN4RXLS.mjs";
+import {
+  useOrderTableQuery
+} from "./chunk-XMAWMECC.mjs";
+import "./chunk-PW2G3HGL.mjs";
 import "./chunk-NNBHHXXN.mjs";
 import "./chunk-7DXVXBSA.mjs";
 import "./chunk-PDWBYQOW.mjs";
@@ -15,28 +21,29 @@ import "./chunk-P3UUX2T6.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-RAKBTSZ7.mjs";
+} from "./chunk-GIQRSI5I.mjs";
 import "./chunk-YEDAFXMB.mjs";
 import "./chunk-AOFGTNG6.mjs";
-import "./chunk-WX2SMNCD.mjs";
-import "./chunk-MWVM4TYO.mjs";
 import {
-  useCustomerGroupTableQuery
-} from "./chunk-MOSRJHJ3.mjs";
+  NoRecords
+} from "./chunk-EMIHDNB7.mjs";
+import "./chunk-MWVM4TYO.mjs";
 import {
   useCustomerGroupTableFilters
 } from "./chunk-DLZWPHHO.mjs";
-import {
-  useOrderTableQuery
-} from "./chunk-XMAWMECC.mjs";
 import {
   useOrderTableFilters
-} from "./chunk-MRJ6KQAL.mjs";
-import "./chunk-JKKJMCX3.mjs";
+} from "./chunk-FVK4ZYYM.mjs";
+import "./chunk-PEGJVODH.mjs";
 import "./chunk-M3VFKDXJ.mjs";
 import {
-  SingleColumnPage
+  TwoColumnPage
 } from "./chunk-2RQLKDBF.mjs";
+import "./chunk-C76H5USB.mjs";
+import "./chunk-WL7NJCWV.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
 import {
   SingleColumnPageSkeleton
 } from "./chunk-LPEUYMRK.mjs";
@@ -44,58 +51,52 @@ import {
   ActionMenu
 } from "./chunk-3NJTXRIY.mjs";
 import "./chunk-OC7BQLYI.mjs";
-import "./chunk-C76H5USB.mjs";
-import "./chunk-BKWQ2FHJ.mjs";
-import "./chunk-YXEAWUSX.mjs";
-import "./chunk-QE3BG56P.mjs";
-import "./chunk-TXPNGFWJ.mjs";
-import "./chunk-5OOAHPXU.mjs";
-import "./chunk-VJRTPNEA.mjs";
-import "./chunk-S4HBRQEC.mjs";
-import "./chunk-6SDR2EUC.mjs";
-import "./chunk-SFPKA7H3.mjs";
-import "./chunk-GVRV2SOJ.mjs";
-import "./chunk-O3US4QMC.mjs";
-import "./chunk-NAC6TXKN.mjs";
-import "./chunk-OCNMY23F.mjs";
-import "./chunk-ZMMQPAR2.mjs";
-import "./chunk-GT4RPCDE.mjs";
-import "./chunk-JJ3UWAUO.mjs";
+import "./chunk-3KLERXD7.mjs";
+import "./chunk-CLRTJ6DI.mjs";
+import "./chunk-KOSCMAIC.mjs";
+import "./chunk-UAZEQNCO.mjs";
+import "./chunk-LDJKJLBJ.mjs";
+import "./chunk-B4GODIOW.mjs";
+import "./chunk-F6IJV2I2.mjs";
+import "./chunk-QTCZFYFH.mjs";
+import "./chunk-ENV6YVOM.mjs";
+import "./chunk-PIR2H25N.mjs";
+import "./chunk-RLY2SL5E.mjs";
+import "./chunk-C5LYZZZ5.mjs";
+import "./chunk-2ZKVRTBW.mjs";
+import "./chunk-4GJJIXM6.mjs";
+import "./chunk-YS65UGPC.mjs";
 import {
   useBatchCustomerCustomerGroups,
   useCustomer,
   useCustomerGroups,
   useDeleteCustomer,
+  useDeleteCustomerAddress,
   useRemoveCustomersFromGroup
-} from "./chunk-S3MWIWV4.mjs";
-import "./chunk-NDQ77BA4.mjs";
-import "./chunk-SWYL3QGB.mjs";
-import "./chunk-BF3VCHXD.mjs";
-import "./chunk-QDC5CTTV.mjs";
+} from "./chunk-F6PXCY3N.mjs";
+import "./chunk-3OHH43G6.mjs";
+import "./chunk-G2H6MAK7.mjs";
+import "./chunk-GRT22PE5.mjs";
+import "./chunk-32IQRUVY.mjs";
 import {
   useOrders
-} from "./chunk-IUIZA5UF.mjs";
-import "./chunk-KLXXECPX.mjs";
-import "./chunk-UQUJ5W2Q.mjs";
-import "./chunk-WHZIEWSQ.mjs";
-import "./chunk-23LLRBGF.mjs";
-import "./chunk-SY6HAFQV.mjs";
-import "./chunk-HYULYW73.mjs";
-import {
-  useDashboardExtension
-} from "./chunk-VIJAVLIU.mjs";
-import "./chunk-ONB3JEHR.mjs";
-import "./chunk-53IEL2PE.mjs";
+} from "./chunk-RWU2ZKWZ.mjs";
+import "./chunk-FVC7M755.mjs";
+import "./chunk-ZJ3OFMHB.mjs";
+import "./chunk-PNU5HPGY.mjs";
+import "./chunk-V2LANK5S.mjs";
+import "./chunk-QZ6PT4QV.mjs";
+import "./chunk-QL4XKIVL.mjs";
 import {
   productsQueryKeys
-} from "./chunk-5ZZZZK7A.mjs";
+} from "./chunk-6I62UDJA.mjs";
 import {
   queryClient
 } from "./chunk-FXYH54JP.mjs";
 import "./chunk-774WSTCC.mjs";
 import {
   sdk
-} from "./chunk-WAYDNCEG.mjs";
+} from "./chunk-DEQUVHHE.mjs";
 import "./chunk-GH77ZQI2.mjs";
 
 // src/routes/customers/customer-detail/breadcrumb.tsx
@@ -117,25 +118,132 @@ var CustomerDetailBreadcrumb = (props) => {
 // src/routes/customers/customer-detail/customer-detail.tsx
 import { useLoaderData, useParams } from "react-router-dom";
 
-// src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
-import { PencilSquare, Trash } from "@medusajs/icons";
-import {
-  Container,
-  Heading,
-  StatusBadge,
-  Text,
-  toast,
-  usePrompt
-} from "@medusajs/ui";
+// src/routes/customers/customer-detail/components/customer-address-section/customer-address-section.tsx
+import { clx, Container, Heading, toast, usePrompt } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { Trash } from "@medusajs/icons";
+import { Link, useNavigate } from "react-router-dom";
+
+// src/components/common/listicle/listicle.tsx
+import { Text } from "@medusajs/ui";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var CustomerGeneralSection = ({
+var Listicle = ({
+  labelKey,
+  descriptionKey,
+  children
+}) => {
+  return /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-2 px-2 pb-2", children: /* @__PURE__ */ jsx2("div", { className: "shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: labelKey }),
+      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: descriptionKey })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "flex size-7 items-center justify-center", children })
+  ] }) }) });
+};
+
+// src/routes/customers/customer-detail/components/customer-address-section/customer-address-section.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CustomerAddressSection = ({
   customer
 }) => {
   const { t: t2 } = useTranslation();
   const prompt = usePrompt();
   const navigate = useNavigate();
+  const { mutateAsync: deleteAddress } = useDeleteCustomerAddress(customer.id);
+  const addresses = customer.addresses ?? [];
+  const handleDelete = async (address) => {
+    const confirm = await prompt({
+      title: t2("general.areYouSure"),
+      description: t2("general.areYouSureDescription", {
+        entity: t2("fields.address"),
+        title: address.address_name ?? "n/a"
+      }),
+      verificationInstruction: t2("general.typeToConfirm"),
+      verificationText: address.address_name ?? "address",
+      confirmText: t2("actions.delete"),
+      cancelText: t2("actions.cancel")
+    });
+    if (!confirm) {
+      return;
+    }
+    await deleteAddress(address.id, {
+      onSuccess: () => {
+        toast.success(
+          t2("general.success", { name: address.address_name ?? "address" })
+        );
+        navigate(`/customers/${customer.id}`, { replace: true });
+      },
+      onError: (e) => {
+        toast.error(e.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs2(Container, { className: "p-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h2", children: t2("addresses.title") }),
+      /* @__PURE__ */ jsx3(Link, { to: `create-address`, className: "text-ui-fg-muted text-xs", children: "Add" })
+    ] }),
+    addresses.length === 0 && /* @__PURE__ */ jsx3(
+      NoRecords,
+      {
+        className: clx({
+          "flex h-full flex-col overflow-hidden border-t p-6": true
+        }),
+        icon: null,
+        title: t2("general.noRecordsTitle"),
+        message: t2("general.noRecordsMessage")
+      }
+    ),
+    addresses.map((address) => {
+      return /* @__PURE__ */ jsx3(
+        Listicle,
+        {
+          labelKey: address.address_name ?? "n/a",
+          descriptionKey: [address.address_1, address.address_2].join(" "),
+          children: /* @__PURE__ */ jsx3(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx3(Trash, {}),
+                      label: t2("actions.delete"),
+                      onClick: async () => {
+                        await handleDelete(address);
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          )
+        },
+        address.id
+      );
+    })
+  ] });
+};
+
+// src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
+import { PencilSquare, Trash as Trash2 } from "@medusajs/icons";
+import {
+  Container as Container2,
+  Heading as Heading2,
+  StatusBadge,
+  Text as Text2,
+  toast as toast2,
+  usePrompt as usePrompt2
+} from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useNavigate as useNavigate2 } from "react-router-dom";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CustomerGeneralSection = ({
+  customer
+}) => {
+  const { t: t2 } = useTranslation2();
+  const prompt = usePrompt2();
+  const navigate = useNavigate2();
   const { mutateAsync } = useDeleteCustomer(customer.id);
   const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
   const statusColor = customer.has_account ? "green" : "orange";
@@ -156,7 +264,7 @@ var CustomerGeneralSection = ({
     }
     await mutateAsync(void 0, {
       onSuccess: () => {
-        toast.success(
+        toast2.success(
           t2("customers.delete.successToast", {
             email: customer.email
           })
@@ -164,16 +272,16 @@ var CustomerGeneralSection = ({
         navigate("/customers", { replace: true });
       },
       onError: (error) => {
-        toast.error(error.message);
+        toast2.error(error.message);
       }
     });
   };
-  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Heading, { children: customer.email }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-        /* @__PURE__ */ jsx2(StatusBadge, { color: statusColor, children: statusText }),
-        /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3(Container2, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx4(Heading2, { children: customer.email }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx4(StatusBadge, { color: statusColor, children: statusText }),
+        /* @__PURE__ */ jsx4(
           ActionMenu,
           {
             groups: [
@@ -181,7 +289,7 @@ var CustomerGeneralSection = ({
                 actions: [
                   {
                     label: t2("actions.edit"),
-                    icon: /* @__PURE__ */ jsx2(PencilSquare, {}),
+                    icon: /* @__PURE__ */ jsx4(PencilSquare, {}),
                     to: "edit"
                   }
                 ]
@@ -190,7 +298,7 @@ var CustomerGeneralSection = ({
                 actions: [
                   {
                     label: t2("actions.delete"),
-                    icon: /* @__PURE__ */ jsx2(Trash, {}),
+                    icon: /* @__PURE__ */ jsx4(Trash2, {}),
                     onClick: handleDelete
                   }
                 ]
@@ -200,17 +308,17 @@ var CustomerGeneralSection = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t2("fields.name") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: name || "-" })
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", weight: "plus", children: t2("fields.name") }),
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: name || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t2("fields.company") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: customer.company_name || "-" })
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", weight: "plus", children: t2("fields.company") }),
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: customer.company_name || "-" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t2("fields.phone") }),
-      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: customer.phone || "-" })
+    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", weight: "plus", children: t2("fields.phone") }),
+      /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: customer.phone || "-" })
     ] })
   ] });
 };
@@ -219,25 +327,25 @@ var CustomerGeneralSection = ({
 import {
   Button,
   Checkbox,
-  Container as Container2,
-  Heading as Heading2,
-  toast as toast2,
-  usePrompt as usePrompt2
+  Container as Container3,
+  Heading as Heading3,
+  toast as toast3,
+  usePrompt as usePrompt3
 } from "@medusajs/ui";
 import { createColumnHelper } from "@tanstack/react-table";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare2, Trash as Trash3 } from "@medusajs/icons";
 import { keepPreviousData } from "@tanstack/react-query";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { Link } from "react-router-dom";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link as Link2 } from "react-router-dom";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "cusgr";
 var CustomerGroupSection = ({
   customer
 }) => {
-  const prompt = usePrompt2();
+  const prompt = usePrompt3();
   const [rowSelection, setRowSelection] = useState({});
   const { raw, searchParams } = useCustomerGroupTableQuery({
     pageSize: PAGE_SIZE,
@@ -287,14 +395,14 @@ var CustomerGroupSection = ({
       { remove: customerGroupIds },
       {
         onSuccess: () => {
-          toast2.success(
+          toast3.success(
             t("customers.groups.removed.success", {
               groups: customer_groups.filter((cg) => customerGroupIds.includes(cg.id)).map((cg) => cg?.name)
             })
           );
         },
         onError: (error2) => {
-          toast2.error(error2.message);
+          toast3.error(error2.message);
         }
       }
     );
@@ -302,12 +410,12 @@ var CustomerGroupSection = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx3(Heading2, { level: "h2", children: t("customerGroups.domain") }),
-      /* @__PURE__ */ jsx3(Link, { to: `/customers/${customer.id}/add-customer-groups`, children: /* @__PURE__ */ jsx3(Button, { variant: "secondary", size: "small", children: t("general.add") }) })
+  return /* @__PURE__ */ jsxs4(Container3, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Heading3, { level: "h2", children: t("customerGroups.domain") }),
+      /* @__PURE__ */ jsx5(Link2, { to: `/customers/${customer.id}/add-customer-groups`, children: /* @__PURE__ */ jsx5(Button, { variant: "secondary", size: "small", children: t("general.add") }) })
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5(
       _DataTable,
       {
         table,
@@ -344,8 +452,8 @@ var CustomerGroupRowActions = ({
   group,
   customerId
 }) => {
-  const prompt = usePrompt2();
-  const { t: t2 } = useTranslation2();
+  const prompt = usePrompt3();
+  const { t: t2 } = useTranslation3();
   const { mutateAsync } = useRemoveCustomersFromGroup(group.id);
   const onRemove = async () => {
     const res = await prompt({
@@ -361,11 +469,11 @@ var CustomerGroupRowActions = ({
     }
     await mutateAsync([customerId], {
       onError: (error) => {
-        toast2.error(error.message);
+        toast3.error(error.message);
       }
     });
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     ActionMenu,
     {
       groups: [
@@ -373,13 +481,13 @@ var CustomerGroupRowActions = ({
           actions: [
             {
               label: t2("actions.edit"),
-              icon: /* @__PURE__ */ jsx3(PencilSquare2, {}),
+              icon: /* @__PURE__ */ jsx5(PencilSquare2, {}),
               to: `/customer-groups/${group.id}/edit`
             },
             {
               label: t2("actions.remove"),
               onClick: onRemove,
-              icon: /* @__PURE__ */ jsx3(Trash2, {})
+              icon: /* @__PURE__ */ jsx5(Trash3, {})
             }
           ]
         }
@@ -395,7 +503,7 @@ var useColumns = (customerId) => {
       columnHelper.display({
         id: "select",
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx5(
             Checkbox,
             {
               checked: table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
@@ -404,7 +512,7 @@ var useColumns = (customerId) => {
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsx5(
             Checkbox,
             {
               checked: row.getIsSelected(),
@@ -419,7 +527,7 @@ var useColumns = (customerId) => {
       ...columns,
       columnHelper.display({
         id: "actions",
-        cell: ({ row }) => /* @__PURE__ */ jsx3(
+        cell: ({ row }) => /* @__PURE__ */ jsx5(
           CustomerGroupRowActions,
           {
             group: row.original,
@@ -434,12 +542,12 @@ var useColumns = (customerId) => {
 
 // src/routes/customers/customer-detail/components/customer-order-section/customer-order-section.tsx
 import { ArrowPath } from "@medusajs/icons";
-import { Container as Container3, Heading as Heading3 } from "@medusajs/ui";
+import { Container as Container4, Heading as Heading4 } 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 useTranslation3 } from "react-i18next";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PREFIX2 = "cusord";
 var PAGE_SIZE2 = 10;
 var DEFAULT_RELATIONS = "*customer,*items,*sales_channel";
@@ -447,7 +555,7 @@ var DEFAULT_FIELDS = "id,status,display_id,created_at,email,fulfillment_status,p
 var CustomerOrderSection = ({
   customer
 }) => {
-  const { t: t2 } = useTranslation3();
+  const { t: t2 } = useTranslation4();
   const { searchParams, raw } = useOrderTableQuery({
     pageSize: PAGE_SIZE2,
     prefix: PREFIX2
@@ -475,9 +583,9 @@ var CustomerOrderSection = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx4(Heading3, { level: "h2", children: t2("orders.domain") }) }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Container4, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx6(Heading4, { level: "h2", children: t2("orders.domain") }) }),
+    /* @__PURE__ */ jsx6(
       _DataTable,
       {
         columns,
@@ -501,8 +609,8 @@ var CustomerOrderSection = ({
   ] });
 };
 var CustomerOrderActions = ({ order }) => {
-  const { t: t2 } = useTranslation3();
-  return /* @__PURE__ */ jsx4(
+  const { t: t2 } = useTranslation4();
+  return /* @__PURE__ */ jsx6(
     ActionMenu,
     {
       groups: [
@@ -511,7 +619,7 @@ var CustomerOrderActions = ({ order }) => {
             {
               label: t2("transferOwnership.label"),
               to: `${order.id}/transfer`,
-              icon: /* @__PURE__ */ jsx4(ArrowPath, {})
+              icon: /* @__PURE__ */ jsx6(ArrowPath, {})
             }
           ]
         }
@@ -527,7 +635,7 @@ var useColumns2 = () => {
       ...base,
       columnHelper2.display({
         id: "actions",
-        cell: ({ row }) => /* @__PURE__ */ jsx4(CustomerOrderActions, { order: row.original })
+        cell: ({ row }) => /* @__PURE__ */ jsx6(CustomerOrderActions, { order: row.original })
       })
     ],
     [base]
@@ -535,35 +643,42 @@ var useColumns2 = () => {
 };
 
 // src/routes/customers/customer-detail/customer-detail.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var CustomerDetail = () => {
   const { id } = useParams();
   const initialData = useLoaderData();
-  const { customer, isLoading, isError, error } = useCustomer(id, void 0, {
-    initialData
-  });
-  const { getWidgets } = useDashboardExtension();
+  const { customer, isLoading, isError, error } = useCustomer(
+    id,
+    { fields: "+*addresses" },
+    { initialData }
+  );
+  const { getWidgets } = useExtension();
   if (isLoading || !customer) {
-    return /* @__PURE__ */ jsx5(SingleColumnPageSkeleton, { sections: 2, showJSON: true, showMetadata: true });
+    return /* @__PURE__ */ jsx7(SingleColumnPageSkeleton, { sections: 2, showJSON: true, showMetadata: true });
   }
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs4(
-    SingleColumnPage,
+  return /* @__PURE__ */ jsxs6(
+    TwoColumnPage,
     {
       widgets: {
         before: getWidgets("customer.details.before"),
-        after: getWidgets("customer.details.after")
+        after: getWidgets("customer.details.after"),
+        sideAfter: getWidgets("customer.details.side.after"),
+        sideBefore: getWidgets("customer.details.side.before")
       },
       data: customer,
       hasOutlet: true,
       showJSON: true,
       showMetadata: true,
       children: [
-        /* @__PURE__ */ jsx5(CustomerGeneralSection, { customer }),
-        /* @__PURE__ */ jsx5(CustomerOrderSection, { customer }),
-        /* @__PURE__ */ jsx5(CustomerGroupSection, { customer })
+        /* @__PURE__ */ jsxs6(TwoColumnPage.Main, { children: [
+          /* @__PURE__ */ jsx7(CustomerGeneralSection, { customer }),
+          /* @__PURE__ */ jsx7(CustomerOrderSection, { customer }),
+          /* @__PURE__ */ jsx7(CustomerGroupSection, { customer })
+        ] }),
+        /* @__PURE__ */ jsx7(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx7(CustomerAddressSection, { customer }) })
       ]
     }
   );
@@ -572,7 +687,9 @@ var CustomerDetail = () => {
 // src/routes/customers/customer-detail/loader.ts
 var customerDetailQuery = (id) => ({
   queryKey: productsQueryKeys.detail(id),
-  queryFn: async () => sdk.admin.customer.retrieve(id)
+  queryFn: async () => sdk.admin.customer.retrieve(id, {
+    fields: "+*addresses"
+  })
 });
 var customerLoader = async ({ params }) => {
   const id = params.id;

package/dist/{customer-edit-566R4FAT.mjs → customer-edit-I4K3LK66.mjs}

@@ -1,22 +1,23 @@
-import {
-  ConditionalTooltip
-} from "./chunk-OC7BQLYI.mjs";
-import {
-  useCustomer,
-  useUpdateCustomer
-} from "./chunk-S3MWIWV4.mjs";
 import {
   KeyboundForm
 } from "./chunk-6HTZNHPT.mjs";
 import {
   RouteDrawer,
   useRouteModal
-} from "./chunk-AYRG2MQL.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
+} from "./chunk-ZCO6EK4W.mjs";
+import {
+  ConditionalTooltip
+} from "./chunk-OC7BQLYI.mjs";
 import {
   Form
-} from "./chunk-WAYDNCEG.mjs";
+} from "./chunk-OBQI23QM.mjs";
+import {
+  useCustomer,
+  useUpdateCustomer
+} from "./chunk-F6PXCY3N.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DEQUVHHE.mjs";
 import "./chunk-GH77ZQI2.mjs";
 
 // src/routes/customers/customer-edit/customer-edit.tsx