> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/reorder/draft-order-detail-page.md).

# Draft Order Detail Page

Learn how your customers view, manage, and act on pending draft orders using the **Draft Order Detail Page** on your store.

This guide explains how customers find their pending orders in the **Waiting for Checkout** tab, review itemized details, start repeat orders, and complete payment.

***

## 1. Overview & How It Helps Your Store

When a draft order is created for a customer—whether from a wholesale quote or a previous order request—customers can click on it in their account (`/pages/reorder`) to open a dedicated detail page.

The **Draft Order Detail Page** gives buyers full visibility over their pending order items, pricing, and status, with clear options to:

1. **Repeat or Edit Order (`[🔄 Reorder]`):** Click the **Reorder** button to open the Review & Edit Modal, adjust quantities, or add new products.
2. **Complete Payment (Checkout):** Access the direct checkout link or invoice email link to finish payment on Shopify.

```mermaid
graph TD
    A["Customer clicks order row in Waiting for Checkout tab"] --> B["Draft Order Detail Page opens"]
    B --> C["Review order details: Items, Quantities, Prices & Status Badge"]
    C --> D{"Customer Action"}
    D -->|"Click Reorder Button"| E["Catalog check & opens Review & Edit Modal"]
    D -->|"Click Checkout Link"| F["Proceeds to Shopify Checkout to complete payment"]
```

{% hint style="info" %}
**No Coding Required**: The Draft Order Detail page displays automatically inside your store theme using App Embeds and respects all design settings in your admin.
{% endhint %}

***

## 2. Before You Begin

To make sure your customers can view their pending draft orders, verify these settings in your Shopify store:

1. **Re-Order Page is Published**: Set your Re-Order page status to **Published** under **Reorder > Reorder Settings**.
2. **App Embed is Active**: Ensure the **BSS B2B Quotes** App Embed is turned on in your Shopify theme editor.
3. **Customer Login**: Customers must log into their store account. Pending draft orders are displayed strictly based on the logged-in customer.

{% hint style="danger" %}
**Account Privacy & Protection**: Customers can only see draft orders that belong to their own account. If a customer tries to open an order link belonging to another user, your store automatically blocks access and redirects them safely to their own account page.
{% endhint %}

***

## 3. How Customers Find Their Pending Orders

```mermaid
graph TD
    A["Step 1: Customer visits /pages/reorder"] --> B["Step 2: Click 'Waiting for Checkout' tab"]
    B --> C["Step 3: Click View Icon [👁] or Order Row (e.g. #D1001)"]
    C --> D["Draft Order Detail Page opens with full order details"]
```

1. **Visit Re-Order Page**: The customer logs in and visits `/pages/reorder`.
2. **Click Waiting for Checkout**: On the Re-Order history page, the customer clicks the **Waiting for Checkout** tab.
3. **Select an Order**: The table lists pending orders formatted like `#D1001`, `#D1002`. Clicking the View icon `[👁]` or order row opens its detail page.

***

## 4. Page Layout & Key Features

* **Back to List Button**: A `◀` back icon button that lets customers exit the detail view and return to their pending order list with pagination memory.
* **Order Header & Status**: Displays the order number (e.g., `#D1001`), creation date, and status badge (*Open*, *Invoice Sent*, or *Completed*).
* **Primary Reorder Button**: The main `[🔄 Reorder]` button on the page header to start a repeat order request.
* **Product Items Table**: Shows product photos, names, selected variants (e.g., *Color: Blue, Size: L*), SKUs, unit prices, quantities, and line total prices (`Unit Price × Quantity`).
* **Checkout / Payment Information**: Displays payment summary, subtotal, shipping, taxes, and the direct Checkout link when an invoice URL is available.

***

## 5. Customer Actions & Options

### Action 1: Reorder (Customize & Repeat Order)

The primary action button on the detail page header is **`[🔄 Reorder]`**. Clicking this button lets customers use the current draft order as a template for a new repeat purchase.

```mermaid
graph TD
    A["Customer clicks [Reorder] button"] --> B{"Real-Time Catalog Check"}
    B -->|"Items Sold Out or Deleted"| C["Unavailable Items Warning Modal appears"]
    C -->|"Click Continue"| D["Filters out unavailable items & opens Review Modal"]
    B -->|"All Items Available"| E["Opens Review & Edit Modal directly"]
```

1. **Real-Time Catalog Check**: The app checks if any items in the draft order have been deleted, archived, or marked out of stock in Shopify.
2. **Unavailable Items Warning Modal**: If unavailable items are detected, a warning notice lists the affected products. Clicking **Continue** removes unavailable items and opens the **Review & Edit Modal** pre-loaded with remaining active items.
3. **Direct Review Modal Opening**: If all items are active and in stock, the app opens the **Review & Edit Modal** directly so the buyer can adjust quantities or add new products before submitting.

***

### Action 2: Complete Payment (Checkout Link)

For draft orders with an active invoice URL (`INVOICE SENT` or `OPEN`), customers can complete payment using the Checkout link.

```mermaid
graph TD
    A["Customer clicks Checkout link"] --> B{"Check Order Status"}
    B -->|"Status: OPEN or INVOICE SENT"| C["Opens Shopify Checkout for instant payment"]
    B -->|"Status: COMPLETED (Paid)"| D["Opens Shopify Order Status page to view tracking"]
```

* **Preserves Wholesale Contracts**: Using the checkout link ensures all custom B2B wholesale prices, company location contracts, and volume discounts attached to the draft order remain 100% intact.

***

## 6. Status Badge Guide

The app displays three clear status badges to help customers track their draft order state:

| Status Badge   | Color             | What It Means                                                          | Available Actions                                                                                                                                                                |
| -------------- | ----------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `OPEN`         | 🟡 Amber / Orange | Draft order has been created and is waiting for payment.               | <p>• <strong>Reorder</strong> (<code>\[🔄 Reorder]</code>) opens Review Modal<br>• <strong>Checkout Link</strong> (Pay now)<br>• <strong>Back</strong> (<code>◀</code>)</p>      |
| `INVOICE SENT` | 🔵 Blue           | Invoice email or payment link has been sent to the buyer.              | <p>• <strong>Reorder</strong> (<code>\[🔄 Reorder]</code>) opens Review Modal<br>• <strong>Checkout Link</strong> (Pay now)<br>• <strong>Back</strong> (<code>◀</code>)</p>      |
| `COMPLETED`    | 🟢 Green          | Draft order has been paid and converted into a standard Shopify order. | <p>• <strong>Reorder</strong> (<code>\[🔄 Reorder]</code>) repeats order<br>• <strong>Order Status Link</strong> (View tracking)<br>• <strong>Back</strong> (<code>◀</code>)</p> |

***

## 7. Key Rules & Summary

| Customer Scenario                    | What Happens                                                                             | How It Protects Your Store                       |
| ------------------------------------ | ---------------------------------------------------------------------------------------- | ------------------------------------------------ |
| **Draft Order Paid (`COMPLETED`)**   | Clicking the checkout link opens native Shopify Order Status page for tracking.          | Prevents double payment attempts                 |
| **Catalog Item Sold Out or Deleted** | Clicking **Reorder** displays warning modal listing unavailable items first.             | Prevents ordering unavailable products           |
| **List Navigation Memory**           | Clicking **Back** (`◀`) returns the customer to their exact page position (e.g. Page 3). | Saves time for buyers managing many draft orders |
| **Multi-Currency Display**           | All prices and totals display in customer's active storefront currency.                  | Accurate international pricing                   |
| **Customer Privacy & Security**      | Customers can only view draft orders associated with their logged-in account.            | Protects B2B contract pricing and order privacy  |

***

## 8. Related Guides

* [Reorder Overview](/bss-b2b-quick-order-and-quotes/reorder/overview.md) — High-level vision, target audience, and B2B/DTC reorder scenarios.
* [Full Setup Guide](/bss-b2b-quick-order-and-quotes/reorder/full-setup-guide.md) — Admin configuration, customer eligibility, delivery mode selection, and publishing options.
* [Reorder Page & Order Tabs](/bss-b2b-quick-order-and-quotes/reorder/reorder-page.md) — Storefront Order Tab, Waiting for Checkout Tab, and layout guide.
* [Reorder Review & Edit Modal](/bss-b2b-quick-order-and-quotes/reorder/reorder-review-edit-modal.md) — Customizing quantities, adding products, and placing repeat orders.
* [Template Customization](/bss-b2b-quick-order-and-quotes/reorder/template-customization.md) — Customizing page colors, text, and element visibility.
* [Storefront Translation](/bss-b2b-quick-order-and-quotes/reorder/storefront-translation.md) — Translating storefront labels and status badge text.