docs: change notes across docs based on redesign (#8662)

Change the prerequisites / soon / other notes based on latest redesign Depends on #8661
2024-08-23 07:59:48 +00:00
parent 320b01f45d
commit b23f0f8188
41 changed files with 291 additions and 220 deletions
@@ -1,4 +1,4 @@
-import { CodeTabs, CodeTab } from "docs-ui"
+import { CodeTabs, CodeTab, Prerequisites } from "docs-ui"

 export const metadata = {
  title: `Payment with Stripe in React Storefront`,
@@ -14,12 +14,16 @@ For other types of storefronts, the steps are similar. However, refer to [Stripe

 </Note>

-<Note type="check">
-
- [Stripe Module Provider](../../../../commerce-modules/payment/payment-provider/stripe/page.mdx) installed and configured in your Medusa application.
- [Stripe publishable API key](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard).
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Stripe Module Provider installed and configured in your Medusa application.",
+    link: "../../../../commerce-modules/payment/payment-provider/stripe/page.mdx"
+  },
+  {
+    text: "Stripe publishable API key.",
+    link: "https://support.stripe.com/questions/locate-api-keys-in-the-dashboard"
+  },
+]} />

 ## 1. Install Stripe SDK

@@ -50,7 +50,7 @@ Learn more about the `formatPrice` function in [this guide](../show-price/page.m

 For example, in a React-based storefront:

-<Note type="check">
+<Note>

 The example only passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).

@@ -45,7 +45,7 @@ const formatPrice = (amount: number): string => {

 The following React-based storefront example retrieves the product's price based on the selected variant:

-<Note type="check">
+<Note>

 The example only passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).

@@ -82,7 +82,7 @@ Aside from the `calculated_amount_with_tax` property, a variant's `calculated_pr

 For example, in a React-based storefront:

-<Note type="check">
+<Note>

 The example passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).

@@ -10,9 +10,7 @@ In this document, you'll learn how to select a product variant to be added to th

 <Note>

-{/* TODO add the link once available. */}
-
-The add-to-cart functionality is explained in the Cart's guides.
+The add-to-cart functionality is explained in the [Cart's guides](../../cart/page.mdx).

 </Note>