From 2efa016c6e43a88d6685baf7eabbf82b9edeb5a5 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 27 May 2024 19:38:26 +0200
Subject: [PATCH] feat(dashboard,admin-shared): Last injection zones (#7478)

* add reservations

* add final injection zones
---
 .../src/extensions/widgets/constants.ts       | 52 +++++++++++++++++++
 .../api-key-management-detail.tsx             | 17 ++++++
 .../api-key-management-list.tsx               | 17 ++++++
 .../reservations/reservation-detail/index.ts  |  2 +-
 ...vation-edit.tsx => reservation-detail.tsx} | 45 +++++++++++++---
 .../reservation-list/reservation-list.tsx     | 17 ++++++
 .../sales-channel-detail.tsx                  | 17 ++++++
 .../sales-channel-list/sales-channel-list.tsx | 18 +++++++
 .../tax-region-detail/tax-region-detail.tsx   | 20 ++++++-
 .../taxes/tax-region-list/tax-region-list.tsx | 17 ++++++
 .../workflow-detail.tsx                       | 17 ++++++
 .../workflow-execution-list.tsx               | 17 ++++++
 12 files changed, 248 insertions(+), 8 deletions(-)
 rename packages/admin-next/dashboard/src/routes/reservations/reservation-detail/{reservation-edit.tsx => reservation-detail.tsx} (54%)

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 6c3c6f095c..9e15309b29 100644
--- a/packages/admin-next/admin-shared/src/extensions/widgets/constants.ts
+++ b/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
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
index dde10d82ce..f9b8f64255 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
+++ b/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>
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx
index 5e074f4299..f598786671 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx
+++ b/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>
   )
diff --git a/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/index.ts b/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/index.ts
index 30e160c2a3..ef0430880c 100644
--- a/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/index.ts
+++ b/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"
diff --git a/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-edit.tsx b/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-detail.tsx
similarity index 54%
rename from packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-edit.tsx
rename to packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-detail.tsx
index 087ed5313d..208fce43c9 100644
--- a/packages/admin-next/dashboard/src/routes/reservations/reservation-detail/reservation-edit.tsx
+++ b/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 />
diff --git a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx b/packages/admin-next/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx
index 7807c237be..a1b031454d 100644
--- a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx
+++ b/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>
   )
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx
index c10ad910ab..bc3d3ae4c0 100644
--- a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx
+++ b/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>
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx
index 9ae07a1ac2..f04ce13cc3 100644
--- a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx
+++ b/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>
   )
diff --git a/packages/admin-next/dashboard/src/routes/taxes/tax-region-detail/tax-region-detail.tsx b/packages/admin-next/dashboard/src/routes/taxes/tax-region-detail/tax-region-detail.tsx
index eaf249b3ab..a08662d088 100644
--- a/packages/admin-next/dashboard/src/routes/taxes/tax-region-detail/tax-region-detail.tsx
+++ b/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>
     )
diff --git a/packages/admin-next/dashboard/src/routes/taxes/tax-region-list/tax-region-list.tsx b/packages/admin-next/dashboard/src/routes/taxes/tax-region-list/tax-region-list.tsx
index b9e4b254f4..63f1efc7a8 100644
--- a/packages/admin-next/dashboard/src/routes/taxes/tax-region-list/tax-region-list.tsx
+++ b/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>
   )
diff --git a/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx b/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx
index 483e183c2b..ae71dc93c3 100644
--- a/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx
+++ b/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>
   )
diff --git a/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx b/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx
index 51f5c54691..a8be42e2f1 100644
--- a/packages/admin-next/dashboard/src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx
+++ b/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>
   )
 }