feat(dashboard,admin-vite-plugin): Add product zones and fix zone change effect (#7427)

**What**
- Adds injection zones to the product domain.
- Fixes an issue where changing the `zone` in a widget config to another valid widget would not trigger a HMR event.
- Fixes an issue where UI Routes would not work in production.

packages/admin-next/dashboard/src/lib/extension-helpers.ts

@@ -6,14 +6,14 @@ import { RouteObject } from "react-router-dom"
 export const settingsRouteRegex = /^\/settings\//
 
 export const createRouteMap = (
-  routes: { path: string; file: string }[],
+  routes: { path: string; Component: () => JSX.Element }[],
   ignore?: string
 ): RouteObject[] => {
   const root: RouteObject[] = []
 
   const addRoute = (
     pathSegments: string[],
-    file: string,
+    Component: () => JSX.Element,
     currentLevel: RouteObject[]
   ) => {
     if (!pathSegments.length) {
@@ -33,23 +33,22 @@ export const createRouteMap = (
       route.children.push({
         path: "",
         async lazy() {
-          const { default: Component } = await import(/* @vite-ignore */ file)
           return { Component }
         },
       })
     } else {
       route.children ||= []
-      addRoute(remainingSegments, file, route.children)
+      addRoute(remainingSegments, Component, route.children)
     }
   }
 
-  routes.forEach(({ path, file }) => {
+  routes.forEach(({ path, Component }) => {
     // Remove the ignore segment from the path if it is provided
     const cleanedPath = ignore
       ? path.replace(ignore, "").replace(/^\/+/, "")
       : path.replace(/^\/+/, "")
     const pathSegments = cleanedPath.split("/").filter(Boolean)
-    addRoute(pathSegments, file, root)
+    addRoute(pathSegments, Component, root)
   })
 
   return root

packages/admin-next/dashboard/src/module.d.ts

@@ -7,7 +7,7 @@ declare module "virtual:medusa/widgets/*" {
 }
 
 declare module "virtual:medusa/routes/pages" {
-  const pages: { path: string; file: string }[]
+  const pages: { path: string; Component: () => JSX.Element }[]
 
   export default {
     pages,

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

@@ -1,23 +1,20 @@
 import { Outlet, useLoaderData, useParams } from "react-router-dom"
 
 import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useProduct } from "../../../hooks/api/products"
 import { ProductAttributeSection } from "./components/product-attribute-section"
 import { ProductGeneralSection } from "./components/product-general-section"
 import { ProductMediaSection } from "./components/product-media-section"
 import { ProductOptionSection } from "./components/product-option-section"
+import { ProductOrganizationSection } from "./components/product-organization-section"
 import { ProductSalesChannelSection } from "./components/product-sales-channel-section"
 import { ProductVariantSection } from "./components/product-variant-section"
 import { productLoader } from "./loader"
 
-// import after from "medusa-admin:widgets/product/details/after"
-// @ts-ignore - virtual module
-// import obj from "virtual:config"
+import after from "virtual:medusa/widgets/product/details/after"
 import before from "virtual:medusa/widgets/product/details/before"
-// import sideAfter from "medusa-admin:widgets/product/details/side/after"
-// import sideBefore from "medusa-admin:widgets/product/details/side/before"
-
-import { useProduct } from "../../../hooks/api/products"
-import { ProductOrganizationSection } from "./components/product-organization-section"
+import sideAfter from "virtual:medusa/widgets/product/details/side/after"
+import sideBefore from "virtual:medusa/widgets/product/details/side/before"
 
 // TODO: Use product domain translations only
 export const ProductDetail = () => {
@@ -53,37 +50,35 @@ export const ProductDetail = () => {
           <ProductMediaSection product={product} />
           <ProductOptionSection product={product} />
           <ProductVariantSection product={product} />
-          {/* {after.widgets.map((w, i) => {
+          {after.widgets.map((w, i) => {
             return (
               <div key={i}>
                 <w.Component />
               </div>
             )
-          })} */}
-
+          })}
           <div className="hidden lg: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]">
-          {/* {sideBefore.widgets.map((w, i) => {
+          {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
                 <w.Component />
               </div>
             )
-          })} */}
+          })}
           <ProductSalesChannelSection product={product} />
           <ProductOrganizationSection product={product} />
           <ProductAttributeSection product={product} />
-          {/* {sideAfter.widgets.map((w, i) => {
+          {sideAfter.widgets.map((w, i) => {
             return (
               <div key={i}>
                 <w.Component />
               </div>
             )
-          })} */}
-
+          })}
           <div className="lg:hidden">
             <JsonViewSection data={product} root="product" />
           </div>

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

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