fix(dashboard): Prefill address form on modify page & add submitLabel prop

- Add initialAddress prop to CustomerAddressSelector to pre-populate the
  address form when editing (fixes parity gap 1: editing an address on the
  modify page no longer requires retyping all fields from scratch)
- Add submitLabel prop to CustomerAddressForm (fixes point 9: draft page
  shows 'Okay' matching Angular, modify page shows 'Update address')
- Pass current shipping/billing address as initialAddress on the modify page
- Update e2e test to match new button label

Author: Ryrahul

packages/dashboard/e2e/tests/sales/orders.spec.ts

@@ -370,7 +370,7 @@ test.describe('Orders', () => {
         // Country is a Select — open and pick the first available country
         await popover.getByRole('combobox').click();
         await page.getByRole('option').first().click();
-        await popover.getByRole('button', { name: /Save Address/i }).click();
+        await popover.getByRole('button', { name: /Okay/i }).click();
 
         // The new address is applied to the order
         await page.waitForResponse(resp => resp.url().includes('/admin-api') && resp.status() === 200);

packages/dashboard/src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx

@@ -29,6 +29,27 @@ interface CustomerAddressSelectorProps {
     onSubmitNew: (input: CreateAddressInput) => void;
     onCancel?: () => void;
     defaultOpen?: boolean;
+    /**
+     * @description
+     * Pre-populates the "New address" form with the given values. Used on the order modify page
+     * so that editing an address doesn't require retyping all fields from scratch.
+     */
+    initialAddress?: {
+        fullName?: string | null;
+        company?: string | null;
+        streetLine1?: string | null;
+        streetLine2?: string | null;
+        city?: string | null;
+        province?: string | null;
+        postalCode?: string | null;
+        countryCode?: string | null;
+        phoneNumber?: string | null;
+    };
+    /**
+     * @description
+     * Custom label for the submit button in the "New address" form.
+     */
+    submitLabel?: React.ReactNode;
 }
 
 export function CustomerAddressSelector({
@@ -37,6 +58,8 @@ export function CustomerAddressSelector({
     onSubmitNew,
     onCancel,
     defaultOpen = false,
+    initialAddress,
+    submitLabel,
 }: Readonly<CustomerAddressSelectorProps>) {
     const [open, setOpen] = useState(defaultOpen);
     const [activeTab, setActiveTab] = useState<string>('existing');
@@ -130,6 +153,23 @@ export function CustomerAddressSelector({
                             <div className="mt-2 max-h-[60vh] overflow-y-auto">
                                 <CustomerAddressForm
                                     hideDefaultAddressFlags
+                                    address={initialAddress}
+                                    setValuesForUpdate={addr => ({
+                                        id: '',
+                                        fullName: addr?.fullName ?? '',
+                                        company: addr?.company ?? '',
+                                        streetLine1: addr?.streetLine1 ?? '',
+                                        streetLine2: addr?.streetLine2 ?? '',
+                                        city: addr?.city ?? '',
+                                        province: addr?.province ?? '',
+                                        postalCode: addr?.postalCode ?? '',
+                                        countryCode: addr?.countryCode ?? '',
+                                        phoneNumber: addr?.phoneNumber ?? '',
+                                        defaultShippingAddress: false,
+                                        defaultBillingAddress: false,
+                                        customFields: {},
+                                    })}
+                                    submitLabel={submitLabel}
                                     onSubmit={values => {
                                         onSubmitNew(mapFormValuesToInput(values));
                                         setOpen(false);

packages/dashboard/src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx

@@ -265,6 +265,8 @@ function ModifyOrderPage() {
                                     onSelect={handleSelectShippingAddress}
                                     onSubmitNew={handleSubmitNewShippingAddress}
                                     onCancel={() => setEditingShippingAddress(false)}
+                                    initialAddress={shippingAddress}
+                                    submitLabel={<Trans>Update address</Trans>}
                                     defaultOpen
                                 />
                             ) : (
@@ -295,6 +297,8 @@ function ModifyOrderPage() {
                                     onSelect={handleSelectBillingAddress}
                                     onSubmitNew={handleSubmitNewBillingAddress}
                                     onCancel={() => setEditingBillingAddress(false)}
+                                    initialAddress={billingAddress}
+                                    submitLabel={<Trans>Update address</Trans>}
                                     defaultOpen
                                 />
                             ) : (

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

@@ -534,6 +534,7 @@ function DraftOrderPage() {
                                             input,
                                         });
                                     }}
+                                    submitLabel={<Trans>Okay</Trans>}
                                 />
                             </div>
                         )}
@@ -562,6 +563,7 @@ function DraftOrderPage() {
                                             input,
                                         });
                                     }}
+                                    submitLabel={<Trans>Okay</Trans>}
                                 />
                             </div>
                         )}

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

@@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:159
-#: src/lib/components/shared/customer-address-form.tsx:110
+#: src/lib/components/shared/customer-address-form.tsx:116
 msgid "Full Name"
 msgstr "الاسم الكامل"
 
@@ -56,7 +56,7 @@ msgstr "تعيين مجموعة خيارات موجودة أو إنشاء مجم
 msgid "New role"
 msgstr "دور جديد"
 
-#: src/lib/components/shared/customer-address-form.tsx:138
+#: src/lib/components/shared/customer-address-form.tsx:144
 msgid "Apartment, suite, etc."
 msgstr "شقة، جناح، إلخ."
 
@@ -525,7 +525,7 @@ msgid "Create new customer"
 msgstr ""
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:196
-#: src/lib/components/shared/customer-address-form.tsx:148
+#: src/lib/components/shared/customer-address-form.tsx:154
 msgid "City"
 msgstr "المدينة"
 
@@ -701,7 +701,7 @@ msgstr "يرجى إضافة منتجات وإكمال عنوان الشحن لت
 msgid "Toggle header row"
 msgstr "تبديل صف الرأس"
 
-#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:73
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:96
 msgid "Select address"
 msgstr "تحديد عنوان"
 
@@ -862,7 +862,7 @@ msgid "(max: {0})"
 msgstr "(الحد الأقصى: {0})"
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:165
-#: src/lib/components/shared/customer-address-form.tsx:118
+#: src/lib/components/shared/customer-address-form.tsx:124
 msgid "Company"
 msgstr "الشركة"
 
@@ -926,6 +926,11 @@ msgstr "فشل إنشاء المنتج"
 msgid "Customer"
 msgstr "العميل"
 
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:269
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:301
+msgid "Update address"
+msgstr ""
+
 #. placeholder {0}: error.message
 #: src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx:46
 msgid "Error loading order history: {0}"
@@ -1510,7 +1515,7 @@ msgstr "أحدث الطلبات"
 msgid "+ {leftOver} more"
 msgstr "+ {leftOver} المزيد"
 
-#: src/lib/components/shared/customer-address-form.tsx:249
+#: src/lib/components/shared/customer-address-form.tsx:255
 msgid "Use as the default billing address"
 msgstr "استخدام كعنوان فوترة افتراضي"
 
@@ -1612,7 +1617,7 @@ msgstr "تم تحديث العنوان بنجاح"
 msgid "Created"
 msgstr "تم الإنشاء"
 
-#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:93
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:116
 msgid "Loading addresses..."
 msgstr "جارٍ تحميل العناوين..."
 
@@ -1668,7 +1673,7 @@ msgstr "الانتقال إلى الصفحة الأخيرة"
 #: src/lib/components/shared/asset/asset-focal-point-editor.tsx:88
 #: src/lib/components/shared/assign-to-channel-dialog.tsx:126
 #: src/lib/components/shared/confirmation-dialog.tsx:42
-#: src/lib/components/shared/customer-address-form.tsx:262
+#: src/lib/components/shared/customer-address-form.tsx:268
 #: src/lib/components/shared/navigation-confirmation.tsx:55
 #: src/lib/components/shared/rich-text-editor/image-dialog.tsx:208
 #: src/lib/components/shared/rich-text-editor/link-dialog.tsx:146
@@ -1690,7 +1695,7 @@ msgid "Refund from this method"
 msgstr "الاسترداد من هذه الطريقة"
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:208
-#: src/lib/components/shared/customer-address-form.tsx:170
+#: src/lib/components/shared/customer-address-form.tsx:176
 msgid "Postal Code"
 msgstr "الرمز البريدي"
 
@@ -1797,7 +1802,7 @@ msgstr "معطل"
 msgid "New promotion"
 msgstr "عرض ترويجي جديد"
 
-#: src/lib/components/shared/customer-address-form.tsx:228
+#: src/lib/components/shared/customer-address-form.tsx:234
 msgid "Default Shipping Address"
 msgstr "عنوان الشحن الافتراضي"
 
@@ -1898,8 +1903,8 @@ msgstr "تم تحديث الملف الشخصي بنجاح"
 msgid "Payment method"
 msgstr "طريقة الدفع"
 
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:277
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:307
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:279
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:311
 #: src/lib/components/shared/history-timeline/history-note-entry.tsx:46
 msgid "Edit"
 msgstr "تحرير"
@@ -2728,8 +2733,8 @@ msgid "This will remove all option groups from this product and return to the va
 msgstr "سيؤدي هذا إلى إزالة جميع مجموعات الخيارات من هذا المنتج والعودة إلى اختيار إعداد المتغيرات."
 
 #: src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx:299
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:291
-#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:542
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:293
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:543
 msgid "Billing address"
 msgstr "عنوان الفوترة"
 
@@ -2805,7 +2810,7 @@ msgid "Amount"
 msgstr "المبلغ"
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:242
-#: src/lib/components/shared/customer-address-form.tsx:208
+#: src/lib/components/shared/customer-address-form.tsx:214
 msgid "Phone Number"
 msgstr "رقم الهاتف"
 
@@ -2944,7 +2949,7 @@ msgstr "تم تحديث نقطة التركيز"
 msgid "Option values"
 msgstr "قيم الخيارات"
 
-#: src/lib/components/shared/customer-address-form.tsx:246
+#: src/lib/components/shared/customer-address-form.tsx:252
 msgid "Default Billing Address"
 msgstr "عنوان الفوترة الافتراضي"
 
@@ -3193,7 +3198,7 @@ msgstr "فشل تحديث نقطة التركيز"
 msgid "Successfully updated zone"
 msgstr "تم تحديث المنطقة بنجاح"
 
-#: src/lib/components/shared/customer-address-form.tsx:156
+#: src/lib/components/shared/customer-address-form.tsx:162
 msgid "State/Province"
 msgstr "الولاية/المحافظة"
 
@@ -3215,7 +3220,7 @@ msgstr "تعيين معايير التصفية لعمود {columnId}"
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:217
 #: src/app/routes/_authenticated/_zones/components/zone-countries-table.tsx:53
-#: src/lib/components/shared/customer-address-form.tsx:180
+#: src/lib/components/shared/customer-address-form.tsx:186
 msgid "Country"
 msgstr "البلد"
 
@@ -3431,7 +3436,7 @@ msgstr "تم تفويض الدفع"
 msgid "Successfully updated role"
 msgstr "تم تحديث الدور بنجاح"
 
-#: src/lib/components/shared/customer-address-form.tsx:191
+#: src/lib/components/shared/customer-address-form.tsx:197
 msgid "Select a country"
 msgstr "حدد بلدًا"
 
@@ -3658,7 +3663,7 @@ msgstr "تم إنشاء قيمة الخاصية بنجاح"
 msgid "Marketing"
 msgstr "التسويق"
 
-#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:82
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:105
 msgid "Existing address"
 msgstr ""
 
@@ -3724,7 +3729,7 @@ msgstr "{0} متغير"
 msgid "Failed to settle payment"
 msgstr "فشل تسوية الدفع"
 
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:315
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:319
 msgid "No billing address"
 msgstr "لا يوجد عنوان فوترة"
 
@@ -3883,7 +3888,7 @@ msgstr "فشل تحديث موقع المخزون"
 msgid "Order shipped"
 msgstr "تم شحن الطلب"
 
-#: src/lib/components/shared/customer-address-form.tsx:266
+#: src/lib/components/shared/customer-address-form.tsx:272
 msgid "Save Address"
 msgstr "حفظ العنوان"
 
@@ -4621,7 +4626,7 @@ msgstr ""
 msgid "Failed to set billing address for order: {0}"
 msgstr ""
 
-#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:285
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx:287
 msgid "No shipping address"
 msgstr "لا يوجد عنوان شحن"
 
@@ -4885,7 +4890,7 @@ msgstr "تحرير الأعضاء"
 msgid "Stock on hand"
 msgstr "المخزون المتاح"
 
-#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:86
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:109
 msgid "New address"
 msgstr ""
 
@@ -5092,7 +5097,7 @@ msgstr "النظام"
 msgid "Variant name"
 msgstr "اسم المتغير"
 
-#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:595
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:597
 msgid "Remove"
 msgstr "إزالة"
 
@@ -5161,7 +5166,7 @@ msgid "The page will continue with the default query."
 msgstr "ستستمر الصفحة بالاستعلام الافتراضي."
 
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx:175
-#: src/lib/components/shared/customer-address-form.tsx:128
+#: src/lib/components/shared/customer-address-form.tsx:134
 msgid "Street Address"
 msgstr "عنوان الشارع"
 
@@ -5314,6 +5319,11 @@ msgstr "اللغة الافتراضية"
 msgid "Status"
 msgstr "الحالة"
 
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:537
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx:566
+msgid "Okay"
+msgstr ""
+
 #: src/lib/components/shared/configurable-operation-multi-selector.tsx:298
 #: src/lib/components/shared/configurable-operation-selector.tsx:155
 msgid "No options found"
@@ -5756,7 +5766,7 @@ msgstr "عرض عملية الطلب"
 msgid "Failed to duplicate view"
 msgstr "فشل نسخ العرض"
 
-#: src/lib/components/shared/customer-address-form.tsx:231
+#: src/lib/components/shared/customer-address-form.tsx:237
 msgid "Use as the default shipping address"
 msgstr "استخدام كعنوان شحن افتراضي"
 
@@ -6096,7 +6106,7 @@ msgstr "جارٍ التحميل..."
 msgid "The token is used to specify the channel when making API requests."
 msgstr "يُستخدم الرمز المميز لتحديد القناة عند إجراء طلبات API."
 
-#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:97
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx:120
 msgid "No addresses found"
 msgstr "لم يتم العثور على عناوين"