diff --git a/docs/content/admin/routes.md b/docs/content/admin/routes.md
index dfa65a8293..96f900d9e2 100644
--- a/docs/content/admin/routes.md
+++ b/docs/content/admin/routes.md
@@ -176,6 +176,45 @@ When using the `develop` command, the admin dashboard will run in development mo
---
+## Route Props
+
+Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
+
+- `success`: a function that can be used to show a success message.
+- `error`: a function that can be used to show an error message.
+- `warn`: a function that can be used to show a warning message.
+- `info`: a function that can be used to show an info message.
+
+For example:
+
+```tsx
+import { Post } from "../../../../../models/post"
+import PostForm from "../../../../components/post/form"
+import { RouteProps } from "@medusajs/admin-ui"
+
+const BlogPostCreatePage = ({
+ notify,
+}: RouteProps) => {
+ const onSuccess = (post: Post) => {
+ notify.success(
+ "Success",
+ `Post ${post.title} created successfully`
+ )
+ }
+
+ return (
+
+
Create Post
+
+
+ )
+}
+
+export default BlogPostCreatePage
+```
+
+---
+
## Show Route in Sidebar
You can add your routes into the admin dashboard sidebar by exporting an object of type `RouteConfig` import from `@medusajs/admin` in the same route file.
@@ -326,6 +365,8 @@ const CustomPage = () => {
export default CustomPage
```
+### Custom Endpoints
+
You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks).
---
diff --git a/docs/content/admin/setting-pages.md b/docs/content/admin/setting-pages.md
index 5a4ea085aa..3ec93d16b3 100644
--- a/docs/content/admin/setting-pages.md
+++ b/docs/content/admin/setting-pages.md
@@ -11,11 +11,11 @@ In this document, you’ll learn how to create a setting page in the admin.
## Overview
-The admin UI routes allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page.
+The [admin UI routes](./routes.md) allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page.
To do that, you need to create an Admin setting page. The page will automatically be shown as a tab under the Setting page in the admin. The tab leads to the content of your custom page.
-An admin UI route is essentially a React Component created under the `src/admin/settings` directory.
+A setting page is essentially a React Component created under the `src/admin/settings` directory.
This guide explains how to create a new setting page in the admin dashboard with some examples.
@@ -130,7 +130,7 @@ For example, if you want the setting page to be available in the admin dashboard
### Step 2: Create React Component in File
-For an admin route to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page.
+For a setting page to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page.
For example, you can create the file `src/admin/settings/custom/page.tsx` with the following content:
@@ -176,6 +176,51 @@ If you click on the tab, a new page will open with the content as defined in you
---
+## Setting Page Props
+
+Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
+
+- `success`: a function that can be used to show a success message.
+- `error`: a function that can be used to show an error message.
+- `warn`: a function that can be used to show a warning message.
+- `info`: a function that can be used to show an info message.
+
+For example:
+
+```tsx title=src/admin/settings/custom/page.tsx
+import type { SettingConfig } from "@medusajs/admin"
+import type { SettingProps } from "@medusajs/admin-ui"
+
+const CustomSettingPage = ({
+ notify,
+}: SettingProps) => {
+
+ const handleClick = () => {
+ notify.success("Success", "You clicked the button")
+ }
+
+ return (
+
+
Custom Setting Page
+
+
+ )
+}
+
+export const config: SettingConfig = {
+ card: {
+ label: "Custom",
+ description: "Manage your custom settings",
+ },
+}
+
+export default CustomSettingPage
+```
+
+---
+
## Styling Setting Page
Admin setting pages support [Tailwind CSS](https://tailwindcss.com/) by default.
@@ -295,6 +340,8 @@ export const config: SettingConfig = {
export default CustomSettingPage
```
+### Custom Endpoints
+
You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks).
---
diff --git a/docs/content/admin/widgets.md b/docs/content/admin/widgets.md
index 2b56108790..9173b602d7 100644
--- a/docs/content/admin/widgets.md
+++ b/docs/content/admin/widgets.md
@@ -1103,35 +1103,6 @@ Open `localhost:7001` in your browser and log in. Then, go to the details page o
Try making any changes to the component. The development server will hot-reload and your widget will be updated immediately.
-### Styling your Widget
-
-Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box.
-
-For example, you can update the widget you created earlier to use Tailwind CSS classes:
-
-
-
-```tsx title=src/admin/widgets/product-widget.tsx
-import type {
- WidgetConfig,
-} from "@medusajs/admin"
-
-const ProductWidget = () => {
- return (
-
-
Product Widget
-
- )
-}
-
-export const config: WidgetConfig = {
- zone: "product.details.after",
-}
-
-export default ProductWidget
-```
-
### Widget Props
Every widget receives props of the type `WidgetProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
@@ -1179,7 +1150,40 @@ export const config: WidgetConfig = {
export default ProductWidget
```
-### Routing Functionalities
+---
+
+## Styling your Widget
+
+Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box.
+
+For example, you can update the widget you created earlier to use Tailwind CSS classes:
+
+
+
+```tsx title=src/admin/widgets/product-widget.tsx
+import type {
+ WidgetConfig,
+} from "@medusajs/admin"
+
+const ProductWidget = () => {
+ return (
+
+
Product Widget
+
+ )
+}
+
+export const config: WidgetConfig = {
+ zone: "product.details.after",
+}
+
+export default ProductWidget
+```
+
+---
+
+## Routing Functionalities
If you want to navigate to other pages, link to other pages, or use other routing functionalities, you can use [react-router-dom](https://reactrouter.com/en/main) package.
@@ -1224,7 +1228,9 @@ export default ProductWidget
View [react-router-dom’s documentation](https://reactrouter.com/en/main) for other available components and hooks.
-### Querying and Mutating Data
+---
+
+## Querying and Mutating Data
You will most likely need to interact with the Medusa backend from your Widgets. To do so, you can utilize the Medusa React package. It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend.
@@ -1273,6 +1279,8 @@ export const config: WidgetConfig = {
export default ProductWidget
```
+### Custom Endpoints
+
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.mdx#custom-hooks).
---
diff --git a/docs/content/medusa-react/overview.mdx b/docs/content/medusa-react/overview.mdx
index 5f281e2111..ec5cf0248c 100644
--- a/docs/content/medusa-react/overview.mdx
+++ b/docs/content/medusa-react/overview.mdx
@@ -270,7 +270,7 @@ type AdminBlogPostRes = {
const BlogPost = () => {
const { id } = useParams()
- const { data: { post }, isLoading } = useAdminCustomQuery<
+ const { data, isLoading } = useAdminCustomQuery<
AdminBlogPostQuery,
AdminBlogPostRes
>(
@@ -284,7 +284,7 @@ const BlogPost = () => {
return (
<>
{isLoading && Loading...}
- {post && {post.title}}
+ {data && data.post && {data.post.title}}
>
)
}
@@ -320,7 +320,7 @@ type AdminBlogPostsQuery = {
const AuthorsBlogPosts = () => {
const { id } = useParams()
- const { data: { posts }, isLoading } = useAdminCustomQuery<
+ const { data, isLoading } = useAdminCustomQuery<
AdminBlogPostsQuery, AdminBlogPostsRes
>(
`/blog/posts`, // path
@@ -334,9 +334,13 @@ const AuthorsBlogPosts = () => {
return (
<>
{isLoading && Loading...}
- {posts && {posts.map((post, index) => (
- {post.title}
- ))}}
+ {data && data.posts && (
+
+ {data.posts.map((post, index) => (
+ {post.title}
+ ))}
+
+ )}
>
)
}
@@ -427,10 +431,10 @@ export default CreateBlogPost
#### useAdminCustomDelete
-The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the request body if you're using TypeScript in your development:
+The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the expected response if you're using TypeScript in your development:
```ts
-useAdminCustomPost
+useAdminCustomDelete
```
The hook accepts the following parameters: