@vendure/dashboard 3.7.2 → 3.7.3-master-202608050305

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

@@ -11,6 +11,7 @@ import { addCustomFields } from '@/vdb/framework/document-introspection/add-cust
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
+import { type CreateAddressInput } from '@/vdb/graphql/common-operations.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
@@ -88,6 +89,8 @@ function ModifyOrderPage() {
         removeCouponCode,
         updateShippingAddress: updateShippingAddressInInput,
         updateBillingAddress: updateBillingAddressInInput,
+        updateShippingAddressRaw: updateShippingAddressRawInInput,
+        updateBillingAddressRaw: updateBillingAddressRawInInput,
         addSurcharge,
         setNote,
         setRecalculateShipping,
@@ -109,6 +112,17 @@ function ModifyOrderPage() {
         setEditingBillingAddress(false);
     }
 
+    function handleSubmitNewShippingAddress({ customFields, ...input }: CreateAddressInput) {
+        // `customFields` is not part of `UpdateOrderAddressInput`, so modifyOrder rejects it
+        updateShippingAddressRawInInput(input);
+        setEditingShippingAddress(false);
+    }
+
+    function handleSubmitNewBillingAddress({ customFields, ...input }: CreateAddressInput) {
+        updateBillingAddressRawInInput(input);
+        setEditingBillingAddress(false);
+    }
+
     const [previewOpen, setPreviewOpen] = useState(false);
 
     if (!entity) {
@@ -250,7 +264,11 @@ function ModifyOrderPage() {
                                 <CustomerAddressSelector
                                     customerId={entity.customer?.id}
                                     onSelect={handleSelectShippingAddress}
+                                    onSubmitNew={handleSubmitNewShippingAddress}
                                     onCancel={() => setEditingShippingAddress(false)}
+                                    initialAddress={shippingAddress}
+                                    currentAddress={shippingAddress}
+                                    submitLabel={<Trans>Update address</Trans>}
                                     defaultOpen
                                 />
                             ) : (
@@ -279,7 +297,11 @@ function ModifyOrderPage() {
                                 <CustomerAddressSelector
                                     customerId={entity.customer?.id}
                                     onSelect={handleSelectBillingAddress}
+                                    onSubmitNew={handleSubmitNewBillingAddress}
                                     onCancel={() => setEditingBillingAddress(false)}
+                                    initialAddress={billingAddress}
+                                    currentAddress={billingAddress}
+                                    submitLabel={<Trans>Update address</Trans>}
                                     defaultOpen
                                 />
                             ) : (

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

@@ -163,7 +163,7 @@ function DraftOrderPage() {
         },
     });
 
-    const { mutate: setCustomerForDraftOrder } = useMutation({
+    const { mutateAsync: setCustomerForDraftOrder } = useMutation({
         mutationFn: api.mutate(setCustomerForDraftOrderDocument),
         onSuccess: async (result: ResultOf<typeof setCustomerForDraftOrderDocument>) => {
             const order = result.setCustomerForDraftOrder;
@@ -229,7 +229,7 @@ function DraftOrderPage() {
         },
     });
 
-    const { mutate: setShippingAddressForDraftOrder } = useMutation({
+    const { mutateAsync: setShippingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(setShippingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof setShippingAddressForDraftOrderDocument>) => {
             toast.success(t`Shipping address set for order`);
@@ -240,7 +240,7 @@ function DraftOrderPage() {
         },
     });
 
-    const { mutate: setBillingAddressForDraftOrder } = useMutation({
+    const { mutateAsync: setBillingAddressForDraftOrder } = useMutation({
         mutationFn: api.mutate(setBillingAddressForDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof setBillingAddressForDraftOrderDocument>) => {
             toast.success(t`Billing address set for order`);
@@ -502,53 +502,78 @@ function DraftOrderPage() {
                         </Button>
                     ) : null}
                     <CustomerSelector
+                        allowCreateNew
                         onSelect={customer => {
                             setCustomerForDraftOrder({ orderId: entity.id, customerId: customer.id });
                         }}
+                        onCreateNew={async input => {
+                            const result = await setCustomerForDraftOrder({ orderId: entity.id, input });
+                            if (result.setCustomerForDraftOrder.__typename !== 'Order') {
+                                // ErrorResult, not a transport error — mutateAsync resolves, so throw to
+                                // keep the popover open with the entered values.
+                                throw new Error(result.setCustomerForDraftOrder.message);
+                            }
+                        }}
                     />
                 </PageBlock>
                 <PageBlock column="side" blockId="shipping-address" title={<Trans>Shipping address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.shippingAddress ?? undefined} />
-                        {entity.shippingAddress?.streetLine1 ? (
-                            <RemoveAddressButton
-                                onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })}
+                        <div className="mt-2 flex items-center gap-2">
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setShippingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: mapToAddressInput(address),
+                                    });
+                                }}
+                                onSubmitNew={async input => {
+                                    await setShippingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input,
+                                    });
+                                }}
+                                initialAddress={entity.shippingAddress}
+                                currentAddress={entity.shippingAddress}
+                                submitLabel={<Trans>Okay</Trans>}
                             />
-                        ) : (
-                            <div className="mt-4">
-                                <CustomerAddressSelector
-                                    customerId={entity.customer?.id}
-                                    onSelect={address => {
-                                        setShippingAddressForDraftOrder({
-                                            orderId: entity.id,
-                                            input: mapToAddressInput(address),
-                                        });
-                                    }}
+                            {entity.shippingAddress?.streetLine1 && (
+                                <RemoveAddressButton
+                                    onClick={() => unsetShippingAddressForDraftOrder({ orderId: entity.id })}
                                 />
-                            </div>
-                        )}
+                            )}
+                        </div>
                     </div>
                 </PageBlock>
                 <PageBlock column="side" blockId="billing-address" title={<Trans>Billing address</Trans>}>
                     <div className="flex flex-col">
                         <OrderAddress address={entity.billingAddress ?? undefined} />
-                        {entity.billingAddress?.streetLine1 ? (
-                            <RemoveAddressButton
-                                onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })}
+                        <div className="mt-2 flex items-center gap-2">
+                            <CustomerAddressSelector
+                                customerId={entity.customer?.id}
+                                onSelect={address => {
+                                    setBillingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input: mapToAddressInput(address),
+                                    });
+                                }}
+                                onSubmitNew={async input => {
+                                    await setBillingAddressForDraftOrder({
+                                        orderId: entity.id,
+                                        input,
+                                    });
+                                }}
+                                initialAddress={entity.billingAddress}
+                                currentAddress={entity.billingAddress}
+                                submitLabel={<Trans>Okay</Trans>}
                             />
-                        ) : (
-                            <div className="mt-4">
-                                <CustomerAddressSelector
-                                    customerId={entity.customer?.id}
-                                    onSelect={address => {
-                                        setBillingAddressForDraftOrder({
-                                            orderId: entity.id,
-                                            input: mapToAddressInput(address),
-                                        });
-                                    }}
+                            {entity.billingAddress?.streetLine1 && (
+                                <RemoveAddressButton
+                                    onClick={() => unsetBillingAddressForDraftOrder({ orderId: entity.id })}
                                 />
-                            </div>
-                        )}
+                            )}
+                        </div>
                     </div>
                 </PageBlock>
             </PageLayout>
@@ -574,10 +599,8 @@ function mapToAddressInput(address: ResultOf<typeof addressFragment>) {
 
 function RemoveAddressButton(props: { onClick: () => void }) {
     return (
-        <div className="">
-            <Button variant="outline" className="mt-4" size="sm" onClick={props.onClick}>
-                <Trans>Remove</Trans>
-            </Button>
-        </div>
+        <Button variant="outline" size="sm" onClick={props.onClick}>
+            <Trans>Remove</Trans>
+        </Button>
     );
 }

package/src/app/routes/_authenticated/_orders/utils/use-modify-order.ts

@@ -35,6 +35,8 @@ export interface UseModifyOrderReturn {
     removeCouponCode: (params: { couponCode: string }) => void;
     updateShippingAddress: (address: AddressFragment) => void;
     updateBillingAddress: (address: AddressFragment) => void;
+    updateShippingAddressRaw: (input: NonNullable<ModifyOrderInput['updateShippingAddress']>) => void;
+    updateBillingAddressRaw: (input: NonNullable<ModifyOrderInput['updateBillingAddress']>) => void;
     addSurcharge: (surcharge: SurchargeInput) => void;
     setNote: (note: string) => void;
     setRecalculateShipping: (recalculate: boolean) => void;
@@ -291,6 +293,28 @@ export function useModifyOrder(order: Order | null | undefined): UseModifyOrderR
         }));
     }, []);
 
+    // Update shipping address from a raw input (e.g. a new ad-hoc address entered inline)
+    const updateShippingAddressRaw = useCallback(
+        (input: NonNullable<ModifyOrderInput['updateShippingAddress']>) => {
+            setModifyOrderInput(prev => ({
+                ...prev,
+                updateShippingAddress: input,
+            }));
+        },
+        [],
+    );
+
+    // Update billing address from a raw input (e.g. a new ad-hoc address entered inline)
+    const updateBillingAddressRaw = useCallback(
+        (input: NonNullable<ModifyOrderInput['updateBillingAddress']>) => {
+            setModifyOrderInput(prev => ({
+                ...prev,
+                updateBillingAddress: input,
+            }));
+        },
+        [],
+    );
+
     // Add surcharge
     const addSurcharge = useCallback((surcharge: SurchargeInput) => {
         setModifyOrderInput(prev => ({
@@ -342,6 +366,8 @@ export function useModifyOrder(order: Order | null | undefined): UseModifyOrderR
         removeCouponCode,
         updateShippingAddress,
         updateBillingAddress,
+        updateShippingAddressRaw,
+        updateBillingAddressRaw,
         addSurcharge,
         setNote,
         setRecalculateShipping,

package/src/i18n/locales/ar.po

@@ -345,6 +345,7 @@ msgstr "اكتب حرفين على الأقل للبحث..."
 #: src/app/routes/_authenticated/_administrators/administrators_.$id.tsx
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
 #: src/app/routes/_authenticated/_profile/profile.tsx
+#: src/lib/components/shared/customer-selector.tsx
 msgid "Last name"
 msgstr "اسم العائلة"
 
@@ -514,6 +515,10 @@ msgstr "تم إنشاء خيار المنتج بنجاح"
 msgid "Parent product"
 msgstr "المنتج الأساسي"
 
+#: src/lib/components/shared/customer-selector.tsx
+msgid "Create new customer"
+msgstr ""
+
 #: src/app/routes/_authenticated/_shipping-methods/components/test-address-form.tsx
 #: src/lib/components/shared/customer-address-form.tsx
 msgid "City"
@@ -541,6 +546,14 @@ msgstr "إزالة الرابط"
 msgid "This field is readonly"
 msgstr "هذا الحقل للقراءة فقط"
 
+#. placeholder {0}: succeeded.length
+#. placeholder {1}: succeeded.length
+#. placeholder {2}: succeeded.length
+#: src/lib/components/shared/assign-to-channel-dialog.tsx
+#: src/lib/components/shared/assign-to-channel-dialog.tsx
+msgid "{0, plural, one {Assigned {entityIdsLength} {entityType} to {1} channel} other {Assigned {entityIdsLength} {entityType} to {2} channels}}"
+msgstr ""
+
 #: src/lib/framework/dashboard-widget/metrics-widget/index.tsx
 #: src/lib/framework/dashboard-widget/metrics-widget/index.tsx
 msgid "Order Count"
@@ -743,6 +756,10 @@ msgstr "تاريخ قصير"
 msgid "Available currencies"
 msgstr "العملات المتاحة"
 
+#: src/lib/components/shared/customer-selector.tsx
+msgid "Search customers..."
+msgstr ""
+
 #. placeholder {0}: selectedIds.size
 #: src/lib/components/data-input/product-multi-selector-input.tsx
 msgid "Select {0} Items"
@@ -916,6 +933,11 @@ msgstr "فشل إنشاء المنتج"
 msgid "Customer"
 msgstr "العميل"
 
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx
+#: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx
+msgid "Update address"
+msgstr ""
+
 #. placeholder {0}: error.message
 #: src/app/routes/_authenticated/_orders/components/order-history/order-history-container.tsx
 msgid "Error loading order history: {0}"
@@ -1164,6 +1186,7 @@ msgid "Assets"
 msgstr "الملفات"
 
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
+#: src/lib/components/shared/customer-selector.tsx
 msgid "Email address"
 msgstr "عنوان البريد الإلكتروني"
 
@@ -1657,6 +1680,7 @@ msgstr "الانتقال إلى الصفحة الأخيرة"
 #: src/lib/components/shared/assign-to-channel-dialog.tsx
 #: src/lib/components/shared/confirmation-dialog.tsx
 #: src/lib/components/shared/customer-address-form.tsx
+#: src/lib/components/shared/customer-selector.tsx
 #: src/lib/components/shared/navigation-confirmation.tsx
 #: src/lib/components/shared/rich-text-editor/image-dialog.tsx
 #: src/lib/components/shared/rich-text-editor/link-dialog.tsx
@@ -1754,6 +1778,10 @@ msgstr "فئات الضرائب"
 msgid "Private collections are not visible in the shop"
 msgstr "المجموعات الخاصة غير مرئية في المتجر"
 
+#: src/lib/components/shared/customer-selector.tsx
+msgid "Create customer"
+msgstr ""
+
 #: src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx
 #: src/app/routes/_authenticated/_products/products_.$id.tsx
 msgid "When enabled, a product is available in the shop"
@@ -2658,6 +2686,10 @@ msgstr "عرض البيانات"
 msgid "Delete View"
 msgstr "حذف العرض"
 
+#: src/lib/components/shared/assign-to-channel-dialog.tsx
+msgid "Failed to assign {entityIdsLength} {entityType} to the selected channels"
+msgstr ""
+
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
 msgid "Add a new address to the customer."
 msgstr "أضف عنوانًا جديدًا للعميل."
@@ -3068,10 +3100,9 @@ msgstr "حفظ التغييرات"
 msgid "Address updated"
 msgstr "تم تحديث العنوان"
 
-#. placeholder {0}: selectedChannelIds.length
 #: src/lib/components/shared/assign-to-channel-dialog.tsx
-msgid "Successfully assigned {entityIdsLength} {entityType} to {0} channels"
-msgstr ""
+#~ msgid "Successfully assigned {entityIdsLength} {entityType} to {0} channels"
+#~ msgstr ""
 
 #: src/app/routes/_authenticated/_orders/hooks/use-refund-order.ts
 msgid "Refund processed successfully"
@@ -3324,11 +3355,9 @@ msgstr "تعيين"
 msgid "Successfully created seller"
 msgstr "تم إنشاء البائع بنجاح"
 
-#. placeholder {0}: failedChannelIds.length
-#. placeholder {1}: selectedChannelIds.length
 #: src/lib/components/shared/assign-to-channel-dialog.tsx
-msgid "Failed to assign {entityIdsLength} {entityType} to {0} of {1} channels"
-msgstr ""
+#~ msgid "Failed to assign {entityIdsLength} {entityType} to {0} of {1} channels"
+#~ msgstr ""
 
 #: src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx
 msgid "Successfully updated shipping method"
@@ -3450,8 +3479,8 @@ msgid "Shipping Methods"
 msgstr "طرق الشحن"
 
 #: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx
-msgid "Select an address"
-msgstr "حدد عنوانًا"
+#~ msgid "Select an address"
+#~ msgstr "حدد عنوانًا"
 
 #: src/app/routes/_authenticated/_system/settings-store.tsx
 msgid "Yes"
@@ -3508,6 +3537,10 @@ msgstr "لا يساوي"
 #~ msgid "Refresh"
 #~ msgstr "تحديث"
 
+#: src/lib/components/shared/customer-selector.tsx
+msgid "Existing customer"
+msgstr ""
+
 #: src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx
 #~ msgid "e.g. Size"
 #~ msgstr "مثل الحجم"
@@ -3555,6 +3588,10 @@ msgstr "تحديد عنصر"
 msgid "New product"
 msgstr "منتج جديد"
 
+#: src/lib/components/shared/assign-to-channel-dialog.tsx
+msgid "Failed for: {failedCodes}"
+msgstr ""
+
 #: src/app/routes/_authenticated/_assets/components/manage-tags-dialog.tsx
 msgid "Manage Tags"
 msgstr "إدارة العلامات"
@@ -3654,6 +3691,10 @@ msgstr "تم إنشاء قيمة الخاصية بنجاح"
 msgid "Marketing"
 msgstr "التسويق"
 
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx
+msgid "Existing address"
+msgstr ""
+
 #: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx
 msgid "Draft order deleted"
 msgstr "تم حذف طلب المسودة"
@@ -3676,6 +3717,7 @@ msgid "Remove from channel"
 msgstr "إزالة من القناة"
 
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
+#: src/lib/components/shared/customer-selector.tsx
 #: src/lib/components/shared/rich-text-editor/image-dialog.tsx
 msgid "Title"
 msgstr "العنوان"
@@ -3715,6 +3757,13 @@ msgstr "{0} متغير"
 msgid "Failed to settle payment"
 msgstr "فشل تسوية الدفع"
 
+#. placeholder {0}: failed.length
+#. placeholder {1}: failed.length
+#. placeholder {2}: failed.length
+#: src/lib/components/shared/assign-to-channel-dialog.tsx
+msgid "{0, plural, one {Failed to assign {entityIdsLength} {entityType} to {1} channel} other {Failed to assign {entityIdsLength} {entityType} to {2} channels}}"
+msgstr ""
+
 #: src/app/routes/_authenticated/_orders/orders_.$id_.modify.tsx
 msgid "No billing address"
 msgstr "لا يوجد عنوان فوترة"
@@ -4885,6 +4934,10 @@ msgstr "تحرير الأعضاء"
 msgid "Stock on hand"
 msgstr "المخزون المتاح"
 
+#: src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx
+msgid "New address"
+msgstr ""
+
 #: src/lib/components/data-table/data-table-filter-dialog.tsx
 msgid "Filter by {columnId}"
 msgstr "تصفية حسب {columnId}"
@@ -5310,6 +5363,11 @@ msgstr "اللغة الافتراضية"
 msgid "Status"
 msgstr "الحالة"
 
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx
+#: src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx
+msgid "Okay"
+msgstr ""
+
 #: src/lib/components/shared/configurable-operation-multi-selector.tsx
 #: src/lib/components/shared/configurable-operation-selector.tsx
 msgid "No options found"
@@ -5418,6 +5476,7 @@ msgstr "فشل في معالجة الاسترداد"
 #: src/app/routes/_authenticated/_administrators/administrators_.$id.tsx
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
 #: src/app/routes/_authenticated/_profile/profile.tsx
+#: src/lib/components/shared/customer-selector.tsx
 msgid "First name"
 msgstr "الاسم الأول"
 
@@ -6173,6 +6232,7 @@ msgid "Order process"
 msgstr "عملية الطلب"
 
 #: src/app/routes/_authenticated/_customers/customers_.$id.tsx
+#: src/lib/components/shared/customer-selector.tsx
 msgid "Phone number"
 msgstr "رقم الهاتف"