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

package/dist/chunk-K2JORJRZ.js

@@ -0,0 +1,281 @@
+import {
+  getLocaleAmount
+} from "./chunk-PXYDR7WQ.js";
+import {
+  PlaceholderCell
+} from "./chunk-PHOCVOZ5.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-6ZVV2XHU.js";
+import {
+  NoRecords
+} from "./chunk-PAYQJPGK.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+
+// src/pages/offers/[id]/_components/offer-inventory-section.tsx
+import { Buildings } from "@medusajs/icons";
+import { Container, Heading, Text } from "@medusajs/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var PAGE_SIZE = 20;
+var computeAvailable = (row) => {
+  const levels = row.location_levels ?? [];
+  let quantity = 0;
+  let locations = 0;
+  for (const level of levels) {
+    if (level.available_quantity != null) {
+      quantity += level.available_quantity;
+    } else {
+      const stocked = level.stocked_quantity ?? 0;
+      const reserved = level.reserved_quantity ?? 0;
+      quantity += Math.max(0, stocked - reserved);
+    }
+    locations += 1;
+  }
+  return { quantity, locations };
+};
+var InventoryActions = ({ item }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(Buildings, {}),
+              label: t("offers.detail.goToInventoryItem"),
+              to: `/inventory/${item.id}`
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+var OfferInventorySection = ({ offer }) => {
+  const { t } = useTranslation();
+  const inventoryItems = useMemo(() => {
+    const links = offer.inventory_item_link ?? [];
+    return links.map((link) => {
+      const item = link.inventory_item;
+      if (!item?.id) return null;
+      return {
+        id: item.id,
+        title: item.title,
+        sku: item.sku,
+        required_quantity: link.required_quantity,
+        location_levels: item.location_levels
+      };
+    }).filter((x) => x !== null);
+  }, [offer.inventory_item_link]);
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => {
+          const title = getValue();
+          if (!title) return /* @__PURE__ */ jsx(PlaceholderCell, {});
+          return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: title }) });
+        }
+      }),
+      columnHelper.accessor("sku", {
+        header: t("offers.fields.sku"),
+        cell: ({ getValue }) => {
+          const sku = getValue();
+          if (!sku) return /* @__PURE__ */ jsx(PlaceholderCell, {});
+          return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: sku }) });
+        }
+      }),
+      columnHelper.accessor("required_quantity", {
+        header: t("offers.fields.requiredQuantity"),
+        cell: ({ getValue }) => {
+          const value = getValue();
+          if (value == null) return /* @__PURE__ */ jsx(PlaceholderCell, {});
+          return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: value }) });
+        }
+      }),
+      columnHelper.display({
+        id: "inventory",
+        header: t("labels.available"),
+        cell: ({ row }) => {
+          const { quantity, locations } = computeAvailable(row.original);
+          if (locations === 0) return /* @__PURE__ */ jsx(PlaceholderCell, {});
+          const text = `${quantity} available at ${locations} ${locations === 1 ? "location" : "locations"}`;
+          return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "small",
+              className: quantity === 0 ? "text-ui-fg-error truncate" : "truncate",
+              children: text
+            }
+          ) });
+        }
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx(InventoryActions, { item: row.original })
+      })
+    ],
+    [t]
+  );
+  const { table } = useDataTable({
+    data: inventoryItems,
+    columns,
+    count: inventoryItems.length,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE
+  });
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      className: "divide-y p-0",
+      "data-testid": "offer-detail-inventory-section",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("offers.detail.inventoryItems") }) }),
+        inventoryItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-6 py-8", children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("offers.detail.noInventoryItems") }) }) : /* @__PURE__ */ jsx(
+          _DataTable,
+          {
+            table,
+            columns,
+            pageSize: PAGE_SIZE,
+            count: inventoryItems.length,
+            navigateTo: (row) => `/inventory/${row.id}`
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/pages/offers/[id]/_components/offer-pricing-section.tsx
+import { Button, Container as Container2, Heading as Heading2 } from "@medusajs/ui";
+import { useState } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_STEP = 3;
+var isBaseRow = (price) => {
+  const rules = price.price_rules ?? [];
+  const extraRules = rules.filter((r) => r.attribute !== "offer_id");
+  return extraRules.length === 0;
+};
+var OfferPricingSection = ({ offer }) => {
+  const { t } = useTranslation2();
+  const prices = (offer.prices ?? []).filter(isBaseRow).sort(
+    (a, b) => (a.currency_code ?? "").localeCompare(b.currency_code ?? "")
+  );
+  const hasPrices = prices.length > 0;
+  const [pageSize, setPageSize] = useState(PAGE_STEP);
+  const displayPrices = prices.slice(0, pageSize);
+  return /* @__PURE__ */ jsxs2(
+    Container2,
+    {
+      className: "flex flex-col divide-y p-0",
+      "data-testid": "offer-detail-prices-section",
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx2(Heading2, { level: "h2", children: t("labels.prices") }) }),
+        !hasPrices && /* @__PURE__ */ jsx2(NoRecords, { className: "h-60" }),
+        displayPrices.map((price) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "txt-small text-ui-fg-subtle flex justify-between px-6 py-4",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "font-medium", children: price.currency_code.toUpperCase() }),
+              /* @__PURE__ */ jsx2("span", { children: getLocaleAmount(price.amount, price.currency_code) })
+            ]
+          },
+          price.id ?? `${price.currency_code}-${price.amount}`
+        )),
+        hasPrices && prices.length > PAGE_STEP && /* @__PURE__ */ jsx2("div", { className: "txt-small text-ui-fg-subtle flex items-center justify-end px-6 py-4", children: /* @__PURE__ */ jsx2(
+          Button,
+          {
+            onClick: () => setPageSize((p) => p + PAGE_STEP),
+            disabled: pageSize >= prices.length,
+            className: "-mr-3 text-blue-500",
+            variant: "transparent",
+            children: t("actions.showMore")
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/pages/offers/[id]/_components/offer-store-sidebar.tsx
+import { TriangleRightMini } from "@medusajs/icons";
+import { Avatar, Container as Container3, Heading as Heading3 } from "@medusajs/ui";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var OfferStoreSidebar = ({ seller }) => {
+  const { t } = useTranslation3();
+  if (!seller?.id) {
+    return null;
+  }
+  const name = seller.name ?? seller.id;
+  const handle = seller.handle ?? "";
+  const link = `/stores/${seller.id}`;
+  const Inner = /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2 transition-colors",
+      "data-testid": "offer-detail-store-sidebar",
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx3(
+          Avatar,
+          {
+            size: "small",
+            fallback: (name?.[0] ?? "?").toUpperCase(),
+            "data-testid": "offer-detail-store-avatar"
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: "text-ui-fg-base font-medium",
+              "data-testid": "offer-detail-store-name",
+              children: name
+            }
+          ),
+          handle && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: "text-ui-fg-subtle",
+              "data-testid": "offer-detail-store-handle",
+              children: handle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "size-7 flex items-center justify-center", children: /* @__PURE__ */ jsx3(TriangleRightMini, { className: "text-ui-fg-muted rtl:rotate-180" }) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs3(Container3, { className: "p-0", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx3(Heading3, { level: "h2", children: t("offers.detail.store") }) }),
+    /* @__PURE__ */ jsx3("div", { className: "txt-small flex flex-col gap-2 px-2 pb-2", children: /* @__PURE__ */ jsx3(
+      Link,
+      {
+        to: link,
+        className: "outline-none focus-within:shadow-borders-interactive-with-focus rounded-md [&:hover>div]:bg-ui-bg-component-hover",
+        "data-testid": "offer-detail-store-link",
+        children: Inner
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(DisplayExtensionZone, { model: "offer", zone: "store", data: seller })
+  ] });
+};
+
+export {
+  OfferInventorySection,
+  OfferPricingSection,
+  OfferStoreSidebar
+};

package/dist/{chunk-33BERJSG.js → chunk-K6RZE3F7.js}

@@ -1,6 +1,6 @@
 import {
   useDeleteProductType
-} from "./chunk-46M463BR.js";
+} from "./chunk-EWFOFSF7.js";
 
 // src/pages/product-types/common/hooks/use-delete-product-type-action.tsx
 import { useNavigate } from "react-router-dom";

package/dist/{chunk-MFI5TG54.js → chunk-KA3BALYJ.js}

@@ -1,19 +1,19 @@
 import {
   useProductTableColumns
-} from "./chunk-6NDM5WGE.js";
+} from "./chunk-I5HY5Q3K.js";
 import {
   useProductTableFilters
-} from "./chunk-NMFVQDVF.js";
+} from "./chunk-APMBU7ZV.js";
 import {
   useProductTableQuery
-} from "./chunk-LYZDVZWA.js";
-import {
-  _DataTable,
-  useDataTable
-} from "./chunk-NQEXDLYH.js";
+} from "./chunk-5NSOIZFB.js";
 import {
   PRODUCT_IDS_KEY
 } from "./chunk-LO2ZWQGL.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-6ZVV2XHU.js";
 import {
   SingleColumnPage
 } from "./chunk-H6MYB7GB.js";
@@ -24,16 +24,27 @@ import {
   useBatchProducts,
   useDeleteProduct,
   useProducts
-} from "./chunk-ZRFWXNT3.js";
+} from "./chunk-MMKUMSZS.js";
 
 // src/pages/products/product-list/product-list.tsx
 import { Children as Children2 } from "react";
+import { WidgetZone } from "@mercurjs/dashboard-shared";
 
 // src/pages/products/product-list/components/product-list-table/product-list-table.tsx
 import { PencilSquare, Trash } from "@medusajs/icons";
-import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui";
+import {
+  Button,
+  Checkbox,
+  Container,
+  Heading,
+  toast,
+  usePrompt
+} from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
-import { createColumnHelper } from "@tanstack/react-table";
+import {
+  createColumnHelper
+} from "@tanstack/react-table";
+import { useExtendableTable } from "@mercurjs/dashboard-shared";
 import { useMemo, useState, Children } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, Outlet, useLoaderData, useNavigate } from "react-router-dom";
@@ -96,8 +107,12 @@ var ProductListDataTable = () => {
       placeholderData: keepPreviousData
     }
   );
-  const filters = useProductTableFilters();
-  const columns = useColumns();
+  const baseFilters = useProductTableFilters();
+  const { columns, filters: extFilters } = useColumns();
+  const filters = useMemo(
+    () => [...baseFilters, ...extFilters],
+    [baseFilters, extFilters]
+  );
   const { table } = useDataTable({
     data: products ?? [],
     columns,
@@ -132,6 +147,7 @@ var ProductListDataTable = () => {
         { key: "created_at", label: t("fields.createdAt") },
         { key: "updated_at", label: t("fields.updatedAt") }
       ],
+      defaultOrder: searchParams.order,
       commands: [
         {
           action: async (rowSelection) => {
@@ -258,9 +274,33 @@ var ProductActions = ({ product }) => {
 var columnHelper = createColumnHelper();
 var useColumns = () => {
   const base = useProductTableColumns();
+  const { columns: extended, filters } = useExtendableTable({
+    model: "product",
+    columns: base
+  });
   const columns = useMemo(
     () => [
-      ...base,
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+            onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+            "data-testid": "products-table-header-select-checkbox"
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: row.getIsSelected(),
+            onCheckedChange: (value) => row.toggleSelected(!!value),
+            onClick: (e) => e.stopPropagation(),
+            "data-testid": `products-table-cell-${row.id}-select-checkbox`
+          }
+        )
+      }),
+      ...extended,
       columnHelper.display({
         id: "actions",
         header: () => /* @__PURE__ */ jsx(
@@ -276,15 +316,15 @@ var useColumns = () => {
         }
       })
     ],
-    [base]
+    [extended]
   );
-  return columns;
+  return { columns, filters };
 };
 
 // src/pages/products/product-list/product-list.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Root = ({ children }) => {
-  return /* @__PURE__ */ jsx2("div", { "data-testid": "products-page", children: /* @__PURE__ */ jsx2(SingleColumnPage, { children: Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx2(ProductListTable, {}) }) });
+  return /* @__PURE__ */ jsx2("div", { "data-testid": "products-page", children: /* @__PURE__ */ jsx2(SingleColumnPage, { children: /* @__PURE__ */ jsx2(WidgetZone, { id: "products.list", children: Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx2(ProductListTable, {}) }) }) });
 };
 var ProductListPage = Object.assign(Root, {
   Table: ProductListTable,

package/dist/{chunk-YGRTRAWX.js → chunk-KDE4HKH2.js}

@@ -135,6 +135,7 @@ var ChipInput = forwardRef(
             /* @__PURE__ */ jsx(
               "input",
               {
+                "aria-label": "Chip input",
                 className: clx(
                   "caret-ui-fg-base text-ui-fg-base txt-compact-small flex-1 appearance-none bg-transparent",
                   "disabled:text-ui-fg-disabled disabled:cursor-not-allowed",

package/dist/{chunk-VERWLDVW.js → chunk-KL4DBMVO.js}

@@ -1,6 +1,6 @@
 import {
   useDeleteProductTagAction
-} from "./chunk-TNNQPNXY.js";
+} from "./chunk-QE4R2KT3.js";
 import {
   useProductTagTableColumns
 } from "./chunk-5A4JNOK3.js";
@@ -9,23 +9,24 @@ import {
 } from "./chunk-KOURHC2N.js";
 import {
   useProductTagTableQuery
-} from "./chunk-WRVGLMRW.js";
+} from "./chunk-IJ2CSCLP.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-NQEXDLYH.js";
+} from "./chunk-6ZVV2XHU.js";
 import {
   SingleColumnPage
 } from "./chunk-H6MYB7GB.js";
 import {
   useProductTags
-} from "./chunk-46A3QXAL.js";
+} from "./chunk-ABS7HMLY.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 
 // src/pages/product-tags/product-tag-list/product-tag-list.tsx
 import { Children as Children3 } from "react";
+import { WidgetZone } from "@mercurjs/dashboard-shared";
 
 // src/pages/product-tags/product-tag-list/components/product-tag-list-view/product-tag-list-view.tsx
 import { Children as Children2 } from "react";
@@ -189,7 +190,7 @@ var ProductTagListView = ({
 // src/pages/product-tags/product-tag-list/product-tag-list.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Root = ({ children }) => {
-  return /* @__PURE__ */ jsx4(SingleColumnPage, { showMetadata: false, showJSON: false, hasOutlet: true, children: Children3.count(children) > 0 ? children : /* @__PURE__ */ jsx4(ProductTagListView, {}) });
+  return /* @__PURE__ */ jsx4(SingleColumnPage, { showMetadata: false, showJSON: false, hasOutlet: true, children: /* @__PURE__ */ jsx4(WidgetZone, { id: "product-tags.list", children: Children3.count(children) > 0 ? children : /* @__PURE__ */ jsx4(ProductTagListView, {}) }) });
 };
 var ProductTagListPage = Object.assign(Root, {
   Table: ProductTagListView,

package/dist/{chunk-EBQUMS7H.js → chunk-KQVRWXAL.js}

@@ -1,29 +1,29 @@
 import {
   usePromotionTableColumns,
   usePromotionTableQuery
-} from "./chunk-KTBL35I2.js";
+} from "./chunk-OAGTPKC5.js";
 import {
   usePromotionTableFilters
 } from "./chunk-S2WEYEQR.js";
 import {
   DateRangeDisplay
 } from "./chunk-RK5N3XIX.js";
-import {
-  _DataTable,
-  useDataTable
-} from "./chunk-NQEXDLYH.js";
 import {
   currencies
 } from "./chunk-IQPN4PZJ.js";
 import {
   TwoColumnPage
 } from "./chunk-E74OUNA3.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-6ZVV2XHU.js";
 import {
   useAddOrRemoveCampaignPromotions,
   useCampaign,
   useDeleteCampaign,
   usePromotions
-} from "./chunk-ZN7LWXVC.js";
+} from "./chunk-MTHPNKQ4.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
@@ -34,6 +34,7 @@ import {
 // src/pages/campaigns/campaign-detail/campaign-detail.tsx
 import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
+import { WidgetZone, useLinkQuery } from "@mercurjs/dashboard-shared";
 
 // src/pages/campaigns/campaign-detail/components/campaign-budget/campaign-budget.tsx
 import { ChartPie, PencilSquare } from "@medusajs/icons";
@@ -120,6 +121,7 @@ var CampaignBudget = ({ campaign }) => {
 import { Container as Container2, Heading as Heading2 } from "@medusajs/ui";
 import { PencilSquare as PencilSquare2 } from "@medusajs/icons";
 import { useTranslation as useTranslation2 } from "react-i18next";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CampaignConfigurationSection = ({
   campaign
@@ -154,6 +156,14 @@ var CampaignConfigurationSection = ({
         showTime: true,
         "data-testid": "campaign-configuration-section-date-range"
       }
+    ),
+    /* @__PURE__ */ jsx2(
+      DisplayExtensionZone,
+      {
+        model: "campaign",
+        zone: "configuration",
+        data: campaign
+      }
     )
   ] });
 };
@@ -171,6 +181,7 @@ import {
 } from "@medusajs/ui";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
 
 // src/pages/campaigns/common/utils/campaign-status.ts
 import { isAfter, isBefore } from "date-fns";
@@ -202,6 +213,13 @@ var statusColor = (status) => {
 
 // src/pages/campaigns/campaign-detail/components/campaign-general-section/campaign-general-section.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GENERAL_FIELD_IDS = [
+  "name",
+  "status",
+  "campaign_identifier",
+  "description",
+  "currency_code"
+];
 var CampaignGeneralSection = ({
   campaign
 }) => {
@@ -238,9 +256,9 @@ var CampaignGeneralSection = ({
   const status = campaignStatus(campaign);
   return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", "data-testid": "campaign-general-section-container", children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "campaign-general-section-header", children: [
-      /* @__PURE__ */ jsx3(Heading3, { "data-testid": "campaign-general-section-name", children: campaign.name }),
+      /* @__PURE__ */ jsx3(DisplayField, { model: "campaign", zone: "general", id: "name", data: campaign, children: /* @__PURE__ */ jsx3(Heading3, { "data-testid": "campaign-general-section-name", children: campaign.name }) }),
       /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-4", children: [
-        /* @__PURE__ */ jsx3(StatusBadge, { color: statusColor(status), "data-testid": "campaign-general-section-status", children: t(`campaigns.status.${status}`) }),
+        /* @__PURE__ */ jsx3(DisplayField, { model: "campaign", zone: "general", id: "status", data: campaign, children: /* @__PURE__ */ jsx3(StatusBadge, { color: statusColor(status), "data-testid": "campaign-general-section-status", children: t(`campaigns.status.${status}`) }) }),
         /* @__PURE__ */ jsx3(
           ActionMenu,
           {
@@ -269,21 +287,30 @@ var CampaignGeneralSection = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-identifier", children: [
+    /* @__PURE__ */ jsx3(DisplayField, { model: "campaign", zone: "general", id: "campaign_identifier", data: campaign, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-identifier", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "campaign-general-section-identifier-label", children: t("campaigns.fields.identifier") }),
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", "data-testid": "campaign-general-section-identifier-value", children: campaign.campaign_identifier })
-    ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-description", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx3(DisplayField, { model: "campaign", zone: "general", id: "description", data: campaign, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-description", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "campaign-general-section-description-label", children: t("fields.description") }),
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", "data-testid": "campaign-general-section-description-value", children: campaign.description || "-" })
-    ] }),
-    campaign?.budget && campaign.budget.type === "spend" && /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-currency", children: [
+    ] }) }),
+    campaign?.budget && campaign.budget.type === "spend" && /* @__PURE__ */ jsx3(DisplayField, { model: "campaign", zone: "general", id: "currency_code", data: campaign, children: /* @__PURE__ */ jsxs3("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", "data-testid": "campaign-general-section-currency", children: [
       /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", "data-testid": "campaign-general-section-currency-label", children: t("fields.currency") }),
       /* @__PURE__ */ jsxs3("div", { "data-testid": "campaign-general-section-currency-value", children: [
         /* @__PURE__ */ jsx3(Badge, { size: "xsmall", "data-testid": "campaign-general-section-currency-badge", children: campaign?.budget.currency_code }),
         /* @__PURE__ */ jsx3(Text2, { className: "inline pl-3", size: "small", leading: "compact", "data-testid": "campaign-general-section-currency-name", children: currencies[campaign?.budget.currency_code?.toUpperCase()]?.name })
       ] })
-    ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(
+      DisplayExtensionZone2,
+      {
+        model: "campaign",
+        zone: "general",
+        data: campaign,
+        builtInFieldIds: GENERAL_FIELD_IDS
+      }
+    )
   ] });
 };
 
@@ -294,6 +321,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import { useTranslation as useTranslation4 } from "react-i18next";
 import { Link } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone3 } from "@mercurjs/dashboard-shared";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var CampaignPromotionSection = ({
@@ -381,7 +409,8 @@ var CampaignPromotionSection = ({
         },
         "data-testid": "campaign-promotion-section-table"
       }
-    )
+    ),
+    /* @__PURE__ */ jsx4(DisplayExtensionZone3, { model: "campaign", zone: "promotions", data: campaign })
   ] });
 };
 var PromotionActions = ({
@@ -546,9 +575,10 @@ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
+  const query = useLinkQuery("campaign", CAMPAIGN_DETAIL_FIELDS);
   const { campaign, isLoading, isError, error } = useCampaign(
     id,
-    { fields: CAMPAIGN_DETAIL_FIELDS },
+    query,
     { initialData }
   );
   if (isLoading || !campaign) {
@@ -566,15 +596,15 @@ var Root = ({ children }) => {
     throw error;
   }
   return Children.count(children) > 0 ? /* @__PURE__ */ jsx6(TwoColumnPage, { hasOutlet: true, showJSON: true, showMetadata: true, data: campaign, "data-testid": "campaign-detail-page", children }) : /* @__PURE__ */ jsxs6(TwoColumnPage, { hasOutlet: true, showJSON: true, showMetadata: true, data: campaign, "data-testid": "campaign-detail-page", children: [
-    /* @__PURE__ */ jsxs6(TwoColumnPage.Main, { children: [
+    /* @__PURE__ */ jsx6(TwoColumnPage.Main, { children: /* @__PURE__ */ jsxs6(WidgetZone, { id: "campaigns.detail.main", data: campaign, children: [
       /* @__PURE__ */ jsx6(CampaignGeneralSection, { campaign }),
       /* @__PURE__ */ jsx6(CampaignPromotionSection, { campaign })
-    ] }),
-    /* @__PURE__ */ jsxs6(TwoColumnPage.Sidebar, { children: [
+    ] }) }),
+    /* @__PURE__ */ jsx6(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsxs6(WidgetZone, { id: "campaigns.detail.side", data: campaign, children: [
       /* @__PURE__ */ jsx6(CampaignConfigurationSection, { campaign }),
       /* @__PURE__ */ jsx6(CampaignSpend, { campaign }),
       /* @__PURE__ */ jsx6(CampaignBudget, { campaign })
-    ] })
+    ] }) })
   ] });
 };
 var CampaignDetailPage = Object.assign(Root, {