docs: added troubleshooting component (#4255)

docs/content/plugins/analytics/segment.md

@@ -185,7 +185,7 @@ You resolve the `SegmentService` using dependency injection. Then, when the `cus
 
 :::info
 
-Services can be resolved and used in Subscribers, endpoints, and other Services. Learn [how to resolve services in the Services documentation](../../development/services/create-service.md#using-your-custom-service).
+Services can be resolved and used in Subscribers, endpoints, and other Services. Learn [how to resolve services in the Services documentation](../../development/services/create-service.mdx#using-your-custom-service).
 
 :::
 
@@ -205,7 +205,7 @@ After adding the above subscriber, run your backend again if it isn’t running
 
 ## See Also
 
-- [Services Overview](../../development/services/create-service.md)
+- [Services Overview](../../development/services/create-service.mdx)
 - [Subscribers Overview](../../development/events/create-subscriber.md)
 - [Events Reference](../../development/events/events-list.md)
 - [Deploy the Medusa backend](../../deployments/server/index.mdx)

docs/content/plugins/cms/contentful/index.md

@@ -27,7 +27,7 @@ By integrating Contentful to Medusa, you can benefit from powerful features in y
 - Redis. You can follow [their documentation to learn how to install it](https://redis.io/docs/getting-started/installation/).
 - Git’s CLI tool. You can follow [this documentation to learn how to install it for your operating system](../../../development/backend/prepare-environment.mdx#git).
 - Gatsby’s CLI tool. You can follow [this documentation to install it](https://www.gatsbyjs.com/docs/reference/gatsby-cli/#how-to-use-gatsby-cli).
-- Medusa’s CLI tool. You can follow [this documentation to install it](../../../cli/reference.md#how-to-install-cli-tool).
+- Medusa’s CLI tool. You can follow [this documentation to install it](../../../cli/reference.mdx#how-to-install-cli-tool).
 
 ---
 

docs/content/plugins/cms/strapi.md

@@ -25,7 +25,7 @@ By integrating Strapi to Medusa, you can benefit from powerful features in your
 
 ### Medusa CLI
 
-[Medusa’s CLI tool](../../cli/reference.md#how-to-install-cli-tool) is required to set up a new Medusa backend.
+[Medusa’s CLI tool](../../cli/reference.mdx#how-to-install-cli-tool) is required to set up a new Medusa backend.
 
 ### Redis
 

docs/content/plugins/file-service/s3.mdx

@@ -3,6 +3,9 @@ description: 'Learn how to integrate the S3 plugin with the Medusa backend. Lear
 addHowToData: true
 ---
 
+import Troubleshooting from '@site/src/components/Troubleshooting'
+import AclErrorSection from '../../troubleshooting/s3-acl-error.md'
+
 # S3
 
 In this document, you’ll learn how to install the [S3 plugin](https://github.com/medusajs/medusa/tree/master/packages/medusa-file-s3) on your Medusa backend and use it for storage.
@@ -19,7 +22,7 @@ Medusa provides three different options to handle your file storage. This docume
 
 ### Medusa Backend
 
-A Medusa backend is required to be set up before following along with this document. You can follow the [quickstart guide](../../development/backend/install.mdx) to get started in minutes.
+A Medusa backend is required to be set up before following along with this document. You can follow the [quickstart guide](../../development/backend/install.mdx) to get started in minutes.
 
 ### Required Accounts
 
@@ -166,7 +169,7 @@ Make sure to define `S3_REGION`, `S3_ACCESS_KEY_ID`, and `S3_SECRET_ACCESS_KEY`
 
 :::caution
 
-If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
+If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
 
 :::
 
@@ -194,11 +197,11 @@ You can also check that the image was uploaded on the S3 bucket’s page.
 
 ## Next.js Storefront Configuration
 
-If you’re using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the S3 bucket domain name into the configured images’ domain names. This is because all URLs of product images will be from the S3 bucket.
+If you’re using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the S3 bucket domain name into the configured images’ domain names. This is because all URLs of product images will be from the S3 bucket.
 
-If this configuration is not added, you’ll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).
+If this configuration is not added, you’ll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).
 
-In `next.config.js` add the following option in the exported object:
+In `next.config.js` add the following option in the exported object:
 
 ```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
@@ -220,8 +223,21 @@ Where `<BUCKET_NAME>` is the name of the S3 bucket you’re using.
 
 ---
 
+## Troubleshooting
+
+<Troubleshooting
+  sections={[
+    {
+      title: 'Error: AccessControlListNotSupported: The bucket does not allow ACLs',
+      content: <AclErrorSection />
+    }
+  ]}
+/>
+
+---
+
 ## See Also
 
-- Check out [more plugins](../overview.mdx) you can add to your store.
+- Check out [more plugins](../overview.mdx) you can add to your store.
 - [Deploy the Medusa backend](../../deployments/server/index.mdx)
 - Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.

docs/content/plugins/notifications/mailchimp.md

@@ -134,7 +134,7 @@ mailchimpService.subscribeNewsletter(
 
 :::tip
 
-You can learn more about how you can use services in your endpoints, services, and subscribers in the [Services documentation](../../development/services/create-service.md#using-your-custom-service).
+You can learn more about how you can use services in your endpoints, services, and subscribers in the [Services documentation](../../development/services/create-service.mdx#using-your-custom-service).
 
 :::
 

docs/content/plugins/notifications/twilio-sms.md

@@ -73,7 +73,7 @@ const plugins = [
 
 ## Example Usage of the Plugin
 
-This plugin adds the service `twilioSmsService` to your Medusa backend. To send SMS using it, all you have to do is resolve it in your file as explained in the [Services](../../development/services/create-service.md#using-your-custom-service) documentation.
+This plugin adds the service `twilioSmsService` to your Medusa backend. To send SMS using it, all you have to do is resolve it in your file as explained in the [Services](../../development/services/create-service.mdx#using-your-custom-service) documentation.
 
 In this example, you’ll create a subscriber that listens to the `order.placed` event and sends an SMS to the customer to confirm their order.
 

docs/content/plugins/payment/stripe.mdx

@@ -3,6 +3,9 @@ description: 'Learn how to integrate Stripe with the Medusa backend. Learn how t
 addHowToData: true
 ---
 
+import Troubleshooting from '@site/src/components/Troubleshooting'
+import MissingPaymentProvider from '../../troubleshooting/missing-payment-providers.md'
+
 # Stripe
 
 This document guides you through setting up Stripe payments in your Medusa backend, admin, and storefront using the [Stripe Plugin](https://github.com/medusajs/medusa/tree/master/packages/medusa-payment-stripe).
@@ -19,9 +22,9 @@ You can also follow this video guide to learn how the setup works:
 
 ## Overview
 
-[Stripe](https://stripe.com/) is a battle-tested and unified platform for transaction handling. Stripe supplies you with the technical components needed to handle transactions safely and all the analytical features necessary to gain insight into your sales. These features are also available in a safe test environment which allows for a concern-free development process.
+[Stripe](https://stripe.com/) is a battle-tested and unified platform for transaction handling. Stripe supplies you with the technical components needed to handle transactions safely and all the analytical features necessary to gain insight into your sales. These features are also available in a safe test environment which allows for a concern-free development process.
 
-Using the `medusa-payment-stripe` plugin, this guide shows you how to set up your Medusa project with Stripe as a payment processor.
+Using the `medusa-payment-stripe` plugin, this guide shows you how to set up your Medusa project with Stripe as a payment processor.
 
 ---
 
@@ -379,6 +382,19 @@ This plugin handles the following Stripe webhook events:
 
 ---
 
+## Troubleshooting
+
+<Troubleshooting
+  sections={[
+    {
+      title: 'Stripe not showing in checkout',
+      content: <MissingPaymentProvider />
+    }
+  ]}
+/>
+
+---
+
 ## See Also
 
 - Check out [more plugins](../overview.mdx) you can add to your store.