feat(dashboard,admin-shared): Last injection zones (#7478)

* add reservations

* add final injection zones

packages/admin-next/admin-shared/src/extensions/widgets/constants.ts

@@ -73,6 +73,15 @@ const PROMOTION_INJECTION_ZONES = [
   "promotion.list.after",
 ] as const
 
+const CAMPAIGN_INJECTION_ZONES = [
+  "campaign.details.before",
+  "campaign.details.after",
+  "campaign.details.side.before",
+  "campaign.details.side.after",
+  "campaign.list.before",
+  "campaign.list.after",
+] as const
+
 const GIFT_CARD_INJECTION_ZONES = [
   "gift_card.details.before",
   "gift_card.details.after",
@@ -124,6 +133,43 @@ const LOCATION_INJECTION_ZONES = [
 
 const LOGIN_INJECTION_ZONES = ["login.before", "login.after"] as const
 
+const SALES_CHANNEL_INJECTION_ZONES = [
+  "sales_channel.details.before",
+  "sales_channel.details.after",
+  "sales_channel.list.before",
+  "sales_channel.list.after",
+] as const
+
+const RESERVATION_INJECTION_ZONES = [
+  "reservation.details.before",
+  "reservation.details.after",
+  "reservation.details.side.before",
+  "reservation.details.side.after",
+  "reservation.list.before",
+  "reservation.list.after",
+] as const
+
+const API_KEY_INJECTION_ZONES = [
+  "api_key.details.before",
+  "api_key.details.after",
+  "api_key.list.before",
+  "api_key.list.after",
+]
+
+const WORKFLOW_INJECTION_ZONES = [
+  "workflow.details.before",
+  "workflow.details.after",
+  "workflow.list.before",
+  "workflow.list.after",
+] as const
+
+const TAX_INJECTION_ZONES = [
+  "tax.details.before",
+  "tax.details.after",
+  "tax.list.before",
+  "tax.list.after",
+] as const
+
 /**
  * All valid injection zones in the admin panel. An injection zone is a specific place
  * in the admin panel where a plugin can inject custom widgets.
@@ -146,4 +192,10 @@ export const INJECTION_ZONES = [
   ...SHIPPING_PROFILE_INJECTION_ZONES,
   ...LOCATION_INJECTION_ZONES,
   ...LOGIN_INJECTION_ZONES,
+  ...SALES_CHANNEL_INJECTION_ZONES,
+  ...RESERVATION_INJECTION_ZONES,
+  ...API_KEY_INJECTION_ZONES,
+  ...WORKFLOW_INJECTION_ZONES,
+  ...CAMPAIGN_INJECTION_ZONES,
+  ...TAX_INJECTION_ZONES,
 ] as const

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx

@@ -12,6 +12,9 @@ import { ApiKeyGeneralSection } from "./components/api-key-general-section"
 import { ApiKeySalesChannelSection } from "./components/api-key-sales-channel-section"
 import { apiKeyLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/api_key/details/after"
+import before from "virtual:medusa/widgets/api_key/details/before"
+
 export const ApiKeyManagementDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof apiKeyLoader>
@@ -41,8 +44,22 @@ export const ApiKeyManagementDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component apiKey={api_key} />
+          </div>
+        )
+      })}
       <ApiKeyGeneralSection apiKey={api_key} />
       {isPublishable && <ApiKeySalesChannelSection apiKey={api_key} />}
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component apiKey={api_key} />
+          </div>
+        )
+      })}
       <JsonViewSection data={api_key} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx

@@ -2,6 +2,9 @@ import { Outlet, useLocation } from "react-router-dom"
 import { getApiKeyTypeFromPathname } from "../common/utils"
 import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
+import after from "virtual:medusa/widgets/api_key/list/after"
+import before from "virtual:medusa/widgets/api_key/list/before"
+
 export const ApiKeyManagementList = () => {
   const { pathname } = useLocation()
 
@@ -9,7 +12,21 @@ export const ApiKeyManagementList = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <ApiKeyManagementListTable keyType={keyType} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <Outlet />
     </div>
   )

packages/admin-next/dashboard/src/routes/reservations/reservation-detail/index.ts

@@ -1,2 +1,2 @@
-export { ReservationDetail as Component } from "./reservation-edit"
 export { reservationItemLoader as loader } from "./loader"
+export { ReservationDetail as Component } from "./reservation-detail"

packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-detail.tsx

@@ -1,10 +1,15 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
 
-import { InventoryItemGeneralSection } from "../../inventory/inventory-detail/components/inventory-item-general-section"
 import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useReservationItem } from "../../../hooks/api/reservations"
+import { InventoryItemGeneralSection } from "../../inventory/inventory-detail/components/inventory-item-general-section"
 import { ReservationGeneralSection } from "./components/reservation-general-section"
 import { reservationItemLoader } from "./loader"
-import { useReservationItem } from "../../../hooks/api/reservations"
+
+import after from "virtual:medusa/widgets/reservation/details/after"
+import before from "virtual:medusa/widgets/reservation/details/before"
+import sideAfter from "virtual:medusa/widgets/reservation/details/side/after"
+import sideBefore from "virtual:medusa/widgets/reservation/details/side/before"
 
 export const ReservationDetail = () => {
   const { id } = useParams()
@@ -31,18 +36,46 @@ export const ReservationDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
-      <div className="flex flex-col gap-x-4 lg:flex-row lg:items-start">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={reservation} />
+          </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">
           <ReservationGeneralSection reservation={reservation} />
-          <div className="hidden lg:block">
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={reservation} />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
             <JsonViewSection data={reservation} />
           </div>
         </div>
-        <div className="mt-2 flex w-full max-w-[100%] flex-col gap-y-2 lg:mt-0 lg:max-w-[400px]">
+        <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={reservation} />
+              </div>
+            )
+          })}
           <InventoryItemGeneralSection
             inventoryItem={reservation.inventory_item}
           />
-          <div className="lg:hidden">
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component data={reservation} />
+              </div>
+            )
+          })}
+          <div className="xl:hidden">
             <JsonViewSection data={reservation} />
           </div>
           <Outlet />

packages/admin-next/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx

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

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx

@@ -6,6 +6,9 @@ import { SalesChannelGeneralSection } from "./components/sales-channel-general-s
 import { SalesChannelProductSection } from "./components/sales-channel-product-section"
 import { salesChannelLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/sales_channel/details/after"
+import before from "virtual:medusa/widgets/sales_channel/details/before"
+
 export const SalesChannelDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof salesChannelLoader>
@@ -22,8 +25,22 @@ export const SalesChannelDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={sales_channel} />
+          </div>
+        )
+      })}
       <SalesChannelGeneralSection salesChannel={sales_channel} />
       <SalesChannelProductSection salesChannel={sales_channel} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component data={sales_channel} />
+          </div>
+        )
+      })}
       <JsonViewSection data={sales_channel} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx

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

packages/admin-next/dashboard/src/routes/taxes/tax-region-detail/tax-region-detail.tsx

@@ -1,9 +1,13 @@
 import { Outlet, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useTaxRegion } from "../../../hooks/api/tax-regions"
 import { TaxRateList } from "./components/tax-rate-list"
 import { TaxRegionGeneralDetail } from "./components/tax-region-general-detail"
 
+import after from "virtual:medusa/widgets/tax/details/after"
+import before from "virtual:medusa/widgets/tax/details/before"
+
 export const TaxRegionDetail = () => {
   const { id } = useParams()
   const { tax_region: taxRegion, isLoading, isError, error } = useTaxRegion(id!)
@@ -19,10 +23,24 @@ export const TaxRegionDetail = () => {
   return (
     taxRegion && (
       <div className="flex flex-col gap-y-2">
+        {before.widgets.map((w, i) => {
+          return (
+            <div key={i}>
+              <w.Component data={taxRegion} />
+            </div>
+          )
+        })}
         <TaxRegionGeneralDetail taxRegion={taxRegion} />
         <TaxRateList taxRegion={taxRegion} isDefault={true} />
         <TaxRateList taxRegion={taxRegion} isDefault={false} />
-        <JsonViewSection data={taxRegion} root="tax_region" />
+        {after.widgets.map((w, i) => {
+          return (
+            <div key={i}>
+              <w.Component data={taxRegion} />
+            </div>
+          )
+        })}
+        <JsonViewSection data={taxRegion} />
         <Outlet />
       </div>
     )

packages/admin-next/dashboard/src/routes/taxes/tax-region-list/tax-region-list.tsx

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

packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx

@@ -7,6 +7,9 @@ import { WorkflowExecutionHistorySection } from "./components/workflow-execution
 import { WorkflowExecutionPayloadSection } from "./components/workflow-execution-payload-section"
 import { WorkflowExecutionTimelineSection } from "./components/workflow-execution-timeline-section"
 
+import after from "virtual:medusa/widgets/workflow/details/after"
+import before from "virtual:medusa/widgets/workflow/details/before"
+
 export const ExecutionDetail = () => {
   const { id } = useParams()
 
@@ -23,10 +26,24 @@ export const ExecutionDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component execution={workflow_execution} />
+          </div>
+        )
+      })}
       <WorkflowExecutionGeneralSection execution={workflow_execution} />
       <WorkflowExecutionTimelineSection execution={workflow_execution} />
       <WorkflowExecutionPayloadSection execution={workflow_execution} />
       <WorkflowExecutionHistorySection execution={workflow_execution} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component execution={workflow_execution} />
+          </div>
+        )
+      })}
       <JsonViewSection data={workflow_execution} />
     </div>
   )

packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx

@@ -1,9 +1,26 @@
 import { WorkflowExecutionListTable } from "./components/workflow-execution-list-table"
 
+import after from "virtual:medusa/widgets/workflow/list/after"
+import before from "virtual:medusa/widgets/workflow/list/before"
+
 export const WorkflowExcecutionList = () => {
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <WorkflowExecutionListTable />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
     </div>
   )
 }