From da77a714faa438004e1709d275ed2d870917da88 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Wed, 24 Aug 2022 15:42:16 +0300 Subject: [PATCH] docs: Added "Manage a Gift Card" user guide (#2089) * docs: Added "Gift Cards" user guide * fixed images quality --- docs/content/user-guide/customers/index.mdx | 4 +- docs/content/user-guide/discounts/index.mdx | 10 +- docs/content/user-guide/gift-cards/index.mdx | 240 +++++++++++++++++++ docs/content/user-guide/index.mdx | 14 +- docs/content/user-guide/orders/index.mdx | 20 +- docs/content/user-guide/products/index.mdx | 38 +-- www/docs/sidebars.js | 11 + 7 files changed, 294 insertions(+), 43 deletions(-) create mode 100644 docs/content/user-guide/gift-cards/index.mdx diff --git a/docs/content/user-guide/customers/index.mdx b/docs/content/user-guide/customers/index.mdx index 94ab3c40a4..794b2d85f9 100644 --- a/docs/content/user-guide/customers/index.mdx +++ b/docs/content/user-guide/customers/index.mdx @@ -36,13 +36,13 @@ If there are more than 15 customer groups, the list will be split into multiple ## Search Customers -You can search for customers by clicking the icon at the top right of the customer list. When you search for customers, you search by their first name, last name, and email. +You can search for customers by clicking the icon at the top right of the customer list. When you search for customers, you search by their first name, last name, and email. ![Search customers by name](https://i.imgur.com/c0IFMej.png) ## Search Customer Groups -You can search for customer groups by clicking the icon at the top right of the group list. When you search groups, you search by the customer group’s title. +You can search for customer groups by clicking the icon at the top right of the group list. When you search groups, you search by the customer group’s title. ![Search customer groups by title](https://i.imgur.com/aksN5eW.png) diff --git a/docs/content/user-guide/discounts/index.mdx b/docs/content/user-guide/discounts/index.mdx index 56b3a37561..9a144eae9d 100644 --- a/docs/content/user-guide/discounts/index.mdx +++ b/docs/content/user-guide/discounts/index.mdx @@ -28,7 +28,7 @@ You can use advanced filters to limit the discounts shown based on specific crit To use advanced filters: -- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. +- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. - You can click on a field name to expand it and choose a filter for that field. - Click on the Apply button at the top of the dropdown. @@ -42,7 +42,7 @@ If there are filters that you need to use frequently, you can give the set of fi To save an advanced filter: -- Click on the icon next to Filters. +- Click on the icon next to Filters. - Choose your filters from the dropdown. - Choose a name for the filters in the input at the end of the dropdown. - Click the Save button. @@ -57,13 +57,13 @@ To apply a saved quick filter, just click on it. ### Delete Saved Quick Filters -You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. +You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. ### Clear Filters To clear all applied filters: -- Click on the icon next to Filters. +- Click on the icon next to Filters. - Click on the Clear button. ![Click clear button in the advanced filters dropdown](https://i.imgur.com/98ms0U2.png) @@ -76,7 +76,7 @@ Clearing filters does not delete saved quick filters. You can still apply them b ## Search Discounts -You can search for discounts by clicking the icon at the top right of the discounts list. When you search for discounts, you search by discount codes. +You can search for discounts by clicking the icon at the top right of the discounts list. When you search for discounts, you search by discount codes. ![Search discounts by code](https://i.imgur.com/zab2oqp.png) diff --git a/docs/content/user-guide/gift-cards/index.mdx b/docs/content/user-guide/gift-cards/index.mdx new file mode 100644 index 0000000000..4ed178b67f --- /dev/null +++ b/docs/content/user-guide/gift-cards/index.mdx @@ -0,0 +1,240 @@ +import UiIcon from '@site/src/components/UiIcon'; + +# Manage a Gift Card + +In this document, you’ll learn about how Gift Cards in Medusa work. This includes how to create, edit, and delete them. + +## Overview + +In Medusa, there’s one main gift card. A gift card can have multiple denominations. For example, a Gift Card can have the amounts of $20 and $50, and customers can buy one of these denominations. + +:::info + +Medusa also supports custom gift cards, which can be sent to a specific customer. + +::: + +## Create Gift Card + +:::info + +You can only create one gift card per store. + +::: + +Click on Gift Cards in the sidebar menu. If you don’t have any gift cards you should see a prompt to create your first gift card. Click on Create Gift Card. + +![Click on Create Gift Card in Gift Cards page](https://i.imgur.com/KjfMARd.png) + +In the new window that opens: + +- Enter a name for the gift card +- You can optionally enter a description and a thumbnail. +- Click on Add Denomination. You must at least add one denomination + - For each denomination, choose the currency and amount. + - If you want to delete a denomination, you can click the icon. +- Once you’re done, click Create & Publish. + +:::tip + +If you want to add more than one currency value for a denomination, you can do that when you [edit a denomination](#edit-a-denomination). + +::: + +![Example of fields in Create Gift Card window](https://i.imgur.com/xftW9bj.png) + +## Edit Gift Card + +To edit a Gift Card: + +- Go to the Gift Cards page from the sidebar menu. +- Next to the main gift card, click on the icon. +- Choose Edit from the dropdown. + +![Edit link is the first one in the dropdown](https://i.imgur.com/2PM0tBO.png) + +This opens a form to edit the gift card details and denominations. + +### Edit Gift Card Information + +You can edit the name, subtitle, and description of a Gift card. + +You can also click on “Show additional details”. Here, you can change the handle of the gift card, tags, and product type. + +After making the edits, click Save at the bottom right of the page. + +:::info + +The handle is the URL used on the storefront to view the Gift Card. + +::: + +![Example of Gift Card Information form](https://i.imgur.com/x2PMJum.png) + +### Add a Denomination + +On the Denominations section, click on Add Denomination at the top right of the section. + +![Click on Add Denomination at the top right of the section](https://i.imgur.com/bDlqOCS.png) + +In the window that opens: + +- Choose the currency of the denomination +- Enter the amount of the denomination +- Optionally, you can enter other values for the denominations. This is useful if you want to enter an amount in another currency. To do that: + - Click on “Add a price” under Other Values. + - Choose the currency and amount. + - To delete a price under Other Values, click on the icon. +- Once you’re done, click Save. + +![Example of Add Denomination form](https://i.imgur.com/5fAosFQ.png) + +### Edit a Denomination + +To edit a denomination: + +- In the Denominations section, find the denomination you want to edit. +- Click on the icon in the same row as the denomination you want to edit. +- Click on Edit Denomination from the dropdown. + +![Edit denomination is the first link in the dropdown](https://i.imgur.com/F4lBLkW.png) + +This opens a new window to edit the denomination. You can then: + +- Edit the currency or amount of existing prices of the denomination. +- Add prices for other currencies by clicking “Add a price” +- Delete prices by clicking the icon. + +Once you’re done, click Save. + +![Example of Edit Denomination form](https://i.imgur.com/qPNXCI6.png) + +### Delete a Denomination + +:::warning + +If you delete a denomination, customers won’t be able to find it in the storefront, purchase it, or use it. + +::: + +To delete a denomination: + +- In the Denominations section, find the denomination you want to edit. +- Click on the icon in the same row as the denomination you want to delete. +- Click on Delete Denomination from the dropdown. +- Confirm deleting the denomination by clicking the “Yes, delete” button in the pop-up. + +![Delete denomination link is the second link in the dropdown](https://i.imgur.com/OrgV3wb.png) + +### Add Images + +:::info + +You can add up to 10 images for a Gift Card. + +::: + +To add images to the Gift Card: + +- Go to the Images section. +- Either drag and drop your image to the dashed box or click on the box and choose the image you want to add. +- Click Save at the bottom right of the page. + +:::note + +If you face any errors or difficulties while uploading an image, please contact your technical support team as this could be an issue in the storage integration used. + +::: + +![The save button is at the bottom right of the page](https://i.imgur.com/lwyxPnz.png) + +### Change Thumbnail Image + +:::note + +You must have more than one image for a gift card to change the thumbnail image. + +::: + +To change the thumbnail image: + +- Go to the Images section. +- Check the radio button under the Thumbnail column for the image you want to make the thumbnail. +- Click Save at the bottom right of the page. + +![Check the radio button and click save at the bottom right](https://i.imgur.com/2Cz6s21.png) + +### Delete Gift Card Image + +:::warning + +If you delete an image, you won’t be able to restore it. + +::: + +To delete a gift card image: + +- Go to the Images section. +- Click on the icon at the right of the image you want to delete. +- Click Save at the bottom right of the page. + +## Unpublish Gift Card + +:::caution + +Unpublishing a gift card prevents customers from seeing the gift card in the storefront, purchasing it, or using it. + +::: + +### On Gift Cards Page + +- Click on the icon at the top right of the main gift card. +- Choose Unpublish. + +![Unpublish link is the second link in the dropdown](https://i.imgur.com/jF1vwyO.png) + +### On Edit Gift Card Page + +- Click on the icon at the top right of the Product Information section. +- Choose Unpublish Gift Card from the dropdown. + +![Unpublish Gift Card link is the first link in the dropdown](https://i.imgur.com/L09A4Pr.png) + +## Publish Gift Card + +:::note + +Publishing a gift card allows customers to see the gift card on the storefront, purchase it, and use it. + +::: + +### On Gift Cards Page + +- Click on the icon at the top right of the main gift card. +- Choose Publish. + +![Publish link is the second link in the dropdown](https://i.imgur.com/PfaDRqr.png) + +### On Edit Gift Card Page + +- Click on the icon at the top right of the Product Information section. +- Choose Publish Gift Card from the dropdown. + +![Publish Gift Card link is the first link in the dropdown](https://i.imgur.com/9AwA8wH.png) + +## Delete Gift Card + +:::warning + +If you delete a gift card, you can’t restore it or its settings. Customers also can’t use the gift card if they had previously purchased it. + +::: + +To delete a gift card: + +- Go to the Gift Cards page from the sidebar menu. +- Next to the main gift card, click on the icon. +- Choose Delete from the dropdown. +- Confirm deleting the gift card by clicking the “Yes, delete” button in the pop-up. + +![Delete link is the third link in the dropdown](https://i.imgur.com/Ue1zeUm.png) \ No newline at end of file diff --git a/docs/content/user-guide/index.mdx b/docs/content/user-guide/index.mdx index fc85952374..c5cae79ded 100644 --- a/docs/content/user-guide/index.mdx +++ b/docs/content/user-guide/index.mdx @@ -18,7 +18,7 @@ To access the admin panel of your ecommerce store, you must have a URL to the de Once you open the URL, you’ll be asked to log in. -![Log In Page](https://i.imgur.com/4U2Saed.png) +![Log In Page](https://i.imgur.com/cUYLszZ.png) You must use your user’s email and password to log in. If you’re unsure what your email and password are, please contact the technical personnel that deployed your Medusa server and admin. @@ -32,7 +32,7 @@ The sidebar menu includes the main navigation of your Medusa admin. You can use You can also see your team members in the sidebar menu. These are the users that can access the Medusa Admin. -![Sidebar Menu](https://i.imgur.com/54y2omy.png) +![Sidebar Menu](https://i.imgur.com/KZlWoUi.png) ### Search Bar @@ -48,24 +48,24 @@ Mac OS: ⌘ + K ::: -![Search Window](https://i.imgur.com/kIeoiW3.png) +![Search Window](https://i.imgur.com/z9a1NLK.png) You can either select a resolve with your mouse, or use the up and down arrows on your keyboard to navigate between the results, then choosing a result by hitting the Enter key. ### Check Notifications -At the top right you’ll find a icon. Clicking this icon opens a side window to view any notifications you might have. You can use this to view notifications such as completed product exports. +At the top right you’ll find a icon. Clicking this icon opens a side window to view any notifications you might have. You can use this to view notifications such as completed product exports. -![Notifications Window](https://i.imgur.com/bmDQ4Cj.png) +![Notifications Window](https://i.imgur.com/cTIu9yP.png) ### Quick Actions At the top right, you’ll find an avatar icon. By clicking this icon, you’ll see a dropdown. You can use this dropdown to quickly access settings or sign out. -![Quick Actions Dropdown](https://i.imgur.com/Og7F5oz.png) +![Quick Actions Dropdown](https://i.imgur.com/YgVKTLH.png) ### Need Help? -At the top right, you’ll find a icon. When you click on this icon, a form will pop up. You can use this form to send the Medusa team a message asking for help. Our team usually responds in a few hours on business days. +At the top right, you’ll find a icon. When you click on this icon, a form will pop up. You can use this form to send the Medusa team a message asking for help. Our team usually responds in a few hours on business days. ![Get Help Form](https://i.imgur.com/8Fpa0gr.png) \ No newline at end of file diff --git a/docs/content/user-guide/orders/index.mdx b/docs/content/user-guide/orders/index.mdx index a43f635acb..738c851078 100644 --- a/docs/content/user-guide/orders/index.mdx +++ b/docs/content/user-guide/orders/index.mdx @@ -42,7 +42,7 @@ On the Orders list page, you’ll find quick filters such as “Complete” and You can click on one of these filters to quickly filter the orders. -![Activated quick filter](https://i.imgur.com/FPW8tCY.png) +![Activated quick filter](https://i.imgur.com/eVwD0JP.png) ### Advanced Filters @@ -50,13 +50,13 @@ You can use advanced filters to furthermore limit the orders shown based on spec To use advanced filters: -- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. +- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. - You can click on a field name to expand it and choose a filter for that field. - Click on the Apply button at the top of the dropdown. This will retrieve the orders based on the filters you’ve selected. -![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/7N1OELc.png) +![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/rg9nKcS.png) ### Save Advanced Filters as Quick Filters @@ -64,22 +64,22 @@ If there are filters that you need to use frequently, you can give the set of fi To save an advanced filter: -- Click on the icon next to Filters. +- Click on the icon next to Filters. - Choose your filters from the dropdown. - Choose a name for the filters in the input at the end of the dropdown. - Click the Save button. -![Give the filters a name and click Save](https://i.imgur.com/HhLVYkh.png) +![Give the filters a name and click Save](https://i.imgur.com/0nKZ5BX.png) Once you click Save, you should see the new filter you added next to the Quick Filters at the top of the orders list. -![Saved Filter shows as a quick filter](https://i.imgur.com/1ep3hVy.png) +![Saved Filter shows as a quick filter](https://i.imgur.com/ymuSHkv.png) To apply a saved quick filter, just click on it. ### Delete Saved Quick Filters -You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. +You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. ### Clear Filters @@ -88,7 +88,7 @@ To clear all applied filters: - Click on the + icon next to Filters. - Click on the Clear button. -![Click clear button in the advanced filters dropdown](https://i.imgur.com/1ra8L7o.png) +![Click clear button in the advanced filters dropdown](https://i.imgur.com/ArawLDT.png) :::info @@ -98,13 +98,13 @@ Clearing filters does not delete saved quick filters. You can still apply them b ## Search Orders -You can search for orders by clicking the icon at the top right of the order list. When you search orders, you are searching by the first name supplied in the shipping address, the email associated with the order, and the order ID. +You can search for orders by clicking the icon at the top right of the order list. When you search orders, you are searching by the first name supplied in the shipping address, the email associated with the order, and the order ID. ![Search orders by customer name](https://i.imgur.com/Z09rbmQ.png) ## Search Draft Orders -You can search for draft orders by clicking the icon at the top right of the draft order list. When you search draft orders, you are searching by the email associated with the draft order and the draft order’s ID. +You can search for draft orders by clicking the icon at the top right of the draft order list. When you search draft orders, you are searching by the email associated with the draft order and the draft order’s ID. ![Search draft orders by email](https://i.imgur.com/el0Y9WS.png) diff --git a/docs/content/user-guide/products/index.mdx b/docs/content/user-guide/products/index.mdx index 456e9bba1b..082def0b94 100644 --- a/docs/content/user-guide/products/index.mdx +++ b/docs/content/user-guide/products/index.mdx @@ -22,11 +22,11 @@ If there are more than 15 products, the list will be split into multiple pages. ### List View -To view products in a list view, which is the default view, click on the icon at the top right of the product list. +To view products in a list view, which is the default view, click on the icon at the top right of the product list. ### Grid View -To view products in a grid view, click on the icon at the top right of the product list. +To view products in a grid view, click on the icon at the top right of the product list. ![Grid View of Products List](https://i.imgur.com/GkTcjsO.png) @@ -56,7 +56,7 @@ On the Products list page, you can find quick filters such as “Unpublished” You can click on these filters to quickly filter the products. -![Activated quick filter](https://i.imgur.com/VCob6F5.png) +![Activated quick filter](https://i.imgur.com/KfZjvJg.png) ### Advanced Filters @@ -64,13 +64,13 @@ You can use advanced filters to furthermore limit the products shown based on sp To use advanced filters: -- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. +- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. - You can click on a field name to expand it and choose a filter for that field. - Click on the Apply button at the top of the dropdown. This will retrieve the products based on the filters you’ve selected. -![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/WPlTtTA.png) +![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/NMM2zBK.png) ### Save Advanced Filters as Quick Filters @@ -78,31 +78,31 @@ If there are filters that you need to use frequently, you can give the set of fi To save an advanced filter: -- Click on the icon next to Filters. +- Click on the icon next to Filters. - Choose your filters from the dropdown. - Choose a name for the filters in the input at the end of the dropdown. - Click the Save button. -![Give the filters a name and click Save](https://i.imgur.com/OJ4G1ex.png) +![Give the filters a name and click Save](https://i.imgur.com/pV8TJM0.png) Once you click Save, you should see the new filter you added next to the Quick Filters at the top of the products list. -![Saved Filter shows as a quick filter](https://i.imgur.com/BE9RftP.png) +![Saved Filter shows as a quick filter](https://i.imgur.com/s5WysMv.png) To apply a saved quick filter, just click on it. ### Delete Saved Quick Filters -You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. +You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. ### Clear Filters To clear all applied filters: -- Click on the icon next to Filters. +- Click on the icon next to Filters. - Click on the Clear button. -![Click clear button in the advanced filters dropdown](https://i.imgur.com/MgESrMv.png) +![Click clear button in the advanced filters dropdown](https://i.imgur.com/DiMdyrM.png) :::info @@ -112,13 +112,13 @@ Clearing filters does not delete saved quick filters. You can still apply them b ## Search Products -You can search for products by clicking the icon at the top right of the products list. When you search products, you search by product title, description, variant title, variant SKU, and collection title. +You can search for products by clicking the icon at the top right of the products list. When you search products, you search by product title, description, variant title, variant SKU, and collection title. ![Search products by name](https://i.imgur.com/ch6dLZA.png) ## Search Collections -You can search for collections by clicking the icon at the top right of the collections list. When you search collections, you search by collection title and handle. +You can search for collections by clicking the icon at the top right of the collections list. When you search collections, you search by collection title and handle. ![Search collections by title](https://i.imgur.com/KMJDIDJ.png) @@ -129,7 +129,7 @@ To export products: - Go to the Products page. - Click on Export Products at the top right. - Click Export in the window that opens. -- Click on the icon at the top right of the page. +- Click on the icon at the top right of the page. - You should see your new export loading. - Once the export is ready, click on the Download button. @@ -139,7 +139,7 @@ If you face any errors or difficulties, please contact your technical support te ::: -![Click on the download button in the activity panel](https://i.imgur.com/EVhZExV.png) +![Click on the download button in the activity panel](https://i.imgur.com/VE7PBtW.png) ### Cancel a Product Export @@ -147,11 +147,11 @@ You can only cancel an unfinished product export. To cancel a product export: -- Click on the icon at the top right of the page. +- Click on the icon at the top right of the page. - Find the export you want to cancel. - Click on the cancel button. -![Click on the cancel button in the activity panel](https://i.imgur.com/O2IgDQz.png) +![Click on the cancel button in the activity panel](https://i.imgur.com/yEU4lUD.png) ### Delete a Product Export @@ -159,11 +159,11 @@ You can only delete a finished product export. To delete a product export: -- Click on the icon at the top right of the page. +- Click on the icon at the top right of the page. - Find the export you want to delete. - Click on the Delete button. -![Click on the delete button in the activity panel](https://i.imgur.com/KWZ195h.png) +![Click on the delete button in the activity panel](https://i.imgur.com/04Dat1k.png) ## What More Can you Do with Products? diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index ce56e24396..da3ac0976a 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -538,6 +538,17 @@ module.exports = { } ] }, + { + type: "category", + collapsed: false, + label: "Gift Cards", + items: [ + { + type: "doc", + id: "user-guide/gift-cards/index" + } + ] + }, ], servicesSidebar: [ {