docs: fixes to medusa-react (#4672)

* docs: fixes to medusa-react

* fixes to admin customization pages

* fix eslint errors

* added routes and settings props

* fixes to settings page

* small fix for settings

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 (
+    <div>
+      <h1 className="text-xl mb-2">Create Post</h1>
+      <PostForm onSuccess={onSuccess} />
+    </div>
+  )
+}
+
+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).
 
 ---

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 (
+    <div>
+      <h1>Custom Setting Page</h1>
+      <button onClick={handleClick}>
+        Click Me
+      </button>
+    </div>
+  )
+}
+
+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).
 
 ---

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:
-
-<!-- eslint-disable max-len -->
-
-```tsx title=src/admin/widgets/product-widget.tsx
-import type { 
-  WidgetConfig,
-} from "@medusajs/admin"
-
-const ProductWidget = () => {
-  return (
-    <div 
-      className="bg-white p-8 border border-gray-200 rounded-lg">
-      <h1>Product Widget</h1>
-    </div>
-  )
-}
-
-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:
+
+<!-- eslint-disable max-len -->
+
+```tsx title=src/admin/widgets/product-widget.tsx
+import type { 
+  WidgetConfig,
+} from "@medusajs/admin"
+
+const ProductWidget = () => {
+  return (
+    <div 
+      className="bg-white p-8 border border-gray-200 rounded-lg">
+      <h1>Product Widget</h1>
+    </div>
+  )
+}
+
+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).
 
 ---

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 && <span>Loading...</span>}
-      {post && <span>{post.title}</span>}
+      {data && data.post && <span>{data.post.title}</span>}
     </>
   )
 }
@@ -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 && <span>Loading...</span>}
-       {posts && <span>{posts.map((post, index) => (
+       {data && data.posts && (
-        <span key={index}>{post.title}</span>
+        <span>
-       ))}</span>}
+          {data.posts.map((post, index) => (
+            <span key={index}>{post.title}</span>
+          ))}
+        </span>
+       )}
      </>
    )
 }
@@ -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<RequestType, ResponseType>
+useAdminCustomDelete<ResponseType>
 ```
 
 The hook accepts the following parameters: