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
@@ -37,10 +37,16 @@ It's also assumed you already have a storefront set up. It can be a custom store

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
 ---

 ## Register a Customer
@@ -64,6 +70,38 @@ medusa.customers.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCreateCustomer } from "medusa-react"
+
+const RegisterCustomer = () => {
+  const createCustomer = useCreateCustomer()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createCustomer.mutate({
+      first_name,
+      last_name,
+      email,
+      password,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default RegisterCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -321,6 +359,36 @@ medusa.customers.update({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useUpdateMe } from "medusa-react"
+
+const UpdateCustomer = () => {
+  const updateCustomer = useUpdateMe()
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateCustomer.mutate({
+      id: customer_id,
+      first_name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -530,6 +598,35 @@ medusa.customers.listOrders()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCustomerOrders } from "medusa-react"
+import { Order } from "@medusajs/medusa"
+
+const Orders = () => {
+  // refetch a function that can be used to
+  // re-retrieve orders after the customer logs in
+  const { orders, isLoading, refetch } = useCustomerOrders()
+
+  return (
+    <div>
+      {isLoading && <span>Loading orders...</span>}
+      {orders?.length && (
+        <ul>
+          {orders.map((order: Order) => (
+            <li key={order.id}>{order.display_id}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Orders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -51,6 +51,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 installed](../../js-client/overview.md) 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).
+
 ### Previous Steps

 You must have an existing order edit in the “request” state.
@@ -72,6 +78,21 @@ medusa.orderEdits.retrieve(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const { order_edit, isLoading } = useOrderEdit(orderEditId)
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -123,7 +144,7 @@ All data about changes to the original order’s items can be found in `order_ed

 Here’s an example of how you can use this data to show the customer the requested edits to the order:

-```jsx
+```tsx
 <ul>
  {orderEdit.changes.map((itemChange) => (
    <li key={itemChange.id}>
@@ -184,6 +205,28 @@ medusa.paymentCollections.managePaymentSession(paymentCollectionId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useManagePaymentSession } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const managePaymentSession = useManagePaymentSession(paymentCollectionId)
+  // ...
+
+  const handleAdditionalPayment = (provider_id: string) => {
+    managePaymentSession.mutate({
+      provider_id,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -224,6 +267,28 @@ medusa.paymentCollection
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useAuthorizePaymentSession } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const authorizePaymentSession = useAuthorizePaymentSession(
+    paymentCollectionId
+  )
+  // ...
+
+  const handleAuthorizePayment = (paymentSessionId: string) => {
+    authorizePaymentSession.mutate(paymentSessionId)
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -263,6 +328,26 @@ medusa.orderEdits.complete(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useCompleteOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const completeOrderEdit = useCompleteOrderEdit(orderEditId)
+  // ...
+
+  const handleCompleteOrderEdit = () => {
+    completeOrderEdit.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -310,6 +395,28 @@ medusa.orderEdits.decline(orderEditId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useDeclineOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const declineOrderEdit = useDeclineOrderEdit(orderEditId)
+  // ...
+
+  const handleDeclineOrderEdit = () => {
+    declineOrderEdit.mutate({
+      declined_reason: "I am not satisfied",
+    })
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -33,6 +33,14 @@ 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 installed](../../js-client/overview.md) 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).
+
+It's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
@@ -52,7 +60,7 @@ After the customer enters their shipping address information, you must send a `P
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  shipping_address: {
    company,
@@ -72,10 +80,44 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const addShippingAddress = (address: Record<string, string>) => {
+    updateCart.mutate({
+      shipping_address: {
+        company: address.company,
+        first_name: address.first_name,
+        last_name: address.last_name,
+        address_1: address.address_1,
+        address_2: address.address_2,
+        city: address.city,
+        country_code: address.country_code,
+        province: address.province,
+        postal_code: address.postal_code,
+        phone: address.phone,
+      },
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -121,17 +163,51 @@ You can retrieve the list of shipping options by sending a `GET` request to the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.shippingOptions.listCartOptions(cartId)
 .then(({ shipping_options }) => {
  console.log(shipping_options.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { ShippingOption } from "@medusajs/medusa"
+import { useCartShippingOptions } from "medusa-react"
+
+type Props = {
+  cartId: string
+}
+
+const ShippingOptions = ({ cartId }: Props) => {
+  const { shipping_options, isLoading } = useCartShippingOptions(cartId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {shipping_options && !shipping_options.length && (
+        <span>No shipping options</span>
+      )}
+      {shipping_options && (
+        <ul>
+          {shipping_options.map((shipping_option: ShippingOption) => (
+            <li key={shipping_option.id}>{shipping_option.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default ShippingOptions
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/shipping-options/${cartId}`, {
  credentials: "include",
 })
@@ -153,7 +229,7 @@ Once the customer chooses one of the available shipping options, send a `POST` r
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.addShippingMethod(cartId, {
  option_id: shippingOptionId, // the ID of the selected option
 })
@@ -162,10 +238,33 @@ medusa.carts.addShippingMethod(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAddShippingMethodToCart } from "medusa-react"
+// ...
+
+const ShippingOptions = ({ cartId }: Props) => {
+  // ...
+  const addShippingMethod = useAddShippingMethodToCart(cartId)
+
+  const handleAddShippingMethod = (option_id: string) => {
+    addShippingMethod.mutate({
+      option_id,
+    })
+  }
+
+  // ...
+}
+
+export default ShippingOptions
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/shipping-methods`, {
  method: "POST",
  credentials: "include",
@@ -204,17 +303,47 @@ To initialize the payment sessions, send a `POST` request to the [Initialize Pay
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.createPaymentSessions(cartId)
 .then(({ cart }) => {
  console.log(cart.payment_sessions)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PaymentSession } from "@medusajs/medusa"
+import { useCart } from "medusa-react"
+import { useEffect } from "react"
+
+const PaymentProviders = () => {
+  const { cart, startCheckout } = useCart()
+
+  useEffect(() => {
+    startCheckout.mutate()
+  }, [])
+
+  return (
+    <div>
+      {!cart?.payment_sessions.length && <span>No payment providers</span>}
+      <ul>
+        {cart?.payment_sessions.map((paymentSession: PaymentSession) => (
+          <li key={paymentSession.id}>{paymentSession.provider_id}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/payment-sessions`, {
  method: "POST",
  credentials: "include",
@@ -237,7 +366,7 @@ When the customer chooses the payment provider they want to complete purchase wi
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.setPaymentSession(cartId, {
  // retrieved from the payment session selected by the customer
  provider_id: paymentProviderId,
@@ -247,10 +376,32 @@ medusa.carts.setPaymentSession(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const PaymentProviders = () => {
+  const { cart, startCheckout, pay } = useCart()
+  // ...
+
+  const handleSetPaymentSession = (provider_id: string) => {
+    pay.mutate({
+      provider_id,
+    })
+  }
+  
+  // ...
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/payment-session`, {
  method: "POST",
  credentials: "include",
@@ -290,7 +441,7 @@ If you need to update that data at any point before the purchase is made, send a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
  data: {
    // pass any data you want to add in the `data` attribute
@@ -303,12 +454,40 @@ medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useUpdatePaymentSession, useCart } from "medusa-react"
+// ...
+
+const PaymentProviders = () => {
+  const { cart } = useCart()
+  const updatePaymentSession = useUpdatePaymentSession(cart.id)
+  // ...
+
+  const handleUpdatePaymentSession = (
+    provider_id: string, 
+    data: Record<string, any>
+  ) => {
+    updatePaymentSession.mutate({
+      provider_id,
+      data,
+    })
+  }
+
+  // ...
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

 <!-- eslint-disable max-len -->

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/store/carts/${cartId}/payment-sessions/${paymentProviderId}`, 
  {
@@ -348,17 +527,38 @@ To complete a cart, send a `POST` request to the [Complete a Cart](/api/store/#t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.complete(cartId)
 .then(({ type, data }) => {
  console.log(type, data)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+// ...
+
+const Cart = () => {
+  const { completeCheckout } = useCart()
+  // ...
+
+  const handleStartCheckout = () => {
+    startCheckout.mutate()
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/complete`, {
  method: "POST",
  credentials: "include",
@@ -44,10 +44,16 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
 ### Handle Order Claim Request Event

 When the customer requests to claim the order, an event will be triggered. You should subscribe to this event to send a confirmation email to the customer when the event is triggered.
@@ -71,7 +77,7 @@ To allow the customer to claim an order, send a request to the Claim an Order en
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.orders.claimOrders({
  order_ids: [
    order_id,
@@ -88,7 +94,7 @@ medusa.orders.claimOrders({
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```tsx
+```ts
 fetch(`<SERVER_URL>/store/orders/batch/customer/token`, {
  method: "POST",
  credentials: "include",
@@ -129,7 +135,7 @@ Then, you send a request to the Verify Claim Order endpoint:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.orders.confirmRequest({
  token,
 })
@@ -142,9 +148,31 @@ medusa.orders.confirmRequest({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useGrantOrderAccess } from "medusa-react"
+
+const ClaimOrder = () => {
+  const grantOrderAccess = useGrantOrderAccess()
+  // ...
+
+  const handleVerifyOrderClaim = (token: string) => {
+    grantOrderAccess.mutate(({
+      token,
+    }))
+  }
+
+  // ...
+}
+
+export default ClaimOrder
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/orders/customer/confirm`, {
  method: "POST",
  credentials: "include",
@@ -33,10 +33,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
+It's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
@@ -54,7 +62,7 @@ You can add a discount to a customer’s cart by sending the [Update Cart reques
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  discounts: [
    {
@@ -71,10 +79,37 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const addDiscount = (code: string) => {
+    updateCart.mutate({
+      discounts: [
+        {
+          code,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -218,7 +253,7 @@ You can remove a discount from a customer’s cart using the [Remove Discount re
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.deleteDiscount(cartId, code)
 .then(({ cart }) => {
  console.log(cart.discounts)
@@ -228,7 +263,7 @@ medusa.carts.deleteDiscount(cartId, code)
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/discounts/${code}`, {
  method: "DELETE",
  credentials: "include",
@@ -29,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 To use gift cards, you must have a gift card created first. You can follow this documentation to learn how to do it using the admin APIs.
@@ -64,6 +72,36 @@ medusa.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { useProducts } from "medusa-react"
+
+const GiftCard = () => {
+  const { products, isLoading } = useProducts({
+    is_giftcard: true,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: Product) => (
+            <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">

@@ -118,6 +156,27 @@ medusa.giftCards.retrieve(code)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useGiftCard } from "medusa-react"
+
+const GiftCard = () => {
+  const { gift_card, isLoading, isError } = useGiftCard("code")
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {gift_card && <span>{gift_card.value}</span>}
+      {isError && <span>Gift Card does not exist</span>}
+    </div>
+  )
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -178,6 +237,33 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const setGiftCard = (code: string) => {
+    updateCart.mutate({
+      gift_cards: [
+        {
+          code,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -29,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ---

 ## Show List of Regions
@@ -44,7 +52,7 @@ You can retrieve available regions by sending a request to the [List Regions](/a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.regions.list()
 .then(({ regions }) => {
  console.log(regions.length)
@@ -53,9 +61,38 @@ medusa.regions.list()
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { Region } from "@medusajs/medusa"
+import { useRegions } from "medusa-react"
+
+const Regions = () => {
+  const { regions, isLoading } = useRegions()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {regions?.length && (
+        <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>/store/regions`, {
  credentials: "include",
 })
@@ -84,7 +121,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.products.list({
  region_id: regionId,
 })
@@ -95,9 +132,32 @@ medusa.products.list({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { formatVariantPrice } from "medusa-react"
+
+const Product = () => {
+  // retrieve the region and variant(s)
+  // ...
+
+  return (
+    <span>
+      {formatVariantPrice({
+        variant, // ProductVariant
+        region, // Region
+      })}
+    </span>
+  )
+}
+
+export default Product
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/products?region_id=${regionId}`, {
  credentials: "include",
 })
@@ -134,7 +194,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.carts.update(cartId, {
  region_id: regionId,
 })
@@ -144,9 +204,32 @@ medusa.carts.update(cartId, {
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeRegionId = (region_id: string) => {
+    updateCart.mutate({
+      region_id,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -32,10 +32,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+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 installed](../../js-client/overview.md) 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).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ---

 ## Filter Products by Sales Channel
@@ -45,7 +53,7 @@ To filter products by a specific sales channel, pass the `sales_channel_id` quer
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.products.list({
  sales_channel_id: [
    salesChannelId,
@@ -56,10 +64,42 @@ medusa.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { useProducts } from "medusa-react"
+
+const Products = () => {
+  const { products, isLoading } = useProducts({
+    sales_channel_id: [
+      salesChannelId,
+    ],
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: Product) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Products</span>}
+    </div>
+  )
+}
+
+export default Products
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/products?sales_channel_id[0]=${salesChannelId}`)
 .then((response) => response.json())
 .then(({ products, limit, offset, count }) => {
@@ -86,7 +126,7 @@ To associate a sales channel with a cart while creating it, you can pass the `sa
 <TabItem value="client" label="Medusa JS Client" default>


-```jsx
+```ts
 medusa.carts.create({
  sales_channel_id: salesChannelId,
 })
@@ -95,10 +135,36 @@ medusa.carts.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  const { cart, createCart } = useCart()
+
+  const handleCreateCart = () => {
+    createCart.mutate(
+      {
+        sales_channel_id: salesChannelId,
+      },
+      {
+        onSuccess: ({ cart }) => localStorage.setItem("cart_id", cart.id),
+      }
+    )
+  }
+  
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts`, {
  method: "POST",
  headers: {
@@ -126,7 +192,7 @@ You can update the sales channel of an existing cart by passing the `sales_chann
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  sales_channel_id: salesChannelId,
 })
@@ -135,10 +201,33 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeSalesChannel = (salesChannelId: string) => {
+    updateCart.mutate({
+      sales_channel_id: salesChannelId,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  headers: {