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">
-
-- [Node v18+](https://nodejs.org/en/)
-- At least one region in the Medusa application.
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Node.js v20+",
+    link: "https://nodejs.org/en/download"
+  },
+  {
+    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">
-
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Redis installed and Redis server running",
+    link: "https://redis.io/docs/getting-started/installation/"
+  }
+]} />
 
 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">
-
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Redis installed and Redis server running",
+    link: "https://redis.io/docs/getting-started/installation/"
+  }
+]} />
 
 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">
-
-- [SendGrid account](https://signup.sendgrid.com)
-- [Setup SendGrid single sender](https://docs.sendgrid.com/ui/sending-email/sender-verification)
-- [SendGrid API Key](https://docs.sendgrid.com/ui/account-and-settings/api-keys)
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "SendGrid account",
+    link: "https://signup.sendgrid.com"
+  },
+  {
+    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">
-
-- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Redis installed and Redis server running",
+    link: "https://redis.io/docs/getting-started/installation/"
+  }
+]} />
 
 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">
-
-- [Stripe account](https://stripe.com/).
-- [Stripe Secret API Key](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard)
-- 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>
+<Prerequisites items={[
+  {
+    text: "Stripe account",
+    link: "https://stripe.com/"
+  },
+  {
+    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">
-
-- [Node.js v20+](https://nodejs.org/en/download)
-- [Git CLI tool](https://git-scm.com/downloads)
-- [PostgreSQL](https://www.postgresql.org/download/)
-
-</Note>
+<Prerequisites items={[
+  {
+    text: "Node.js v20+",
+    link: "https://nodejs.org/en/download"
+  },
+  {
+    text: "Git CLI tool",
+    link: "https://git-scm.com/downloads"
+  },
+  {
+    text: "PostgreSQL",
+    link: "https://www.postgresql.org/download/"
+  }
+]} />
 
 ## Usage