diff --git a/docs/content/advanced/admin/manage-gift-cards.mdx b/docs/content/advanced/admin/manage-gift-cards.mdx
new file mode 100644
index 0000000000..64437c8114
--- /dev/null
+++ b/docs/content/advanced/admin/manage-gift-cards.mdx
@@ -0,0 +1,580 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# How to Manage Gift Cards
+
+In this document, you’ll learn how to manage gift cards using the admin APIs.
+
+:::note
+
+You can learn more about what gift cards are and how they’re used in [this documentation](../backend/gift-cards/index.md)
+
+:::
+
+## Overview
+
+Using the gift cards’ admin APIs, you can manage gift cards including listing, updating, and deleting them.
+
+### Scenario
+
+You want to add or use the following admin functionalities:
+
+- Manage the gift card product including retrieving, adding, updating, and deleting it.
+- Managing custom gift cards including retrieving, adding, updating and deleting them.
+
+---
+
+## 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.mdx) to get started.
+
+### JS Client
+
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+
+If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).
+
+### Authenticated Admin User
+
+You must be an authenticated admin user before following along with the steps in the tutorial.
+
+You can learn more about [authenticating as an admin user in the API reference](/api/admin/#section/Authentication).
+
+---
+
+## Manage Gift Card Product
+
+This section covers managing the gift card product. There can only be one gift card product in a store. The gift card can have unlimited denominations.
+
+As gift cards are, before purchase, essentially products, you’ll be using product endpoints to manage them.
+
+### Retrieve Gift Card Product
+
+You can retrieve the gift card product by sending a request to the [List Products](/api/admin/#tag/Product/operation/GetProducts) endpoint, but filtering by the `is_giftcard` flag:
+
+
+
+
+```ts
+medusa.admin.products.list({
+ is_giftcard: true,
+})
+.then(({ products, limit, offset, count }) => {
+ if (products.length) {
+ // gift card product exists
+ const giftcard = products[0]
+ } else {
+ // no gift card product is created
+ }
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/products?is_giftcard=true`, {
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ products, limit, offset, count }) => {
+ if (products.length) {
+ // gift card product exists
+ const giftcard = products[0]
+ } else {
+ // no gift card product is created
+ }
+})
+```
+
+
+
+
+```bash
+curl -L -X GET '/admin/products?is_giftcard=true' \
+-H 'Authorization: Bearer '
+```
+
+
+
+
+The List Products endpoint accepts a variety of query parameters that can be used to filter the products. One of them is `is_giftcard`. When set to `true`, it will only retrieve the gift card product.
+
+The request returns the `products` array in the response which holds the gift card in it, if it’s available. It also returns [pagination fields](/api/admin/#section/Pagination).
+
+### Create Gift Card Product
+
+You can create only one gift card product in a store. To create a gift card product, send a request to the [Create a Product](/api/admin/#tag/Product/operation/PostProducts) endpoint:
+
+
+
+
+```ts
+import { ProductStatus } from "@medusajs/medusa"
+// ...
+
+medusa.admin.products.create({
+ title: "My Gift Card",
+ is_giftcard: true,
+ discountable: false,
+ status: ProductStatus.PUBLISHED,
+ options: [
+ {
+ title: "Denomination",
+ },
+ ],
+ variants: [
+ {
+ title: "1",
+ inventory_quantity: 0,
+ manage_inventory: false,
+ prices: [
+ {
+ amount: 2000,
+ currency_code: "usd",
+ },
+ ],
+ options: [
+ {
+ value: "2000",
+ },
+ ],
+ },
+ ],
+})
+.then(({ product }) => {
+ console.log(product.id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/products`, {
+ method: "POST",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ title: "My Gift Card",
+ is_giftcard: true,
+ discountable: false,
+ status: "published",
+ options: [
+ {
+ title: "Denomination",
+ },
+ ],
+ variants: [
+ {
+ title: "1",
+ inventory_quantity: 0,
+ manage_inventory: false,
+ prices: [
+ {
+ amount: 2000,
+ currency_code: "usd",
+ },
+ ],
+ options: [
+ {
+ value: "2000",
+ },
+ ],
+ },
+ ],
+ }),
+})
+.then((response) => response.json())
+.then(({ product }) => {
+ console.log(product.id)
+})
+```
+
+
+
+
+```bash
+curl -L -X POST '/admin/products' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+--data-raw '{
+ "title": "My Gift Card",
+ "is_giftcard": true,
+ "discountable": false,
+ "status": "published",
+ "options": [
+ {
+ "title": "Denomination"
+ }
+ ],
+ "variants": [
+ {
+ "title": "1",
+ "inventory_quantity": 0,
+ "manage_inventory": false,
+ "prices": [
+ {
+ "amount": 2000,
+ "currency_code": "usd"
+ }
+ ],
+ "options": [
+ {
+ "value": "2000"
+ }
+ ]
+ }
+ ]
+}'
+```
+
+
+
+
+This request requires the `title` body parameter, which is the name given to the gift card. To add the gift card product, you need to supply the following parameters:
+
+- `is_giftcard` set to `true`.
+- `discountable` set to `false`. It indicates that discounts don’t apply on this product.
+- `status`: a string indicating the status of the product. Can be `published`, `draft`, `proposed`, or `rejected`.
+- `options`: An array that includes available options of the product. For a gift card, you should add one option with the title “Denomination”.
+- `variants`: An array that includes the different variations of the product using the available options. For a gift card, you should pass each denomination value as an item in this array. The value is passed in the `prices` and `options` array. If you want to add prices for different currencies, you can pass them under `prices` and `options` as well.
+
+You can pass other body parameters to change the handle, add images, and more. Check the [API reference](/api/admin/#tag/Product/operation/PostProducts) for available body parameters.
+
+This request returns the created gift card product in the response.
+
+### Update Gift Card Product
+
+After creating a gift card, merchants can update it or its denomination.
+
+You can update a gift card product’s details by sending a request to the [Update a Product](/api/admin/#tag/Product/operation/PostProductsProduct) endpoint:
+
+
+
+
+```ts
+medusa.admin.products.update(giftCardId, {
+ description: "The best gift card",
+})
+.then(({ product }) => {
+ console.log(product.id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/products/${giftCardId}`, {
+ method: "POST",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ description: "The best gift card",
+ }),
+})
+.then((response) => response.json())
+.then(({ product }) => {
+ console.log(product.id)
+})
+```
+
+
+
+
+```bash
+curl -L -X POST '/admin/products/' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+--data-raw '{
+ "description": "The best gift card"
+}'
+```
+
+
+
+
+This request requires the ID of the gift card product as a path parameter. You can pass in its body parameters, any of the gift card’s properties to update.
+
+In this example, you update the description of the gift card. You can check the [API reference](/api/admin/#tag/Product/operation/PostProductsProduct) for all the body parameters you can pass to this request.
+
+This request returns the updated gift card product in the response.
+
+### Delete Gift Card Product
+
+You can delete the gift card product by sending a request to the [Delete a Product](/api/admin/#tag/Product/operation/DeleteProductsProduct) endpoint:
+
+
+
+
+```ts
+medusa.admin.products.delete(giftCardId)
+.then(({ id, object, deleted }) => {
+ console.log(id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/products/${giftCardId}`, {
+ method: "DELETE",
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ id, object, deleted }) => {
+ console.log(id)
+})
+```
+
+
+
+
+```bash
+curl -L -X DELETE '/admin/products/' \
+-H 'Authorization: Bearer '
+```
+
+
+
+
+This request requires the ID of the gift card product as a path parameter.
+
+It returns the following fields in the response:
+
+- `id`: The ID of the deleted gift card.
+- `object`: A string indicating the type of object deleted. By default, its value is `product`.
+- `deleted`: A boolean value indicating whether the gift card was deleted or not.
+
+---
+
+## Manage Custom Gift Cards
+
+This section covers how to manage custom gift cards. You can create an unlimited number of custom gift cards.
+
+### List Custom Gift Cards
+
+You can retrieve all custom gift cards by sending a request to the [List Gift Cards](/api/admin/#tag/Gift-Card/operation/GetGiftCards) endpoint:
+
+
+
+
+```ts
+medusa.admin.giftCards.list()
+.then(({ gift_cards, limit, offset, count }) => {
+ console.log(gift_cards.length)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/gift-cards`, {
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ gift_cards, limit, offset, count }) => {
+ console.log(gift_cards.length)
+})
+```
+
+
+
+
+```bash
+curl -L -X GET '/admin/gift-cards' \
+-H 'Authorization: Bearer '
+```
+
+
+
+
+This request does not require any parameters. It accepts parameters related to pagination, which you can check out in the [API reference](/api/admin/#tag/Gift-Card/operation/GetGiftCards).
+
+This request returns an array of `gift_cards` and [pagination fields](/api/admin/#section/Pagination) in the response.
+
+### Create a Custom Gift Card
+
+Merchants can create custom gift cards to send a reward or gift to the customer.
+
+You can create a custom gift card by sending a request to the [Create a Gift Card](/api/admin/#tag/Gift-Card/operation/PostGiftCards) endpoint:
+
+
+
+
+```ts
+medusa.admin.giftCards.create({
+ region_id,
+ value,
+})
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/gift-cards`, {
+ method: "POST",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ region_id,
+ value,
+ }),
+})
+.then((response) => response.json())
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+```
+
+
+
+
+```bash
+curl -L -X POST '/admin/gift-cards' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+--data-raw '{
+ "region_id": "",
+ "value": 2000
+}'
+```
+
+
+
+
+This request requires the `region_id` body parameter. Its value should be the ID of the region that this gift card can be used in.
+
+It optionally accepts other body parameters, including the `value` parameter, which is the amount of the gift card. You can check the [API reference](/api/admin/#tag/Gift-Card/operation/PostGiftCards) for the rest of the body parameters.
+
+This request returns the created gift card object in the response.
+
+### Update Custom Gift Card
+
+Merchants can update any of the gift card’s properties, except for the value of the gift card.
+
+You can update a gift card by sending a request to the [Update a Gift Card](/api/admin/#tag/Gift-Card/operation/PostGiftCardsGiftCard) endpoint:
+
+
+
+
+```ts
+medusa.admin.giftCards.update(giftCardId, {
+ balance,
+})
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/gift-cards/${giftCardId}`, {
+ method: "POST",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ balance,
+ }),
+})
+.then((response) => response.json())
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+```
+
+
+
+
+```bash
+curl -L -X POST '/admin/gift-cards/' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+--data-raw '{
+ "balance": 2000
+}'
+```
+
+
+
+
+This request requires the ID of the gift card as a path parameter. It accepts in its body parameters the gift card’s properties that you want to update.
+
+In this example, you update the balance of the gift card. The balance is the remaining amount in the gift card that the customer can use. You can check the [API reference](/api/admin/#tag/Gift-Card/operation/PostGiftCardsGiftCard) to learn what other parameters are allowed.
+
+This request returns the updated gift card object in the response.
+
+### Delete Custom Gift Card
+
+You can delete a custom gift card by sending a request to the [Delete a Gift Card](/api/admin/#tag/Gift-Card/operation/DeleteGiftCardsGiftCard) endpoint:
+
+
+
+
+```ts
+medusa.admin.giftCards.delete(giftCardId)
+.then(({ id, object, deleted }) => {
+ console.log(id)
+})
+```
+
+
+
+
+```ts
+fetch(`/admin/gift-cards/${giftCardId}`, {
+ method: "DELETE",
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ id, object, deleted }) => {
+ console.log(id)
+})
+```
+
+
+
+
+```bash
+curl -L -X DELETE '/admin/gift-card/' \
+-H 'Authorization: Bearer '
+```
+
+
+
+
+This request requires the ID of the gift card as a path parameter.
+
+It returns the following fields in the response:
+
+- `id`: The ID of the deleted gift card.
+- `object`: A string indicating the type of object deleted. By default, its value is `gift-card`.
+- `deleted`: A boolean value indicating whether the gift card was deleted or not.
+
+---
+
+## See Also
+
+- [Gift cards overview](../backend/gift-cards/index.md)
+- [Use gift cards on the storefront](../storefront/use-gift-cards.mdx)
+- [Send the customer a gift card](../ecommerce/send-gift-card-to-customer.md)
+- Gift cards [store](/api/store/#tag/Gift-Card) and [admin](/api/admin/#tag/Gift-Card) APIs
diff --git a/docs/content/advanced/backend/gift-cards/index.md b/docs/content/advanced/backend/gift-cards/index.md
new file mode 100644
index 0000000000..6fe7773089
--- /dev/null
+++ b/docs/content/advanced/backend/gift-cards/index.md
@@ -0,0 +1,72 @@
+# Gift Cards
+
+In this document, you’ll learn about Gift Cards and how they work in Medusa.
+
+## Introduction
+
+Gift cards are products that customers can purchase and redeem in their future orders. Gift cards can have different amounts or denominations that a customer can choose from.
+
+When a customer purchases a gift card, they should receive the code for the gift card by email or other type of notification. Then, they can use the code in their future purchases.
+
+---
+
+## Gift Cards as Products
+
+Before a gift card is purchased, it’s essentially a `Product` entity. A store can have only one gift card with unlimited denominations.
+
+The gift card product has an attribute `is_giftcard` set to `true`. Its `options` property includes only one option, which is Denomination. The different denomination values are stored as `variants`.
+
+Once the customer purchases a gift card product, it is transformed into a usable gift card represented by the [GiftCard entity](#giftcard-entity-overview).
+
+---
+
+## Custom Gift Cards
+
+Aside from the gift card product, merchants can create usable gift cards and send directly to customers. These can be used as a reward sent to the customer or another form of discount.
+
+As custom gift cards can be used once they’re created, they’re also represented by the [GiftCard entity](#giftcard-entity-overview).
+
+---
+
+## GiftCard Entity Overview
+
+Some of the [GiftCard](../../../references/entities/classes/GiftCard.md) entity’s attributes are:
+
+- `code`: a unique string of random characters. This is the code that the customer can use during their checkout to redeem the gift card.
+- `value`: The amount of the gift card. This is the amount the customer purchased, or was gifted in the case of custom gift cards.
+- `balance`: The remaining amount of the gift card. If the customer uses the gift card on an order, and the order’s total does not exceed the amount available in the gift card, the remaining balance would be stored in this attribute. When the gift card is first created, `balance` and `value` have the same value.
+- `is_disabled`: A boolean value indicating whether a gift card is disabled or not.
+- `ends_at`: The expiry date and time of the gift card.
+- `tax_rate`: The tax rate applied when calculating the totals of an order. The tax rate’s value is determined based on the following conditions:
+ - If the value of `region.gift_cards_taxable` is `false`, the `tax_rate` is `null`;
+ - Otherwise, if the merchant or admin user has manually set the value of the tax rate, it is applied;
+ - Otherwise, if the region has a tax rate, it’s applied on the gift card. If not, the value of the tax rate is `null`.
+
+---
+
+## Relations to Other Entities
+
+### Region
+
+A gift card must belong to a region. When a customer purchases the gift card, the region they use to purchase the order is associated with the gift card.
+
+For custom gift cards, the merchant specifies the region manually.
+
+The ID of the region is stored in the attribute `region_id`. You can access the region by expanding the `region` relation and accessing `gift_card.region`.
+
+### Order
+
+If the gift card was created because the customer purchased it, it is associated with the placed order.
+
+The ID of the order is stored in the attribute `order_id`. You can access the order by expanding the `order` relation and accessing `gift_card.order`.
+
+You can also access the gift cards used in an order by expanding the `gift_cards` relation on the order and accessing `order.gift_cards`.
+
+---
+
+## See Also
+
+- Gift cards [store](/api/store/#tag/Gift-Card) and [admin](/api/admin/#tag/Gift-Card) APIs
+- [How to manage gift cards using admin APIs](../../admin/manage-gift-cards.mdx)
+- [How to use gift cards in the storefront](../../storefront/use-gift-cards.mdx)
+- [How to send the customer a gift card](../../ecommerce/send-gift-card-to-customer.md)
diff --git a/docs/content/advanced/backend/notification/overview.md b/docs/content/advanced/backend/notification/overview.md
index dd43920783..44b8261d7c 100644
--- a/docs/content/advanced/backend/notification/overview.md
+++ b/docs/content/advanced/backend/notification/overview.md
@@ -1,4 +1,4 @@
-# Architecture Overview
+# Notification Architecture Overview
This document gives an overview of the notification architecture and how it works.
@@ -93,4 +93,3 @@ An example of a flow that can be implemented using Medusa's Notification API is
- [SendGrid Plugin](../../../add-plugins/sendgrid.mdx)
- [Subscribers Overview](../subscribers/create-subscriber.md)
- [Services Overview](../services/create-service.md)
-
diff --git a/docs/content/advanced/backend/subscribers/overview.md b/docs/content/advanced/backend/subscribers/overview.md
index ea8f46aa6d..a96d4d5368 100644
--- a/docs/content/advanced/backend/subscribers/overview.md
+++ b/docs/content/advanced/backend/subscribers/overview.md
@@ -22,6 +22,14 @@ Custom subscribers are TypeScript or JavaScript files in your project's `src/sub
Whenever an event is emitted, the subscriber’s registered handler method is executed. The handler method receives as a parameter an object that holds data related to the event. For example, if an order is placed the `order.placed` event will be emitted and all the handlers will receive the order id in the parameter object.
+### Example Use Cases
+
+Subscribers are useful in many use cases, including:
+
+- Send a confirmation email to the customer when they place an order by subscribing to the `order.placed` event.
+- Automatically assign new customers to a customer group by subscribing to the `customer.created`.
+- Handle custom events that you emit
+
---
## See Also
diff --git a/docs/content/advanced/ecommerce/handle-order-claim-event.md b/docs/content/advanced/ecommerce/handle-order-claim-event.md
index 2b394871ba..c2d18c7be0 100644
--- a/docs/content/advanced/ecommerce/handle-order-claim-event.md
+++ b/docs/content/advanced/ecommerce/handle-order-claim-event.md
@@ -28,7 +28,7 @@ Redis is required for batch jobs to work. Make sure you [install Redis](../../t
### Notification Provider
-To send an email or another type of notification method, you must have a notification provider installed or configured.
+To send an email or another type of notification method, you must have a notification provider installed or configured. You can either install an existing plugin or [create your own](../backend/notification/how-to-create-notification-provider.md).
This document has an example using the [SendGrid](../../add-plugins/sendgrid.mdx) plugin.
@@ -47,26 +47,24 @@ You can learn more about subscribers in the [Subscribers](../backend/subscribers
Create the file `src/subscribers/claim-order.ts` with the following content:
```ts title=src/subscribers/claim-order.ts
-import { EventBusService } from "@medusajs/medusa"
-
type InjectedDependencies = {
- eventBusService: EventBusService,
+ // TODO add necessary dependencies
}
class ClaimOrderSubscriber {
- constructor({ eventBusService }: InjectedDependencies) {
-
+ constructor(container: InjectedDependencies) {
+ // TODO subscribe to event
}
}
export default ClaimOrderSubscriber
```
-If you want to add any other dependencies, you can add them to the `InjectedDependencies` type.
+You’ll be adding in the next step the necessary dependencies to the subscriber.
-:::tip
+:::info
-You can learn more about dependency injection in [this documentation](../backend/dependency-container/index.md).
+You can learn more about [dependency injection](../backend/dependency-container/index.md) in this documentation.
:::
@@ -74,29 +72,59 @@ You can learn more about dependency injection in [this documentation](../backend
## Step 2: Subscribe to the Event
-In the subscriber you created, add the following in the `constructor`:
+In this step, you’ll subscribe to the `order-update-token.created` event to send the customer a notification about their order edit.
+
+There are two ways to do this:
+
+### Method 1: Using the NotificationService
+
+If the notification provider you’re using already implements the logic to handle this event, you can subscribe to the event using the `NotificationService`:
```ts title=src/subscribers/claim-order.ts
+import { NotificationService } from "@medusajs/medusa"
+
+type InjectedDependencies = {
+ notificationService: NotificationService
+}
+
+class ClaimOrderSubscriber {
+ constructor({ notificationService }: InjectedDependencies) {
+ notificationService.subscribe(
+ "order-update-token.created",
+ ""
+ )
+ }
+}
+
+export default ClaimOrderSubscriber
+```
+
+Where `` is the identifier for your notification provider.
+
+:::info
+
+You can learn more about handling events with the Notification Service using [this documentation](../backend/notification/how-to-create-notification-provider.md).
+
+:::
+
+### Method 2: Using the EventBusService
+
+If the notification provider you’re using isn’t configured to handle this event, or you want to implement some other custom logic, you can subscribe to the event using the `EventBusService`:
+
+```ts title=src/subscribers/claim-order.ts
+import { EventBusService } from "@medusajs/medusa"
+
+type InjectedDependencies = {
+ eventBusService: EventBusService
+}
+
class ClaimOrderSubscriber {
constructor({ eventBusService }: InjectedDependencies) {
eventBusService.subscribe(
- "order-update-token.created",
+ "order-update-token.created",
this.handleRequestClaimOrder
)
}
- // ...
-}
-```
-
-You use the `eventBusService` to subscribe to the `order-update-token.created` event. You pass the method `handleRequestClaimOrder` as a handler to that event. You’ll create this method in the next step.
-
-## Step 3: Create Event Handler
-
-In the subscriber, add a new method `handleRequestClaimOrder`:
-
-```ts title=src/subscribers/claim-order.ts
-class ClaimOrderSubscriber {
- // ...
handleRequestClaimOrder = async (data) => {
// TODO: handle event
@@ -106,6 +134,8 @@ class ClaimOrderSubscriber {
export default ClaimOrderSubscriber
```
+When using this method, you’ll have to handle the logic of sending the confirmation email to the customer inside the handler function, which in this case is `handleRequestClaimOrder`.
+
The `handleRequestClaimOrder` event receives a `data` object as a parameter. This object holds the following properties:
1. `old_email`: The email associated with the orders.
diff --git a/docs/content/advanced/ecommerce/send-gift-card-to-customer.md b/docs/content/advanced/ecommerce/send-gift-card-to-customer.md
new file mode 100644
index 0000000000..d2b11bcc94
--- /dev/null
+++ b/docs/content/advanced/ecommerce/send-gift-card-to-customer.md
@@ -0,0 +1,149 @@
+# Send Gift Card Code to Customer
+
+In this document, you’ll learn how to send a customer the gift card code they purchased.
+
+## Overview
+
+Once the customer purchases a gift card, they should receive the code of the gift card so that they can use it in future purchases.
+
+Typically, the code would be sent by email, however, you’re free to choose how you deliver the gift card code to the customer.
+
+This document shows you how to track when a gift card has been purchased so that you can send its code to the customer.
+
+:::tip
+
+You can alternatively use the [SendGrid](../../add-plugins/sendgrid.mdx) plugin, which handles sending the email automatically.
+
+:::
+
+---
+
+## Prerequisites
+
+### Medusa Components
+
+It's assumed that you already have a Medusa server installed and set up. If not, you can follow the [quickstart guide](../../quickstart/quick-start.mdx) to get started.
+
+### Redis
+
+Redis is required for batch jobs to work. Make sure you [install Redis](../../tutorial/0-set-up-your-development-environment.mdx#redis) and [configure it with your Medusa server](../../usage/configurations.md#redis).
+
+### Notification Provider
+
+To send an email or another type of notification method, you must have a notification provider installed or configured. You can either install an existing plugin or [create your own](../backend/notification/how-to-create-notification-provider.md).
+
+---
+
+## Step 1: Create a Subscriber
+
+To subscribe to and handle an event, you must create a subscriber.
+
+:::info
+
+You can learn more about subscribers in the [Subscribers](../backend/subscribers/overview.md) documentation.
+
+:::
+
+Create the file `src/subscribers/gift-card.ts` with the following content:
+
+```ts title=src/subscribers/gift-card.ts
+type InjectedDependencies = {
+ // TODO add necessary dependencies
+}
+
+class GiftCardSubscriber {
+ constructor(container: InjectedDependencies) {
+ // TODO subscribe to event
+ }
+}
+
+export default GiftCardSubscriber
+```
+
+You’ll be adding in the next step the necessary dependencies to the subscriber.
+
+:::info
+
+You can learn more about [dependency injection](../backend/dependency-container/index.md) in this documentation.
+
+:::
+
+---
+
+## Step 2: Subscribe to the Event
+
+In this step, you’ll subscribe to the event `gift_card.created` to send the customer a notification about their gift card.
+
+There are two ways to do this:
+
+### Method 1: Using the NotificationService
+
+If the notification provider you’re using already implements the logic to handle this event, you can subscribe to the event using the `NotificationService`:
+
+```ts title=src/subscribers/gift-card.ts
+import { NotificationService } from "@medusajs/medusa"
+
+type InjectedDependencies = {
+ notificationService: NotificationService
+}
+
+class GiftCardSubscriber {
+ constructor({ notificationService }: InjectedDependencies) {
+ notificationService.subscribe(
+ "gift_card.created",
+ ""
+ )
+ }
+}
+
+export default GiftCardSubscriber
+```
+
+Where `` is the identifier for your notification provider. For example, if you’re using SendGrid, the identifier is `sendgrid`.
+
+:::info
+
+You can learn more about handling events with the Notification Service using [this documentation](../backend/notification/how-to-create-notification-provider.md).
+
+:::
+
+### Method 2: Using the EventBusService
+
+If the notification provider you’re using isn’t configured to handle this event, or you want to implement some other custom logic, you can subscribe to the event using the `EventBusService`:
+
+```ts title=src/subscribers/gift-card.ts
+import { EventBusService, GiftCardService } from "@medusajs/medusa"
+
+type InjectedDependencies = {
+ eventBusService: EventBusService
+ giftCardService: GiftCardService
+}
+
+class GiftCardSubscriber {
+ giftCardService: GiftCardService
+
+ constructor({ eventBusService, giftCardService }: InjectedDependencies) {
+ this.giftCardService = giftCardService
+ eventBusService.subscribe("gift_card.created", this.handleGiftCard)
+ }
+
+ handleGiftCard = async (data) => {
+ const giftCard = await this.giftCardService.retrieve(data.id)
+ // TODO send customer the gift card code
+ }
+}
+
+export default GiftCardSubscriber
+```
+
+When using this method, you’ll have to handle the logic of sending the code to the customer inside the handler function, which in this case is `handleGiftCard`.
+
+The `handleGiftCard` event receives a `data` object as a parameter. This object holds the `id` property which is the ID of the gift card. You can retrieve the full gift card object using the [GiftCardService](../../references/services/classes/GiftCardService.md)
+
+---
+
+## See Also
+
+- [Subscribers overview](../backend/subscribers/overview.md)
+- [Notification architecture overview](../backend/notification/overview.md)
+- [Gift cards overview](../backend/gift-cards/index.md)
\ No newline at end of file
diff --git a/docs/content/advanced/storefront/customer-profiles.mdx b/docs/content/advanced/storefront/customer-profiles.mdx
index d950a13b8d..7eb1b5bbd2 100644
--- a/docs/content/advanced/storefront/customer-profiles.mdx
+++ b/docs/content/advanced/storefront/customer-profiles.mdx
@@ -71,6 +71,9 @@ medusa.customers.create({
fetch(`/store/customers`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
email,
password,
@@ -126,6 +129,9 @@ medusa.auth.authenticate({
fetch(`/store/auth`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
email,
password,
@@ -214,6 +220,9 @@ medusa.customers.generatePasswordToken({
fetch(`/store/customers/password-token`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
email,
}),
@@ -266,6 +275,9 @@ medusa.customers.resetPassword({
fetch(`/store/customers/password-reset`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
email,
password,
@@ -316,6 +328,9 @@ medusa.customers.update({
fetch(`/store/customers/me`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
first_name,
}),
@@ -380,6 +395,9 @@ medusa.customers.addresses.addAddress({
fetch(`/store/customers/me/addresses`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
address: {
first_name,
@@ -441,6 +459,9 @@ medusa.customers.addresses.updateAddress(addressId, {
fetch(`/store/customers/me/addresses/${addressId}`, {
method: "POST",
credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
body: JSON.stringify({
first_name,
}),
diff --git a/docs/content/advanced/storefront/use-discounts-in-checkout.mdx b/docs/content/advanced/storefront/use-discounts-in-checkout.mdx
index e7398ffaaa..b2a8273071 100644
--- a/docs/content/advanced/storefront/use-discounts-in-checkout.mdx
+++ b/docs/content/advanced/storefront/use-discounts-in-checkout.mdx
@@ -27,7 +27,7 @@ You want to implement discount functionality in your store to allow customers to
### Medusa Components
-It's assumed that you already have a Medusa server installed and set up. If not, you can follow our [quickstart guide](../../quickstart/quick-start.mdx) to get started.
+It's assumed that you already have a Medusa server installed and set up. If not, you can follow the [quickstart guide](../../quickstart/quick-start.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts.
diff --git a/docs/content/advanced/storefront/use-gift-cards.mdx b/docs/content/advanced/storefront/use-gift-cards.mdx
new file mode 100644
index 0000000000..71b34f3965
--- /dev/null
+++ b/docs/content/advanced/storefront/use-gift-cards.mdx
@@ -0,0 +1,239 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Use Gift Cards on the Storefront
+
+In this document, you’ll learn how to use gift cards on a storefront.
+
+## Overview
+
+Customers can view and purchase gift card products. Then, customers can redeem the gift card in a future order.
+
+### Scenario
+
+You want to implement the following features in a storefront:
+
+- Show the gift card product to the customer.
+- View details of a gift card by its code.
+- Redeem a gift card during checkout.
+
+---
+
+## Prerequisites
+
+### Medusa Components
+
+It's assumed that you already have a Medusa server installed and set up. If not, you can follow the [quickstart guide](../../quickstart/quick-start.mdx) to get started.
+
+It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts.
+
+### JS Client
+
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+
+If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).
+
+### Previous Steps
+
+To use gift cards, you must have a gift card created first. You can follow this documentation to learn how to do it using the admin APIs.
+
+In addition, this document doesn't cover how to implement checkout functionality. You can follow [this document](./how-to-implement-checkout-flow.mdx) to learn how to implement that.
+
+---
+
+## Show the Gift Card Product
+
+Customers should be able to view gift cards before they make the purchase. Gift cards are essentially products like any other.
+
+You can retrieve the gift card product using the [List Products](/api/store/#tag/Product/operation/GetProducts) endpoint, but passing it the `is_giftcard` query parameter:
+
+
+
+
+```ts
+medusa.products.list({
+ is_giftcard: true,
+})
+.then(({ products, limit, offset, count }) => {
+ if (products.length) {
+ // gift card product exists
+ const giftcard = products[0]
+ } else {
+ // no gift card product is created
+ }
+})
+```
+
+
+
+
+```ts
+fetch(`/store/products?is_giftcard=true`, {
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ products, limit, offset, count }) => {
+ if (products.length) {
+ // gift card product exists
+ const giftcard = products[0]
+ } else {
+ // no gift card product is created
+ }
+})
+```
+
+
+
+
+The request does not require any parameters. You can pass query parameters to filter the returned products.
+
+You can use the `is_giftcard` query parameter to retrieve only the gift card product by setting it to `true`. To view other available parameters, check out the [API reference](/api/store/#tag/Product/operation/GetProducts)
+
+The request returns the `products` array in the response, which holds the gift card in it, if it’s available. It also returns [pagination fields](/api/store/#section/Pagination).
+
+### Show Gift Card’s Denominations
+
+The gift card’s denominations are available under the `variants` array. Each variant resembles a denomination.
+
+The value of each denomination (or variant) is under the `prices` array. If you add the `region_id` query parameter, only prices for that specific regions are returned.
+
+---
+
+## View Details of a Gift Card by Code
+
+After the customer purchases the gift card, they’ll receive a code to redeem that gift card. Using that code, the customer can also view the details of that gift card.
+
+You can retrieve the details of a gift card by sending a request to the [Get Gift Card by Code](/api/store/#tag/Gift-Card/operation/GetGiftCardsCode) endpoint:
+
+
+
+
+```ts
+medusa.giftCards.retrieve(code)
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+.catch((e) => {
+ // gift card doesn't exist or is disabled
+})
+```
+
+
+
+
+```ts
+fetch(`/store/gift-cards/${code}`, {
+ credentials: "include",
+})
+.then((response) => response.json())
+.then(({ gift_card }) => {
+ console.log(gift_card.id)
+})
+.catch((e) => {
+ // gift card doesn't exist or is disabled
+})
+```
+
+
+
+
+This request requires the code of the gift card passed as a path parameter.
+
+It returns the gift card if it exists in the response. Otherwise, an error is returned.
+
+### Show Gift Card Details
+
+In the returned gift card object, the following details can be shown to the customer:
+
+- `value`: The amount of the gift card.
+- `balance`: The remaining amount of the gift card. If the customer has previously used the gift card while purchasing an order but not its full value, this field shows how much is remaining in the card.
+- `ends_at`: The expiry date and time of the gift card.
+
+You can learn what other properties are available in the returned gift card object in the [API reference](/api/store/#tag/Gift-Card/operation/GetGiftCardsCode).
+
+---
+
+## Redeem Gift Card During Checkout
+
+A customer can redeem more than one gift card during checkout. The cart’s totals will then be adjusted based on the applied gift card. The gift card’s amount isn’t actually used until the order is placed.
+
+You can redeem a gift card during checkout by sending a request to the [Update Cart](/api/store/#tag/Cart/operation/PostCartsCart) endpoint:
+
+
+
+
+```ts
+medusa.carts.update(cartId, {
+ gift_cards: [
+ {
+ code,
+ },
+ ],
+})
+.then(({ cart }) => {
+ console.log(cart.gift_cards.length)
+})
+.catch((e) => {
+ // gift card doesn't exist or is disabled
+})
+```
+
+
+
+
+```ts
+fetch(`/store/cart/${cartId}`, {
+ method: "POST",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ gift_cards: [
+ {
+ code,
+ },
+ ],
+ }),
+})
+.then((response) => response.json())
+.then(({ cart }) => {
+ console.log(cart.gift_cards.length)
+})
+.catch((e) => {
+ // gift card doesn't exist or is disabled
+})
+```
+
+
+
+
+This request requires the ID of the cart as a path parameter. It allows passing any cart property you want to update in its body parameters.
+
+To add gift cards, you must pass the array `gift_cards`. Each item in the array should be an object having the property `code`, with its value being the code of the gift card to apply.
+
+:::tip
+
+The parameters passed in the update endpoint replace existing values. So, if you previously added a gift card, then tried adding another, you must include both in the `gift_cards` array.
+
+:::
+
+This request returns the card object in the response.
+
+### Show Gift Card Details in the Cart
+
+You can show the details of the applied gift cards by accessing `cart.gift_cards`. Its attributes are similar to those explained in [the previous section](#show-gft-card-details).
+
+You can also use the following properties to display changes on the cart’s totals:
+
+- `gift_card_total`: The total amount applied by all the gift cards.
+- `gift_card_tax_total`: The total tax applied for all gift cards.
+
+---
+
+## See Also
+
+- [Gift cards overview](../backend/gift-cards/index.md)
+- [Manage gift cards using admin APIs](../admin/manage-gift-cards.mdx)
+- [Send the customer a gift card](../ecommerce/send-gift-card-to-customer.md)
+- Gift cards [store](/api/store/#tag/Gift-Card) and [admin](/api/admin/#tag/Gift-Card) APIs
diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js
index 5616fd8b12..a9d41c29d4 100644
--- a/www/docs/sidebars.js
+++ b/www/docs/sidebars.js
@@ -247,6 +247,11 @@ module.exports = {
id: "advanced/storefront/customer-profiles",
label: "Add Customer Profiles"
},
+ {
+ type: "doc",
+ id: "advanced/storefront/use-gift-cards",
+ label: "Use Gift Cards"
+ },
{
type: "doc",
id: "guides/carts-in-medusa",
@@ -323,6 +328,11 @@ module.exports = {
id: "advanced/admin/manage-discounts",
label: "Manage Discounts"
},
+ {
+ type: "doc",
+ id: "advanced/admin/manage-gift-cards",
+ label: "Manage Gift Cards"
+ },
{
type: "doc",
id: "advanced/admin/manage-regions",
@@ -409,12 +419,21 @@ module.exports = {
id: "advanced/ecommerce/handle-order-claim-event",
label: "Handle Order Claim Event"
},
+ {
+ type: "doc",
+ id: "advanced/ecommerce/send-gift-card-to-customer",
+ label: "Send Gift Card Code"
+ },
]
},
{
type: "category",
label: "Conceptual Guides",
items: [
+ {
+ type: "doc",
+ id: "advanced/backend/dependency-container/index"
+ },
{
type: "doc",
id: "advanced/backend/entities/overview",
@@ -473,6 +492,10 @@ module.exports = {
type: "doc",
id: "advanced/backend/customers/index"
},
+ {
+ type: "doc",
+ id: "advanced/backend/customer-groups/index"
+ },
{
type: "doc",
id: "advanced/backend/taxes/inclusive-pricing",
@@ -492,11 +515,7 @@ module.exports = {
},
{
type: "doc",
- id: "advanced/backend/customer-groups/index"
- },
- {
- type: "doc",
- id: "advanced/backend/dependency-container/index"
+ id: "advanced/backend/gift-cards/index"
},
]
},