feat(dashboard,admin-shared): InjectionZones for Profile, Store, Users and Login (#7471)

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

@@ -82,6 +82,23 @@ const GIFT_CARD_INJECTION_ZONES = [
   "custom_gift_card.after",
 ] as const
 
+const USER_INJECTION_ZONES = [
+  "user.details.before",
+  "user.details.after",
+  "user.list.before",
+  "user.list.after",
+] as const
+
+const STORE_INJECTION_ZONES = [
+  "store.details.before",
+  "store.details.after",
+] as const
+
+const PROFILE_INJECTION_ZONES = [
+  "profile.details.before",
+  "profile.details.after",
+] as const
+
 const REGION_INJECTION_ZONES = [
   "region.details.before",
   "region.details.after",
@@ -122,6 +139,9 @@ export const INJECTION_ZONES = [
   ...PRICE_LIST_INJECTION_ZONES,
   ...PROMOTION_INJECTION_ZONES,
   ...GIFT_CARD_INJECTION_ZONES,
+  ...USER_INJECTION_ZONES,
+  ...STORE_INJECTION_ZONES,
+  ...PROFILE_INJECTION_ZONES,
   ...REGION_INJECTION_ZONES,
   ...SHIPPING_PROFILE_INJECTION_ZONES,
   ...LOCATION_INJECTION_ZONES,

packages/admin-next/dashboard/src/routes/login/login.tsx

@@ -5,11 +5,15 @@ import { Trans, useTranslation } from "react-i18next"
 import { Link, useLocation, useNavigate } from "react-router-dom"
 import * as z from "zod"
 
+import { Divider } from "../../components/common/divider"
 import { Form } from "../../components/common/form"
 import { LogoBox } from "../../components/common/logo-box"
 import { useEmailPassLogin } from "../../hooks/api/auth"
 import { isAxiosError } from "../../lib/is-axios-error"
 
+import after from "virtual:medusa/widgets/login/after"
+import before from "virtual:medusa/widgets/login/before"
+
 const LoginSchema = z.object({
   email: z.string().email(),
   password: z.string(),
@@ -76,6 +80,14 @@ export const Login = () => {
             {t("login.hint")}
           </Text>
         </div>
+        <div className="flex w-full flex-col gap-y-3">
+          {before.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
           <Form {...form}>
             <form
               onSubmit={handleSubmit}
@@ -127,7 +139,15 @@ export const Login = () => {
               </Alert>
             )}
           </Form>
-        <div className="my-6 h-px w-full border-b border-dotted" />
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            )
+          })}
+        </div>
+        <Divider variant="dashed" className="my-6" />
         <span className="text-ui-fg-subtle txt-small">
           <Trans
             i18nKey="login.forgotPassword"

packages/admin-next/dashboard/src/routes/profile/profile-detail/profile-detail.tsx

@@ -1,7 +1,11 @@
 import { Outlet, json } from "react-router-dom"
+
 import { useMe } from "../../../hooks/api/users"
 import { ProfileGeneralSection } from "./components/profile-general-section"
 
+import after from "virtual:medusa/widgets/profile/details/after"
+import before from "virtual:medusa/widgets/profile/details/before"
+
 export const ProfileDetail = () => {
   const { user, isPending: isLoading, isError, error } = useMe()
 
@@ -19,7 +23,17 @@ export const ProfileDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={user} />
+        </div>
+      ))}
       <ProfileGeneralSection user={user} />
+      {after.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={user} />
+        </div>
+      ))}
       <Outlet />
     </div>
   )

packages/admin-next/dashboard/src/routes/store/store-detail/store-detail.tsx

@@ -6,6 +6,9 @@ import { StoreCurrencySection } from "./components/store-currency-section/store-
 import { StoreGeneralSection } from "./components/store-general-section/index.ts"
 import { storeLoader } from "./loader.ts"
 
+import after from "virtual:medusa/widgets/store/details/after"
+import before from "virtual:medusa/widgets/store/details/before"
+
 export const StoreDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof storeLoader>>
 
@@ -28,8 +31,18 @@ export const StoreDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={store} />
+        </div>
+      ))}
       <StoreGeneralSection store={store} />
       <StoreCurrencySection store={store} />
+      {after.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={store} />
+        </div>
+      ))}
       <JsonViewSection data={store} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/users/user-detail/user-detail.tsx

@@ -1,9 +1,13 @@
 import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
 import { useUser } from "../../../hooks/api/users"
 import { UserGeneralSection } from "./components/user-general-section"
 import { userLoader } from "./loader"
 
+import after from "virtual:medusa/widgets/user/details/after"
+import before from "virtual:medusa/widgets/user/details/before"
+
 export const UserDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof userLoader>>
 
@@ -31,7 +35,17 @@ export const UserDetail = () => {
 
   return (
     <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={user} />
+        </div>
+      ))}
       <UserGeneralSection user={user} />
+      {after.widgets.map((w, i) => (
+        <div key={i}>
+          <w.Component data={user} />
+        </div>
+      ))}
       <JsonViewSection data={user} />
       <Outlet />
     </div>

packages/admin-next/dashboard/src/routes/users/user-list/user-list.tsx

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