feat(dashboard): Add campaign InjectionZones (#7494)

packages/admin-next/dashboard/src/routes/campaigns/campaign-detail/campaign-detail.tsx

@@ -1,4 +1,5 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useCampaign } from "../../../hooks/api/campaigns"
 import { CampaignBudget } from "./components/campaign-budget"
@@ -7,6 +8,11 @@ import { CampaignPromotionSection } from "./components/campaign-promotion-sectio
 import { CampaignSpend } from "./components/campaign-spend"
 import { campaignLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/campaign/details/after"
+import before from "virtual:medusa/widgets/campaign/details/before"
+import sideAfter from "virtual:medusa/widgets/campaign/details/side/after"
+import sideBefore from "virtual:medusa/widgets/campaign/details/side/before"
+
 export const CampaignDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof campaignLoader>
@@ -29,16 +35,49 @@ export const CampaignDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={campaign} />
+          </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">
           <CampaignGeneralSection campaign={campaign} />
           <CampaignPromotionSection campaign={campaign} />
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={campaign} />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
             <JsonViewSection data={campaign} />
           </div>
+        </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]">
+          {sideBefore.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={campaign} />
+              </div>
+            )
+          })}
           <CampaignSpend campaign={campaign} />
           <CampaignBudget campaign={campaign} />
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={campaign} />
+              </div>
+            )
+          })}
+          <div className="xl:hidden">
+            <JsonViewSection data={campaign} />
+          </div>
         </div>
       </div>
 

packages/admin-next/dashboard/src/routes/campaigns/campaign-list/campaign-list.tsx

@@ -1,10 +1,28 @@
 import { Outlet } from "react-router-dom"
+
 import { CampaignListTable } from "./components/campaign-list-table"
 
+import after from "virtual:medusa/widgets/campaign/list/after"
+import before from "virtual:medusa/widgets/campaign/list/before"
+
 export const CampaignList = () => {
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <CampaignListTable />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <Outlet />
     </div>
   )