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
@@ -23,6 +23,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.
@@ -69,13 +75,13 @@ For example, sending the following request creates a price list with two prices:
 <TabItem value="client" label="Medusa JS Client" default>

 ```jsx
-import { PriceListType } from "@medusajs/medusa"
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"

 medusa.admin.priceLists.create({
  name: "New Price List",
  description: "A new price list",
  type: PriceListType.SALE,
-  status: "active",
+  status: PriceListStatus.ACTIVE,
  prices: [
    {
      amount: 1000,
@@ -96,6 +102,46 @@ medusa.admin.priceLists.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"
+import { useAdminCreatePriceList } from "medusa-react"
+
+const CreatePriceList = () => {
+  const createPriceList = useAdminCreatePriceList()
+  // ...
+
+  const handleCreate = () => {
+    createPriceList.mutate({
+      name: "New Price List",
+      description: "A new price list",
+      type: PriceListType.SALE,
+      status: PriceListStatus.ACTIVE,
+      prices: [
+        {
+          amount: 1000,
+          variant_id,
+          currency_code: "eur",
+          max_quantity: 3,
+        },
+        {
+          amount: 1500,
+          variant_id,
+          currency_code: "eur",
+          min_quantity: 4,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreatePriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -185,6 +231,27 @@ medusa.admin.priceLists.retrieve(priceListId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { CustomerGroup } from "@medusajs/medusa"
+import { useAdminPriceList } from "medusa-react"
+
+const PriceList = () => {
+  const { price_list, isLoading } = useAdminPriceList(priceListId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {price_list && <span>{price_list.name}</span>}
+    </div>
+  )
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -229,6 +296,29 @@ medusa.admin.priceLists.update(priceListId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"
+import { useAdminUpdatePriceList } from "medusa-react"
+
+const CreatePriceList = () => {
+  const updatePriceList = useAdminUpdatePriceList(priceListId)
+  // ...
+
+  const handleUpdate = () => {
+    updatePriceList.mutate({
+      ends_at: "2022-10-11",
+    })
+  }
+
+  // ...
+}
+
+export default CreatePriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -298,6 +388,34 @@ medusa.admin.priceLists.addPrices(priceListId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreatePriceListPrices } from "medusa-react"
+
+const PriceList = () => {
+  const addPrice = useAdminCreatePriceListPrices(priceListId)
+  // ...
+
+  const handleAddPrice = () => {
+    addPrice.mutate({
+      prices: [
+        {
+          amount: 1200,
+          variant_id,
+          currency_code: "eur",
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -363,6 +481,29 @@ medusa.admin.priceLists.deleteProductPrices(priceListId, productId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceListProductPrices } from "medusa-react"
+
+const PriceList = () => {
+  const deletePrices = useAdminDeletePriceListProductPrices(
+    priceListId,
+    productId
+  )
+  // ...
+
+  const handleDeletePrices = () => {
+    deletePrices.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -409,6 +550,29 @@ medusa.admin.priceLists.deleteVariantPrices(priceListId, variantId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceListVariantPrices } from "medusa-react"
+
+const PriceList = () => {
+  const deleteVariantPrices = useAdminDeletePriceListVariantPrices(
+    priceListId, 
+    variantId
+  )
+  // ...
+
+  const handleDeletePrices = () => {
+    deleteVariantPrices.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -457,6 +621,26 @@ medusa.admin.priceLists.delete(priceListId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceList } from "medusa-react"
+
+const PriceList = () => {
+  const deletePriceList = useAdminDeletePriceList(priceListId)
+  // ...
+
+  const handleDeletePriceList = () => {
+    deletePriceList.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -25,21 +25,18 @@ This guide explains how to perform all these operations using the Admin APIs.

 It's assumed that you already have a Medusa server installed and set up. If not, you can follow our [quickstart guide](../../../quickstart/quick-start.mdx) to get started.

-### Enabled Feature Flags
-
-The Sales Channels feature is currently in beta mode and guarded by a feature flag. To use sales channels either:
-
-1. Enable the `MEDUSA_FF_SALES_CHANNELS` environment variable;
-2. Or enable the `sales_channels` key in the Medusa server's settings.
-
-You can learn more about enabling it in the [feature flags](../feature-flags/toggle.md) documentation.
-
 ### 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 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).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in this guide.
@@ -55,7 +52,7 @@ You can create a sales channel by sending a request to the Create a Sales Channe
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.create({
  name: "App",
  description: "Mobile app",
@@ -65,10 +62,33 @@ medusa.admin.salesChannels.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateSalesChannel } from "medusa-react"
+
+const CreateSalesChannel = () => {
+  const createSalesChannel = useAdminCreateSalesChannel()
+  // ...
+
+  const handleCreate = (name: string, description: string) => {
+    createSalesChannel.mutate({
+      name,
+      description,
+    })
+  }
+
+  // ...
+}
+
+export default CreateSalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels`, {
  method: "POST",
  credentials: "include",
@@ -115,17 +135,47 @@ You can list all sales channels by sending a request to the List Sales Channels
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.list()
 .then(({ sales_channels, limit, offset, count }) => {
  console.log(sales_channels.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { SalesChannel } from "@medusajs/medusa"
+import { useAdminSalesChannels } from "medusa-react"
+
+const SalesChannels = () => {
+  const { sales_channels, isLoading } = useAdminSalesChannels()
+
+  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">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels`, {
  credentials: "include",
 })
@@ -157,17 +207,37 @@ You can retrieve a sales channel’s details by its ID using the Get Sales Chann
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.retrieve(salesChannelId)
 .then(({ sales_channel }) => {
  console.log(sales_channel.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const { sales_channel, isLoading } = useAdminSalesChannel(salesChannelId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {sales_channel && <span>{sales_channel.name}</span>}
+    </div>
+  )
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  credentials: "include",
 })
@@ -199,7 +269,7 @@ You can update a Sales Channel’s details and attributes by sending a request t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.update(salesChannelId, {
  is_disabled: false,
 })
@@ -208,10 +278,32 @@ medusa.admin.salesChannels.update(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateSalesChannel } from "medusa-react"
+
+const UpdateSalesChannel = () => {
+  const updateSalesChannel = useAdminUpdateSalesChannel(salesChannelId)
+  // ...
+
+  const handleUpdate = () => {
+    updateSalesChannel.mutate({
+      is_disabled: false,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateSalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  method: "POST",
  credentials: "include",
@@ -258,17 +350,37 @@ You can delete a sales channel by sending a request to the Delete Sales Channel
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.delete(salesChannelId)
 .then(({ id, object, deleted }) => {
  console.log(id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const deleteSalesChannel = useAdminDeleteSalesChannel(salesChannelId)
+  // ...
+
+  const handleDelete = () => {
+    deleteSalesChannel.mutate()
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  method: "DELETE",
  credentials: "include",
@@ -303,7 +415,7 @@ To add a product to a sales channel, send a request to the Sales Channel’s Add
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.addProducts(salesChannelId, {
  product_ids: [
    {
@@ -316,10 +428,36 @@ medusa.admin.salesChannels.addProducts(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddProductsToSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const addProducts = useAdminAddProductsToSalesChannel(salesChannelId)
+  // ...
+
+  const handleAddProducts = (productId: string) => {
+    addProducts.mutate({
+      product_ids: [
+        {
+          id: productId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`,
  {
@@ -373,7 +511,7 @@ You can list the products available in a sales channel by sending a request to t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.products.list({
  sales_channel_id: [
    salesChannelId,
@@ -384,10 +522,41 @@ 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 SalesChannelProducts = () => {
+  const { products, isLoading } = useAdminProducts({
+    sales_channel_id: [salesChannelId],
+  })
+
+  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 Products</span>}
+    </div>
+  )
+}
+
+export default SalesChannelProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/products?sales_channel_id[0]=${salesChannelId}`,
  {
@@ -426,7 +595,7 @@ You can delete a product from a sales channel by sending a request to the Sales
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.removeProducts(salesChannelId, {
  product_ids: [
    {
@@ -439,10 +608,38 @@ medusa.admin.salesChannels.removeProducts(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteProductsFromSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const deleteProducts = useAdminDeleteProductsFromSalesChannel(
+    salesChannelId
+  )
+  // ...
+
+  const handleDeleteProducts = (productId: string) => {
+    deleteProducts.mutate({
+      product_ids: [
+        {
+          id: productId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`,
  {
@@ -498,7 +695,7 @@ You can filter orders by a specific sales channel by sending a request to the Li
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.orders.list({
  sales_channel_id: [
    salesChannelId,
@@ -511,10 +708,42 @@ medusa.admin.orders.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Order } from "@medusajs/medusa"
+import { useAdminOrders } from "medusa-react"
+
+const SalesChannelOrders = () => {
+  const { orders, isLoading } = useAdminOrders({
+    sales_channel_id: [salesChannelId],
+    offset: 0,
+    limit: 50,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {orders && orders.length > 0 && (
+        <ul>
+          {orders.map((order: Order) => (
+            <li key={order.id}>{order.display_id}</li>
+          ))}
+        </ul>
+      )}
+      {orders && !orders.length && <span>No Orders</span>}
+    </div>
+  )
+}
+
+export default SalesChannelOrders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/orders?sales_channel_id[0]=${salesChannelId}`, {
  credentials: "include",
 })