fix(dashboard): Clarify draft order completion UX (#4163)

packages/dashboard/missing-translations.txt

@@ -0,0 +1,215 @@
+# Translation Request for Vendure Dashboard
+
+Please translate the missing message IDs below for each language. The context is a dashboard for an e-commerce platform called Vendure.
+
+## Instructions:
+1. Translate each msgid into the target language
+2. Maintain the original formatting, including placeholders like {0}, {buttonText}, etc.
+3. Keep HTML tags and markdown formatting intact
+4. Use appropriate UI/technical terminology for each language
+5. Return translations in the exact format: language_code followed by msgid|msgstr pairs
+6. These strings are for use in the Lingui library and use ICU MessageFormat
+7. Always assume e-commerce context unless clearly indicated otherwise
+
+## Expected Output Format:
+```
+language_code
+msgid_text|translated_text
+msgid_text|translated_text
+---
+language_code
+msgid_text|translated_text
+---
+```
+
+## Missing Translations:
+
+bg
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+cs
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+de
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+es
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+fa
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+fr
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+he
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+hr
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+it
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+ja
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+nb
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+ne
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+pl
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+pt_BR
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+pt_PT
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+ru
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+sv
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+tr
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+uk
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+zh_Hans
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---
+zh_Hant
+Add at least one item to the order
+Draft order status
+Only draft orders can be completed
+Order draft is ready to be completed
+Order draft isn't ready to be completed
+Select a customer to continue
+Set a shipping address and select a shipping method
+---

packages/dashboard/src/app/routes/_authenticated/_orders/components/draft-order-status.tsx

@@ -0,0 +1,48 @@
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AlertTriangle, CheckCircle } from 'lucide-react';
+
+export type DraftOrderStatusProps = Readonly<{
+    hasCustomer: boolean;
+    hasLines: boolean;
+    hasShippingMethod: boolean;
+    isDraftState: boolean;
+}>;
+
+export function DraftOrderStatus({
+    hasCustomer,
+    hasLines,
+    hasShippingMethod,
+    isDraftState,
+}: DraftOrderStatusProps) {
+    const { t } = useLingui();
+    const isCompleteDraftDisabled = !hasCustomer || !hasLines || !hasShippingMethod || !isDraftState;
+
+    let completeDraftDisabledReason: string | null = null;
+    if (!hasCustomer) {
+        completeDraftDisabledReason = t`Select a customer to continue`;
+    } else if (!hasLines) {
+        completeDraftDisabledReason = t`Add at least one item to the order`;
+    } else if (!hasShippingMethod) {
+        completeDraftDisabledReason = t`Set a shipping address and select a shipping method`;
+    } else if (!isDraftState) {
+        completeDraftDisabledReason = t`Only draft orders can be completed`;
+    }
+
+    const Icon = isCompleteDraftDisabled ? AlertTriangle : CheckCircle;
+    const title = isCompleteDraftDisabled ? (
+        <Trans>Order draft isn't ready to be completed</Trans>
+    ) : (
+        <Trans>Order draft is ready to be completed</Trans>
+    );
+
+    return (
+        <Alert variant={isCompleteDraftDisabled ? 'destructive' : 'default'}>
+            <Icon className={isCompleteDraftDisabled ? '' : 'stroke-success'} />
+            <AlertTitle className={isCompleteDraftDisabled ? '' : 'text-success'}>{title}</AlertTitle>
+            {completeDraftDisabledReason ? (
+                <AlertDescription>{completeDraftDisabledReason}</AlertDescription>
+            ) : null}
+        </Alert>
+    );
+}

packages/dashboard/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -24,6 +24,7 @@ import { ResultOf } from 'gql.tada';
 import { User } from 'lucide-react';
 import { toast } from 'sonner';
 import { CustomerAddressSelector } from './components/customer-address-selector.js';
+import { DraftOrderStatus } from './components/draft-order-status.js';
 import { EditOrderTable } from './components/edit-order-table.js';
 import { OrderAddress } from './components/order-address.js';
 import {
@@ -289,6 +290,13 @@ function DraftOrderPage() {
         });
     };
 
+    const hasCustomer = !!entity.customer;
+    const hasLines = entity.lines.length > 0;
+    const hasShippingMethod = entity.shippingLines.length > 0;
+    const isDraftState = entity.state === 'Draft';
+
+    const isCompleteDraftDisabled = !hasCustomer || !hasLines || !hasShippingMethod || !isDraftState;
+
     return (
         <Page pageId="draft-order-detail" form={form} entity={entity}>
             <PageTitle>
@@ -312,12 +320,7 @@ function DraftOrderPage() {
                     <PermissionGuard requires={['UpdateOrder']}>
                         <Button
                             type="button"
-                            disabled={
-                                !entity.customer ||
-                                entity.lines.length === 0 ||
-                                entity.shippingLines.length === 0 ||
-                                entity.state !== 'Draft'
-                            }
+                            disabled={isCompleteDraftDisabled}
                             onClick={() => completeDraftOrder({ id: entity.id, state: 'ArrangingPayment' })}
                         >
                             <Trans>Complete draft</Trans>
@@ -325,7 +328,20 @@ function DraftOrderPage() {
                     </PermissionGuard>
                 </PageActionBarRight>
             </PageActionBar>
+
             <PageLayout>
+                <PageBlock
+                    column="side"
+                    blockId="draft-order-status"
+                    title={<Trans>Draft order status</Trans>}
+                >
+                    <DraftOrderStatus
+                        hasCustomer={hasCustomer}
+                        hasLines={hasLines}
+                        hasShippingMethod={hasShippingMethod}
+                        isDraftState={isDraftState}
+                    />
+                </PageBlock>
                 <PageBlock column="main" blockId="order-table">
                     <EditOrderTable
                         order={entity}

packages/dashboard/src/i18n/locales/ar.po

@@ -754,6 +754,31 @@ msgstr "تم حذف الملاحظة بنجاح"
 msgid "Failed to delete note"
 msgstr "فشل حذف الملاحظة"
 
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:43
+#~ msgid "refundReason.CustomerRequest"
+#~ msgstr "طلب العميل"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:44
+#~ msgid "refundReason.NotAvailable"
+#~ msgstr "غير متاح"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:45
+#~ msgid "refundReason.DamagedInShipping"
+#~ msgstr "تضرر أثناء الشحن"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:46
+#~ msgid "refundReason.WrongItem"
+#~ msgstr "منتج خاطئ"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:47
+#~ msgid "refundReason.Other"
+#~ msgstr "أخرى"
+
 #: src/lib/components/data-table/human-readable-operator.tsx:26
 msgid "!="
 msgstr "!="
@@ -885,6 +910,10 @@ msgstr "إضافة مجموعة خيارات أخرى"
 msgid "Add asset"
 msgstr "إضافة ملف"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:25
+msgid "Add at least one item to the order"
+msgstr "أضف عنصرًا واحدًا على الأقل إلى الطلب"
+
 #: src/lib/components/layout/channel-switcher.tsx:212
 msgid "Add channel"
 msgstr "إضافة قناة"
@@ -1827,6 +1856,10 @@ msgstr "اكتمل طلب المسودة"
 msgid "Draft order deleted"
 msgstr "تم حذف طلب المسودة"
 
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:336
+msgid "Draft order status"
+msgstr "حالة طلب المسودة"
+
 #: src/lib/components/data-input/custom-field-list-input.tsx:72
 msgid "Drag to reorder"
 msgstr "اسحب لإعادة الترتيب"
@@ -1893,7 +1926,7 @@ msgstr "تحرير التخطيط"
 msgid "Edit link"
 msgstr "تحرير الرابط"
 
-#: src/app/routes/_authenticated/_zones/zones.tsx:39
+#: src/app/routes/_authenticated/_zones/zones.tsx:40
 msgid "Edit members"
 msgstr "تحرير الأعضاء"
 
@@ -2350,7 +2383,7 @@ msgid "Failed to update global settings"
 msgstr "فشل تحديث الإعدادات العامة"
 
 #: src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx:92
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:59
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:60
 msgid "Failed to update order"
 msgstr "فشل تحديث الطلب"
 
@@ -3352,6 +3385,10 @@ msgstr "إيقاف"
 msgid "Old email:"
 msgstr "البريد الإلكتروني القديم:"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:29
+msgid "Only draft orders can be completed"
+msgstr "يمكن إكمال طلبات المسودة فقط"
+
 #: src/app/routes/_authenticated/_products/products_.$id_.variants.tsx:269
 msgid "Option"
 msgstr "الخيار"
@@ -3417,6 +3454,14 @@ msgstr "تم تحديث الحقول المخصصة للطلب"
 msgid "Order delivered"
 msgstr "تم تسليم الطلب"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:36
+msgid "Order draft is ready to be completed"
+msgstr "طلب المسودة جاهز للإكمال"
+
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:34
+msgid "Order draft isn't ready to be completed"
+msgstr "طلب المسودة غير جاهز للإكمال"
+
 #: src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx:75
 msgid "Order fulfilled"
 msgstr "تم تنفيذ الطلب"
@@ -3851,7 +3896,7 @@ msgstr "الاستردادات ({0})"
 msgid "Regenerate slug from source field"
 msgstr "إعادة إنشاء الرابط المختصر من الحقل المصدر"
 
-#: src/app/routes/_authenticated/_zones/zones.tsx:36
+#: src/app/routes/_authenticated/_zones/zones.tsx:37
 msgid "Regions"
 msgstr "المناطق"
 
@@ -4089,6 +4134,10 @@ msgstr "حدد بلدًا"
 msgid "Select a currency"
 msgstr "حدد عملة"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:23
+msgid "Select a customer to continue"
+msgstr "اختر عميلاً للمتابعة"
+
 #: src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx:83
 msgid "Select a destination collection"
 msgstr "حدد مجموعة وجهة"
@@ -4213,7 +4262,11 @@ msgstr "طلبات البائعين"
 msgid "Sellers"
 msgstr "البائعون"
 
-#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:394
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:27
+msgid "Set a shipping address and select a shipping method"
+msgstr "قم بتعيين عنوان الشحن واختيار طريقة الشحن"
+
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:414
 msgid "Set custom fields"
 msgstr "تعيين الحقول المخصصة"
 
@@ -4594,7 +4647,7 @@ msgid "Successfully updated global settings"
 msgstr "تم تحديث الإعدادات العامة بنجاح"
 
 #: src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx:88
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:55
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:56
 msgid "Successfully updated order"
 msgstr "تم تحديث الطلب بنجاح"
 

packages/dashboard/src/i18n/locales/en.po

@@ -754,6 +754,31 @@ msgstr "Note deleted successfully"
 msgid "Failed to delete note"
 msgstr "Failed to delete note"
 
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:43
+#~ msgid "refundReason.CustomerRequest"
+#~ msgstr "Customer request"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:44
+#~ msgid "refundReason.NotAvailable"
+#~ msgstr "Item not available"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:45
+#~ msgid "refundReason.DamagedInShipping"
+#~ msgstr "Damaged in shipping"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:46
+#~ msgid "refundReason.WrongItem"
+#~ msgstr "Wrong item shipped"
+
+#. js-lingui-explicit-id
+#: src/i18n/common-strings.ts:47
+#~ msgid "refundReason.Other"
+#~ msgstr "Other"
+
 #: src/lib/components/data-table/human-readable-operator.tsx:26
 msgid "!="
 msgstr "!="
@@ -885,6 +910,10 @@ msgstr "Add another option group"
 msgid "Add asset"
 msgstr "Add asset"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:25
+msgid "Add at least one item to the order"
+msgstr "Add at least one item to the order"
+
 #: src/lib/components/layout/channel-switcher.tsx:212
 msgid "Add channel"
 msgstr "Add channel"
@@ -1827,6 +1856,10 @@ msgstr "Draft order completed"
 msgid "Draft order deleted"
 msgstr "Draft order deleted"
 
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:336
+msgid "Draft order status"
+msgstr "Draft order status"
+
 #: src/lib/components/data-input/custom-field-list-input.tsx:72
 msgid "Drag to reorder"
 msgstr "Drag to reorder"
@@ -1893,7 +1926,7 @@ msgstr "Edit Layout"
 msgid "Edit link"
 msgstr "Edit link"
 
-#: src/app/routes/_authenticated/_zones/zones.tsx:39
+#: src/app/routes/_authenticated/_zones/zones.tsx:40
 msgid "Edit members"
 msgstr "Edit members"
 
@@ -2350,7 +2383,7 @@ msgid "Failed to update global settings"
 msgstr "Failed to update global settings"
 
 #: src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx:92
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:59
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:60
 msgid "Failed to update order"
 msgstr "Failed to update order"
 
@@ -3352,6 +3385,10 @@ msgstr "Off"
 msgid "Old email:"
 msgstr "Old email:"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:29
+msgid "Only draft orders can be completed"
+msgstr "Only draft orders can be completed"
+
 #: src/app/routes/_authenticated/_products/products_.$id_.variants.tsx:269
 msgid "Option"
 msgstr "Option"
@@ -3417,6 +3454,14 @@ msgstr "Order custom fields updated"
 msgid "Order delivered"
 msgstr "Order delivered"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:36
+msgid "Order draft is ready to be completed"
+msgstr "Order draft is ready to be completed"
+
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:34
+msgid "Order draft isn't ready to be completed"
+msgstr "Order draft isn't ready to be completed"
+
 #: src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx:75
 msgid "Order fulfilled"
 msgstr "Order fulfilled"
@@ -3851,7 +3896,7 @@ msgstr "Refunds ({0})"
 msgid "Regenerate slug from source field"
 msgstr "Regenerate slug from source field"
 
-#: src/app/routes/_authenticated/_zones/zones.tsx:36
+#: src/app/routes/_authenticated/_zones/zones.tsx:37
 msgid "Regions"
 msgstr "Regions"
 
@@ -4089,6 +4134,10 @@ msgstr "Select a country"
 msgid "Select a currency"
 msgstr "Select a currency"
 
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:23
+msgid "Select a customer to continue"
+msgstr "Select a customer to continue"
+
 #: src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx:83
 msgid "Select a destination collection"
 msgstr "Select a destination collection"
@@ -4213,7 +4262,11 @@ msgstr "Seller orders"
 msgid "Sellers"
 msgstr "Sellers"
 
-#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:394
+#: src/app/routes/_authenticated/_orders/components/draft-order-status.tsx:27
+msgid "Set a shipping address and select a shipping method"
+msgstr "Set a shipping address and select a shipping method"
+
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:414
 msgid "Set custom fields"
 msgstr "Set custom fields"
 
@@ -4594,7 +4647,7 @@ msgid "Successfully updated global settings"
 msgstr "Successfully updated global settings"
 
 #: src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx:88
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:55
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:56
 msgid "Successfully updated order"
 msgstr "Successfully updated order"
 

packages/dashboard/src/lib/components/ui/alert.tsx

@@ -19,6 +19,8 @@ const alertVariants = cva(
     },
 );
 
+export type AlertVariants = NonNullable<VariantProps<typeof alertVariants>>['variant'];
+
 function Alert({
     className,
     variant,