feat(dashboard,admin-shared): Add more injection zones (orders, collections, categories) (#7447)

* add more injection zones

* fix position

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

@@ -1,6 +1,8 @@
 const ORDER_INJECTION_ZONES = [
   "order.details.before",
   "order.details.after",
+  "order.details.side.before",
+  "order.details.side.after",
   "order.list.before",
   "order.list.after",
 ] as const
@@ -8,6 +10,8 @@ const ORDER_INJECTION_ZONES = [
 const DRAFT_ORDER_INJECTION_ZONES = [
   "draft_order.list.before",
   "draft_order.list.after",
+  "draft_order.details.side.before",
+  "draft_order.details.side.after",
   "draft_order.details.before",
   "draft_order.details.after",
 ] as const
@@ -45,6 +49,8 @@ const PRODUCT_COLLECTION_INJECTION_ZONES = [
 const PRODUCT_CATEGORY_INJECTION_ZONES = [
   "product_category.details.before",
   "product_category.details.after",
+  "product_category.details.side.before",
+  "product_category.details.side.after",
   "product_category.list.before",
   "product_category.list.after",
 ] as const

packages/admin-next/dashboard/src/routes/categories/category-detail/category-detail.tsx

@@ -6,6 +6,11 @@ import { CategoryOrganizationSection } from "./components/category-organization-
 import { CategoryProductSection } from "./components/category-product-section"
 import { categoryLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/product_category/details/after"
+import before from "virtual:medusa/widgets/product_category/details/before"
+import sideAfter from "virtual:medusa/widgets/product_category/details/side/after"
+import sideBefore from "virtual:medusa/widgets/product_category/details/side/before"
+
 export const CategoryDetail = () => {
   const { id } = useParams()
 
@@ -31,17 +36,45 @@ export const CategoryDetail = () => {
 
   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 />
+          </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">
           <CategoryGeneralSection category={product_category} />
           <CategoryProductSection category={product_category} />
-          <div className="hidden lg:block">
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
             <JsonViewSection data={product_category} />
           </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 />
+              </div>
+            )
+          })}
           <CategoryOrganizationSection category={product_category} />
-          <div className="lg:hidden">
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
+          <div className="xl:hidden">
             <JsonViewSection data={product_category} />
           </div>
         </div>

packages/admin-next/dashboard/src/routes/categories/category-list/category-list.tsx

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

packages/admin-next/dashboard/src/routes/collections/collection-detail/collection-detail.tsx

@@ -1,10 +1,14 @@
 import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useCollection } from "../../../hooks/api/collections"
 import { CollectionGeneralSection } from "./components/collection-general-section"
 import { CollectionProductSection } from "./components/collection-product-section"
 import { collectionLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/product_collection/details/after"
+import before from "virtual:medusa/widgets/product_collection/details/before"
+
 export const CollectionDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof collectionLoader>
@@ -29,8 +33,22 @@ export const CollectionDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <CollectionGeneralSection collection={collection} />
       <CollectionProductSection collection={collection} />
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        )
+      })}
       <JsonViewSection data={collection} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/collections/collection-list/collection-list.tsx

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

packages/admin-next/dashboard/src/routes/orders/order-detail/order-detail.tsx

@@ -1,15 +1,19 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
 
 import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useOrder } from "../../../hooks/api/orders"
 import { OrderActivitySection } from "./components/order-activity-section"
 import { OrderCustomerSection } from "./components/order-customer-section"
 import { OrderFulfillmentSection } from "./components/order-fulfillment-section"
 import { OrderGeneralSection } from "./components/order-general-section"
-import { OrderPaymentSection } from "./components/order-payment-section"
 import { OrderSummarySection } from "./components/order-summary-section"
 import { DEFAULT_FIELDS } from "./constants"
 import { orderLoader } from "./loader"
-import { useOrder } from "../../../hooks/api/orders"
+
+import after from "virtual:medusa/widgets/order/details/after"
+import before from "virtual:medusa/widgets/order/details/before"
+import sideAfter from "virtual:medusa/widgets/order/details/side/after"
+import sideBefore from "virtual:medusa/widgets/order/details/side/before"
 
 export const OrderDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof orderLoader>>
@@ -35,21 +39,52 @@ export const OrderDetail = () => {
   }
 
   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">
-        <OrderGeneralSection order={order} />
-        <OrderSummarySection order={order} />
-        {/*<OrderPaymentSection order={order} />*/}
-        <OrderFulfillmentSection order={order} />
-        <div className="flex flex-col gap-y-2 xl:hidden">
+    <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </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">
+          <OrderGeneralSection order={order} />
+          <OrderSummarySection order={order} />
+          {/* <OrderPaymentSection order={order} />*/}
+          <OrderFulfillmentSection order={order} />
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
+          <div className="hidden xl:block">
+            <JsonViewSection data={order} />
+          </div>
+        </div>
+        <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 />
+              </div>
+            )
+          })}
           <OrderCustomerSection order={order} />
           <OrderActivitySection order={order} />
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
+          <div className="xl:hidden">
+            <JsonViewSection data={order} />
+          </div>
         </div>
-        <JsonViewSection data={order} />
-      </div>
-      <div className="hidden w-full max-w-[400px] flex-col gap-y-2 xl:flex">
-        <OrderCustomerSection order={order} />
-        <OrderActivitySection order={order} />
       </div>
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/orders/order-list/order-list.tsx

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

packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx

@@ -44,7 +44,7 @@ export const ProductDetail = () => {
           </div>
         )
       })}
-      <div className="flex flex-col gap-x-4 lg:flex-row lg:items-start">
+      <div className="flex flex-col gap-x-4 xl:flex-row xl:items-start">
         <div className="flex w-full flex-col gap-y-2">
           <ProductGeneralSection product={product} />
           <ProductMediaSection product={product} />
@@ -57,11 +57,11 @@ export const ProductDetail = () => {
               </div>
             )
           })}
-          <div className="hidden lg:block">
+          <div className="hidden xl:block">
             <JsonViewSection data={product} root="product" />
           </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}>
@@ -79,8 +79,8 @@ export const ProductDetail = () => {
               </div>
             )
           })}
-          <div className="lg:hidden">
-            <JsonViewSection data={product} root="product" />
+          <div className="xl:hidden">
+            <JsonViewSection data={product} />
           </div>
         </div>
       </div>