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

Change the prerequisites / soon / other notes based on latest redesign

Depends on #8661

www/apps/book/app/advanced-development/data-models/page.mdx

@@ -5,9 +5,3 @@ export const metadata = {
 # {metadata.title}
 
 In the next chapters, you'll learn more about creating data models, including property types, relationships, and more.
-
-<Note type="soon" title="Important">
-
-Data models are in active development and may change.
-
-</Note>

www/apps/book/app/advanced-development/data-models/relationships/page.mdx

@@ -1,26 +1,22 @@
+import { BetaBadge } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Data Model Relationships`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Beta" tooltipText="Data model relationships are in active development and may change." />
 
 In this chapter, you’ll learn how to define relationships between data models in your module.
 
-<Note type="soon" title="Important">
-
-Data model relationships are in active development and may change.
-
-</Note>
-
 <Note title="Use data model relationships when" type="success">
 
-- You want to create a relation between data models in the same module.
+You want to create a relation between data models in the same module.
 
 </Note>
 
 <Note title="Don't use data model relationships if" type="error">
 
-- You want to create a relationship between data models in different modules. Use module links instead.
+You want to create a relationship between data models in different modules. Use module links instead.
 
 </Note>
 

www/apps/book/app/advanced-development/modules/module-links/page.mdx

@@ -1,17 +1,13 @@
+import { BetaBadge } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Module Link`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Beta" tooltipText="Module links are in active development." />
 
 In this chapter, you’ll learn what a module link is.
 
-<Note type="soon" title="In Development">
-
-Module links are in active development.
-
-</Note>
-
 ## What is a Module Link?
 
 A module link forms an association between two data models of different modules, while maintaining module isolation.
@@ -20,13 +16,13 @@ You can then retrieve data across the linked modules, and manage their linked re
 
 <Note title="Use module links when" type="success">
 
-- You want to create a relation between data models from different modules.
+You want to create a relation between data models from different modules.
 
 </Note>
 
 <Note title="Don't use module links if" type="error">
 
-- You want to create a relationship between data models in the same module. Use data model relationships instead.
+You want to create a relationship between data models in the same module. Use data model relationships instead.
 
 </Note>
 

www/apps/book/app/advanced-development/modules/remote-link/page.mdx

@@ -1,17 +1,13 @@
+import { BetaBadge } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Remote Link`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Beta" tooltipText="Remote Links are in active development." />
 
 In this chapter, you’ll learn what the remote link is and how to use it to manage links.
 
-<Note type="soon" title="In Development">
-
-Remote Links are in active development.
-
-</Note>
-
 ## What is the Remote Link?
 
 The remote link is a class with utility methods to manage links between data models. It’s registered in the Medusa container under the `remoteLink` registration name.

www/apps/book/app/advanced-development/modules/service-factory/page.mdx

@@ -16,7 +16,7 @@ The service factory generates data management methods for your data models, so y
 
 <Note title="Extend the service factory when" type="success">
 
-- Your service provides data-management functionalities of your data models.
+Your service provides data-management functionalities of your data models.
 
 </Note>
 

www/apps/book/app/advanced-development/workflows/add-workflow-hook/page.mdx

@@ -8,13 +8,13 @@ In this chapter, you'll learn how to expose a hook in your workflow.
 
 <Note title="Expose workflow hooks when" type="success">
 
-- Your workflow is reusable in other applications, and you allow performing an external action at some point in your workflow.
+Your workflow is reusable in other applications, and you allow performing an external action at some point in your workflow.
 
 </Note>
 
 <Note title="Don't expose workflow hooks if" type="error">
 
-- Your workflow isn't reusable by other applications. Use a step that performs what a hook handler would instead.
+Your workflow isn't reusable by other applications. Use a step that performs what a hook handler would instead.
 
 </Note>
 

www/apps/book/app/advanced-development/workflows/workflow-hooks/page.mdx

@@ -14,7 +14,7 @@ Medusa exposes hooks in many of its workflows that are used in its API routes. Y
 
 <Note title="Consume workflow hooks when" type="success">
 
-- You want to perform a custom action during a workflow's execution, such as when a product is created.
+You want to perform a custom action during a workflow's execution, such as when a product is created.
 
 </Note>
 

www/apps/book/app/basics/api-routes/page.mdx

@@ -58,6 +58,6 @@ curl http://localhost:9000/store/hello-world
 
 <Note title="Use API routes when" type="success">
 
-- You're exposing custom functionality to be used by a storefront, admin dashboard, or any external application.
+You're exposing custom functionality to be used by a storefront, admin dashboard, or any external application.
 
 </Note>

www/apps/book/app/basics/data-models/page.mdx

@@ -92,12 +92,12 @@ If ran successfully, the `my_custom` table will be created in the database.
 
 <Note title="Use data models when" type="success">
 
-- You want to store data related to your customization in the database.
+You want to store data related to your customization in the database.
 
 </Note>
 
 <Note title="Don't use data models if" type="error">
 
-- You want to store simple key-value pairs related to an existing data model. Instead, use the `metadata` field that most existing models have, which is an object of custom key-value pairs.
+You want to store simple key-value pairs related to an existing data model. Instead, use the `metadata` field that most existing models have, which is an object of custom key-value pairs.
 
 </Note>

www/apps/book/app/basics/events-and-subscribers/page.mdx

@@ -68,7 +68,7 @@ The first message indicates that the `product.created` event was emitted, and th
 
 <Note title="Use subscribers when" type="success">
 
-- You want to perform an action everytime a specific event is emitted in the Medusa application.
+You want to perform an action everytime a specific event is emitted in the Medusa application.
 
 </Note>
 

www/apps/book/app/basics/loaders/page.mdx

@@ -71,6 +71,6 @@ Among the messages logged in the terminal, you’ll see the following message:
 
 <Note title="Don't use loaders if" type="error">
 
-- You want to perform an action continuously or at a set time pattern in the application. Use scheduled jobs instead, which is explained in an upcoming chapter.
+You want to perform an action continuously or at a set time pattern in the application. Use scheduled jobs instead, which is explained in an upcoming chapter.
 
 </Note>

www/apps/book/app/storefront-development/nextjs-starter/page.mdx

@@ -1,25 +1,24 @@
+import { Prerequisites, BetaBadge } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Next.js Starter`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Beta" tooltipText="The Next.js Starter is currently in development to fully support Medusa v2." />
 
 In this chapter, you’ll learn how to install and use the Next.js Starter storefront.
 
-<Note type="soon">
-
-The Next.js Starter is currently in development to fully support Medusa v2.
-
-</Note>
-
 ## Install Next.js Starter
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Node v18+](https://nodejs.org/en/)
+    text: "Node.js v20+",
-- At least one region in the Medusa application.
+    link: "https://nodejs.org/en/download"
-
+  },
-</Note>
+  {
+    text: "At least one region in the Medusa application.",
+  },
+]} />
 
 1. Clone the `v2` branch of the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa/tree/v2):
 

www/apps/resources/app/architectural-modules/cache/redis/page.mdx

@@ -1,4 +1,4 @@
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Redis Cache Module`,
@@ -12,11 +12,12 @@ The Redis Cache Module uses Redis to cache data in your store. In production, it
 
 ## Install the Redis Cache Module
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
+    text: "Redis installed and Redis server running",
-
+    link: "https://redis.io/docs/getting-started/installation/"
-</Note>
+  }
+]} />
 
 To install Redis Cache Module, run the following command in the directory of your Medusa application:
 

www/apps/resources/app/architectural-modules/event/redis/page.mdx

@@ -1,4 +1,4 @@
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Redis Event Bus Module`,
@@ -16,11 +16,12 @@ In production, it's recommended to use this module.
 
 ## Install the Redis Events Bus Module
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
+    text: "Redis installed and Redis server running",
-
+    link: "https://redis.io/docs/getting-started/installation/"
-</Note>
+  }
+]} />
 
 To install Redis Event Bus Module, run the following command in the directory of your Medusa application:
 

www/apps/resources/app/architectural-modules/notification/sendgrid/page.mdx

@@ -1,4 +1,4 @@
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `SendGrid Notification Module Provider`,
@@ -12,13 +12,20 @@ The SendGrid Notification Module Provider integrates [SendGrid](https://sendgrid
 
 ## Install the SendGrid Notification Module
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [SendGrid account](https://signup.sendgrid.com)
+    text: "SendGrid account",
-- [Setup SendGrid single sender](https://docs.sendgrid.com/ui/sending-email/sender-verification)
+    link: "https://signup.sendgrid.com"
-- [SendGrid API Key](https://docs.sendgrid.com/ui/account-and-settings/api-keys)
+  },
-
+  {
-</Note>
+    text: "Setup SendGrid single sender",
+    link: "https://docs.sendgrid.com/ui/sending-email/sender-verification"
+  },
+  {
+    text: "SendGrid API Key",
+    link: "https://docs.sendgrid.com/ui/account-and-settings/api-keys"
+  }
+]} />
 
 To install the SendGrid Notification Module Provider, run the following command in the directory of your Medusa application:
 

www/apps/resources/app/architectural-modules/workflow-engine/redis/page.mdx

@@ -1,4 +1,4 @@
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Redis Workflow Engine Module`,
@@ -12,11 +12,12 @@ The Redis Workflow Engine Module uses Redis to track workflow executions and han
 
 ## Install the Redis Workflow Engine Module
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
+    text: "Redis installed and Redis server running",
-
+    link: "https://redis.io/docs/getting-started/installation/"
-</Note>
+  }
+]} />
 
 To install Redis Workflow Engine Module, run the following command in the directory of your Medusa application:
 

www/apps/resources/app/commerce-modules/payment/payment-provider/stripe/page.mdx

@@ -2,7 +2,7 @@
 sidebar_label: "Stripe"
 ---
 
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Stripe Module Provider`,
@@ -22,13 +22,20 @@ These features are also available in a safe test environment, allowing for a con
 
 ## Install the Stripe Module Provider
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Stripe account](https://stripe.com/).
+    text: "Stripe account",
-- [Stripe Secret API Key](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard)
+    link: "https://stripe.com/"
-- For deployed Medusa applications, a [Stripe webhook secret](https://docs.stripe.com/webhooks#add-a-webhook-endpoint). When creating the Webhook, set the endpoint URL to `{medusa_url}/hooks/payment/stripe`, where `{medusa_url}` with the URL to your deployed Medusa application.
+  },
-
+  {
-</Note>
+    text: "Stripe Secret API Key",
+    link: "https://support.stripe.com/questions/locate-api-keys-in-the-dashboard"
+  },
+  {
+    text: "For deployed Medusa applications, a Stripe webhook secret. When creating the Webhook, set the endpoint URL to {medusa_url}/hooks/payment/stripe, where {medusa_url} with the URL to your deployed Medusa application.",
+    link: "https://docs.stripe.com/webhooks#add-a-webhook-endpoint"
+  }
+]} />
 
 To install the Stripe Module Provider, run the following command in the directory of your Medusa application:
 

www/apps/resources/app/create-medusa-app/page.mdx

@@ -1,4 +1,4 @@
-import { Table, DetailsList } from "docs-ui"
+import { Table, DetailsList, Prerequisites } from "docs-ui"
 import PortForwardingTroubleshooting from "../troubleshooting/_sections/create-medusa-app-errors/forwarding.mdx"
 import DBUrlTroubleshooting from "../troubleshooting/_sections/create-medusa-app-errors/db-url-error.mdx"
 import EaddrinuseTroubleshooting from "../troubleshooting/_sections/other/eaddrinuse.mdx"
@@ -17,13 +17,20 @@ export const metadata = {
 
 The `create-medusa-app` CLI tool simplifies the process of creating a new Medusa project and provides an onboarding experience.
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Node.js v20+](https://nodejs.org/en/download)
+    text: "Node.js v20+",
-- [Git CLI tool](https://git-scm.com/downloads)
+    link: "https://nodejs.org/en/download"
-- [PostgreSQL](https://www.postgresql.org/download/)
+  },
-
+  {
-</Note>
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
+  {
+    text: "PostgreSQL",
+    link: "https://www.postgresql.org/download/"
+  }
+]} />
 
 ## Usage
 

www/apps/resources/app/deployment/admin/vercel/page.mdx

@@ -2,6 +2,8 @@
 sidebar_label: "Vercel"
 ---
 
+import { Prerequisites } from "docs-ui"
+
 export const metadata = {
   title: `Deploy Medusa Admin to Vercel`,
 }
@@ -18,12 +20,16 @@ As Medusa v2 is still in active development, it's highly recommended not to depl
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Medusa application](!docs!)’s codebase hosted on GitHub repository.
+    text: "Medusa application’s codebase hosted on GitHub repository.",
-- [Deployed Medusa application](../../page.mdx#medusa-application).
+    link: "!docs!"
-
+  },
-</Note>
+  {
+    text: "Deployed Medusa application.",
+    link: "../../page.mdx#medusa-application"
+  },
+]} />
 
 ## 1. Configure Admin in Medusa
 

www/apps/resources/app/deployment/medusa-application/railway/page.mdx

@@ -2,7 +2,7 @@
 sidebar_label: "Railway"
 ---
 
-import { DetailsList } from "docs-ui"
+import { Prerequisites, DetailsList } from "docs-ui"
 import OutdatedPreviewContent from "../../../troubleshooting/_sections/common-installation-errors/outdated-preview.mdx"
 
 export const metadata = {
@@ -35,11 +35,12 @@ The same Medusa project is used to deploy the server and worker modes. Learn mor
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Medusa application](!docs!) hosted in a GitHub repository.
+    text: "Medusa application’s codebase hosted on GitHub repository.",
-
+    link: "!docs!"
-</Note>
+  },
+]} />
 
 ## 1. Configure Medusa Application
 

www/apps/resources/app/deployment/storefront/vercel/page.mdx

@@ -2,6 +2,8 @@
 sidebar_label: "Vercel"
 ---
 
+import { Prerequisites } from "docs-ui"
+
 export const metadata = {
   title: `Deploy Medusa Admin to Vercel`,
 }
@@ -18,12 +20,16 @@ As Medusa v2 is still in active development, it's highly recommended not to depl
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Storefront codebase](../../../nextjs-starter/page.mdx) hosted in a GitHub repository.
+    text: "Storefront codebase hosted in a GitHub repository.",
-- [Deployed Medusa application](../../page.mdx#medusa-application) with at least one region.
+    link: "../../../nextjs-starter/page.mdx"
-
+  },
-</Note>
+  {
+    text: "Deployed Medusa application with at least one region.",
+    link: "../../page.mdx#medusa-application"
+  },
+]} />
 
 ## 1. Create Vercel Project
 

www/apps/resources/app/medusa-cli/page.mdx

@@ -1,4 +1,4 @@
-import { Table } from "docs-ui"
+import { Table, Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Medusa CLI Tool`,
@@ -8,12 +8,20 @@ export const metadata = {
 
 The Medusa CLI tool provides commands that facilitate your development.
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Node.js v20+](https://nodejs.org/en/download)
+    text: "Node.js v20+",
-- [Git CLI tool](https://git-scm.com/downloads)
+    link: "https://nodejs.org/en/download"
-
+  },
-</Note>
+  {
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
+  {
+    text: "PostgreSQL",
+    link: "https://www.postgresql.org/download/"
+  }
+]} />
 
 ## Usage
 

www/apps/resources/app/nextjs-starter/page.mdx

@@ -1,4 +1,4 @@
-import { DetailsList } from "docs-ui"
+import { DetailsList, BetaBadge, Prerequisites } from "docs-ui"
 import CmaOptionTroubleshooting from "../troubleshooting/_sections/nextjs/cma-option.mdx"
 import CorsErrorTroubleshooting from "../troubleshooting/_sections/other/cors-errors.mdx"
 import ModuleXErrorTroubleshooting from "../troubleshooting/_sections/common-installation-errors/module-x-error.mdx"
@@ -7,22 +7,19 @@ export const metadata = {
   title: `Next.js Starter`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Beta" tooltipText="Next.js starter is currently in development and doesn't fully support Medusa v2 yet." />
-
-<Note type="soon">
-
-Next.js starter is currently in development and doesn't fully support Medusa v2 yet.
-
-</Note>
 
 The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or as a starting point to build a storefront for their Medusa application.
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Node.js v18+](https://nodejs.org/en/download)
+    text: "Node.js v20+",
-- At least one region in the Medusa application.
+    link: "https://nodejs.org/en/download"
-
+  },
-</Note>
+  {
+    text: "At least one region in the Medusa application.",
+  },
+]} />
 
 ## Installation
 
@@ -95,11 +92,12 @@ The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plu
 
 ### Stripe Integration
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [Stripe module provider](../commerce-modules/payment/payment-provider/stripe/page.mdx) installed in the Medusa application.
+    text: "Stripe module provider installed in the Medusa application.",
-
+    link: "../commerce-modules/payment/payment-provider/stripe/page.mdx"
-</Note>
+  },
+]} />
 
 In your Next.js Starter project, set the following environment variables for the Stripe integration:
 

www/apps/resources/app/recipes/b2b/page.mdx

@@ -1,19 +1,14 @@
 import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"
+import { BetaBadge } from "docs-ui"
 
 export const metadata = {
   title: `B2B Recipe`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Soon" tooltipText="This recipe is a work in progress, as some features are not ready yet in Medusa V2." />
 
 This recipe provides the general steps to implement a B2B store with Medusa.
 
-<Note type="soon" title="In Development">
-
-This recipe is a work in progress, as some features are not ready yet in Medusa V2.
-
-</Note>
-
 ## Overview
 
 In a B2B store, you provide different types of customers with relevant pricing, products, shopping experience, and more.
@@ -176,12 +171,6 @@ This is useful in B2B sales, as you often negotiate special prices with each cus
 
 You can create a B2B module that adds necessary data models to represent a B2B company. Then, you link that company to a customer group. Any customer belonging to that group also belongs to the company, meaning they're a B2B customer.
 
-<Note type="soon">
-
-Module Relationships is coming soon.
-
-</Note>
-
 <CardList items={[
   {
     href: "!docs!/basics/modules-and-services",

www/apps/resources/app/recipes/commerce-automation/page.mdx

@@ -1,20 +1,14 @@
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"
-import { LearningPath } from "docs-ui"
+import { LearningPath, BetaBadge } from "docs-ui"
 
 export const metadata = {
   title: `Commerce Automation Recipe`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge text="Soon" tooltipText="This recipe is a work in progress, as some features are not ready yet in Medusa V2." />
 
 This recipe provides the general steps to implement a B2B store with Medusa.
 
-<Note type="soon" title="In Development">
-
-This recipe is a work in progress, as some features are not ready yet in Medusa V2.
-
-</Note>
-
 ## Overview
 
 Commerce automation is essential for businesses to save costs, provide a better user experience, and avoid manual, repetitive tasks that lead to human errors. Businesses utilize automation in different domains, including marketing, customer support, and order management.

www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx

@@ -1,4 +1,5 @@
 import { Github, PlaySolid } from "@medusajs/icons"
+import { Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Digital Products Recipe Example`,
@@ -41,11 +42,12 @@ By following this example, you’ll have a commerce application with the followi
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [A new Medusa application installed.](!docs!#get-started)
+    text: "A new Medusa application installed.",
-
+    link: "!docs!#get-started"
-</Note>
+  },
+]} />
 
 ## Step 1: Create the Digital Product Module
 

www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx

@@ -1,4 +1,5 @@
 import { Github, PlaySolid } from "@medusajs/icons"
+import { Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Marketplace Recipe: Vendors Example`,
@@ -40,11 +41,12 @@ By following this example, you’ll have a marketplace with the following featur
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [A new Medusa application installed.](!docs!#get-started)
+    text: "A new Medusa application installed.",
-
+    link: "!docs!#get-started"
-</Note>
+  },
+]} />
 
 ## Step 1: Create Marketplace Module
 

www/apps/resources/app/recipes/personalized-products/page.mdx

@@ -95,12 +95,6 @@ If you store the personalized data using a custom module:
 - Call that API Route from the storefront after adding the item to the cart.
 - Listen to the `order.placed` event to attach the personalized data to the Order Module's `LineItem` data model.
 
-<Note type="soon">
-
-The `order.placed` event is currently not emitted.
-
-</Note>
-
 <CardList items={[
   {
     href: "!docs!/basics/api-routes",

www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx

@@ -1,4 +1,5 @@
 import { Github, PlaySolid } from "@medusajs/icons"
+import { Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `Subscriptions Recipe`,
@@ -41,11 +42,12 @@ By following this example, you’ll have a subscription commerce store with the
 
 ---
 
-<Note type="check">
+<Prerequisites items={[
-
+  {
-- [A new Medusa application installed.](!docs!#get-started)
+    text: "A new Medusa application installed.",
-
+    link: "!docs!#get-started"
-</Note>
+  },
+]} />
 
 ## Step 1: Create Subscription Module
 

www/apps/resources/app/references/[...slug]/page.tsx

@@ -6,6 +6,7 @@ import {
   typeListLinkFixerPlugin,
   localLinksRehypePlugin,
   workflowDiagramLinkFixerPlugin,
+  prerequisitesLinkFixerPlugin,
 } from "remark-rehype-plugins"
 import MDXComponents from "@/components/MDXComponents"
 import mdxOptions from "../../../mdx-options.mjs"
@@ -62,6 +63,13 @@ export default async function ReferencesPage({ params }: PageProps) {
                 checkLinksType: "value",
               },
             ],
+            [
+              prerequisitesLinkFixerPlugin,
+              {
+                ...pluginOptions,
+                checkLinksType: "value",
+              },
+            ],
             [localLinksRehypePlugin, pluginOptions],
           ],
           remarkPlugins: mdxOptions.options.remarkPlugins,

www/apps/resources/app/storefront-development/checkout/payment/stripe/page.mdx

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

www/apps/resources/app/storefront-development/products/price/examples/sale-price/page.mdx

@@ -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).
 

www/apps/resources/app/storefront-development/products/price/examples/show-price/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).
 

www/apps/resources/app/storefront-development/products/price/examples/tax-price/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).
 

www/apps/resources/app/storefront-development/products/variants/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](../../cart/page.mdx).
-
-The add-to-cart functionality is explained in the Cart's guides.
 
 </Note>
 

www/apps/resources/next.config.mjs

@@ -2,10 +2,10 @@ import mdx from "@next/mdx"
 import {
   brokenLinkCheckerPlugin,
   localLinksRehypePlugin,
+  prerequisitesLinkFixerPlugin,
   typeListLinkFixerPlugin,
   workflowDiagramLinkFixerPlugin,
 } from "remark-rehype-plugins"
-import { slugChanges } from "./generated/slug-changes.mjs"
 import mdxPluginOptions from "./mdx-options.mjs"
 
 const withMDX = mdx({
@@ -16,7 +16,18 @@ const withMDX = mdx({
       [brokenLinkCheckerPlugin],
       [localLinksRehypePlugin],
       [typeListLinkFixerPlugin],
-      [workflowDiagramLinkFixerPlugin],
+      [
+        workflowDiagramLinkFixerPlugin,
+        {
+          checkLinksType: "value",
+        },
+      ],
+      [
+        prerequisitesLinkFixerPlugin,
+        {
+          checkLinksType: "value",
+        },
+      ],
     ],
     remarkPlugins: mdxPluginOptions.options.remarkPlugins,
     jsx: true,

www/packages/docs-ui/src/components/Feedback/index.tsx

@@ -162,7 +162,7 @@ export const Feedback = ({
                     onClick={handleFeedback}
                     className={clsx(
                       "positive gap-[6px] !justify-start md:!justify-center",
-                      "!px-docs_0.5 !py-docs_0.25"
+                      "!px-docs_0.5 !py-docs_0.25 text-left md:text-center"
                     )}
                     variant="transparent-clear"
                   >
@@ -175,7 +175,7 @@ export const Feedback = ({
                     onClick={handleFeedback}
                     className={clsx(
                       "gap-[6px] !justify-start md:!justify-center",
-                      "!px-docs_0.5 !py-docs_0.25"
+                      "!px-docs_0.5 !py-docs_0.25 text-left md:text-center"
                     )}
                     variant="transparent-clear"
                   >
@@ -190,7 +190,8 @@ export const Feedback = ({
                       className={clsx(
                         "gap-[6px] relative",
                         "!px-docs_0.5 !py-docs_0.25",
-                        "!justify-start md:!justify-center"
+                        "!justify-start md:!justify-center",
+                        "text-left md:text-center"
                       )}
                     >
                       <ChatBubbleLeftRight className="text-medusa-fg-subtle" />

www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx

@@ -24,7 +24,7 @@ export const PrerequisiteItem = ({
         "bg-medusa-tag-neutral-bg text-medusa-fg-subtle",
         "px-docs_0.75 py-docs_0.5 w-fit",
         "flex justify-center items-center",
-        "hover:bg-medusa-tag-neutral-bg-hover",
+        link && "hover:bg-medusa-tag-neutral-bg-hover",
         "rounded-tr-docs_xl rounded-br-docs_xl",
         position === "alone" && "rounded-docs_xl",
         position === "top" && "rounded-tl-docs_xl rounded-bl-docs_DEFAULT",
@@ -34,7 +34,8 @@ export const PrerequisiteItem = ({
         !link && "cursor-text"
       )}
     >
-      {text}↗
+      {text}
+      {link && "↗"}
     </Link>
   )
 }

www/packages/remark-rehype-plugins/src/cross-project-links.ts

@@ -61,6 +61,27 @@ function componentFixer(
     return
   }
 
+  const fixProperty = (item: ExpressionJsVar) => {
+    if (!isExpressionJsVarObj(item)) {
+      return
+    }
+
+    Object.entries(item).forEach(([key, value]) => {
+      if (
+        (key !== "href" && key !== "link") ||
+        !isExpressionJsVarLiteral(value)
+      ) {
+        return
+      }
+
+      value.original.value = matchAndFixLinks(
+        value.original.value as string,
+        options
+      )
+      value.original.raw = JSON.stringify(value.original.value)
+    })
+  }
+
   switch (node.name) {
     case "CardList":
       const itemsAttribute = getAttribute(node, "items")
@@ -79,24 +100,6 @@ function componentFixer(
         return
       }
 
-      const fixProperty = (item: ExpressionJsVar) => {
-        if (!isExpressionJsVarObj(item)) {
-          return
-        }
-
-        Object.entries(item).forEach(([key, value]) => {
-          if (key !== "href" || !isExpressionJsVarLiteral(value)) {
-            return
-          }
-
-          value.original.value = matchAndFixLinks(
-            value.original.value as string,
-            options
-          )
-          value.original.raw = JSON.stringify(value.original.value)
-        })
-      }
-
       if (Array.isArray(jsVar)) {
         jsVar.forEach(fixProperty)
       } else {
@@ -112,6 +115,31 @@ function componentFixer(
 
       hrefAttribute.value = matchAndFixLinks(hrefAttribute.value, options)
 
+      return
+    case "Prerequisites":
+      const prerequisitesItemsAttribute = getAttribute(node, "items")
+
+      if (
+        !prerequisitesItemsAttribute?.value ||
+        typeof prerequisitesItemsAttribute.value === "string" ||
+        !prerequisitesItemsAttribute.value.data?.estree
+      ) {
+        return
+      }
+
+      const prerequisitesJsVar = estreeToJs(
+        prerequisitesItemsAttribute.value.data.estree
+      )
+
+      if (!prerequisitesJsVar) {
+        return
+      }
+
+      if (Array.isArray(prerequisitesJsVar)) {
+        prerequisitesJsVar.forEach(fixProperty)
+      } else {
+        fixProperty(prerequisitesJsVar)
+      }
       return
   }
 }
@@ -126,7 +154,10 @@ export function crossProjectLinksPlugin(
       tree as UnistTree,
       ["element", "mdxJsxFlowElement"],
       (node: UnistNode) => {
-        const isComponent = node.name === "Card" || node.name === "CardList"
+        const isComponent =
+          node.name === "Card" ||
+          node.name === "CardList" ||
+          node.name === "Prerequisites"
         const isLink = node.tagName === "a" && node.properties?.href
         if (!isComponent && !isLink) {
           return

www/packages/remark-rehype-plugins/src/index.ts

@@ -3,6 +3,7 @@ export * from "./cloudinary-img.js"
 export * from "./cross-project-links.js"
 export * from "./local-links.js"
 export * from "./page-number.js"
+export * from "./prerequisites-link-fixer.js"
 export * from "./resolve-admonitions.js"
 export * from "./type-list-link-fixer.js"
 export * from "./workflow-diagram-link-fixer.js"

www/packages/remark-rehype-plugins/src/prerequisites-link-fixer.ts

@@ -0,0 +1,9 @@
+import { Transformer } from "unified"
+import { ComponentLinkFixerOptions } from "./types/index.js"
+import { componentLinkFixer } from "./utils/component-link-fixer.js"
+
+export function prerequisitesLinkFixerPlugin(
+  options?: ComponentLinkFixerOptions
+): Transformer {
+  return componentLinkFixer("Prerequisites", "items", options)
+}