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
2023-01-23 21:04:09 +02:00
parent 7418a0025c
commit a248bf6e4f
23 changed files with 3032 additions and 169 deletions
@@ -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).