From ab2e8fcd451cbe4c0e0a35f3aae3b9e0d15c39b9 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 27 May 2024 12:47:12 +0200
Subject: [PATCH] feat(dashboard,ui,types,admin-shared): Add more extension
 zones + pass data to widgets  (#7465)

---
 .changeset/little-books-reply.md              |  1 +
 .../src/extensions/widgets/constants.ts       | 12 +--
 packages/admin-next/dashboard/src/module.d.ts |  4 +-
 .../create-campaign-form.tsx                  |  1 -
 .../create-campaign-form-fields.tsx           | 87 +++++++++----------
 .../category-detail/category-detail.tsx       |  8 +-
 .../collection-detail/collection-detail.tsx   |  4 +-
 .../customer-group-detail.tsx                 |  4 +-
 .../customer-detail/customer-detail.tsx       |  4 +-
 .../orders/order-detail/order-detail.tsx      |  8 +-
 .../pricing/pricing-detail/pricing-detail.tsx | 60 ++++++++++---
 .../pricing/pricing-list/pricing-list.tsx     | 18 ++++
 .../product-detail/product-detail.tsx         |  8 +-
 .../promotion-detail/promotion-detail.tsx     | 33 ++++---
 .../promotion-list/promotions-list.tsx        | 17 ++++
 packages/core/types/src/admin/extensions.ts   | 27 ++++++
 packages/core/types/src/admin/index.ts        |  1 +
 packages/core/types/src/index.ts              |  3 +-
 .../components/date-picker/date-picker.tsx    | 29 ++++---
 19 files changed, 220 insertions(+), 109 deletions(-)
 create mode 100644 packages/core/types/src/admin/extensions.ts
 create mode 100644 packages/core/types/src/admin/index.ts

diff --git a/.changeset/little-books-reply.md b/.changeset/little-books-reply.md
index 5796d21d66..36eeecc11f 100644
--- a/.changeset/little-books-reply.md
+++ b/.changeset/little-books-reply.md
@@ -57,6 +57,7 @@
 "@medusajs/admin-sdk": patch
 "@medusajs/admin-shared": patch
 "@medusajs/admin-vite-plugin": patch
+"@medusajs/ui": patch
 ---
 
 chore: Preview release changeset
diff --git a/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts b/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts
index bb63ab9304..e12cec4037 100644
--- a/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts
+++ b/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts
@@ -58,20 +58,17 @@ const PRODUCT_CATEGORY_INJECTION_ZONES = [
 const PRICE_LIST_INJECTION_ZONES = [
   "price_list.details.before",
   "price_list.details.after",
+  "price_list.details.side.before",
+  "price_list.details.side.after",
   "price_list.list.before",
   "price_list.list.after",
 ] as const
 
-const DISCOUNT_INJECTION_ZONES = [
-  "discount.details.before",
-  "discount.details.after",
-  "discount.list.before",
-  "discount.list.after",
-] as const
-
 const PROMOTION_INJECTION_ZONES = [
   "promotion.details.before",
   "promotion.details.after",
+  "promotion.details.side.before",
+  "promotion.details.side.after",
   "promotion.list.before",
   "promotion.list.after",
 ] as const
@@ -123,7 +120,6 @@ export const INJECTION_ZONES = [
   ...PRODUCT_COLLECTION_INJECTION_ZONES,
   ...PRODUCT_CATEGORY_INJECTION_ZONES,
   ...PRICE_LIST_INJECTION_ZONES,
-  ...DISCOUNT_INJECTION_ZONES,
   ...PROMOTION_INJECTION_ZONES,
   ...GIFT_CARD_INJECTION_ZONES,
   ...REGION_INJECTION_ZONES,
diff --git a/packages/admin-next/dashboard/src/module.d.ts b/packages/admin-next/dashboard/src/module.d.ts
index 1a902bc062..5b4f0bf2e3 100644
--- a/packages/admin-next/dashboard/src/module.d.ts
+++ b/packages/admin-next/dashboard/src/module.d.ts
@@ -1,5 +1,7 @@
 declare module "virtual:medusa/widgets/*" {
-  const widgets: { Component: () => JSX.Element }[]
+  import type { ComponentType } from "react"
+
+  const widgets: { Component: ComponentType<any> }[]
 
   export default {
     widgets,
diff --git a/packages/admin-next/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx b/packages/admin-next/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx
index 7f1d7057a5..76cd8d50f6 100644
--- a/packages/admin-next/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/campaigns/campaign-create/components/create-campaign-form/create-campaign-form.tsx
@@ -95,7 +95,6 @@ export const CreateCampaignForm = () => {
                 {t("actions.cancel")}
               </Button>
             </RouteFocusModal.Close>
-
             <Button
               size="small"
               variant="primary"
diff --git a/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx b/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
index 4eb88295de..55f9529a59 100644
--- a/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
+++ b/packages/admin-next/dashboard/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx
@@ -1,5 +1,4 @@
 import {
-  clx,
   CurrencyInput,
   DatePicker,
   Heading,
@@ -7,10 +6,12 @@ import {
   RadioGroup,
   Select,
   Text,
+  Textarea,
 } from "@medusajs/ui"
 import { useEffect } from "react"
 import { useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
+
 import { Form } from "../../../../../components/common/form"
 import { useStore } from "../../../../../hooks/api/store"
 import { currencies, getCurrencySymbol } from "../../../../../lib/currencies"
@@ -70,24 +71,44 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
         </Text>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <Form.Field
-          control={form.control}
-          name={`${fieldScope}name`}
-          render={({ field }) => {
-            return (
-              <Form.Item>
-                <Form.Label>{t("fields.name")}</Form.Label>
+      <div className="flex flex-col gap-y-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <Form.Field
+            control={form.control}
+            name={`${fieldScope}name`}
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.name")}</Form.Label>
 
-                <Form.Control>
-                  <Input {...field} />
-                </Form.Control>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
 
-                <Form.ErrorMessage />
-              </Form.Item>
-            )
-          }}
-        />
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+
+          <Form.Field
+            control={form.control}
+            name={`${fieldScope}campaign_identifier`}
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("campaigns.fields.identifier")}</Form.Label>
+
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </div>
 
         <Form.Field
           control={form.control}
@@ -98,7 +119,7 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
                 <Form.Label>{t("fields.description")}</Form.Label>
 
                 <Form.Control>
-                  <Input {...field} />
+                  <Textarea {...field} />
                 </Form.Control>
 
                 <Form.ErrorMessage />
@@ -106,27 +127,9 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
             )
           }}
         />
+      </div>
 
-        <Form.Field
-          control={form.control}
-          name={`${fieldScope}campaign_identifier`}
-          render={({ field }) => {
-            return (
-              <Form.Item>
-                <Form.Label>{t("campaigns.fields.identifier")}</Form.Label>
-
-                <Form.Control>
-                  <Input {...field} />
-                </Form.Control>
-
-                <Form.ErrorMessage />
-              </Form.Item>
-            )
-          }}
-        />
-
-        <div></div>
-
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <Form.Field
           control={form.control}
           name={`${fieldScope}starts_at`}
@@ -198,20 +201,12 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
                   onValueChange={field.onChange}
                 >
                   <RadioGroup.ChoiceBox
-                    className={clx("basis-1/2 border", {
-                      "border border-ui-border-interactive":
-                        "spend" === field.value,
-                    })}
                     value={"spend"}
                     label={t("campaigns.budget.type.spend.title")}
                     description={t("campaigns.budget.type.spend.description")}
                   />
 
                   <RadioGroup.ChoiceBox
-                    className={clx("basis-1/2 border", {
-                      "border border-ui-border-interactive":
-                        "usage" === field.value,
-                    })}
                     value={"usage"}
                     label={t("campaigns.budget.type.usage.title")}
                     description={t("campaigns.budget.type.usage.description")}
diff --git a/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx b/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx
index e7d30bb708..a7e8d7f536 100644
--- a/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx
@@ -39,7 +39,7 @@ export const CategoryDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={product_category} />
           </div>
         )
       })}
@@ -50,7 +50,7 @@ export const CategoryDetail = () => {
           {after.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product_category} />
               </div>
             )
           })}
@@ -62,7 +62,7 @@ export const CategoryDetail = () => {
           {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product_category} />
               </div>
             )
           })}
@@ -70,7 +70,7 @@ export const CategoryDetail = () => {
           {sideAfter.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product_category} />
               </div>
             )
           })}
diff --git a/packages/admin-next/dashboard/src/routes/collections/collection-detail/collection-detail.tsx b/packages/admin-next/dashboard/src/routes/collections/collection-detail/collection-detail.tsx
index c75fa8482b..b9b9fe8cd5 100644
--- a/packages/admin-next/dashboard/src/routes/collections/collection-detail/collection-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/collections/collection-detail/collection-detail.tsx
@@ -36,7 +36,7 @@ export const CollectionDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={collection} />
           </div>
         )
       })}
@@ -45,7 +45,7 @@ export const CollectionDetail = () => {
       {after.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={collection} />
           </div>
         )
       })}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx
index 360cf14c05..2b8cd46464 100644
--- a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx
@@ -36,7 +36,7 @@ export const CustomerGroupDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={customer_group} />
           </div>
         )
       })}
@@ -45,7 +45,7 @@ export const CustomerGroupDetail = () => {
       {after.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={customer_group} />
           </div>
         )
       })}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx
index 8f86214bc6..6a5575f6b7 100644
--- a/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx
@@ -32,7 +32,7 @@ export const CustomerDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={customer} />
           </div>
         )
       })}
@@ -44,7 +44,7 @@ export const CustomerDetail = () => {
       {after.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={customer} />
           </div>
         )
       })}
diff --git a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
index 5f8dd965e4..d331a51fcc 100644
--- a/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx
@@ -43,7 +43,7 @@ export const OrderDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={order} />
           </div>
         )
       })}
@@ -56,7 +56,7 @@ export const OrderDetail = () => {
           {after.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={order} />
               </div>
             )
           })}
@@ -68,7 +68,7 @@ export const OrderDetail = () => {
           {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={order} />
               </div>
             )
           })}
@@ -77,7 +77,7 @@ export const OrderDetail = () => {
           {sideAfter.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={order} />
               </div>
             )
           })}
diff --git a/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx b/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx
index 2d20c3389e..e3e904b2c9 100644
--- a/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/pricing/pricing-detail/pricing-detail.tsx
@@ -1,10 +1,16 @@
 import { Outlet, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { usePriceList } from "../../../hooks/api/price-lists"
 import { PricingConfigurationSection } from "./components/pricing-configuration-section"
 import { PricingGeneralSection } from "./components/pricing-general-section"
 import { PricingProductSection } from "./components/pricing-product-section"
 
+import after from "virtual:medusa/widgets/price_list/details/after"
+import before from "virtual:medusa/widgets/price_list/details/before"
+import sideAfter from "virtual:medusa/widgets/price_list/details/side/after"
+import sideBefore from "virtual:medusa/widgets/price_list/details/side/before"
+
 export const PricingDetail = () => {
   const { id } = useParams()
 
@@ -19,19 +25,51 @@ export const PricingDetail = () => {
   }
 
   return (
-    <div className="flex flex-col gap-x-4 xl:flex-row xl:items-start">
-      <div className="flex w-full flex-col gap-y-2">
-        <PricingGeneralSection priceList={price_list} />
-        <PricingProductSection priceList={price_list} />
-        <div className="flex w-full flex-col gap-y-2 xl:hidden">
-          <PricingConfigurationSection priceList={price_list} />
+    <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={price_list} />
+          </div>
+        )
+      })}
+      <div className="flex flex-col gap-x-4 lg:flex-row xl:items-start">
+        <div className="flex w-full flex-col gap-y-2">
+          <PricingGeneralSection priceList={price_list} />
+          <PricingProductSection priceList={price_list} />
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={price_list} />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
+            <JsonViewSection data={price_list} />
+          </div>
         </div>
-        <JsonViewSection data={price_list} />
+        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 xl:mt-0 xl:max-w-[400px]">
+          {sideBefore.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={price_list} />
+              </div>
+            )
+          })}
+          <PricingConfigurationSection priceList={price_list} />
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={price_list} />
+              </div>
+            )
+          })}
+          <div className="xl:hidden">
+            <JsonViewSection data={price_list} />
+          </div>
+        </div>
+        <Outlet />
       </div>
-      <div className="hidden w-full max-w-[400px] flex-col gap-y-2 xl:flex">
-        <PricingConfigurationSection priceList={price_list} />
-      </div>
-      <Outlet />
     </div>
   )
 }
diff --git a/packages/admin-next/dashboard/src/routes/pricing/pricing-list/pricing-list.tsx b/packages/admin-next/dashboard/src/routes/pricing/pricing-list/pricing-list.tsx
index c9b402c84c..c03dfa0a60 100644
--- a/packages/admin-next/dashboard/src/routes/pricing/pricing-list/pricing-list.tsx
+++ b/packages/admin-next/dashboard/src/routes/pricing/pricing-list/pricing-list.tsx
@@ -1,10 +1,28 @@
 import { Outlet } from "react-router-dom"
+
 import { PricingListTable } from "./components/pricing-list-table"
 
+import after from "virtual:medusa/widgets/price_list/list/after"
+import before from "virtual:medusa/widgets/price_list/list/before"
+
 export const PricingList = () => {
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <PricingListTable />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <Outlet />
     </div>
   )
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
index eff4a3be34..21a70c0d5d 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
@@ -40,7 +40,7 @@ export const ProductDetail = () => {
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
-            <w.Component />
+            <w.Component data={product} />
           </div>
         )
       })}
@@ -53,7 +53,7 @@ export const ProductDetail = () => {
           {after.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product} />
               </div>
             )
           })}
@@ -65,7 +65,7 @@ export const ProductDetail = () => {
           {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product} />
               </div>
             )
           })}
@@ -75,7 +75,7 @@ export const ProductDetail = () => {
           {sideAfter.widgets.map((w, i) => {
             return (
               <div key={i}>
-                <w.Component />
+                <w.Component data={product} />
               </div>
             )
           })}
diff --git a/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx b/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx
index b72f267538..87381ff9cd 100644
--- a/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx
+++ b/packages/admin-next/dashboard/src/routes/promotions/promotion-detail/promotion-detail.tsx
@@ -7,6 +7,9 @@ import { PromotionConditionsSection } from "./components/promotion-conditions-se
 import { PromotionGeneralSection } from "./components/promotion-general-section"
 import { promotionLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/promotion/details/after"
+import before from "virtual:medusa/widgets/promotion/details/before"
+
 export const PromotionDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof promotionLoader>
@@ -24,33 +27,43 @@ export const PromotionDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={promotion} />
+          </div>
+        )
+      })}
       <div className="flex flex-col gap-x-4 xl:flex-row xl:items-start">
         <div className="flex w-full flex-col gap-y-2">
           <PromotionGeneralSection promotion={promotion} />
-
           <PromotionConditionsSection rules={rules || []} ruleType={"rules"} />
-
           <PromotionConditionsSection
             rules={targetRules || []}
             ruleType={"target-rules"}
           />
-
           {promotion.type === "buyget" && (
             <PromotionConditionsSection
               rules={buyRules || []}
               ruleType={"buy-rules"}
             />
           )}
-
-          <div className="flex w-full flex-col gap-y-2 xl:hidden">
-            <CampaignSection campaign={promotion.campaign!} />
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={promotion} />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
+            <JsonViewSection data={promotion} />
           </div>
-
-          <JsonViewSection data={promotion as any} />
         </div>
-
-        <div className="hidden w-full max-w-[400px] flex-col gap-y-2 xl:flex">
+        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 xl:mt-0 xl:max-w-[400px]">
           <CampaignSection campaign={promotion.campaign!} />
+          <div className="xl:hidden">
+            <JsonViewSection data={promotion} />
+          </div>
         </div>
       </div>
       <Outlet />
diff --git a/packages/admin-next/dashboard/src/routes/promotions/promotion-list/promotions-list.tsx b/packages/admin-next/dashboard/src/routes/promotions/promotion-list/promotions-list.tsx
index 7dd8f27ab8..e2fdfeaa7c 100644
--- a/packages/admin-next/dashboard/src/routes/promotions/promotion-list/promotions-list.tsx
+++ b/packages/admin-next/dashboard/src/routes/promotions/promotion-list/promotions-list.tsx
@@ -1,9 +1,26 @@
 import { PromotionListTable } from "./components/promotion-list-table"
 
+import after from "virtual:medusa/widgets/promotion/list/after"
+import before from "virtual:medusa/widgets/promotion/list/before"
+
 export const PromotionsList = () => {
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <PromotionListTable />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
     </div>
   )
 }
diff --git a/packages/core/types/src/admin/extensions.ts b/packages/core/types/src/admin/extensions.ts
new file mode 100644
index 0000000000..657c697f86
--- /dev/null
+++ b/packages/core/types/src/admin/extensions.ts
@@ -0,0 +1,27 @@
+/**
+ * The props for detail widgets. All widgets that are rendered in a detail view,
+ * e.g. the product detail view, should implement this interface.
+ *
+ * The type of the data prop should be the same as the data that is passed to the widget.
+ * If the widget is rendered in the product detail view, the data prop should be of
+ * type AdminProduct.
+ *
+ * @example
+ * ```tsx
+ * import type { DetailWidgetProps, AdminProduct } from "@medusajs/types"
+ * import { defineConfig } from "@medusajs/admin-shared"
+ *
+ * const ProductWidget = ({ data }: DetailWidgetProps<AdminProduct>) => {
+ *  return <div>{data.title}</div>
+ * }
+ *
+ * export const config = defineConfig({
+ *  zone: "product.details.after",
+ * })
+ *
+ * export default ProductWidget
+ * ```
+ */
+export interface DetailWidgetProps<TData> {
+  data: TData
+}
diff --git a/packages/core/types/src/admin/index.ts b/packages/core/types/src/admin/index.ts
new file mode 100644
index 0000000000..3b0fcaf6ee
--- /dev/null
+++ b/packages/core/types/src/admin/index.ts
@@ -0,0 +1 @@
+export * from "./extensions"
diff --git a/packages/core/types/src/index.ts b/packages/core/types/src/index.ts
index 3fd3ca3248..b5212f28c2 100644
--- a/packages/core/types/src/index.ts
+++ b/packages/core/types/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./address"
+// export * from "./admin"
 export * from "./api-key"
 export * from "./auth"
 export * from "./bundles"
@@ -19,6 +20,7 @@ export * from "./joiner"
 export * from "./link-modules"
 export * from "./logger"
 export * from "./modules-sdk"
+export * from "./notification"
 export * from "./order"
 export * from "./payment"
 export * from "./pricing"
@@ -38,4 +40,3 @@ export * from "./transaction-base"
 export * from "./user"
 export * from "./workflow"
 export * from "./workflows"
-export * from "./notification"
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
index 0013a88732..c17923c942 100644
--- a/packages/design-system/ui/src/components/date-picker/date-picker.tsx
+++ b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
@@ -343,7 +343,7 @@ interface SingleProps extends PickerProps {
   onChange?: (date: Date | undefined) => void
 }
 
-const SingleDatePicker = ({
+const SingleDatePicker = React.forwardRef<HTMLButtonElement, SingleProps>(({
   defaultValue,
   value,
   size = "base",
@@ -355,7 +355,7 @@ const SingleDatePicker = ({
   placeholder,
   translations,
   ...props
-}: SingleProps) => {
+}, ref) => {
   const [open, setOpen] = React.useState(false)
   const [date, setDate] = React.useState<Date | undefined>(
     value ?? defaultValue ?? undefined
@@ -480,7 +480,7 @@ const SingleDatePicker = ({
   }
 
   return (
-    <Primitives.Root open={open} onOpenChange={onOpenChange}>
+    <Primitives.Root modal open={open} onOpenChange={onOpenChange}>
       <Display
         placeholder={placeholder}
         disabled={disabled}
@@ -490,6 +490,7 @@ const SingleDatePicker = ({
         aria-label={props["aria-label"]}
         aria-labelledby={props["aria-labelledby"]}
         size={size}
+        ref={ref}
       >
         {formattedDate}
       </Display>
@@ -554,7 +555,7 @@ const SingleDatePicker = ({
       </Flyout>
     </Primitives.Root>
   )
-}
+})
 
 interface RangeProps extends PickerProps {
   presets?: DateRangePreset[]
@@ -563,7 +564,7 @@ interface RangeProps extends PickerProps {
   onChange?: (dateRange: DateRange | undefined) => void
 }
 
-const RangeDatePicker = ({
+const RangeDatePicker = React.forwardRef<HTMLButtonElement, RangeProps>(({
   /**
    * The date range selected by default.
    */
@@ -587,7 +588,7 @@ const RangeDatePicker = ({
   placeholder,
   translations,
   ...props
-}: RangeProps) => {
+}, ref) => {
   const [open, setOpen] = React.useState(false)
   const [range, setRange] = React.useState<DateRange | undefined>(
     value ?? defaultValue ?? undefined
@@ -756,7 +757,7 @@ const RangeDatePicker = ({
   }
 
   return (
-    <Primitives.Root open={open} onOpenChange={onOpenChange}>
+    <Primitives.Root modal open={open} onOpenChange={onOpenChange}>
       <Display
         placeholder={placeholder}
         disabled={disabled}
@@ -766,6 +767,7 @@ const RangeDatePicker = ({
         aria-label={props["aria-label"]}
         aria-labelledby={props["aria-labelledby"]}
         size={size}
+        ref={ref}
       >
         {displayRange}
       </Display>
@@ -858,7 +860,7 @@ const RangeDatePicker = ({
       </Flyout>
     </Primitives.Root>
   )
-}
+})
 
 /**
  * @interface
@@ -1031,22 +1033,23 @@ const validatePresets = (
  * This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)
  * component and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).
  */
-const DatePicker = ({
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(({
   /**
    * The date picker's mode.
    */
   mode = "single",
   ...props
-}: DatePickerProps) => {
+}, ref) => {
   if (props.presets) {
     validatePresets(props.presets, props)
   }
 
   if (mode === "single") {
-    return <SingleDatePicker {...(props as SingleProps)} />
+    return <SingleDatePicker ref={ref} {...(props as SingleProps)} />
   }
 
-  return <RangeDatePicker {...(props as RangeProps)} />
-}
+  return <RangeDatePicker ref={ref} {...(props as RangeProps)} />
+})
+DatePicker.displayName = "DatePicker"
 
 export { DatePicker }