docs: added manage order details user guide (#2190)

docs/content/user-guide/orders/index.md

@@ -26,7 +26,7 @@ In the list, you can see order details such as ID, the ID of the order the draft
 
 ## Learn More About Orders
 
-- [Manage Order Details](./manage.md)
+- [Manage Order Details](./manage.mdx)
 - [Manage Order’s Payment](./payments.md)
 - [Manage Order’s Fulfillment](./fulfillments.md)
 - [Manage Draft Orders](./drafts.md)

docs/content/user-guide/orders/manage.md

@@ -1,11 +0,0 @@
----
-sidebar_position: 2
----
-
-# Manage Orders
-
-:::note
-
-This guide is coming soon.
-
-:::

docs/content/user-guide/orders/manage.mdx

@@ -0,0 +1,107 @@
+---
+sidebar_position: 2
+---
+
+import UiIcon from '@site/src/components/UiIcon';
+
+# Manage Order Details
+
+In this document, you’ll learn how to find an order’s details page, what information you can find on the order details page, and how to manage some of the order’s details.
+
+## Open Order’s Details
+
+To open an order’s details:
+
+1. Go to Orders.
+2. Select one of the orders.
+
+This opens the order’s details page.
+
+## Sections of the Order Details Page
+
+### Order Summary
+
+The first section of the page shows the summary of the order, including its current status, date created, email, and payment method.
+
+### Timeline
+
+This section of the order details page shows a summary of the order’s history. This includes updates to the order’s status, requests for return or exchange, notes, and more.
+
+### Summary
+
+This section includes the summary of the items the customer purchased as well as totals related to taxes, shipping, and more.
+
+### Payment
+
+This section includes details related to the order’s payments and allows you to capture the authorized payment.
+
+### Fulfillment
+
+This section includes details related to the shipping method and fulfillment and allows you to create fulfillment.
+
+### Customer
+
+This section includes the customer’s details, including their shipping address.
+
+## Edit the Shipping Address
+
+To edit the shipping address used for an order:
+
+1. Open the order details page.
+2. Scroll down to the Customer section.
+3. Click on the <UiIcon lightIcon="https://i.imgur.com/1ordBC6.png" darkIcon="https://i.imgur.com/dSwWYBH.png" alt="three dots" /> icon.
+4. Click on Edit Shipping Address from the dropdown.
+5. This opens a new window to edit the shipping address.
+6. Once you’re done, click on the Save button.
+
+## Edit Email Address
+
+To edit the email address associated with an order:
+
+1. Open the order details page.
+2. Scroll down to the Customer section.
+3. Click on the <UiIcon lightIcon="https://i.imgur.com/1ordBC6.png" darkIcon="https://i.imgur.com/dSwWYBH.png" alt="three dots" /> icon.
+4. Click on Edit Email Address from the dropdown.
+5. This opens a new window to edit the email address.
+6. Once you’re done, click on the Save button.
+
+## Add a Note
+
+To add a note to an order:
+
+1. Open the order details page.
+2. In the Timeline section, enter the note in the text input. You can also choose emojis by clicking the <UiIcon lightIcon="https://i.imgur.com/UwA7Ljp.png" darkIcon="https://i.imgur.com/9lcr16b.png" alt="emoji" /> icon.
+3. Once done, click on the <UiIcon lightIcon="https://i.imgur.com/hH4pKe3.png" darkIcon="https://i.imgur.com/QlvPezL.png" alt="send" /> icon.
+
+The note will be added and can be seen in the timeline.
+
+## Delete a Note
+
+:::caution
+
+Deleted notes can’t be retrieved.
+
+:::
+
+To delete a note in an order:
+
+1. Open the order details page.
+2. In the Timeline section, find the note you want to delete from the timeline.
+3. Click on the <UiIcon lightIcon="https://i.imgur.com/1ordBC6.png" darkIcon="https://i.imgur.com/dSwWYBH.png" alt="three dots" /> icon next to the note.
+4. Click on Delete from the dropdown.
+5. Confirm deleting the note by clicking the “Yes, delete” button in the pop-up.
+
+## Cancel an Order
+
+:::warning
+
+Once an order is canceled it can’t be undone.
+
+:::
+
+To cancel an order:
+
+1. Open the order details page.
+2. In the first section showing the order’s number, click on the <UiIcon lightIcon="https://i.imgur.com/1ordBC6.png" darkIcon="https://i.imgur.com/dSwWYBH.png" alt="three dots" /> at the top right.
+3. Click on Cancel Order from the dropdown.
+4. Confirm canceling the order by clicking the “Yes, confirm” button in the pop-up.