feat(dashboard): Add more injection zones (customer, customer groups) (#7448)

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx

@@ -1,10 +1,14 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useCustomerGroup } from "../../../hooks/api/customer-groups"
 import { CustomerGroupCustomerSection } from "./components/customer-group-customer-section"
 import { CustomerGroupGeneralSection } from "./components/customer-group-general-section"
 import { customerGroupLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/customer_group/details/after"
+import before from "virtual:medusa/widgets/customer_group/details/before"
+
 export const CustomerGroupDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof customerGroupLoader>
@@ -29,8 +33,22 @@ export const CustomerGroupDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <CustomerGroupGeneralSection group={customer_group} />
       <CustomerGroupCustomerSection group={customer_group} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <JsonViewSection data={customer_group} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/customer-group-list.tsx

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

packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx

@@ -1,10 +1,14 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useCustomer } from "../../../hooks/api/customers"
 import { CustomerGeneralSection } from "./components/customer-general-section"
 import { CustomerGroupSection } from "./components/customer-group-section"
 import { customerLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/customer/details/after"
+import before from "virtual:medusa/widgets/customer/details/before"
+
 export const CustomerDetail = () => {
   const { id } = useParams()
 
@@ -25,11 +29,25 @@ export const CustomerDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <CustomerGeneralSection customer={customer} />
       {/* <CustomerOrderSection customer={customer} />
       // TODO: re-add when order endpoints are added to api-v2
       */}
       <CustomerGroupSection customer={customer} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <JsonViewSection data={customer} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/customers/customer-list/customer-list.tsx

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