docs: added medusa-react snippets in how-to guides (#3091)

* added medusa-react snippets

* added more code snippets

* added medusa-react snippets

* docs: added medusa-react snippets to storefront how-to

* docs: added medusa-react snippets in admin how-to

* docs: fixed incorrect link

docs/content/advanced/admin/import-prices.mdx

@@ -40,10 +40,16 @@ You must have a CSV file that you will use to import prices into your Medusa ser
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -67,17 +73,37 @@ You can do that by sending the following request to the [Upload Files](https://d
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.uploads.create(file) // file is an instance of File
 .then(({ uploads }) => {
 	const key = uploads[0].key
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUploadFile } from "medusa-react"
+
+const ImportPrices = () => {
+  const uploadFile = useAdminUploadFile()
+  // ...
+
+  const handleFileUpload = (file: File) => {
+    uploadFile.mutate(file)
+  }
+
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 const formData = new FormData()
 formData.append("files", file) // file is an instance of File
 
@@ -121,7 +147,7 @@ You can do that by sending the following request to the [Create a Batch Job](htt
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.create({
 	type: "price-list-import",
 	context: {
@@ -135,10 +161,36 @@ medusa.admin.batchJobs.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const createBatchJob = useAdminCreateBatchJob()
+  // ...
+
+  const handleCreateBatchJob = () => {
+    createBatchJob.mutate({
+      type: "price-list-import",
+      context: {
+        fileKey: key, // obtained from previous step
+      },
+      dry_run: true,
+    })
+  }
+
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
 	method: "POST",
 	credentials: "include",
@@ -209,17 +261,44 @@ You can retrieve all the details of the batch job, including its status and the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.retrieve(batchJobId)
 .then(( batch_job ) => {
 	console.log(batch_job.status, batch_job.result)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const { batch_job, isLoading } = useAdminBatchJob(batchJobId)
+  // ...
+
+  return (
+    <div>
+      {/* ... */}
+      {isLoading && <span>Loading</span>}
+      {batch_job && (
+        <span>
+          Status: {batch_job.status}. 
+          Number of Prices: {batch_job.result.count}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
 	credentials: "include",
 })
@@ -272,17 +351,37 @@ To confirm a batch job send the following request:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.confirm(batchJobId)
 .then(( batch_job ) => {
 	console.log(batch_job.status)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const confirmBatchJob = useAdminConfirmBatchJob(batchJobId)
+  // ...
+
+  const handleConfirmJob = () => {
+    confirmBatchJob.mutate()
+  }
+  
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
 	method: "POST",
 	credentials: "include",

docs/content/advanced/admin/import-products.mdx

@@ -40,10 +40,16 @@ If you have Sales Channels enabled on your server, you must use [this CSV exampl
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -61,17 +67,37 @@ You can do that by sending the following request to the [Upload Files](https://d
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.uploads.create(file) // file is an instance of File
 .then(({ uploads }) => {
   const key = uploads[0].key
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUploadFile } from "medusa-react"
+
+const ImportProducts = () => {
+  const uploadFile = useAdminUploadFile()
+  // ...
+
+  const handleFileUpload = (file: File) => {
+    uploadFile.mutate(file)
+  }
+
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 const formData = new FormData()
 formData.append("files", file) // file is an instance of File
 
@@ -115,7 +141,7 @@ You can do that by sending the following request to the [Create a Batch Job](htt
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.create({
   type: "product-import",
   context: {
@@ -128,10 +154,36 @@ medusa.admin.batchJobs.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const createBatchJob = useAdminCreateBatchJob()
+  // ...
+
+  const handleCreateBatchJob = () => {
+    createBatchJob.mutate({
+      type: "product-import",
+      context: {
+        fileKey: key, // obtained from previous step
+      },
+      dry_run: true,
+    })
+  }
+
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
   method: "POST",
   credentials: "include",
@@ -197,17 +249,44 @@ You can retrieve all the details of the batch job, including its status and the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.retrieve(batchJobId)
 .then(( batch_job ) => {
   console.log(batch_job.status, batch_job.result)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const { batch_job, isLoading } = useAdminBatchJob(batchJobId)
+  // ...
+
+  return (
+    <div>
+      {/* ... */}
+      {isLoading && <span>Loading</span>}
+      {batch_job && (
+        <span>
+          Status: {batch_job.status}. 
+          Number of Products: {batch_job.result.count}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
   credentials: "include",
 })
@@ -260,17 +339,37 @@ To confirm a batch job send the following request:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.batchJobs.confirm(batchJobId)
 .then(( batch_job ) => {
   console.log(batch_job.status)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const confirmBatchJob = useAdminConfirmBatchJob(batchJobId)
+  // ...
+
+  const handleConfirmJob = () => {
+    confirmBatchJob.mutate()
+  }
+  
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
   method: "POST",
   credentials: "include",

docs/content/advanced/admin/manage-customers.mdx

@@ -31,6 +31,12 @@ This guide includes code snippets to send requests to your Medusa server using M
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -53,6 +59,34 @@ medusa.admin.customers.list()
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminCustomers } from "medusa-react"
+
+const Customers = () => {
+  const { customers, isLoading } = useAdminCustomers()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customers && !customers.length && <span>No customers</span>}
+      {customers && customers.length > 0 && (
+        <ul>
+          {customers.map((customer: Customer) => (
+            <li key={customer.id}>{customer.first_name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Customers
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -115,6 +149,38 @@ medusa.admin.customers.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateCustomer } from "medusa-react"
+
+const CreateCustomer = () => {
+  const createCustomer = useAdminCreateCustomer()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createCustomer.mutate({
+      first_name,
+      last_name,
+      email,
+      password,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default CreateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -187,6 +253,38 @@ medusa.admin.customers.update(customerId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateCustomer } from "medusa-react"
+
+const UpdateCustomer = () => {
+  const updateCustomer = useAdminUpdateCustomer(customerId)
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateCustomer.mutate({
+      email,
+      password,
+      first_name,
+      last_name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 

docs/content/advanced/admin/manage-discounts.mdx

@@ -43,6 +43,12 @@ This guide includes code snippets to send requests to your Medusa server using M
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -58,7 +64,7 @@ You can create a discount by sending a request to the [Create Discount](/api/adm
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 import { AllocationType, DiscountRuleType } from "@medusajs/medusa"
 // ...
 medusa.admin.discounts.create({
@@ -69,18 +75,54 @@ medusa.admin.discounts.create({
     allocation: AllocationType.ITEM,
   },
   regions: [
-      regionId,
+    regionId,
   ],
+  is_dynamic: false,
+  is_disabled: false,
 })
 .then(({ discount }) => {
   console.log(discount.id)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateDiscount } from "medusa-react"
+import { AllocationType, DiscountRuleType } from "@medusajs/medusa"
+
+const CreateDiscount = () => {
+  const createDiscount = useAdminCreateDiscount()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createDiscount.mutate({
+      code,
+      rule: {
+        type: DiscountRuleType.FIXED,
+        value: 10,
+        allocation: AllocationType.ITEM,
+      },
+      regions: [
+          regionId,
+      ],
+      is_dynamic: false,
+      is_disabled: false,
+    })
+  }
+
+  // ...
+}
+
+export default CreateDiscount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts`, {
   method: "POST",
   credentials: "include",
@@ -97,6 +139,8 @@ fetch(`<YOUR_SERVER>/admin/discounts`, {
     regions: [
       regionId,
     ],
+    is_dynamic: false,
+    is_disabled: false,
   }),
 })
 .then((response) => response.json())
@@ -121,7 +165,9 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts' \
     },
     "regions": [
       "<REGION_ID>"
-    ]
+    ],
+    "is_dynamic": false,
+    "is_disabled": false
 }'
 ```
 
@@ -150,9 +196,8 @@ For example, you can update the discount’s description and status by sending t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.discounts.update(discountId, {
-  description: "New description",
   is_disabled: true,
 })
 .then(({ discount }) => {
@@ -160,10 +205,33 @@ medusa.admin.discounts.update(discountId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateDiscount } from "medusa-react"
+
+const UpdateDiscount = () => {
+  const updateDiscount = useAdminUpdateDiscount(discount_id)
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateDiscount.mutate({
+      is_disabled: true,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateDiscount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
   method: "POST",
   credentials: "include",
@@ -171,7 +239,6 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
     "Content-Type": "application/json",
   },
   body: JSON.stringify({
-    description: "New description",
     is_disabled: true,
   }),
 })
@@ -189,7 +256,6 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
 -H 'Authorization: Bearer <API_TOKEN>' \
 -H 'Content-Type: application/json' \
 --data-raw '{
-  "description": "New description",
   "is_disabled": true
 }'
 ```
@@ -197,7 +263,7 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
 </TabItem>
 </Tabs>
 
-This request accepts the discount ID as a path parameter. You can pass the parameters you want to update in the request body. In the example above, you pass the `description` and `is_disabled` parameters to update them.
+This request accepts the discount ID as a path parameter. You can pass the parameters you want to update in the request body. In the example above, is_disabled` parameter to update it.
 
 You can check the [API reference](/api/admin/#tag/Discount/operation/PostDiscountsDiscount) for all the accepted parameters to update the discount.
 
@@ -220,7 +286,7 @@ You can send a request to the [Create Condition](/api/admin/#tag/Discount-Condit
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 import { DiscountConditionOperator } from "@medusajs/medusa"
 // ...
 medusa.admin.discounts.createCondition(discount_id, {
@@ -234,10 +300,40 @@ medusa.admin.discounts.createCondition(discount_id, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountCreateCondition } from "medusa-react"
+import { DiscountConditionOperator } from "@medusajs/medusa"
+
+const Discount = () => {
+  const createCondition = useAdminDiscountCreateCondition(discount_id)
+  // ...
+
+  const handleCreateCondition = (
+    operator: DiscountConditionOperator, 
+    productId: string
+  ) => {
+    // ...
+    createCondition.mutate({
+      operator,
+      products: [
+        productId,
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions`, {
   method: "POST",
   credentials: "include",
@@ -299,7 +395,7 @@ You can retrieve a condition and its resources by sending a request to the [Get
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.discounts.getCondition(discountId, conditionId, {
   expand: "products",
 })
@@ -308,10 +404,44 @@ medusa.admin.discounts.getCondition(discountId, conditionId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminGetDiscountCondition } from "medusa-react"
+import { Product } from "@medusajs/medusa"
+
+const DiscountCondition = () => {
+  const { discount_condition, isLoading } = useAdminGetDiscountCondition(
+    discount_id, 
+    conditionId
+  )
+  // ...
+
+  return (
+    <div>
+      {isLoading && <span>Loading</span>}
+      {discount_condition && (
+        <>
+          <span>{discount_condition.id}</span>
+          <ul>
+            {discount_condition.products.map((product: Product) => (
+              <li key={product.id}>{product.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default DiscountCondition
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(
   `<YOUR_SERVER>/admin/discounts/${discountId}` + 
   `/conditions/${conditionId}&expand=products`,
@@ -351,7 +481,7 @@ For example, to update the products in a condition:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.discounts.updateCondition(discountId, conditionId, {
   products: [
     productId1,
@@ -363,10 +493,36 @@ medusa.admin.discounts.updateCondition(discountId, conditionId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountUpdateCondition } from "medusa-react"
+import { Product } from "@medusajs/medusa"
+
+const DiscountCondition = () => {
+  const updateCondition = useAdminDiscountUpdateCondition(
+    discount_id, 
+    conditionId
+  )
+  // ...
+
+  const handleUpdateCondition = (productIds: string[]) => {
+    updateCondition.mutate({
+      products: productIds,
+    })
+  }
+
+  // ...
+}
+
+export default DiscountCondition
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(
   `<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`, 
   {
@@ -420,17 +576,37 @@ You can delete a condition by sending a request to the [Delete Condition](/api/a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.discounts.deleteCondition(discountId, conditionId)
 .then(({ discount }) => {
   console.log(discount)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountRemoveCondition } from "medusa-react"
+
+const Discount = () => {
+  const deleteCondition = useAdminDiscountRemoveCondition(discount_id)
+  // ...
+
+  const handleUpdateCondition = (conditionId: string) => {
+    deleteCondition.mutate(conditionId)
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(
   `<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`,
   {
@@ -468,17 +644,37 @@ You can delete a discount by sending a request to the [Delete Discount](/api/adm
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.discounts.delete(discount_id)
 .then(({ id, object, deleted }) => {
   console.log(id)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteDiscount } from "medusa-react"
+
+const Discount = () => {
+  const deleteDiscount = useAdminDeleteDiscount(discount_id)
+  // ...
+
+  const handleDelete = () => {
+    deleteDiscount.mutate()
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
   method: "DELETE",
   credentials: "include",

docs/content/advanced/admin/manage-gift-cards.mdx

@@ -32,10 +32,16 @@ It is assumed that you already have a Medusa server installed and set up. If not
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -71,6 +77,37 @@ medusa.admin.products.list({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
+import { useAdminProducts } from "medusa-react"
+
+const GiftCard = () => {
+  const { products, isLoading } = useAdminProducts({
+    is_giftcard: true,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: (Product | PricedProduct)) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Gift Cards</span>}
+    </div>
+  )
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -149,6 +186,55 @@ medusa.admin.products.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateProduct } from "medusa-react"
+import { ProductStatus } from "@medusajs/medusa"
+
+const CreateGiftCard = () => {
+  const createGiftCard = useAdminCreateProduct()
+  // ...
+
+  const handleCreate = () => {
+    createGiftCard.mutate({
+      title: "My Gift Card",
+      is_giftcard: true,
+      discountable: false,
+      status: ProductStatus.PUBLISHED,
+      options: [
+        {
+          title: "Denomination",
+        },
+      ],
+      variants: [
+        {
+          title: "1",
+          inventory_quantity: 0,
+          manage_inventory: false,
+          prices: [
+              {
+                  amount: 2000,
+                  currency_code: "usd",
+              },
+          ],
+          options: [
+              {
+                  value: "2000",
+              },
+          ],
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreateGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -266,6 +352,28 @@ medusa.admin.products.update(giftCardId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateProduct } from "medusa-react"
+
+const UpdateGiftCard = () => {
+  const createGiftCard = useAdminUpdateProduct(giftCardId)
+  // ...
+
+  const handleUpdate = () => {
+    createGiftCard.mutate({
+      description: "The best gift card",
+    })
+  }
+
+  // ...
+}
+
+export default UpdateGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -321,6 +429,26 @@ medusa.admin.products.delete(giftCardId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteProduct } from "medusa-react"
+
+const GiftCard = () => {
+  const deleteGiftCard = useAdminDeleteProduct(giftCardId)
+  // ...
+
+  const handleDelete = () => {
+    deleteGiftCard.mutate()
+  }
+
+  // ...
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -374,6 +502,36 @@ medusa.admin.giftCards.list()
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { GiftCard } from "@medusajs/medusa"
+import { useAdminGiftCards } from "medusa-react"
+
+const CustomGiftCards = () => {
+  const { gift_cards, isLoading } = useAdminGiftCards()
+  
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {gift_cards && !gift_cards.length && (
+        <span>No custom gift cards...</span>
+      )}
+      {gift_cards && gift_cards.length > 0 && (
+        <ul>
+          {gift_cards.map((giftCard: GiftCard) => (
+            <li key={giftCard.id}>{giftCard.code}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -421,6 +579,29 @@ medusa.admin.giftCards.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateGiftCard } from "medusa-react"
+
+const CreateCustomGiftCards = () => {
+  const createGiftCard = useAdminCreateGiftCard()
+  // ...
+  
+  const handleCreate = (regionId: string, value: number) => {
+    createGiftCard.mutate({
+      region_id: regionId,
+      value,
+    })
+  }
+
+  // ...
+}
+
+export default CreateCustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -482,6 +663,28 @@ medusa.admin.giftCards.update(giftCardId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateGiftCard } from "medusa-react"
+
+const UpdateCustomGiftCards = () => {
+  const updateGiftCard = useAdminUpdateGiftCard(customGiftCardId)
+  // ...
+  
+  const handleUpdate = (regionId: string) => {
+    updateGiftCard.mutate({
+      region_id: regionId,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateCustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -537,6 +740,26 @@ medusa.admin.giftCards.delete(giftCardId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteGiftCard } from "medusa-react"
+
+const CustomGiftCard = () => {
+  const deleteGiftCard = useAdminDeleteGiftCard(customGiftCardId)
+  // ...
+  
+  const handleDelete = () => {
+    deleteGiftCard.mutate()
+  }
+
+  // ...
+}
+
+export default CustomGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 

docs/content/advanced/admin/manage-publishable-api-keys.mdx

@@ -36,10 +36,16 @@ It is assumed that you already have a Medusa server installed and set up. If not
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -62,6 +68,38 @@ medusa.admin.publishableApiKeys.list()
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PublishableApiKey } from "@medusajs/medusa"
+import { useAdminPublishableApiKeys } from "medusa-react"
+
+const PublishabelApiKeys = () => {
+  const { publishable_api_keys, isLoading } = useAdminPublishableApiKeys()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {publishable_api_keys && !publishable_api_keys.length && (
+        <span>No Publishable API Keys</span>
+      )}
+      {publishable_api_keys && publishable_api_keys.length > 0 && (
+        <ul>
+          {publishable_api_keys.map(
+            (publishableApiKey: PublishableApiKey) => (
+              <li key={publishableApiKey.id}>{publishableApiKey.title}</li>
+            )
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default PublishabelApiKeys
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -119,6 +157,28 @@ medusa.admin.publishableApiKeys.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreatePublishableApiKey } from "medusa-react"
+
+const CreatePublishableApiKey = () => {
+  const createKey = useAdminCreatePublishableApiKey()
+  // ...
+
+  const handleCreate = (title: string) => {
+    createKey.mutate({
+      title,
+    })
+  }
+
+  // ...
+}
+
+export default CreatePublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -176,6 +236,28 @@ medusa.admin.publishableApiKeys.update(publishableApiKeyId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdatePublishableApiKey } from "medusa-react"
+
+const UpdatePublishableApiKey = () => {
+  const updateKey = useAdminUpdatePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleUpdate = (title: string) => {
+    updateKey.mutate({
+      title,
+    })
+  }
+
+  // ...
+}
+
+export default UpdatePublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -233,6 +315,26 @@ medusa.admin.publishableApiKeys.revoke(publishableApiKeyId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminRevokePublishableApiKey } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const revokeKey = useAdminRevokePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleRevoke = () => {
+    revokeKey.mutate()
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -279,6 +381,26 @@ medusa.admin.publishableApiKeys.delete(publishableApiKeyId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePublishableApiKey } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const deleteKey = useAdminDeletePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleDelete = () => {
+    deleteKey.mutate()
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -332,6 +454,39 @@ medusa.admin.publishableApiKeys.listSalesChannels(publishableApiKeyId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { SalesChannel } from "@medusajs/medusa"
+import { useAdminPublishableApiKeySalesChannels } from "medusa-react"
+
+const SalesChannels = () => {
+  const { sales_channels, isLoading } = 
+    useAdminPublishableApiKeySalesChannels(
+      publishableApiKeyId
+    )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {sales_channels && !sales_channels.length && (
+        <span>No Sales Channels</span>
+      )}
+      {sales_channels && sales_channels.length > 0 && (
+        <ul>
+          {sales_channels.map((salesChannel: SalesChannel) => (
+            <li key={salesChannel.id}>{salesChannel.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default SalesChannels
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -388,6 +543,34 @@ medusa.admin.publishableApiKeys.addSalesChannelsBatch(
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddPublishableKeySalesChannelsBatch } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const addSalesChannels = useAdminAddPublishableKeySalesChannelsBatch(
+    publishableApiKeyId
+  )
+  // ...
+
+  const handleAdd = (salesChannelId: string) => {
+    addSalesChannels.mutate({
+      sales_channel_ids: [
+        {
+          id: salesChannelId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -467,6 +650,37 @@ medusa.admin.publishableApiKeys.deleteSalesChannelsBatch(
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { 
+  useAdminRemovePublishableKeySalesChannelsBatch,
+} from "medusa-react"
+
+const PublishableApiKey = () => {
+  const deleteSalesChannels = 
+    useAdminRemovePublishableKeySalesChannelsBatch(
+      publishableApiKeyId
+    )
+  // ...
+
+  const handleDelete = (salesChannelId: string) => {
+    deleteSalesChannels.mutate({
+      sales_channel_ids: [
+        {
+          id: salesChannelId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 

docs/content/advanced/admin/manage-regions.mdx

@@ -35,10 +35,16 @@ It is assumed that you already have a Medusa server installed and set up. If not
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -54,7 +60,7 @@ You can retrieve regions available on your server using the [List Regions](/api/
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.admin.regions.list()
 .then(({ regions, limit, offset, count }) => {
   console.log(regions.length)
@@ -63,9 +69,37 @@ medusa.admin.regions.list()
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { Region } from "@medusajs/medusa"
+import { useAdminRegions } from "medusa-react"
+
+const Regions = () => {
+  const { regions, isLoading } = useAdminRegions()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {regions && !regions.length && <span>No Regions</span>}
+      {regions && regions.length > 0 && (
+        <ul>
+          {regions.map((region: Region) => (
+            <li key={region.id}>{region.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Regions
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions`, {
   credentials: "include",
 })
@@ -100,7 +134,7 @@ You can create a region by sending a request to the [Create a Region](/api/admin
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.admin.regions.create({
   name: "Europe",
   currency_code: "eur",
@@ -121,9 +155,42 @@ medusa.admin.regions.create({
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { useAdminCreateRegion } from "medusa-react"
+
+const CreateRegion = () => {
+  const createRegion = useAdminCreateRegion()
+  // ...
+
+  const handleCreate = () => {
+    createRegion.mutate({
+      name: "Europe",
+      currency_code: "eur",
+      tax_rate: 0,
+      payment_providers: [
+        "manual",
+      ],
+      fulfillment_providers: [
+        "manual",
+      ],
+      countries: [
+        "DK",
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreateRegion
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions`, {
   credentials: "include",
   method: "POST",
@@ -198,7 +265,7 @@ Alternatively, you can update the details of a region using the [Update a Region
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.admin.regions.update(regionId, {
   countries: [
     "DK",
@@ -211,9 +278,34 @@ medusa.admin.regions.update(regionId, {
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { useAdminUpdateRegion } from "medusa-react"
+
+const UpdateRegion = () => {
+  const updateRegion = useAdminUpdateRegion(regionId)
+  // ...
+
+  const handleUpdate = () => {
+    updateRegion.mutate({
+      countries: [
+        "DK",
+        "DE",
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default UpdateRegion
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions/${regionId}`, {
   credentials: "include",
   method: "POST",
@@ -269,7 +361,7 @@ You can add a shipping option to a region by sending a request to the [Create Sh
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.admin.shippingOptions.create({
   name: "PostFake",
   region_id: regionId,
@@ -285,9 +377,37 @@ medusa.admin.shippingOptions.create({
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { useAdminCreateShippingOption } from "medusa-react"
+
+const Region = () => {
+  const createShippingOption = useAdminCreateShippingOption()
+  // ...
+
+  const handleCreate = () => {
+    createShippingOption.mutate({
+      name: "PostFake",
+      region_id: regionId,
+      provider_id: "manual",
+      data: {
+      },
+      price_type: "flat_rate",
+      amount: 1000,
+    })
+  }
+
+  // ...
+}
+
+export default Region
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/shipping-options`, {
   credentials: "include",
   method: "POST",
@@ -357,7 +477,7 @@ You can delete a region by sending a request to the [Delete a Region](/api/admin
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```tsx
+```ts
 medusa.admin.regions.delete(regionId)
 .then(({ id, object, deleted }) => {
   console.log(id)
@@ -365,9 +485,29 @@ medusa.admin.regions.delete(regionId)
 ```
 
 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">
 
 ```tsx
+import { useAdminDeleteRegion } from "medusa-react"
+
+const Region = () => {
+  const deleteRegion = useAdminDeleteRegion(regionId)
+  // ...
+
+  const handleDelete = () => {
+    deleteRegion.mutate()
+  }
+
+  // ...
+}
+
+export default Region
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions/${regionId}`, {
   credentials: "include",
   method: "DELETE",

docs/content/advanced/admin/order-edit.mdx

@@ -49,10 +49,16 @@ It is assumed that you already have a Medusa server installed and set up. If not
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -83,6 +89,27 @@ medusa.admin.orderEdits.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const createOrderEdit = useAdminCreateOrderEdit()
+
+  const handleCreateOrderEdit = (orderId: string) => {
+    createOrderEdit.mutate({
+      order_id: orderId,
+    })
+  }
+  
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -157,6 +184,28 @@ medusa.admin.orderEdits.addLineItem(orderEditId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditAddLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const addLineItem = useAdminOrderEditAddLineItem(orderEditId)
+
+  const handleAddLineItem = (quantity: number, variantId: string) => {
+    addLineItem.mutate({
+      quantity,
+      variant_id: variantId,
+    })
+  }
+  
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -218,6 +267,30 @@ medusa.admin.orderEdits.updateLineItem(orderEditId, itemId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditUpdateLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const updateLineItem = useAdminOrderEditUpdateLineItem(
+    orderEditId, 
+    itemId
+  )
+  
+  const handleUpdateLineItem = (quantity: number) => {
+    updateLineItem.mutate({
+      quantity,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -273,6 +346,28 @@ medusa.admin.orderEdits.removeLineItem(orderEditId, itemId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditDeleteLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const removeLineItem = useAdminOrderEditDeleteLineItem(
+    orderEditId, 
+    itemId
+  )
+  
+  const handleRemoveLineItem = () => {
+    removeLineItem.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -320,6 +415,28 @@ medusa.admin.orderEdits.deleteItemChange(orderEditId, changeId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteOrderEditItemChange } from "medusa-react"
+
+const OrderEdit = () => {
+  const deleteItemChange = useAdminDeleteOrderEditItemChange(
+    orderEditId, 
+    itemChangeId
+  )
+  
+  const handleDeleteItemChange = () => {
+    deleteItemChange.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -374,6 +491,28 @@ medusa.admin.orderEdits.requestConfirmation(orderEditId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminRequestOrderEditConfirmation } from "medusa-react"
+
+const OrderEdit = () => {
+  const requestOrderConfirmation = 
+    useAdminRequestOrderEditConfirmation(
+      orderEditId
+    )
+  
+  const handleRequestConfirmation = () => {
+    requestOrderConfirmation.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -441,6 +580,25 @@ medusa.admin.orderEdits.confirm(orderEditId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const confirmOrderEdit = useAdminConfirmOrderEdit(orderEditId)
+  
+  const handleConfirmOrderEdit = () => {
+    confirmOrderEdit.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -503,6 +661,25 @@ medusa.admin.payments.capturePayment(paymentId)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminPaymentsCapturePayment } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const capturePayment = useAdminPaymentsCapturePayment(paymentId)
+  
+  const handleCapturePayment = () => {
+    capturePayment.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -542,14 +719,41 @@ To refund the difference to the customer, send a request to the [Refund Payment]
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```ts
+import { RefundReason } from "@medusajs/medusa"
+// ...
+
 medusa.admin.payments.refundPayment(paymentId, {
   amount,
+  reason: RefundReason.DISCOUNT, // for example
 })
 .then(({ refund }) => {
   console.log(refund.id)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminPaymentsRefundPayment } from "medusa-react"
+import { RefundReason } from "@medusajs/medusa"
+
+const OrderEditPayment = () => {
+  const refundPayment = useAdminPaymentsRefundPayment(paymentId)
+  
+  const handleRefundPayment = (amount: number, reason: RefundReason) => {
+    refundPayment.mutate({
+      amount,
+      reason,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
@@ -562,6 +766,7 @@ fetch(`<YOUR_SERVER>/admin/payments/${paymentId}/refund`, {
   },
   body: JSON.stringify({
     amount,
+    reason: "discount",
   }),
 })
 .then((response) => response.json())
@@ -578,7 +783,8 @@ curl -L -X POST '<SERVER_URL>/admin/payments/<PAYMENT_ID>/refund' \
 -H 'Authorization: Bearer <API_TOKEN>' \
 -H 'Content-Type: application/json' \
 --data-raw '{
-    "amount": 1000
+    "amount": 1000,
+    "reason": "discount"
 }'
 ```
 
@@ -589,6 +795,14 @@ This request requires the ID of the payment as a path parameter. The payment can
 
 In the request’s body parameters, the `amount` field parameter is required. It is the amount to be refunded.
 
+The `reason` request body parameter is also required. Its value is a string that can be one of the following:
+
+- `discount`
+- `return`
+- `swap`
+- `claim`
+- `other`
+
 :::note
 
 Check out what other parameters can be sent in the [API reference](/api/admin/#tag/Payment/operation/PostPaymentsPaymentRefunds).

docs/content/advanced/admin/use-customergroups-api.mdx

@@ -23,10 +23,16 @@ It is assumed that you already have a Medusa server installed and set up. If not
 
 ### JS Client
 
-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.
 
 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
 
+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User
 
 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -42,7 +48,7 @@ You can create a customer group by sending a request to the Create Customer Grou
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.create({
   name: "VIP",
 })
@@ -51,10 +57,38 @@ medusa.admin.customerGroups.create({
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateCustomerGroup } from "medusa-react"
+
+const CreateCustomerGroup = () => {
+  const createCustomerGroup = useAdminCreateCustomerGroup()
+  // ...
+
+  const handleCreate = () => {
+    createCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default CreateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
   method: "POST",
   credentials: "include",
@@ -97,17 +131,47 @@ You can get a list of all customer groups by sending a request to the List Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.list()
 .then(({ customer_groups, limit, offset, count }) => {
   console.log(customer_groups.length)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { CustomerGroup } from "@medusajs/medusa"
+import { useAdminCustomerGroups } from "medusa-react"
+
+const CustomerGroups = () => {
+  const { customer_groups, isLoading } = useAdminCustomerGroups()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_groups && !customer_groups.length && (
+        <span>No Customer Groups</span>
+      )}
+      {customer_groups && customer_groups.length > 0 && (
+        <ul>
+          {customer_groups.map((customerGroup: CustomerGroup) => (
+            <li key={customerGroup.id}>{customerGroup.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroups
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
   credentials: "include",
 })
@@ -141,17 +205,39 @@ You can retrieve a single customer group by sending a request to the Get a Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.retrieve(customerGroupId)
 .then(({ customer_group }) => {
   console.log(customer_group.id)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customer_group, isLoading } = useAdminCustomerGroup(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_group && <span>{customer_group.name}</span>}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
   credentials: "include",
 })
@@ -183,7 +269,7 @@ You can update a customer group’s data by sending a request to the Update Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.update(customerGroupId, {
   metadata: {
 		is_seller: true,
@@ -194,10 +280,38 @@ medusa.admin.customerGroups.update(customerGroupId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateCustomerGroup } from "medusa-react"
+
+const UpdateCustomerGroup = () => {
+  const updateCustomerGroup = useAdminUpdateCustomerGroup(customerGroupId)
+  // ..
+
+  const handleUpdate = () => {
+    updateCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
   method: "POST",
   credentials: "include",
@@ -244,17 +358,37 @@ You can delete a customer group by sending a request to the Delete a Customer Gr
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.delete(customerGroupId)
 .then(({ id, object, deleted }) => {
   console.log(id)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const deleteCustomerGroup = useAdminDeleteCustomerGroup(customerGroupId)
+  // ...
+
+  const handleDeleteCustomerGroup = () => {
+    deleteCustomerGroup.mutate()
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 	method: "DELETE",
   credentials: "include",
@@ -289,7 +423,7 @@ You can add a customer to a group by sending a request to the Customer Group’s
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.addCustomers(customerGroupId, {
   customer_ids: [
     {
@@ -302,10 +436,36 @@ medusa.admin.customerGroups.addCustomers(customerGroupId, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddCustomersToCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const addCustomers = useAdminAddCustomersToCustomerGroup(customerGroupId)
+  // ...
+
+  const handleAddCustomers= (customerId: string) => {
+    addCustomers.mutate({
+      customer_ids: [
+        {
+          id: customerId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(
   `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
   {
@@ -357,17 +517,47 @@ You can retrieve a list of all customers in a customer group using the List Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.listCustomers(customerGroupId)
 .then(({ customers, count, offset, limit }) => {
   console.log(customers.length)
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminCustomerGroupCustomers } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customers, isLoading } = useAdminCustomerGroupCustomers(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customers && !customers.length && <span>No customers</span>}
+      {customers && customers.length > 0 && (
+        <ul>
+          {customers.map((customer: Customer) => (
+            <li key={customer.id}>{customer.first_name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers`, {
   credentials: "include",
 })
@@ -403,7 +593,7 @@ You can remove customers from a customer group by sending a request to the Remov
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
-```jsx
+```ts
 medusa.admin.customerGroups.removeCustomers(customer_group_id, {
   customer_ids: [
     {
@@ -416,10 +606,39 @@ medusa.admin.customerGroups.removeCustomers(customer_group_id, {
 })
 ```
 
+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminRemoveCustomersFromCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const removeCustomers = useAdminRemoveCustomersFromCustomerGroup(
+    customerGroupId
+  )
+  // ...
+
+  const handleRemoveCustomer = (customer_id: string) => {
+    removeCustomers.mutate({
+      customer_ids: [
+        {
+          id: customer_id,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">
 
-```jsx
+```ts
 fetch(
   `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
   {