asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: added gift card documentation guides (#2939)

Browse Source
This commit is contained in:
Shahed Nasser
2023-01-04 18:16:51 +02:00
committed by GitHub
parent c62e309629
commit af7e67e827
10 changed files with 1149 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

580
docs/content/advanced/admin/manage-gift-cards.mdx Normal file
View File

@@ -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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```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
}
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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
}
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X GET '<SERVER_URL>/admin/products?is_giftcard=true' \
-H 'Authorization: Bearer <API_TOKEN>'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```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)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X POST '<SERVER_URL>/admin/products' \
-H 'Authorization: Bearer <API_TOKEN>' \
-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"
}
]
}
]
}'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.products.update(giftCardId, {
description: "The best gift card",
})
.then(({ product }) => {
console.log(product.id)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X POST '<SERVER_URL>/admin/products/<GIFT_CARD_ID>' \
-H 'Authorization: Bearer <API_TOKEN>' \
-H 'Content-Type: application/json' \
--data-raw '{
"description": "The best gift card"
}'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.products.delete(giftCardId)
.then(({ id, object, deleted }) => {
console.log(id)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/admin/products/${giftCardId}`, {
method: "DELETE",
credentials: "include",
})
.then((response) => response.json())
.then(({ id, object, deleted }) => {
console.log(id)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X DELETE '<SERVER_URL>/admin/products/<GIFT_CARD_ID>' \
-H 'Authorization: Bearer <API_TOKEN>'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.giftCards.list()
.then(({ gift_cards, limit, offset, count }) => {
console.log(gift_cards.length)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/admin/gift-cards`, {
credentials: "include",
})
.then((response) => response.json())
.then(({ gift_cards, limit, offset, count }) => {
console.log(gift_cards.length)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X GET '<SERVER_URL>/admin/gift-cards' \
-H 'Authorization: Bearer <API_TOKEN>'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.giftCards.create({
region_id,
value,
})
.then(({ gift_card }) => {
console.log(gift_card.id)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X POST '<SERVER_URL>/admin/gift-cards' \
-H 'Authorization: Bearer <API_TOKEN>' \
-H 'Content-Type: application/json' \
--data-raw '{
"region_id": "<REGION_ID>",
"value": 2000
}'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.giftCards.update(giftCardId, {
balance,
})
.then(({ gift_card }) => {
console.log(gift_card.id)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X POST '<SERVER_URL>/admin/gift-cards/<GIFT_CARD_ID>' \
-H 'Authorization: Bearer <API_TOKEN>' \
-H 'Content-Type: application/json' \
--data-raw '{
"balance": 2000
}'
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.admin.giftCards.delete(giftCardId)
.then(({ id, object, deleted }) => {
console.log(id)
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/admin/gift-cards/${giftCardId}`, {
method: "DELETE",
credentials: "include",
})
.then((response) => response.json())
.then(({ id, object, deleted }) => {
console.log(id)
})
```
</TabItem>
<TabItem value="curl" label="cURL">
```bash
curl -L -X DELETE '<SERVER_URL>/admin/gift-card/<GIFT_CARD_ID>' \
-H 'Authorization: Bearer <API_TOKEN>'
```
</TabItem>
</Tabs>
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

72
docs/content/advanced/backend/gift-cards/index.md Normal file
View File

@@ -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)

3
docs/content/advanced/backend/notification/overview.md
View File

@@ -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)

8
docs/content/advanced/backend/subscribers/overview.md
View File

@@ -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

78
docs/content/advanced/ecommerce/handle-order-claim-event.md
View File

@@ -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",
"<NOTIFICATION_PROVIDER_IDENTIFIER>"
)
}
}
export default ClaimOrderSubscriber
```
Where `<NOTIFICATION_PROVIDER_IDENTIFIER>` 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.

149
docs/content/advanced/ecommerce/send-gift-card-to-customer.md Normal file
View File

@@ -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",
"<NOTIFICATION_PROVIDER_IDENTIFIER>"
)
}
}
export default GiftCardSubscriber
```
Where `<NOTIFICATION_PROVIDER_IDENTIFIER>` 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)

21
docs/content/advanced/storefront/customer-profiles.mdx
View File

@@ -71,6 +71,9 @@ medusa.customers.create({
fetch(`<SERVER_URL>/store/customers`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
@@ -126,6 +129,9 @@ medusa.auth.authenticate({
fetch(`<SERVER_URL>/store/auth`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
@@ -214,6 +220,9 @@ medusa.customers.generatePasswordToken({
fetch(`<SERVER_URL>/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(`<SERVER_URL>/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(`<SERVER_URL>/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(`<SERVER_URL>/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(`<SERVER_URL>/store/customers/me/addresses/${addressId}`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
first_name,
}),

2
docs/content/advanced/storefront/use-discounts-in-checkout.mdx
View File

@@ -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.

239
docs/content/advanced/storefront/use-gift-cards.mdx Normal file
View File

@@ -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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```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
}
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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
}
})
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```ts
medusa.giftCards.retrieve(code)
.then(({ gift_card }) => {
console.log(gift_card.id)
})
.catch((e) => {
// gift card doesn't exist or is disabled
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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
})
```
</TabItem>
</Tabs>
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:
<Tabs groupId="request-type" wrapperClassName="code-tabs">
<TabItem value="client" label="Medusa JS Client" default>
```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
})
```
</TabItem>
<TabItem value="fetch" label="Fetch API">
```ts
fetch(`<SERVER_URL>/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
})
```
</TabItem>
</Tabs>
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