docs: redesigned code blocks (#2519)

* docs: redesigned code blocks * removed unused package
medusajs · Nov 1, 2022 · 8822907 · 8822907
1 parent e114a50
commit 8822907
Show file tree

Hide file tree

Showing 38 changed files with 555 additions and 78 deletions.
diff --git a/docs/content/advanced/admin/import-prices.mdx b/docs/content/advanced/admin/import-prices.mdx
@@ -60,7 +60,7 @@ The first step is to upload the CSV file to import prices from.
 
 You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -111,7 +111,7 @@ To start a new price import, you must create a batch job.
 
 You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -196,7 +196,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
 
 You can retrieve all the details of the batch job, including its status and the brief statistics related to the prices by sending the following request:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -255,7 +255,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
 
 To confirm a batch job send the following request:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/admin/import-products.mdx b/docs/content/advanced/admin/import-products.mdx
@@ -54,7 +54,7 @@ The first step is to upload the CSV file that you want to import products.
 
 You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -105,7 +105,7 @@ To start a new product import, you must create a batch job.
 
 You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -184,7 +184,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
 
 You can retrieve all the details of the batch job, including its status and the brief statistics related to the products by sending the following request:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -243,7 +243,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
 
 To confirm a batch job send the following request:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/admin/use-customergroups-api.mdx b/docs/content/advanced/admin/use-customergroups-api.mdx
@@ -39,7 +39,7 @@ You can learn more about [authenticating as an admin user in the API reference](
 
 You can create a customer group by sending a request to the Create Customer Group endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -93,7 +93,7 @@ This request requires the `name` parameter and optionally accepts the `metadata`
 
 You can get a list of all customer groups by sending a request to the List Customer Groups endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -135,7 +135,7 @@ You can also pass filters and other selection query parameters to the request. C
 
 You can retrieve a single customer group by sending a request to the Get a Customer Group endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -175,7 +175,7 @@ This request accepts the ID of the customer group to retrieve as a path paramete
 
 You can update a customer group’s data by sending a request to the Update Customer Group endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -235,7 +235,7 @@ This request accepts the ID of the customer group as a path parameter, and optio
 
 You can delete a customer group by sending a request to the Delete a Customer Group endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -279,7 +279,7 @@ This request accepts the ID of the customer group to delete as a path parameter.
 
 You can add a customer to a group by sending a request to the Customer Group’s Add Customer endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -343,7 +343,7 @@ This request accepts the ID of the customer group as a path parameter. In its bo
 
 You can retrieve a list of all customers in a customer group using the List Customers endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -387,7 +387,7 @@ Removing customers from a group does not remove them entirely. They’ll still b
 
 You can remove customers from a customer group by sending a request to the Remove Customers endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/backend/batch-jobs/create.md b/docs/content/advanced/backend/batch-jobs/create.md
@@ -254,7 +254,7 @@ The first step is to create a batch job using the [Create Batch Job endpoint](ht
 
 For example, this creates a batch job of the type `publish-products`:
 
-<Tabs groupId="request-types">
+<Tabs groupId="request-types" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -314,7 +314,7 @@ Make sure to replace `<YOUR_SERVER>` with the server URL where applicable.
 
 You can retrieve the batch job afterward to get its status and view details about the process in the `result` property:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -367,7 +367,7 @@ Based on the batch job strategy implemented in this documentation, the `result`
 
 To process the batch job, send a request to [confirm the batch job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobsBatchJobConfirmProcessing):
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/backend/price-lists/use-api.mdx b/docs/content/advanced/backend/price-lists/use-api.mdx
@@ -63,7 +63,7 @@ You can learn more about what the conditions you can apply on a price list and i
 
 For example, sending the following request creates a price list with two prices: one that is applied when the maximum quantity of the product variant in the cart is 3; another is applied when the minimum quantity of the same variant in the cart is 4:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -172,7 +172,7 @@ You can check the full list of request body parameters in the [API reference](ht
 
 You can retrieve all of a price list’s details using the Get a Price List endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -212,7 +212,7 @@ After creating a price list, you can update all of its fields including its stat
 
 For example, by sending the following request the end date of the price list will be updated:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -274,7 +274,7 @@ You can also set the `override` request body parameter to `true` to replace the
 
 For example, sending the following request adds a new price to the price list:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -346,7 +346,7 @@ For a full list of request body parameters, check out the [API reference](https:
 
 You can delete all the prices of a product’s variants using the [Delete Product Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListProductsProductPrices) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -386,7 +386,7 @@ This request returns the IDs of the deleted prices.
 
 You can delete all the prices of a variant using the [Delete Variant Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListVariantsVariantPrices) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -428,7 +428,7 @@ This request returns the IDs of the deleted prices.
 
 You can delete a price list, and subsequently all prices defined in it, using the [Delete Price List](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceList) endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/backend/sales-channels/manage-admin.mdx b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
@@ -52,7 +52,7 @@ You can learn more about [authenticating as an admin user in the API reference](
 
 You can create a sales channel by sending a request to the Create a Sales Channel endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -111,7 +111,7 @@ It returns the created sales channel.
 
 You can list all sales channels by sending a request to the List Sales Channels endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -151,7 +151,7 @@ This request returns an array of all sales channels in your store. You can also
 
 You can retrieve a sales channel’s details by its ID using the Get Sales Channel endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -191,7 +191,7 @@ This request returns the sales channel with the specified ID.
 
 You can update a Sales Channel’s details and attributes by sending a request to the Update Sales Channel endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -249,7 +249,7 @@ You can check out [the API Reference for a full list of body parameters](https:/
 
 You can delete a sales channel by sending a request to the Delete Sales Channel endpoint with the ID of the sales channel to delete:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -293,7 +293,7 @@ The ID of the deleted sales channel is returned in the response.
 
 To add a product to a sales channel, send a request to the Sales Channel’s Add Products endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -359,7 +359,7 @@ This request returns the sales channel.
 
 You can list the products available in a sales channel by sending a request to the List Products endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -407,7 +407,7 @@ Deleting a product from a sales channel doesn't delete it completely. It only ma
 
 You can delete a product from a sales channel by sending a request to the Sales Channel’s Delete Products endpoint:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -475,7 +475,7 @@ This request returns the sales channel.
 
 You can filter orders by a specific sales channel by sending a request to the List Orders endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx

diff --git a/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx b/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
@@ -45,7 +45,7 @@ In this step, the customer generally enters their shipping info, then chooses th
 
 After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart) API endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -111,7 +111,7 @@ After updating the cart with the customer’s address, the list of available [sh
 
 You can retrieve the list of shipping options by sending a `GET` request to the [Retrieve Shipping Options for Cart API](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptionsCartId) endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -141,7 +141,7 @@ The request accepts the ID of the cart as a path parameter. It returns the array
 
 Once the customer chooses one of the available shipping options, send a `POST` request to the [Add a Shipping Method](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartShippingMethod) API endpoint. This will create a [shipping method](../backend/shipping/overview.md#shipping-method) based on the shipping option chosen and will associate it with the customer’s cart:
 
-<Tabs groupId="request-type">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -189,7 +189,7 @@ When the page opens and before the payment providers are displayed to the custom
 
 To initialize the payment sessions, send a `POST` request to the [Initialize Payment Sessions](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessions) API endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -221,7 +221,7 @@ This endpoint accepts the ID of the cart as a path parameter. It returns the upd
 
 When the customer chooses the payment provider they want to complete purchase with, you should select the payment session associated with that payment provider. To do that, send a `POST` request to the [Select a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSession) API endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -271,7 +271,7 @@ This step is optional and is only necessary for some payment providers. As menti
 
 If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) API endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx
@@ -323,7 +323,7 @@ The last step is to place the order by completing the cart. When you complete th
 
 To complete a cart, send a `POST` request to the [Complete a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartComplete) API endpoint:
 
-<Tabs groupId="request-tyoe">
+<Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>
 
 ```jsx