Merge branch 'master' into develop

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,11 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Feature Request
+    url: https://github.com/medusajs/medusa/discussions/categories/feature-requests
+    about: Use GitHub Discussions to open a feature request.
   - name: Ask a question
     url: https://discord.gg/medusajs
     about: Join our community to ask questions and participate in discussions
   - name: Want to work with us?
     url: mailto:hello@medusajs.com?subject=[GitHub]%20Working%20with%20Medusa
-    about: Interested in working with Medusa? Get in touch!
+    about: Interested in working with Medusa? Get in touch!

docs/content/add-plugins/algolia.md

@@ -85,7 +85,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_ADMIN_API_KEY>` are respectively the Applicatio
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -170,7 +170,7 @@ The Next.js storefront has the Algolia integration available out of the box. To
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -190,7 +190,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are respectively the Applicati
 
 Finally, change the code in `src/lib/search-client.ts` to the following:
 
-```jsx
+```jsx title=src/lib/search-client.ts
 import algoliasearch from "algoliasearch/lite"
 
 const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "" // You should add this to your environment variables
@@ -247,7 +247,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -310,13 +310,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

docs/content/add-plugins/contentful/customize-contentful.md

@@ -22,7 +22,7 @@ The Contentful migrations are located in the `contentful-migrations` directory i
 
 Here’s an example of a migration created in a new file `contentful-migrations/rich-text.js`:
 
-```jsx
+```jsx title=contentful-migrations/rich-text.js
 #! /usr/bin/env node
 
 require("dotenv").config();
@@ -152,7 +152,7 @@ After creating a new content model in your Contentful Space, you must add the ne
 
 To render the Rich Text content you created in the previous example, create the file `src/components/rich-text/rich-text.js` with the following content:
 
-```jsx
+```jsx title=src/components/rich-text/rich-text.js
 import React from "react"
 import { renderRichText } from "gatsby-source-contentful/rich-text"
 
@@ -180,13 +180,13 @@ Since the Rich Text model can be added to any page, you must edit `src/pages/{Co
 
 In `src/pages/{ContentfulPage.slug}.js`, import the `RichText` component at the top of the file:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 Then, in the returned JSX add a new case to the switch statement:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 switch (cm.internal.type) {
   //...
   case "ContentfulRichText":
@@ -200,7 +200,7 @@ If the content model of a tile is Rich Text, you’ll display it with the `RichT
 
 Finally, to retrieve all necessary data of the Rich Text content, in the `query` GraphQL variable add the following after the `... on ContentfulTileSection` fragment:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
         # find the following line
         ... on ContentfulTileSection {
@@ -246,7 +246,7 @@ In the example migration, you also edited the product page to include a new Cont
 
 To render them on the Product Page, add the following in the GraphQL query defined in the `query` variable inside `product`:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
   query ($id: String!) {
     product: contentfulProduct(id: { eq: $id }) {
@@ -275,13 +275,13 @@ If you added other accepted Content Models to the `contentModules` field of the
 
 Then, in `src/views/product.js` import the `RichText` component:
 
-```jsx
+```jsx title=src/views/product.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 And in the returned JSX add the following before the last `</div>`:
 
-```jsx
+```jsx title=src/views/product.js
 <div className={styles.contentModules}>
   {product.contentModules?.map((cm) => {
     switch (cm.internal.type) {

docs/content/add-plugins/contentful/index.md

@@ -38,7 +38,7 @@ This installs a new Medusa server in the directory `medusa-contentful`.
 
 Change to the `medusa-contentful` directory. In `.env` you’ll find three variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 CONTENTFUL_ENV=
@@ -116,7 +116,7 @@ You can find the format of the PostgreSQL database URL in [PostgreSQL’s docume
 
 Then, in `medusa-config.js` in the exported object, comment out or remove the SQLite database configurations and add the PostgreSQL database configurations:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     //...
@@ -239,7 +239,7 @@ mv .env.template .env
 
 Then, open `.env`. You should find the following environment variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 ```

docs/content/add-plugins/klarna.md

@@ -1,13 +1,80 @@
----
-hide_footer: true
----
-
 # Klarna
 
-:::note
+In this document, you’ll learn how to integrate Klarna as a payment provider in Medusa.
+
+## Introduction
+
+[Klarna](https://www.klarna.com/) is a payment provider that allows customers to pay in different ways including direct payment, installment payments, payment after delivery, and more.
+
+You can integrate Klarna into Medusa using the [official plugin](https://github.com/medusajs/medusa/tree/master/packages/medusa-payment-klarna).
+
+## Prerequisites
+
+### Medusa Components
+
+It is assumed that you already have a Medusa server installed and set up. If not, you can follow the [quickstart guide](../quickstart/quick-start.md).
+
+In addition, you’ll need to use the [Medusa Admin](../admin/quickstart.md) to enable the payment provider in later steps. You can alternatively use the [REST APIs](/api/admin/#tag/Region/operation/PostRegionsRegionPaymentProviders).
+
+### Needed Accounts
+
+- A [Klarna business account](https://portal.klarna.com/)
+
+## Install Plugin
+
+On your Medusa server, run the following command to install the plugin:
+
+```bash
+npm install medusa-payment-klarna
+```
+
+Then, add the following environment variables:
+
+```bash
+KLARNA_BACKEND_URL=<YOUR_KLARNA_BACKEND_URL>
+KLARNA_URL=<YOUR_KLARNA_URL>
+KLARNA_USER=<YOUR_KLARNA_USER>
+KLARNA_PASSWORD=<YOUR_KLARNA_PASSWORD>
+KLARNA_TERMS_URL=<YOUR_KLARNA_TERMS_URL>
+KLARNA_CHECKOUT_URL=<YOUR_KLARNA_CHECKOUT_URL>
+KLARNA_CONFIRMATION_URL=<YOUR_KLARNA_CONFIRMATION_URL>
+```
+
+Where:
+
+- `<YOUR_KLARNA_BACKEND_URL>` is your Klarna URL.
+- `<YOUR_KLARNA_URL>` is the [base Klarna URL based on your environment](https://docs.klarna.com/api/api-urls/).
+- `<YOUR_KLARNA_USER>` and `<YOUR_KLARNA_PASSWORD>` are your [API credentials](https://docs.klarna.com/api/authentication/).
+- `<YOUR_KLARNA_TERMS_URL>`, `<YOUR_KLARNA_CHECKOUT_URL>`, and `<YOUR_KLARNA_CONFIRMATION_URL>` are the terms, checkout, and confirmation URL of your Klarna account.
+
+Finally, in `medusa-config.js`, add the Klarna plugin to the `plugins` array with the necessary configurations:
+
+```jsx title=medusa-config.js
+const plugins = [
+  //other plugins...
+  {
+    resolve: `medusa-payment-klarnal`,
+    options: {
+      backend_url: process.env.KLARNA_BACKEND_URL
+      url: process.env.KLARNA_URL,
+      user: process.env.KLARNA_USER,
+      password: process.env.KLARNA_PASSWORD,
+      merchant_urls: {
+        terms: process.env.KLARNA_TERMS_URL,
+        checkout: process.env.KLARNA_CHECKOUT_URL,
+        confirmation: process.env.KLARNA_CONFIRMATION_URL
+      }
+    }
+  }
+];
+```
+
+## Enable Klarna in Regions
+
+To use Klarna in your store, you must enable it in at least one region.
 
-This guide is coming soon.
+You can follow [this user guide to learn how to enable a payment provider in a region](../user-guide/regions/providers#manage-payment-providers). You can alternatively use the [REST APIs](/api/admin/#tag/Region/operation/PostRegionsRegionPaymentProviders).
 
-:::
+## What’s Next
 
-[View plugin](https://github.com/medusajs/medusa/tree/master/packages/medusa-payment-klarna)
+- Check out [more plugins](https://github.com/medusajs/medusa/tree/master/packages) you can add to your store.

docs/content/add-plugins/mailchimp.md

@@ -51,7 +51,7 @@ Make sure to replace `<YOUR_API_KEY>` with your API Key and `<YOUR_NEWSLETTER_LI
 
 Open `medusa-config.js` and add the new plugin into the `plugins` array:
 
-```js
+```js title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -72,7 +72,7 @@ This plugin adds a new `POST` endpoint at `/mailchimp/subscribe`. This endpoint
 
 Try sending a `POST` request to `/mailchimp/subscribe` with the following JSON body:
 
-```json noHeader
+```json noReport
 {
   "email": "example@gmail.com"
 }
@@ -90,7 +90,7 @@ If you check your Mailchimp dashboard, you should find the email added to your A
 
 Here’s an example of sending additional data with the subscription:
 
-```json noHeader
+```json noReport
 {
     "email": "example@gmail.com",
     "data": {
@@ -107,7 +107,7 @@ If you want to subscribe to users without using this endpoint or at a specific p
 
 Here’s an example of using the `mailchimpService` inside an endpoint:
 
-```jsx
+```jsx title=src/api/index.ts
 const mailchimpService = req.scope.resolve("mailchimpService")
 
 mailchimpService.subscribeNewsletter(

docs/content/add-plugins/meilisearch.md

@@ -51,7 +51,7 @@ Where `<YOUR_MEILISEARCH_HOST>` is the host of your MeiliSearch instance. By def
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -144,7 +144,7 @@ The Next.js storefront has the MeiliSearch integration available out of the box.
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -206,7 +206,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -269,13 +269,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

docs/content/add-plugins/minio.md

@@ -97,7 +97,7 @@ Where `<ENDPOINT>` is the URL of your MinIO server, `<BUCKET>` is the name of th
 
 Finally, configure your `medusa-config.js` to include the plugin with the required options:
 
-```bash
+```js title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -145,7 +145,7 @@ MINIO_PRIVATE_BUCKET=exports
 
 Then, add a new option to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -170,7 +170,7 @@ Where `<YOUR_PRIVATE_ACCESS_KEY>` and `<YOUR_PRIVATE_SECRET_KEY>` are the access
 
 Then, add two new options to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -189,7 +189,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-c
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...