feat(dashboard, medusa) add metadata to pages (#9433)

**WIP**
- add metadata component and edit route to missing pages
- fix API issues around metadata in certain domains

---

FIXES CC-554

packages/admin/dashboard/src/providers/router-provider/route-map.tsx

@@ -234,6 +234,11 @@ export const RouteMap: RouteObject[] = [
                     lazy: () =>
                       import("../../routes/categories/category-organize"),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () =>
+                      import("../../routes/categories/categories-metadata"),
+                  },
                 ],
               },
             ],
@@ -623,6 +628,11 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/reservations/reservation-detail/components/edit-reservation"
                       ),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () =>
+                      import("../../routes/reservations/reservation-metadata"),
+                  },
                 ],
               },
             ],
@@ -681,6 +691,11 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/inventory/inventory-detail/components/adjust-inventory"
                       ),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () =>
+                      import("../../routes/inventory/inventory-metadata"),
+                  },
                   {
                     // TODO: create reservation
                     path: "reservations",
@@ -765,6 +780,10 @@ export const RouteMap: RouteObject[] = [
                     lazy: () =>
                       import("../../routes/regions/region-add-countries"),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () => import("../../routes/regions/region-metadata"),
+                  },
                 ],
               },
             ],
@@ -820,6 +839,10 @@ export const RouteMap: RouteObject[] = [
                     path: "edit",
                     lazy: () => import("../../routes/users/user-edit"),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () => import("../../routes/users/user-metadata"),
+                  },
                 ],
               },
             ],
@@ -867,6 +890,13 @@ export const RouteMap: RouteObject[] = [
                         "../../routes/sales-channels/sales-channel-add-products"
                       ),
                   },
+                  {
+                    path: "metadata/edit",
+                    lazy: () =>
+                      import(
+                        "../../routes/sales-channels/sales-channel-metadata"
+                      ),
+                  },
                 ],
               },
             ],

packages/admin/dashboard/src/routes/categories/categories-metadata/categories-metadata.tsx

@@ -0,0 +1,30 @@
+import { useParams } from "react-router-dom"
+
+import {
+  useProductCategory,
+  useUpdateProductCategory,
+} from "../../../hooks/api"
+import { MetadataForm } from "../../../components/forms/metadata-form"
+import { RouteDrawer } from "../../../components/modals"
+
+export const CategoriesMetadata = () => {
+  const { id } = useParams()
+
+  const { product_category, isPending, isError, error } = useProductCategory(id)
+  const { mutateAsync, isPending: isMutating } = useUpdateProductCategory(id)
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <MetadataForm
+        isPending={isPending}
+        isMutating={isMutating}
+        hook={mutateAsync}
+        metadata={product_category?.metadata}
+      />
+    </RouteDrawer>
+  )
+}

packages/admin/dashboard/src/routes/categories/categories-metadata/index.ts

@@ -0,0 +1 @@
+export { CategoriesMetadata as Component } from "./categories-metadata"

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

@@ -1,5 +1,4 @@
-import { Outlet, useLoaderData, useParams } from "react-router-dom"
-import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useLoaderData, useParams } from "react-router-dom"
 import { useProductCategory } from "../../../hooks/api/categories"
 import { CategoryGeneralSection } from "./components/category-general-section"
 import { CategoryOrganizeSection } from "./components/category-organize-section"
@@ -10,6 +9,7 @@ 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"
+import { TwoColumnPage } from "../../../components/layout/pages"
 
 export const CategoryDetail = () => {
   const { id } = useParams()
@@ -35,51 +35,53 @@ export const CategoryDetail = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-3">
+    <TwoColumnPage
+      widgets={{
+        after,
+        before,
+        sideAfter,
+        sideBefore,
+      }}
+      data={product_category}
+      showJSON
+      showMetadata
+      hasOutlet
+    >
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
             <w.Component data={product_category} />
           </div>
         )
       })}
-      <div className="flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start">
-        <div className="flex w-full flex-col gap-y-3">
-          <CategoryGeneralSection category={product_category} />
-          <CategoryProductSection category={product_category} />
-          {after.widgets.map((w, i) => {
-            return (
-              <div key={i}>
-                <w.Component data={product_category} />
-              </div>
-            )
-          })}
-          <div className="hidden xl:block">
-            <JsonViewSection data={product_category} />
-          </div>
-        </div>
-        <div className="flex w-full max-w-[100%] flex-col gap-y-3 xl:max-w-[400px]">
-          {sideBefore.widgets.map((w, i) => {
-            return (
-              <div key={i}>
-                <w.Component data={product_category} />
-              </div>
-            )
-          })}
-          <CategoryOrganizeSection category={product_category} />
-          {sideAfter.widgets.map((w, i) => {
-            return (
-              <div key={i}>
-                <w.Component data={product_category} />
-              </div>
-            )
-          })}
-          <div className="xl:hidden">
-            <JsonViewSection data={product_category} />
-          </div>
-        </div>
-      </div>
-      <Outlet />
-    </div>
+      <TwoColumnPage.Main>
+        <CategoryGeneralSection category={product_category} />
+        <CategoryProductSection category={product_category} />
+        {after.widgets.map((w, i) => {
+          return (
+            <div key={i}>
+              <w.Component data={product_category} />
+            </div>
+          )
+        })}
+      </TwoColumnPage.Main>
+      <TwoColumnPage.Sidebar>
+        {sideBefore.widgets.map((w, i) => {
+          return (
+            <div key={i}>
+              <w.Component data={product_category} />
+            </div>
+          )
+        })}
+        <CategoryOrganizeSection category={product_category} />
+        {sideAfter.widgets.map((w, i) => {
+          return (
+            <div key={i}>
+              <w.Component data={product_category} />
+            </div>
+          )
+        })}
+      </TwoColumnPage.Sidebar>
+    </TwoColumnPage>
   )
 }

packages/admin/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-general-section.tsx

@@ -1,10 +1,10 @@
 import { Container, Heading } from "@medusajs/ui"
 import { HttpTypes } from "@medusajs/types"
+import { PencilSquare } from "@medusajs/icons"
+import { useTranslation } from "react-i18next"
 
 import { ActionMenu } from "../../../../components/common/action-menu"
-import { PencilSquare } from "@medusajs/icons"
 import { SectionRow } from "../../../../components/common/section"
-import { useTranslation } from "react-i18next"
 
 type InventoryItemGeneralSectionProps = {
   inventoryItem: HttpTypes.AdminInventoryItemResponse["inventory_item"]

packages/admin/dashboard/src/routes/inventory/inventory-metadata/index.ts

@@ -0,0 +1 @@
+export { InventoryItemMetadata as Component } from "./inventory-metadata"

packages/admin/dashboard/src/routes/inventory/inventory-metadata/inventory-metadata.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom"
+
+import { useInventoryItem, useUpdateInventoryItem } from "../../../hooks/api"
+import { MetadataForm } from "../../../components/forms/metadata-form"
+import { RouteDrawer } from "../../../components/modals"
+
+export const InventoryItemMetadata = () => {
+  const { id } = useParams()
+
+  const { inventory_item, isPending, isError, error } = useInventoryItem(id)
+  const { mutateAsync, isPending: isMutating } = useUpdateInventoryItem(id)
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <MetadataForm
+        isPending={isPending}
+        isMutating={isMutating}
+        hook={mutateAsync}
+        metadata={inventory_item?.metadata}
+      />
+    </RouteDrawer>
+  )
+}

packages/admin/dashboard/src/routes/regions/region-detail/region-detail.tsx

@@ -9,6 +9,8 @@ import { regionLoader } from "./loader"
 import after from "virtual:medusa/widgets/region/details/after"
 import before from "virtual:medusa/widgets/region/details/before"
 import { usePricePreferences } from "../../../hooks/api/price-preferences"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { UserGeneralSection } from "../../users/user-detail/components/user-general-section"
 
 export const RegionDetail = () => {
   const initialData = useLoaderData() as Awaited<
@@ -56,7 +58,16 @@ export const RegionDetail = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-2">
+    <SingleColumnPage
+      widgets={{
+        before,
+        after,
+      }}
+      data={region}
+      hasOutlet
+      showMetadata
+      showJSON
+    >
       {before.widgets.map((w, i) => {
         return (
           <div key={i}>
@@ -76,8 +87,6 @@ export const RegionDetail = () => {
           </div>
         )
       })}
-      <JsonViewSection data={region} />
-      <Outlet />
-    </div>
+    </SingleColumnPage>
   )
 }

packages/admin/dashboard/src/routes/regions/region-metadata/index.ts

@@ -0,0 +1 @@
+export { RegionMetadata as Component } from "./region-metadata.tsx"

packages/admin/dashboard/src/routes/regions/region-metadata/region-metadata.tsx

@@ -0,0 +1,27 @@
+import { useParams } from "react-router-dom"
+
+import { MetadataForm } from "../../../components/forms/metadata-form"
+import { RouteDrawer } from "../../../components/modals"
+import { useRegion, useUpdateRegion } from "../../../hooks/api"
+
+export const RegionMetadata = () => {
+  const { id } = useParams()
+
+  const { region, isPending, isError, error } = useRegion(id)
+  const { mutateAsync, isPending: isMutating } = useUpdateRegion(id)
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <MetadataForm
+        isPending={isPending}
+        isMutating={isMutating}
+        hook={mutateAsync}
+        metadata={region?.metadata}
+      />
+    </RouteDrawer>
+  )
+}