+
+
+ Brand
+
+
+
+ Name
+
+
+
+ {brandName || "-"}
+
+
+
-
-
- Brand
-
-
-
- Name
-
-
-
- {brandName || "-"}
-
-
-
- API Key: {import.meta.env.VITE_MY_API_KEY}
-
-
+ API Key: {import.meta.env.VITE_MY_API_KEY}
+
+
+ Product Widget
+
+
+
+ Product Widget {data.title}
+
+
+
- Product Widget
-
-
-
- Product Widget {data.title}
-
-
-
+
+
+
+```
+
+This template will show each item's image, title, quantity, and price in the cart. It will also show a button to return to the cart and checkout.
+
+You can replace `https://yourstore.com` with your storefront's URL. You'll later implement the `/cart/recover/:cart_id` route in the storefront to recover the cart.
+
+Once you are done, copy the template ID from SendGrid and set it as an environment variable in your Medusa project:
+
+```plain
+ABANDONED_CART_TEMPLATE_ID=your-sendgrid-template-id
+```
+
+***
+
+## Step 4: Schedule Cart Abandonment Notifications
+
+The next step is to automate sending the abandoned cart notifications. You need a task that runs once a day to find the carts that have been abandoned for a certain period and send the notifications to the customers.
+
+To run a task at a scheduled interval, you can use a [scheduled job](https://docs.medusajs.com/docs/learn/fundamentals/scheduled-jobs/index.html.md). A scheduled job is an asynchronous function that the Medusa application runs at the interval you specify during the Medusa application's runtime.
+
+You can create a scheduled job in a TypeScript or JavaScript file under the `src/jobs` directory. So, to create the scheduled job that sends the abandoned cart notifications, create the file `src/jobs/send-abandoned-cart-notification.ts` with the following content:
+
+```ts title="src/jobs/send-abandoned-cart-notification.ts"
+import { MedusaContainer } from "@medusajs/framework/types"
+import {
+ sendAbandonedCartsWorkflow,
+ SendAbandonedCartsWorkflowInput,
+} from "../workflows/send-abandoned-carts"
+
+export default async function abandonedCartJob(
+ container: MedusaContainer
+) {
+ const logger = container.resolve("logger")
+ const query = container.resolve("query")
+
+ const oneDayAgo = new Date()
+ oneDayAgo.setDate(oneDayAgo.getDate() - 1)
+ const limit = 100
+ const offset = 0
+ const totalCount = 0
+ const abandonedCartsCount = 0
+
+ do {
+ // TODO retrieve paginated abandoned carts
+ } while (offset < totalCount)
+
+ logger.info(`Sent ${abandonedCartsCount} abandoned cart notifications`)
+}
+
+export const config = {
+ name: "abandoned-cart-notification",
+ schedule: "0 0 * * *", // Run at midnight every day
+}
+```
+
+In a scheduled job's file, you must export:
+
+1. An asynchronous function that holds the job's logic. The function receives the [Medusa container](https://docs.medusajs.com/docs/learn/fundamentals/medusa-container/index.html.md) as a parameter.
+2. A `config` object that specifies the job's name and schedule. The schedule is a [cron expression](https://crontab.guru/) that defines the interval at which the job runs.
+
+In the scheduled job function, so far you resolve the [Logger](https://docs.medusajs.com/docs/learn/debugging-and-testing/logging/index.html.md) to log messages, and [Query](https://docs.medusajs.com/docs/learn/fundamentals/module-links/query/index.html.md) to retrieve data across modules.
+
+You also define a `oneDayAgo` date, which is the date that you will use as the condition of an abandoned cart. In addition, you define variables to paginate the carts.
+
+Next, you will retrieve the abandoned carts using Query. Replace the `TODO` with the following:
+
+```ts title="src/jobs/send-abandoned-cart-notification.ts"
+const {
+ data: abandonedCarts,
+ metadata,
+} = await query.graph({
+ entity: "cart",
+ fields: [
+ "id",
+ "email",
+ "items.*",
+ "metadata",
+ "customer.*",
+ ],
+ filters: {
+ updated_at: {
+ $lt: oneDayAgo,
+ },
+ // @ts-ignore
+ email: {
+ $ne: null,
+ },
+ // @ts-ignore
+ completed_at: null,
+ },
+ pagination: {
+ skip: offset,
+ take: limit,
+ },
+})
+
+totalCount = metadata?.count ?? 0
+const cartsWithItems = abandonedCarts.filter((cart) =>
+ cart.items?.length > 0 && !cart.metadata?.abandoned_notification
+)
+
+try {
+ await sendAbandonedCartsWorkflow(container).run({
+ input: {
+ carts: cartsWithItems,
+ } as unknown as SendAbandonedCartsWorkflowInput,
+ })
+ abandonedCartsCount += cartsWithItems.length
+
+} catch (error) {
+ logger.error(
+ `Failed to send abandoned cart notification: ${error.message}`
+ )
+}
+
+offset += limit
+```
+
+In the do-while loop, you use Query to retrieve carts matching the following criteria:
+
+- The cart was last updated more than a day ago.
+- The cart has an email address.
+- The cart has not been completed.
+
+You also filter the retrieved carts to only include carts with items and customers that have not received an abandoned cart notification.
+
+Finally, you execute the `sendAbandonedCartsWorkflow` passing it the abandoned carts as an input. You will execute the workflow for each paginated batch of carts.
+
+### Test it Out
+
+To test out the scheduled job and workflow, it is recommended to change the `oneDayAgo` date to a minute before now for easy testing:
+
+```ts title="src/jobs/send-abandoned-cart-notification.ts"
+oneDayAgo.setMinutes(oneDayAgo.getMinutes() - 1) // For testing
+```
+
+And to change the job's schedule in `config` to run every minute:
+
+```ts title="src/jobs/send-abandoned-cart-notification.ts"
+export const config = {
+ // ...
+ schedule: "* * * * *", // Run every minute for testing
+}
+```
+
+Finally, start the Medusa application with the following command:
+
+```bash npm2yarn
+npm run dev
+```
+
+And in the [Next.js Starter Storefront](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/nextjs-starter/index.html.md)'s directory (that you installed in the first step), start the storefront with the following command:
+
+```bash npm2yarn
+npm run dev
+```
+
+Open the storefront at `localhost:8000`. You can either:
+
+- Create an account and add items to the cart, then leave the cart for a minute.
+- Add an item to the cart as a guest. Then, start the checkout process, but only enter the shipping and email addresses, and leave the cart for a minute.
+
+Afterwards, wait for the job to execute. Once it is executed, you will see the following message in the terminal:
+
+```bash
+info: Sent 1 abandoned cart notifications
+```
+
+Once you're done testing, make sure to revert the changes to the `oneDayAgo` date and the job's schedule.
+
+***
+
+## Step 5: Recover Cart in Storefront
+
+In the storefront, you need to add a route that recovers the cart when the customer clicks on the link in the email. The route should receive the cart ID, set the cart ID in the cookie, and redirect the customer to the cart page.
+
+To implement the route, in the Next.js Starter Storefront create the file `src/app/[countryCode]/(main)/cart/recover/[id]/route.tsx` with the following content:
+
+```tsx title="src/app/[countryCode]/(main)/cart/recover/[id]/route.tsx" badgeLabel="Storefront" badgeColor="blue"
+import { NextRequest } from "next/server"
+import { retrieveCart } from "../../../../../../lib/data/cart"
+import { setCartId } from "../../../../../../lib/data/cookies"
+import { notFound, redirect } from "next/navigation"
+type Params = Promise<{
+ id: string
+}>
+
+export async function GET(req: NextRequest, { params }: { params: Params }) {
+ const { id } = await params
+ const cart = await retrieveCart(id)
+
+ if (!cart) {
+ return notFound()
+ }
+
+ setCartId(id)
+
+ const countryCode = cart.shipping_address?.country_code ||
+ cart.region?.countries?.[0]?.iso_2
+
+ redirect(
+ `/${countryCode ? `${countryCode}/` : ""}cart`
+ )
+}
+```
+
+You add a `GET` route handler that receives the cart ID as a path parameter. In the route handler, you:
+
+- Try to retrieve the cart from the Medusa application. The `retrieveCart` function is already available in the Next.js storefront. If the cart is not found, you return a 404 response.
+- Set the cart ID in a cookie using the `setCartId` function. This is also a function that is already available in the storefront.
+- Redirect the customer to the cart page. You set the country code in the URL based on the cart's shipping address or region.
+
+### Test it Out
+
+To test it out, start the Medusa application:
+
+```bash npm2yarn
+npm run dev
+```
+
+And in the Next.js Starter Storefront's directory, start the storefront:
+
+```bash npm2yarn
+npm run dev
+```
+
+Then, either open the link in an abandoned cart email or navigate to `localhost:8000/cart/recover/:cart_id` in your browser. You will be redirected to the cart page with the recovered cart.
+
+
+
+***
+
+## Next Steps
+
+You have now implemented the logic to send abandoned cart notifications in Medusa. You can implement other customizations with Medusa, such as:
+
+- [Implement Product Reviews](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/how-to-tutorials/tutorials/product-reviews/index.html.md).
+- [Implement Wishlist](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/plugins/guides/wishlist/index.html.md).
+- [Allow Custom-Item Pricing](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/examples/guides/custom-item-price/index.html.md).
+
+If you are new to Medusa, check out the [main documentation](https://docs.medusajs.com/docs/learn/index.html.md), where you will get a more in-depth learning of all the concepts you have used in this guide and more.
+
+To learn more about the commerce features that Medusa provides, check out Medusa's [Commerce Modules](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/commerce-modules/index.html.md).
+
+
# Implement Product Reviews in Medusa
In this tutorial, you'll learn how to implement product reviews in Medusa.
@@ -40961,637 +41590,6 @@ If you're new to Medusa, check out the [main documentation](https://docs.medusaj
To learn more about the commerce features that Medusa provides, check out Medusa's [Commerce Modules](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/commerce-modules/index.html.md).
-# Send Abandoned Cart Notifications in Medusa
-
-In this tutorial, you will learn how to send notifications to customers who have abandoned their carts.
-
-When you install a Medusa application, you get a fully-fledged commerce platform with a framework for customization. The Medusa application's commerce features are built around [commerce modules](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/commerce-modules/index.html.md), which are available out-of-the-box. These features include cart-management capabilities.
-
-Medusa's [Notification Module](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/architectural-modules/notification/index.html.md) allows you to send notifications to users or customers, such as password reset emails, order confirmation SMS, or other types of notifications.
-
-In this tutorial, you will use the Notification Module to send an email to customers who have abandoned their carts. The email will contain a link to recover the customer's cart, encouraging them to complete their purchase. You will use SendGrid to send the emails, but you can also use other email providers.
-
-## Summary
-
-By following this tutorial, you will:
-
-- Install and set up Medusa.
-- Create the logic to send an email to customers who have abandoned their carts.
-- Run the above logic once a day.
-- Add a route to the storefront to recover the cart.
-
-
-
-[View on Github](https://github.com/medusajs/examples/tree/main/abandoned-cart): Find the full code for this tutorial.
-
-***
-
-## Step 1: Install a Medusa Application
-
-### Prerequisites
-
-- [Node.js v20+](https://nodejs.org/en/download)
-- [Git CLI tool](https://git-scm.com/downloads)
-- [PostgreSQL](https://www.postgresql.org/download/)
-
-Start by installing the Medusa application on your machine with the following command:
-
-```bash
-npx create-medusa-app@latest
-```
-
-You will first be asked for the project's name. Then, when asked whether you want to install the [Next.js starter storefront](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/nextjs-starter/index.html.md), choose "Yes."
-
-Afterwards, the installation process will start, which will install the Medusa application in a directory with your project's name and the Next.js Starter Storefront in a separate directory with the `{project-name}-storefront` name.
-
-The Medusa application is composed of a headless Node.js server and an admin dashboard. The storefront is installed or custom-built separately and connects to the Medusa application through its REST endpoints, called [API routes](https://docs.medusajs.com/docs/learn/fundamentals/api-routes/index.html.md). Learn more in [Medusa's Architecture documentation](https://docs.medusajs.com/docs/learn/introduction/architecture/index.html.md).
-
-Once the installation finishes successfully, the Medusa Admin dashboard will open with a form to create a new user. Enter the user's credentials and submit the form. Afterwards, you can log in with the new user and explore the dashboard.
-
-Check out the [troubleshooting guides](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/troubleshooting/create-medusa-app-errors/index.html.md) for help.
-
-***
-
-## Step 2: Set up SendGrid
-
-### Prerequisites
-
-- [SendGrid account](https://sendgrid.com)
-- [Verified Sender Identity](https://mc.sendgrid.com/senders)
-- [SendGrid API Key](https://app.sendgrid.com/settings/api_keys)
-
-Medusa's Notification Module provides the general functionality to send notifications, but the sending logic is implemented in a module provider. This allows you to integrate the email provider of your choice.
-
-To send the cart-abandonment emails, you will use SendGrid. Medusa provides a [SendGrid Notification Module Provider](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/architectural-modules/notification/sendgrid/index.html.md) that you can use to send emails.
-
-Alternatively, you can use [other Notification Module Providers](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/architectural-modules/notification#what-is-a-notification-module-provider/index.html.md) or [create a custom provider](https://docs.medusajs.com/references/notification-provider-module/index.html.md).
-
-To set up SendGrid, add the SendGrid Notification Module Provider to `medusa-config.ts`:
-
-```ts title="medusa-config.ts"
-module.exports = defineConfig({
- // ...
- modules: [
- {
- resolve: "@medusajs/medusa/notification",
- options: {
- providers: [
- {
- resolve: "@medusajs/medusa/notification-sendgrid",
- id: "sendgrid",
- options: {
- channels: ["email"],
- api_key: process.env.SENDGRID_API_KEY,
- from: process.env.SENDGRID_FROM,
- },
- },
- ],
- },
- },
- ],
-})
-```
-
-In the `modules` configuration, you pass the Notification Provider and add SendGrid as a provider. You also pass to the SendGrid Module Provider the following options:
-
-- `channels`: The channels that the provider supports. In this case, it is only email.
-- `api_key`: Your SendGrid API key.
-- `from`: The email address that the emails will be sent from.
-
-Then, set the SendGrid API key and "from" email as environment variables, such as in the `.env` file at the root of your project:
-
-```plain
-SENDGRID_API_KEY=your-sendgrid-api-key
-SENDGRID_FROM=test@gmail.com
-```
-
-You can now use SendGrid to send emails in Medusa.
-
-***
-
-## Step 3: Send Abandoned Cart Notification Flow
-
-You will now implement the sending logic for the abandoned cart notifications.
-
-To build custom commerce features in Medusa, you create a [workflow](https://docs.medusajs.com/docs/learn/fundamentals/workflows/index.html.md). A workflow is a series of queries and actions, called steps, that complete a task. You construct a workflow like you construct a function, but it is a special function that allows you to track its executions' progress, define roll-back logic, and configure other advanced features. Then, you execute the workflow from other customizations, such as in a scheduled job.
-
-In this step, you will create the workflow that sends the abandoned cart notifications. Later, you will learn how to execute it once a day.
-
-The workflow will receive the list of abandoned carts as an input. The workflow has the following steps:
-
-- [sendAbandonedNotificationsStep](#sendAbandonedNotificationsStep): Send the abandoned cart notifications.
-- [updateCartsStep](https://docs.medusajs.com/references/medusa-workflows/steps/updateCartsStep/index.html.md): Update the cart to store the last notification date.
-
-Medusa provides the second step in its `@medusajs/medusa/core-flows` package. So, you only need to implement the first one.
-
-### sendAbandonedNotificationsStep
-
-The first step of the workflow sends a notification to the owners of the abandoned carts that are passed as an input.
-
-To implement the step, create the file `src/workflows/steps/send-abandoned-notifications.ts` with the following content:
-
-```ts title="src/workflows/steps/send-abandoned-notifications.ts"
-import {
- createStep,
- StepResponse,
-} from "@medusajs/framework/workflows-sdk"
-import { Modules } from "@medusajs/framework/utils"
-import { CartDTO, CustomerDTO } from "@medusajs/framework/types"
-
-type SendAbandonedNotificationsStepInput = {
- carts: (CartDTO & {
- customer: CustomerDTO
- })[]
-}
-
-export const sendAbandonedNotificationsStep = createStep(
- "send-abandoned-notifications",
- async (input: SendAbandonedNotificationsStepInput, { container }) => {
- const notificationModuleService = container.resolve(
- Modules.NOTIFICATION
- )
-
- const notificationData = input.carts.map((cart) => ({
- to: cart.email!,
- channel: "email",
- template: process.env.ABANDONED_CART_TEMPLATE_ID || "",
- data: {
- customer: {
- first_name: cart.customer?.first_name || cart.shipping_address?.first_name,
- last_name: cart.customer?.last_name || cart.shipping_address?.last_name,
- },
- cart_id: cart.id,
- items: cart.items?.map((item) => ({
- product_title: item.title,
- quantity: item.quantity,
- unit_price: item.unit_price,
- thumbnail: item.thumbnail,
- })),
- },
- }))
-
- const notifications = await notificationModuleService.createNotifications(
- notificationData
- )
-
- return new StepResponse({
- notifications,
- })
- }
-)
-```
-
-You create a step with `createStep` from the Workflows SDK. It accepts two parameters:
-
-1. The step's unique name, which is `create-review`.
-2. An async function that receives two parameters:
- - The step's input, which is in this case an object with the review's properties.
- - An object that has properties including the [Medusa container](https://docs.medusajs.com/docs/learn/fundamentals/medusa-container/index.html.md), which is a registry of framework and commerce tools that you can access in the step.
-
-In the step function, you first resolve the Notification Module's service, which has methods to manage notifications. Then, you prepare the data of each notification, and create the notifications with the `createNotifications` method.
-
-Notice that each notification is an object with the following properties:
-
-- `to`: The email address of the customer.
-- `channel`: The channel that the notification will be sent through. The Notification Module uses the provider registered for the channel.
-- `template`: The ID or name of the email template in the third-party provider. Make sure to set it as an environment variable once you have it.
-- `data`: The data to pass to the template to render the email's dynamic content.
-
-Based on the dynamic template you create in SendGrid or another provider, you can pass different data in the `data` object.
-
-A step function must return a `StepResponse` instance. The `StepResponse` constructor accepts the step's output as a parameter, which is the created notifications.
-
-### Create Workflow
-
-You can now create the workflow that uses the step you just created to send the abandoned cart notifications.
-
-Create the file `src/workflows/send-abandoned-carts.ts` with the following content:
-
-```ts title="src/workflows/send-abandoned-carts.ts"
-import {
- createWorkflow,
- WorkflowResponse,
- transform,
-} from "@medusajs/framework/workflows-sdk"
-import {
- sendAbandonedNotificationsStep,
-} from "./steps/send-abandoned-notifications"
-import { updateCartsStep } from "@medusajs/medusa/core-flows"
-import { CartDTO } from "@medusajs/framework/types"
-import { CustomerDTO } from "@medusajs/framework/types"
-
-export type SendAbandonedCartsWorkflowInput = {
- carts: (CartDTO & {
- customer: CustomerDTO
- })[]
-}
-
-export const sendAbandonedCartsWorkflow = createWorkflow(
- "send-abandoned-carts",
- function (input: SendAbandonedCartsWorkflowInput) {
- sendAbandonedNotificationsStep(input)
-
- const updateCartsData = transform(
- input,
- (data) => {
- return data.carts.map((cart) => ({
- id: cart.id,
- metadata: {
- ...cart.metadata,
- abandoned_notification: new Date().toISOString(),
- },
- }))
- }
- )
-
- const updatedCarts = updateCartsStep(updateCartsData)
-
- return new WorkflowResponse(updatedCarts)
- }
-)
-```
-
-You create a workflow using `createWorkflow` from the Workflows SDK. It accepts the workflow's unique name as a first parameter.
-
-It accepts as a second parameter a constructor function, which is the workflow's implementation. The function can accept input, which in this case is an arra of carts.
-
-In the workflow's constructor function, you:
-
-- Use the `sendAbandonedNotificationsStep` to send the notifications to the carts' customers.
-- Use the `updateCartsStep` from Medusa's core flows to update the carts' metadata with the last notification date.
-
-Notice that you use the `transform` function to prepare the `updateCartsStep`'s input. Medusa does not support direct data manipulation in a workflow's constructor function. You can learn more about it in the [Data Manipulation in Workflows documentation](https://docs.medusajs.com/docs/learn/fundamentals/workflows/variable-manipulation/index.html.md).
-
-Your workflow is now ready for use. You will learn how to execute it in the next section.
-
-### Setup Email Template
-
-Before you can test the workflow, you need to set up an email template in SendGrid. The template should contain the dynamic content that you pass in the workflow's step.
-
-To create an email template in SendGrid:
-
-- Go to [Dynamic Templates](https://mc.sendgrid.com/dynamic-templates) in the SendGrid dashboard.
-- Click on the "Create Dynamic Template" button.
-
-
-
-- In the side window that opens, enter a name for the template, then click on the Create button.
-- The template will be added to the middle of the page. When you click on it, a new section will show with an "Add Version" button. Click on it.
-
-
-
-In the form that opens, you can either choose to start with a blank template or from an existing design. You can then use the drag-and-drop or code editor to design the email template.
-
-You can also use the following template as an example:
-
-```html title="Abandoned Cart Email Template"
-
-
-
-
-
- Hi {{customer.first_name}}, your cart is waiting! 🛍️
+
+
+ {{#each items}}
+
+ 
+
+ {{/each}}
+
+ Return to Cart & Checkout
+
+
+ {{product_title}}
+
+ {{subtitle}}
+Quantity: {{quantity}}
+Price: $ {{unit_price}}
+
-
-
-
-```
-
-This template will show each item's image, title, quantity, and price in the cart. It will also show a button to return to the cart and checkout.
-
-You can replace `https://yourstore.com` with your storefront's URL. You'll later implement the `/cart/recover/:cart_id` route in the storefront to recover the cart.
-
-Once you are done, copy the template ID from SendGrid and set it as an environment variable in your Medusa project:
-
-```plain
-ABANDONED_CART_TEMPLATE_ID=your-sendgrid-template-id
-```
-
-***
-
-## Step 4: Schedule Cart Abandonment Notifications
-
-The next step is to automate sending the abandoned cart notifications. You need a task that runs once a day to find the carts that have been abandoned for a certain period and send the notifications to the customers.
-
-To run a task at a scheduled interval, you can use a [scheduled job](https://docs.medusajs.com/docs/learn/fundamentals/scheduled-jobs/index.html.md). A scheduled job is an asynchronous function that the Medusa application runs at the interval you specify during the Medusa application's runtime.
-
-You can create a scheduled job in a TypeScript or JavaScript file under the `src/jobs` directory. So, to create the scheduled job that sends the abandoned cart notifications, create the file `src/jobs/send-abandoned-cart-notification.ts` with the following content:
-
-```ts title="src/jobs/send-abandoned-cart-notification.ts"
-import { MedusaContainer } from "@medusajs/framework/types"
-import {
- sendAbandonedCartsWorkflow,
- SendAbandonedCartsWorkflowInput,
-} from "../workflows/send-abandoned-carts"
-
-export default async function abandonedCartJob(
- container: MedusaContainer
-) {
- const logger = container.resolve("logger")
- const query = container.resolve("query")
-
- const oneDayAgo = new Date()
- oneDayAgo.setDate(oneDayAgo.getDate() - 1)
- const limit = 100
- const offset = 0
- const totalCount = 0
- const abandonedCartsCount = 0
-
- do {
- // TODO retrieve paginated abandoned carts
- } while (offset < totalCount)
-
- logger.info(`Sent ${abandonedCartsCount} abandoned cart notifications`)
-}
-
-export const config = {
- name: "abandoned-cart-notification",
- schedule: "0 0 * * *", // Run at midnight every day
-}
-```
-
-In a scheduled job's file, you must export:
-
-1. An asynchronous function that holds the job's logic. The function receives the [Medusa container](https://docs.medusajs.com/docs/learn/fundamentals/medusa-container/index.html.md) as a parameter.
-2. A `config` object that specifies the job's name and schedule. The schedule is a [cron expression](https://crontab.guru/) that defines the interval at which the job runs.
-
-In the scheduled job function, so far you resolve the [Logger](https://docs.medusajs.com/docs/learn/debugging-and-testing/logging/index.html.md) to log messages, and [Query](https://docs.medusajs.com/docs/learn/fundamentals/module-links/query/index.html.md) to retrieve data across modules.
-
-You also define a `oneDayAgo` date, which is the date that you will use as the condition of an abandoned cart. In addition, you define variables to paginate the carts.
-
-Next, you will retrieve the abandoned carts using Query. Replace the `TODO` with the following:
-
-```ts title="src/jobs/send-abandoned-cart-notification.ts"
-const {
- data: abandonedCarts,
- metadata,
-} = await query.graph({
- entity: "cart",
- fields: [
- "id",
- "email",
- "items.*",
- "metadata",
- "customer.*",
- ],
- filters: {
- updated_at: {
- $lt: oneDayAgo,
- },
- // @ts-ignore
- email: {
- $ne: null,
- },
- // @ts-ignore
- completed_at: null,
- },
- pagination: {
- skip: offset,
- take: limit,
- },
-})
-
-totalCount = metadata?.count ?? 0
-const cartsWithItems = abandonedCarts.filter((cart) =>
- cart.items?.length > 0 && !cart.metadata?.abandoned_notification
-)
-
-try {
- await sendAbandonedCartsWorkflow(container).run({
- input: {
- carts: cartsWithItems,
- } as unknown as SendAbandonedCartsWorkflowInput,
- })
- abandonedCartsCount += cartsWithItems.length
-
-} catch (error) {
- logger.error(
- `Failed to send abandoned cart notification: ${error.message}`
- )
-}
-
-offset += limit
-```
-
-In the do-while loop, you use Query to retrieve carts matching the following criteria:
-
-- The cart was last updated more than a day ago.
-- The cart has an email address.
-- The cart has not been completed.
-
-You also filter the retrieved carts to only include carts with items and customers that have not received an abandoned cart notification.
-
-Finally, you execute the `sendAbandonedCartsWorkflow` passing it the abandoned carts as an input. You will execute the workflow for each paginated batch of carts.
-
-### Test it Out
-
-To test out the scheduled job and workflow, it is recommended to change the `oneDayAgo` date to a minute before now for easy testing:
-
-```ts title="src/jobs/send-abandoned-cart-notification.ts"
-oneDayAgo.setMinutes(oneDayAgo.getMinutes() - 1) // For testing
-```
-
-And to change the job's schedule in `config` to run every minute:
-
-```ts title="src/jobs/send-abandoned-cart-notification.ts"
-export const config = {
- // ...
- schedule: "* * * * *", // Run every minute for testing
-}
-```
-
-Finally, start the Medusa application with the following command:
-
-```bash npm2yarn
-npm run dev
-```
-
-And in the [Next.js Starter Storefront](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/nextjs-starter/index.html.md)'s directory (that you installed in the first step), start the storefront with the following command:
-
-```bash npm2yarn
-npm run dev
-```
-
-Open the storefront at `localhost:8000`. You can either:
-
-- Create an account and add items to the cart, then leave the cart for a minute.
-- Add an item to the cart as a guest. Then, start the checkout process, but only enter the shipping and email addresses, and leave the cart for a minute.
-
-Afterwards, wait for the job to execute. Once it is executed, you will see the following message in the terminal:
-
-```bash
-info: Sent 1 abandoned cart notifications
-```
-
-Once you're done testing, make sure to revert the changes to the `oneDayAgo` date and the job's schedule.
-
-***
-
-## Step 5: Recover Cart in Storefront
-
-In the storefront, you need to add a route that recovers the cart when the customer clicks on the link in the email. The route should receive the cart ID, set the cart ID in the cookie, and redirect the customer to the cart page.
-
-To implement the route, in the Next.js Starter Storefront create the file `src/app/[countryCode]/(main)/cart/recover/[id]/route.tsx` with the following content:
-
-```tsx title="src/app/[countryCode]/(main)/cart/recover/[id]/route.tsx" badgeLabel="Storefront" badgeColor="blue"
-import { NextRequest } from "next/server"
-import { retrieveCart } from "../../../../../../lib/data/cart"
-import { setCartId } from "../../../../../../lib/data/cookies"
-import { notFound, redirect } from "next/navigation"
-type Params = Promise<{
- id: string
-}>
-
-export async function GET(req: NextRequest, { params }: { params: Params }) {
- const { id } = await params
- const cart = await retrieveCart(id)
-
- if (!cart) {
- return notFound()
- }
-
- setCartId(id)
-
- const countryCode = cart.shipping_address?.country_code ||
- cart.region?.countries?.[0]?.iso_2
-
- redirect(
- `/${countryCode ? `${countryCode}/` : ""}cart`
- )
-}
-```
-
-You add a `GET` route handler that receives the cart ID as a path parameter. In the route handler, you:
-
-- Try to retrieve the cart from the Medusa application. The `retrieveCart` function is already available in the Next.js storefront. If the cart is not found, you return a 404 response.
-- Set the cart ID in a cookie using the `setCartId` function. This is also a function that is already available in the storefront.
-- Redirect the customer to the cart page. You set the country code in the URL based on the cart's shipping address or region.
-
-### Test it Out
-
-To test it out, start the Medusa application:
-
-```bash npm2yarn
-npm run dev
-```
-
-And in the Next.js Starter Storefront's directory, start the storefront:
-
-```bash npm2yarn
-npm run dev
-```
-
-Then, either open the link in an abandoned cart email or navigate to `localhost:8000/cart/recover/:cart_id` in your browser. You will be redirected to the cart page with the recovered cart.
-
-
-
-***
-
-## Next Steps
-
-You have now implemented the logic to send abandoned cart notifications in Medusa. You can implement other customizations with Medusa, such as:
-
-- [Implement Product Reviews](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/how-to-tutorials/tutorials/product-reviews/index.html.md).
-- [Implement Wishlist](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/plugins/guides/wishlist/index.html.md).
-- [Allow Custom-Item Pricing](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/examples/guides/custom-item-price/index.html.md).
-
-If you are new to Medusa, check out the [main documentation](https://docs.medusajs.com/docs/learn/index.html.md), where you will get a more in-depth learning of all the concepts you have used in this guide and more.
-
-To learn more about the commerce features that Medusa provides, check out Medusa's [Commerce Modules](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/commerce-modules/index.html.md).
-
-
# Integrations
You can integrate any third-party service to Medusa, including storage services, notification systems, Content-Management Systems (CMS), etc… By integrating third-party services, you build flows and synchronize data around these integrations, making Medusa not only your commerce application, but a middleware layer between your data sources and operations.
@@ -41677,1805 +41675,6 @@ Integrate a search engine to index and search products or other types of data in
- [Algolia](https://docs.medusajs.com/integrations/guides/algolia/index.html.md)
-# Integrate Medusa with Resend (Email Notifications)
-
-In this guide, you'll learn how to integrate Medusa with Resend.
-
-When you install a Medusa application, you get a fully-fledged commerce platform with a framework for customization. Medusa's architecture supports integrating third-party services, such as an email service, that allow you to build your unique requirements around core commerce flows.
-
-[Resend](https://resend.com/docs/introduction) is an email service with an intuitive developer experience to send emails from any application type, including Node.js servers. By integrating Resend with Medusa, you can build flows to send an email when a commerce operation is performed, such as when an order is placed.
-
-This guide will teach you how to:
-
-- Install and set up Medusa.
-- Integrate Resend into Medusa for sending emails.
-- Build a flow to send an email with Resend when a customer places an order.
-
-You can follow this guide whether you're new to Medusa or an advanced Medusa developer.
-
-[Example Repository](https://github.com/medusajs/examples/tree/main/resend-integration): Find the full code of the guide in this repository.
-
-***
-
-## Step 1: Install a Medusa Application
-
-### Prerequisites
-
-- [Node.js v20+](https://nodejs.org/en/download)
-- [Git CLI tool](https://git-scm.com/downloads)
-- [PostgreSQL](https://www.postgresql.org/download/)
-
-Start by installing the Medusa application on your machine with the following command:
-
-```bash
-npx create-medusa-app@latest
-```
-
-You'll first be asked for the project's name. Then, when you're asked whether you want to install the Next.js storefront, choose `Y` for yes.
-
-Afterwards, the installation process will start, which will install the Medusa application in a directory with your project's name, and the Next.js storefront in a directory with the `{project-name}-storefront` name.
-
-The Medusa application is composed of a headless Node.js server and an admin dashboard. The storefront is installed or custom-built separately and connects to the Medusa application through its REST endpoints, called [API routes](https://docs.medusajs.com/docs/learn/fundamentals/api-routes/index.html.md). Learn more about Medusa's architecture in [this documentation](https://docs.medusajs.com/docs/learn/introduction/architecture/index.html.md).
-
-Once the installation finishes successfully, the Medusa Admin dashboard will open with a form to create a new user. Enter the user's credential and submit the form. Afterwards, you can login with the new user and explore the dashboard.
-
-The Next.js storefront is also running at `http://localhost:8000`.
-
-Check out the [troubleshooting guides](https://docs.medusajs.com/Users/shahednasser/medusa/www/apps/resources/app/troubleshooting/create-medusa-app-errors/index.html.md) for help.
-
-***
-
-## Step 2: Prepare Resend Account
-
-If you don't have a Resend Account, create one on [their website](https://resend.com/emails).
-
-In addition, Resend allows you to send emails from the address `onboarding@resend.dev` only to your account's email, which is useful for development purposes. If you have a custom domain to send emails from, add it to your Resend account's domains:
-
-1. Go to Domains from the sidebar.
-2. Click on Add Domain.
-
-
-
-3\. In the form that opens, enter your domain name and select a region close to your users, then click Add.
-
-
-
-4\. In the domain's details page that opens, you'll find DNS records to add to your DNS provider. After you add them, click on Verify DNS Records. You can start sending emails from your custom domain once it's verified.
-
-The steps to add DNS records are different for each provider, so refer to your provider's documentation or knowledge base for more details.
-
-
-
-You also need an API key to connect to your Resend account from Medusa, but you'll create that one in a later section.
-
-***
-
-## Step 3: Install Resend Dependencies
-
-In this step, you'll install two packages useful for your Resend integration:
-
-1. `resend`, which is the Resend SDK:
-
-```bash npm2yarn
-npm install resend
-```
-
-2\. [react-email](https://github.com/resend/react-email), which is a package created by Resend to create email templates with React:
-
-```bash npm2yarn
-npm install @react-email/components -E
-```
-
-You'll use these packages in the next steps.
-
-***
-
-## Step 4: Create Resend Module Provider
-
-To integrate third-party services into Medusa, you create a custom module. A module is a re-usable package with functionalities related to a single feature or domain. Medusa integrates the module into your application without implications or side effects on your setup.
-
-Medusa's Notification Module delegates sending notifications to other modules, called module providers. In this step, you'll create a Resend Module Provider that implements sending notifications through the email channel. In later steps, you'll send email notifications with Resend when an order is placed through this provider.
-
-Learn more about modules in [this documentation](https://docs.medusajs.com/docs/learn/fundamentals/modules/index.html.md).
-
-### Create Module Directory
-
-A module is created under the `src/modules` directory of your Medusa application. So, create the directory `src/modules/resend`.
-
-### Create Service
-
-You define a module's functionalities in a service. A service is a TypeScript or JavaScript class that the module exports. In the service's methods, you can connect to the database, which is useful if your module defines tables in the database, or connect to a third-party service.
-
-In this section, you'll create the Resend Module Provider's service and the methods necessary to send an email with Resend.
-
-Start by creating the file `src/modules/resend/service.ts` with the following content:
-
-```ts title="src/modules/resend/service.ts" highlights={serviceHighlights1}
-import {
- AbstractNotificationProviderService,
-} from "@medusajs/framework/utils"
-import {
- Logger,
-} from "@medusajs/framework/types"
-import {
- Resend,
-} from "resend"
-
-type ResendOptions = {
- api_key: string
- from: string
- html_templates?: RecordHi {{customer.first_name}}, your cart is waiting! 🛍️
-
-
- {{#each items}}
-
-
-
- {{/each}}
-
- Return to Cart & Checkout
-
-
- {{product_title}}
-
- {{subtitle}}
-Quantity: {{quantity}}
-Price: $ {{unit_price}}
-
+
+
-
- e.stopPropagation()}>
- {action.icon}
- {action.label}
-
-
-
- )
- })}
- {!isLast &&
+
+
+
+ e.stopPropagation()}>
+ {action.icon}
+ {action.label}
+
+
+
+ )
+ })}
+ {!isLast &&
-
-
-
- Just Getting Started?
@@ -53866,6 +53886,21 @@ Download this reference as an OpenApi YAML file. You can import this file to too - [POST /admin/draft-orders](https://docs.medusajs.com/api/admin#draft-orders_postdraftorders) - [GET /admin/draft-orders/{id}](https://docs.medusajs.com/api/admin#draft-orders_getdraftordersid) - [POST /admin/draft-orders/{id}](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersid) +- [POST /admin/draft-orders/{id}/convert-to-order](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersidconverttoorder) +- [POST /admin/draft-orders/{id}/edit](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersidedit) +- [DELETE /admin/draft-orders/{id}/edit](https://docs.medusajs.com/api/admin#draft-orders_deletedraftordersidedit) +- [POST /admin/draft-orders/{id}/edit/confirm](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditconfirm) +- [POST /admin/draft-orders/{id}/edit/items](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersidedititems) +- [POST /admin/draft-orders/{id}/edit/items/item/{item_id}](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersidedititemsitemitem_id) +- [POST /admin/draft-orders/{id}/edit/items/{action_id}](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersidedititemsaction_id) +- [DELETE /admin/draft-orders/{id}/edit/items/{action_id}](https://docs.medusajs.com/api/admin#draft-orders_deletedraftordersidedititemsaction_id) +- [POST /admin/draft-orders/{id}/edit/promotions](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditpromotions) +- [DELETE /admin/draft-orders/{id}/edit/promotions](https://docs.medusajs.com/api/admin#draft-orders_deletedraftordersideditpromotions) +- [POST /admin/draft-orders/{id}/edit/request](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditrequest) +- [POST /admin/draft-orders/{id}/edit/shipping-methods](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditshippingmethods) +- [POST /admin/draft-orders/{id}/edit/shipping-methods/method/{method_id}](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditshippingmethodsmethodmethod_id) +- [POST /admin/draft-orders/{id}/edit/shipping-methods/{action_id}](https://docs.medusajs.com/api/admin#draft-orders_postdraftordersideditshippingmethodsaction_id) +- [DELETE /admin/draft-orders/{id}/edit/shipping-methods/{action_id}](https://docs.medusajs.com/api/admin#draft-orders_deletedraftordersideditshippingmethodsaction_id) - [GET /admin/exchanges](https://docs.medusajs.com/api/admin#exchanges_getexchanges) - [POST /admin/exchanges](https://docs.medusajs.com/api/admin#exchanges_postexchanges) - [GET /admin/exchanges/{id}](https://docs.medusajs.com/api/admin#exchanges_getexchangesid) @@ -53931,6 +53966,7 @@ Download this reference as an OpenApi YAML file. You can import this file to too - [POST /admin/orders/{id}/cancel](https://docs.medusajs.com/api/admin#orders_postordersidcancel) - [GET /admin/orders/{id}/changes](https://docs.medusajs.com/api/admin#orders_getordersidchanges) - [POST /admin/orders/{id}/complete](https://docs.medusajs.com/api/admin#orders_postordersidcomplete) +- [POST /admin/orders/{id}/credit-lines](https://docs.medusajs.com/api/admin#orders_postordersidcreditlines) - [POST /admin/orders/{id}/fulfillments](https://docs.medusajs.com/api/admin#orders_postordersidfulfillments) - [POST /admin/orders/{id}/fulfillments/{fulfillment_id}/cancel](https://docs.medusajs.com/api/admin#orders_postordersidfulfillmentsfulfillment_idcancel) - [POST /admin/orders/{id}/fulfillments/{fulfillment_id}/mark-as-delivered](https://docs.medusajs.com/api/admin#orders_postordersidfulfillmentsfulfillment_idmarkasdelivered) @@ -53947,6 +53983,7 @@ Download this reference as an OpenApi YAML file. You can import this file to too - [GET /admin/payments/{id}](https://docs.medusajs.com/api/admin#payments_getpaymentsid) - [POST /admin/payments/{id}/capture](https://docs.medusajs.com/api/admin#payments_postpaymentsidcapture) - [POST /admin/payments/{id}/refund](https://docs.medusajs.com/api/admin#payments_postpaymentsidrefund) +- [GET /admin/plugins](https://docs.medusajs.com/api/admin#plugins_getplugins) - [GET /admin/price-lists](https://docs.medusajs.com/api/admin#price-lists_getpricelists) - [POST /admin/price-lists](https://docs.medusajs.com/api/admin#price-lists_postpricelists) - [GET /admin/price-lists/{id}](https://docs.medusajs.com/api/admin#price-lists_getpricelistsid) @@ -54219,168 +54256,6 @@ How to install and setup Medusa UI. -# Medusa Admin Extension - -How to install and use Medusa UI for building Admin extensions. - -## Installation - -*** - -The `@medusajs/ui` package is a already installed as a dependency of the `@medusajs/admin` package. Due to this you can simply import the package and use it in your local Admin extensions. - -If you are building a Admin extension as part of a Medusa plugin, you can install the package as a dependency of your plugin. - -```bash -npm install @medusajs/ui -``` - -## Configuration - -*** - -The configuration of the UI package is handled by the `@medusajs/admin` package. Therefore, you do not need to any additional configuration to use the UI package in your Admin extensions. - - -# Standalone Project - -How to install and use Medusa UI in a standalone project. - -## Installation - -*** - -Medusa UI is a React UI library and while it's intended for usage within Medusa projects, it can also be used in any React project. - -### Install Medusa UI - -Install the React UI library with the following command: - -```bash -npm install @medusajs/ui -``` - -### Configuring Tailwind CSS - -The components are styled using Tailwind CSS, and in order to use them, you will need to install Tailwind CSS in your project as well. -For more information on how to install Tailwind CSS, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). - -All of the classes used for Medusa UI are shipped as a Tailwind CSS customization. -You can install it with the following command: - -```bash -npm install @medusajs/ui-preset -``` - -After you have installed Tailwind CSS and the Medusa UI preset, you need to add the following to your `tailwind.config.js`file: - -```tsx -module.exports = { - presets: [require("@medusajs/ui-preset")], - // ... -} -``` - -In order for the styles to be applied correctly to the components, you will also need to ensure that -`@medusajs/ui` is included in the content field of your `tailwind.config.js` file: - -```tsx -module.exports = { - content: [ - // ... - "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}", - ], - // ... -} -``` - -If you are working within a monorepo, you may need to add the path to the `@medusajs/ui` package in your `tailwind.config.js` like so: - -```tsx -const path = require("path") - -const uiPath = path.resolve( - require.resolve("@medusajs/ui"), - "../..", - "\*_/_.{js,jsx,ts,tsx}" -) - -module.exports = { - content: [ - // ... - uiPath, - ], - // ... -} - -``` - -## Start building - -*** - -You are now ready to start building your application with Medusa UI. You can import the components like so: - -```tsx -import { Button, Drawer } from "@medusajs/ui" -``` - -## Updating UI Packages - -*** - -Medusa's design-system packages, including `@medusajs/ui`, `@medusajs/ui-preset`, and `@medusajs/ui-icons`, are versioned independently. However, they're still part of the latest Medusa release. So, you can browse the [release notes](https://github.com/medusajs/medusa/releases) to see if there are any breaking changes to these packages. - -To update these packages, update their version in your `package.json` file and re-install dependencies. For example: - -```bash -npm install @medusajs/ui -``` - - -# clx - -Utility function for working with classNames. - -## Usage - -*** - -The `clx` function is a utility function for working with classNames. It is built using [clsx](https://www.npmjs.com/package/clsx) and [tw-merge](https://www.npmjs.com/package/tw-merge) and is intended to be used with [Tailwind CSS](https://tailwindcss.com/). - -```tsx -import { clx } from "@medusajs/ui" - -type BoxProps = { - className?: string - children: React.ReactNode - mt: "sm" | "md" | "lg" -} - -const Box = ({ className, children, mt }: BoxProps) => { - return ( -
- {children}
-
- )
-}
-
-```
-
-In the above example the utility is used to apply a base style, a margin top that is dependent on the `mt` prop and a custom className.
-The Box component accepts a `className` prop that is merged with the other classNames, and the underlying usage of `tw-merge` ensures that all Tailwind CSS classes are merged without style conflicts.
-
-
# Alert
A component for displaying important messages.
@@ -60768,3 +60643,165 @@ If you're using the `Tooltip` component in a project other than the Medusa Admin
- delayDuration: (number) The duration from when the pointer enters the trigger until the tooltip gets opened. Default: 100
- skipDelayDuration: (number) How much time a user has to enter another trigger without incurring a delay again. Default: 300
- disableHoverableContent: (boolean) When \`true\`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+
+
+# Medusa Admin Extension
+
+How to install and use Medusa UI for building Admin extensions.
+
+## Installation
+
+***
+
+The `@medusajs/ui` package is a already installed as a dependency of the `@medusajs/admin` package. Due to this you can simply import the package and use it in your local Admin extensions.
+
+If you are building a Admin extension as part of a Medusa plugin, you can install the package as a dependency of your plugin.
+
+```bash
+npm install @medusajs/ui
+```
+
+## Configuration
+
+***
+
+The configuration of the UI package is handled by the `@medusajs/admin` package. Therefore, you do not need to any additional configuration to use the UI package in your Admin extensions.
+
+
+# Standalone Project
+
+How to install and use Medusa UI in a standalone project.
+
+## Installation
+
+***
+
+Medusa UI is a React UI library and while it's intended for usage within Medusa projects, it can also be used in any React project.
+
+### Install Medusa UI
+
+Install the React UI library with the following command:
+
+```bash
+npm install @medusajs/ui
+```
+
+### Configuring Tailwind CSS
+
+The components are styled using Tailwind CSS, and in order to use them, you will need to install Tailwind CSS in your project as well.
+For more information on how to install Tailwind CSS, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation).
+
+All of the classes used for Medusa UI are shipped as a Tailwind CSS customization.
+You can install it with the following command:
+
+```bash
+npm install @medusajs/ui-preset
+```
+
+After you have installed Tailwind CSS and the Medusa UI preset, you need to add the following to your `tailwind.config.js`file:
+
+```tsx
+module.exports = {
+ presets: [require("@medusajs/ui-preset")],
+ // ...
+}
+```
+
+In order for the styles to be applied correctly to the components, you will also need to ensure that
+`@medusajs/ui` is included in the content field of your `tailwind.config.js` file:
+
+```tsx
+module.exports = {
+ content: [
+ // ...
+ "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",
+ ],
+ // ...
+}
+```
+
+If you are working within a monorepo, you may need to add the path to the `@medusajs/ui` package in your `tailwind.config.js` like so:
+
+```tsx
+const path = require("path")
+
+const uiPath = path.resolve(
+ require.resolve("@medusajs/ui"),
+ "../..",
+ "\*_/_.{js,jsx,ts,tsx}"
+)
+
+module.exports = {
+ content: [
+ // ...
+ uiPath,
+ ],
+ // ...
+}
+
+```
+
+## Start building
+
+***
+
+You are now ready to start building your application with Medusa UI. You can import the components like so:
+
+```tsx
+import { Button, Drawer } from "@medusajs/ui"
+```
+
+## Updating UI Packages
+
+***
+
+Medusa's design-system packages, including `@medusajs/ui`, `@medusajs/ui-preset`, and `@medusajs/ui-icons`, are versioned independently. However, they're still part of the latest Medusa release. So, you can browse the [release notes](https://github.com/medusajs/medusa/releases) to see if there are any breaking changes to these packages.
+
+To update these packages, update their version in your `package.json` file and re-install dependencies. For example:
+
+```bash
+npm install @medusajs/ui
+```
+
+
+# clx
+
+Utility function for working with classNames.
+
+## Usage
+
+***
+
+The `clx` function is a utility function for working with classNames. It is built using [clsx](https://www.npmjs.com/package/clsx) and [tw-merge](https://www.npmjs.com/package/tw-merge) and is intended to be used with [Tailwind CSS](https://tailwindcss.com/).
+
+```tsx
+import { clx } from "@medusajs/ui"
+
+type BoxProps = {
+ className?: string
+ children: React.ReactNode
+ mt: "sm" | "md" | "lg"
+}
+
+const Box = ({ className, children, mt }: BoxProps) => {
+ return (
+
+ {children}
+
+ )
+}
+
+```
+
+In the above example the utility is used to apply a base style, a margin top that is dependent on the `mt` prop and a custom className.
+The Box component accepts a `className` prop that is merged with the other classNames, and the underlying usage of `tw-merge` ensures that all Tailwind CSS classes are merged without style conflicts.