@vendure/dashboard 3.7.2 → 3.7.3-master-202608050305

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -1,8 +1,10 @@
-import { toast } from '@/vdb/components/ui/sonner.js';
+import { useMutation } from '@tanstack/react-query';
 import { ReactNode, useEffect, useState } from 'react';
+import { toast } from '@/vdb/components/ui/sonner.js';
 
 import { ChannelCodeLabel } from '@/vdb/components/shared/channel-code-label.js';
 import { MultiSelect } from '@/vdb/components/shared/multi-select.js';
+import { assignToChannels } from '@/vdb/components/shared/assign-to-channels.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
@@ -14,6 +16,7 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 
 import { useChannel } from '@/vdb/hooks/use-channel.js';
@@ -55,7 +58,6 @@ export function AssignToChannelDialog({
 }: Readonly<AssignToChannelDialogProps>) {
     const { t } = useLingui();
     const [selectedChannelIds, setSelectedChannelIds] = useState<string[]>([]);
-    const [isAssigning, setIsAssigning] = useState(false);
     const { channels, activeChannel } = useChannel();
     const entityIdsLength = entityIds.length;
 
@@ -63,7 +65,7 @@ export function AssignToChannelDialog({
         if (!open) setSelectedChannelIds([]);
     }, [open]);
 
-    // Filter out the currently selected channel from available options
+    // Filter out the currently active channel from available options
     const availableChannels = channels.filter(channel => channel.id !== activeChannel?.id);
 
     const selectItems = availableChannels.map(ch => ({
@@ -72,42 +74,64 @@ export function AssignToChannelDialog({
         display: <ChannelCodeLabel code={ch.code} />,
     }));
 
-    const handleAssign = async () => {
-        setIsAssigning(true);
-        try {
-            const results = await Promise.allSettled(
-                selectedChannelIds.map(channelId =>
-                    mutationFn({ input: buildInput(channelId, additionalData) }),
-                ),
-            );
-
-            const failedChannelIds = results.flatMap((r, i) =>
-                r.status === 'rejected' ? [selectedChannelIds[i]] : [],
-            );
-            const succeededCount = results.length - failedChannelIds.length;
-
-            if (succeededCount > 0) {
-                onSuccess?.();
+    const { mutate, isPending } = useMutation({
+        mutationFn: () =>
+            assignToChannels(
+                selectedChannelIds,
+                channelId => buildInput(channelId, additionalData),
+                mutationFn,
+            ),
+        onSuccess: ({ succeeded, failed }) => {
+            if (failed.length) {
+                console.error('Failed to assign to channels', failed);
             }
 
-            if (failedChannelIds.length === 0) {
+            const failedCodes = failed
+                .map(f => channels.find(c => c.id === f.channelId)?.code ?? f.channelId)
+                .join(', ');
+
+            if (failed.length === 0) {
                 toast.success(
-                    t`Successfully assigned ${entityIdsLength} ${entityType} to ${selectedChannelIds.length} channels`,
+                    plural(succeeded.length, {
+                        one: `Assigned ${entityIdsLength} ${entityType} to ${succeeded.length} channel`,
+                        other: `Assigned ${entityIdsLength} ${entityType} to ${succeeded.length} channels`,
+                    }),
                 );
+                setSelectedChannelIds([]);
+                onSuccess?.();
                 onOpenChange(false);
-            } else {
-                const firstRejected = results.find(r => r.status === 'rejected');
-                const firstReason = firstRejected?.status === 'rejected' ? firstRejected.reason : undefined;
-                const description = firstReason instanceof Error ? firstReason.message : undefined;
-                setSelectedChannelIds(failedChannelIds);
+            } else if (succeeded.length === 0) {
                 toast.error(
-                    t`Failed to assign ${entityIdsLength} ${entityType} to ${failedChannelIds.length} of ${selectedChannelIds.length} channels`,
-                    { description },
+                    plural(failed.length, {
+                        one: `Failed to assign ${entityIdsLength} ${entityType} to ${failed.length} channel`,
+                        other: `Failed to assign ${entityIdsLength} ${entityType} to ${failed.length} channels`,
+                    }),
+                    { description: failedCodes },
+                );
+            } else {
+                toast.warning(
+                    plural(succeeded.length, {
+                        one: `Assigned ${entityIdsLength} ${entityType} to ${succeeded.length} channel`,
+                        other: `Assigned ${entityIdsLength} ${entityType} to ${succeeded.length} channels`,
+                    }),
+                    { description: t`Failed for: ${failedCodes}` },
                 );
+                // Keep the dialog open and narrow the selection to the failures, so retrying
+                // is one click and doesn't re-assign the channels that already succeeded.
+                setSelectedChannelIds(failed.map(f => f.channelId));
+                onSuccess?.();
             }
-        } finally {
-            setIsAssigning(false);
+        },
+        onError: () => {
+            toast.error(t`Failed to assign ${entityIdsLength} ${entityType} to the selected channels`);
+        },
+    });
+
+    const handleAssign = () => {
+        if (selectedChannelIds.length === 0) {
+            return;
         }
+        mutate();
     };
 
     return (
@@ -135,6 +159,7 @@ export function AssignToChannelDialog({
                             onChange={setSelectedChannelIds}
                             placeholder={t`Select one or more channels`}
                             searchPlaceholder={t`Search channels...`}
+                            showSearch
                             className="w-full"
                         />
                     </div>
@@ -144,7 +169,7 @@ export function AssignToChannelDialog({
                     <Button variant="outline" onClick={() => onOpenChange(false)}>
                         <Trans>Cancel</Trans>
                     </Button>
-                    <Button onClick={handleAssign} disabled={selectedChannelIds.length === 0 || isAssigning}>
+                    <Button onClick={handleAssign} disabled={selectedChannelIds.length === 0 || isPending}>
                         <Trans>Assign</Trans>
                     </Button>
                 </DialogFooter>

package/src/lib/components/shared/assign-to-channels.spec.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { assignToChannels } from './assign-to-channels.js';
+
+const buildInput = (channelId: string) => ({ channelId });
+
+describe('assignToChannels', () => {
+    it('reports all successes', async () => {
+        const result = await assignToChannels(['a', 'b'], buildInput, vi.fn().mockResolvedValue({}));
+        expect(result).toEqual({ succeeded: ['a', 'b'], failed: [] });
+    });
+
+    it('reports all failures with their reasons', async () => {
+        const error = new Error('nope');
+        const result = await assignToChannels(['a'], buildInput, vi.fn().mockRejectedValue(error));
+        expect(result.succeeded).toEqual([]);
+        expect(result.failed).toEqual([{ channelId: 'a', reason: error }]);
+    });
+
+    it('records which channels failed on partial failure', async () => {
+        const mutationFn = vi.fn(({ input }) =>
+            input.channelId === 'b' ? Promise.reject(new Error('boom')) : Promise.resolve({}),
+        );
+        const result = await assignToChannels(['a', 'b', 'c'], buildInput, mutationFn);
+        expect(result.succeeded).toEqual(['a', 'c']);
+        expect(result.failed.map(f => f.channelId)).toEqual(['b']);
+    });
+
+    it('continues with remaining channels after a failure', async () => {
+        const mutationFn = vi.fn().mockRejectedValue(new Error('x'));
+        await assignToChannels(['a', 'b', 'c'], buildInput, mutationFn);
+        expect(mutationFn).toHaveBeenCalledTimes(3);
+    });
+
+    it('captures synchronous buildInput errors as failures', async () => {
+        const throwing = () => {
+            throw new Error('bad input');
+        };
+        const result = await assignToChannels(['a'], throwing, vi.fn());
+        expect(result.succeeded).toEqual([]);
+        expect(result.failed.length).toBe(1);
+        expect(result.failed[0].channelId).toBe('a');
+        expect(result.failed[0].reason).toBeInstanceOf(Error);
+    });
+});

package/src/lib/components/shared/assign-to-channels.ts

@@ -0,0 +1,31 @@
+export interface AssignToChannelsResult {
+    succeeded: string[];
+    failed: Array<{ channelId: string; reason: unknown }>;
+}
+
+/**
+ * Sequentially assigns entities to multiple channels via the provided mutation function.
+ *
+ * Sequential execution is intentional: each mutation writes channel relations for the same
+ * entity rows, so a parallel fan-out only buys lock contention and N overlapping reindex jobs.
+ *
+ * @param channelIds - Channel IDs to assign to
+ * @param buildInput - Builds the mutation input for a given channel ID
+ * @param mutationFn - The GraphQL mutation function to call per channel
+ */
+export async function assignToChannels(
+    channelIds: string[],
+    buildInput: (channelId: string) => Record<string, any>,
+    mutationFn: (variables: any) => Promise<unknown>,
+): Promise<AssignToChannelsResult> {
+    const result: AssignToChannelsResult = { succeeded: [], failed: [] };
+    for (const channelId of channelIds) {
+        try {
+            await mutationFn({ input: buildInput(channelId) });
+            result.succeeded.push(channelId);
+        } catch (reason) {
+            result.failed.push({ channelId, reason });
+        }
+    }
+    return result;
+}

package/src/lib/components/shared/customer-address-form.tsx

@@ -49,6 +49,17 @@ interface CustomerAddressFormProps<T = any> {
     setValuesForUpdate?: (values: T) => AddressFormValues;
     onSubmit?: (values: AddressFormValues) => void;
     onCancel?: () => void;
+    /**
+     * @description
+     * Hides the "Default Shipping Address" / "Default Billing Address" checkboxes. Used in contexts
+     * such as draft order creation where the default-address flags are not applicable.
+     */
+    hideDefaultAddressFlags?: boolean;
+    /**
+     * @description
+     * Custom label for the submit button. Defaults to "Save Address".
+     */
+    submitLabel?: React.ReactNode;
 }
 
 export function CustomerAddressForm<T>({
@@ -56,6 +67,8 @@ export function CustomerAddressForm<T>({
     setValuesForUpdate,
     onSubmit,
     onCancel,
+    hideDefaultAddressFlags = false,
+    submitLabel,
 }: CustomerAddressFormProps<T>) {
     const { t } = useLingui();
 
@@ -162,7 +175,7 @@ export function CustomerAddressForm<T>({
                         name="postalCode"
                         label={<Trans>Postal Code</Trans>}
                         render={({ field }) => (
-                            <Input placeholder="Postal Code" {...field} value={field.value || ''} />
+                            <Input placeholder="Postal Code (optional)" {...field} value={field.value || ''} />
                         )}
                     />
 
@@ -208,43 +221,45 @@ export function CustomerAddressForm<T>({
                 {/* Custom Fields */}
                 <CustomFieldsForm entityType="Address" control={form.control} />
                 {/* Default Address Checkboxes */}
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
-                    <Controller
-                        control={form.control}
-                        name="defaultShippingAddress"
-                        render={({ field }) => (
-                            <div className="flex flex-row items-start space-x-3">
-                                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-                                <div className="space-y-1 leading-none">
-                                    <FieldLabel>
-                                        <Trans>Default Shipping Address</Trans>
-                                    </FieldLabel>
-                                    <FieldDescription>
-                                        <Trans>Use as the default shipping address</Trans>
-                                    </FieldDescription>
+                {!hideDefaultAddressFlags && (
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
+                        <Controller
+                            control={form.control}
+                            name="defaultShippingAddress"
+                            render={({ field }) => (
+                                <div className="flex flex-row items-start space-x-3">
+                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                                    <div className="space-y-1 leading-none">
+                                        <FieldLabel>
+                                            <Trans>Default Shipping Address</Trans>
+                                        </FieldLabel>
+                                        <FieldDescription>
+                                            <Trans>Use as the default shipping address</Trans>
+                                        </FieldDescription>
+                                    </div>
                                 </div>
-                            </div>
-                        )}
-                    />
+                            )}
+                        />
 
-                    <Controller
-                        control={form.control}
-                        name="defaultBillingAddress"
-                        render={({ field }) => (
-                            <div className="flex flex-row items-start space-x-3">
-                                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
-                                <div className="space-y-1 leading-none">
-                                    <FieldLabel>
-                                        <Trans>Default Billing Address</Trans>
-                                    </FieldLabel>
-                                    <FieldDescription>
-                                        <Trans>Use as the default billing address</Trans>
-                                    </FieldDescription>
+                        <Controller
+                            control={form.control}
+                            name="defaultBillingAddress"
+                            render={({ field }) => (
+                                <div className="flex flex-row items-start space-x-3">
+                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                                    <div className="space-y-1 leading-none">
+                                        <FieldLabel>
+                                            <Trans>Default Billing Address</Trans>
+                                        </FieldLabel>
+                                        <FieldDescription>
+                                            <Trans>Use as the default billing address</Trans>
+                                        </FieldDescription>
+                                    </div>
                                 </div>
-                            </div>
-                        )}
-                    />
-                </div>
+                            )}
+                        />
+                    </div>
+                )}
 
                 {/* Form Actions */}
                 <div className="flex justify-end gap-2 pt-4">
@@ -254,7 +269,7 @@ export function CustomerAddressForm<T>({
                         </Button>
                     )}
                     <Button type="submit">
-                        <Trans>Save Address</Trans>
+                        {submitLabel ?? <Trans>Save Address</Trans>}
                     </Button>
                 </div>
             </form>

package/src/lib/components/shared/customer-selector.tsx

@@ -6,14 +6,22 @@ import {
     CommandItem,
     CommandList,
 } from '@/vdb/components/ui/command.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
+import { type CreateCustomerInput } from '@/vdb/graphql/common-operations.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
+import { z, zodResolver } from '@/vdb/lib/zod.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
-import { Plus } from 'lucide-react';
+import { Plus, Users } from 'lucide-react';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { CustomFieldsForm } from './custom-fields-form.js';
+import { FormFieldWrapper } from './form-field-wrapper.js';
 
 const customersDocument = graphql(`
     query GetCustomers($options: CustomerListOptions) {
@@ -38,12 +46,31 @@ export interface Customer {
 
 export interface CustomerSelectorProps {
     onSelect: (value: Customer) => void;
+    /**
+     * @description
+     * When enabled, the selector renders a popover with tabs allowing the admin to either select an
+     * existing customer or create a new one inline. When a new customer is submitted, `onCreateNew`
+     * is called with the {@link CreateCustomerInput}.
+     */
+    allowCreateNew?: boolean;
+    onCreateNew?: (input: CreateCustomerInput) => void | Promise<void>;
     label?: string | React.ReactNode;
     readOnly?: boolean;
 }
 
-export function CustomerSelector(props: CustomerSelectorProps) {
-    const [open, setOpen] = useState(false);
+const createCustomerFormSchema = z.object({
+    title: z.string().optional(),
+    firstName: z.string().min(1, { message: 'First name is required' }),
+    lastName: z.string().min(1, { message: 'Last name is required' }),
+    emailAddress: z.string().min(1, { message: 'Email address is required' }).email(),
+    phoneNumber: z.string().optional(),
+    customFields: z.any().optional(),
+});
+
+type CreateCustomerFormValues = z.infer<typeof createCustomerFormSchema>;
+
+function CustomerSearch({ onSelect }: Readonly<{ onSelect: (value: Customer) => void }>) {
+    const { t } = useLingui();
     const [searchTerm, setSearchTerm] = useState('');
     const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
@@ -66,44 +93,199 @@ export function CustomerSelector(props: CustomerSelectorProps) {
         staleTime: 1000 * 60, // 1 minute
     });
 
-    const handleSearch = (value: string) => {
-        setSearchTerm(value);
-    };
+    return (
+        <Command shouldFilter={false}>
+            <CommandInput
+                placeholder={t`Search customers...`}
+                onValueChange={setSearchTerm}
+                className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+            />
+            <CommandList>
+                <CommandEmpty>
+                    {isLoading ? <Trans>Loading...</Trans> : <Trans>No customers found</Trans>}
+                </CommandEmpty>
+                {data?.customers.items.map(customer => (
+                    <CommandItem
+                        key={customer.id}
+                        onSelect={() => onSelect(customer)}
+                        className="flex flex-col items-start"
+                    >
+                        <div className="font-medium">
+                            {customer.firstName} {customer.lastName}
+                        </div>
+                        <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
+                    </CommandItem>
+                ))}
+            </CommandList>
+        </Command>
+    );
+}
+
+function CreateCustomerForm({ onSubmit, onCancel }: Readonly<{ onSubmit: (input: CreateCustomerInput) => void; onCancel?: () => void }>) {
+    const form = useForm<CreateCustomerFormValues>({
+        resolver: zodResolver(createCustomerFormSchema),
+        defaultValues: {
+            title: '',
+            firstName: '',
+            lastName: '',
+            emailAddress: '',
+            phoneNumber: '',
+            customFields: {},
+        },
+        mode: 'onChange',
+    });
 
     return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger render={<Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2" />}>
-                    <Plus className="h-4 w-4" />
-                    {props.label ?? <Trans>Select customer</Trans>}
-            </PopoverTrigger>
-            <PopoverContent className="p-0 w-[350px]" align="start">
-                <Command shouldFilter={false}>
-                    <CommandInput
-                        placeholder="Search customers..."
-                        onValueChange={handleSearch}
-                        className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+        <Form {...form}>
+            <form
+                onSubmit={e => {
+                    e.stopPropagation();
+                    form.handleSubmit(onSubmit)(e).catch(() => undefined);
+                }}
+                className="space-y-4"
+            >
+                <div className="grid grid-cols-1 gap-4">
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="title"
+                        label={<Trans>Title</Trans>}
+                        render={({ field }) => <Input {...field} value={field.value || ''} />}
+                    />
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="firstName"
+                        label={<Trans>First name</Trans>}
+                        render={({ field }) => <Input {...field} value={field.value || ''} />}
+                    />
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="lastName"
+                        label={<Trans>Last name</Trans>}
+                        render={({ field }) => <Input {...field} value={field.value || ''} />}
+                    />
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="emailAddress"
+                        label={<Trans>Email address</Trans>}
+                        render={({ field }) => <Input {...field} value={field.value || ''} />}
+                    />
+                    <FormFieldWrapper
+                        control={form.control}
+                        name="phoneNumber"
+                        label={<Trans>Phone number</Trans>}
+                        render={({ field }) => <Input {...field} value={field.value || ''} />}
                     />
-                    <CommandList>
-                        <CommandEmpty>
-                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No customers found</Trans>}
-                        </CommandEmpty>
-                        {data?.customers.items.map(customer => (
-                            <CommandItem
-                                key={customer.id}
-                                onSelect={() => {
-                                    props.onSelect(customer);
-                                    setOpen(false);
-                                }}
-                                className="flex flex-col items-start"
-                            >
-                                <div className="font-medium">
-                                    {customer.firstName} {customer.lastName}
-                                </div>
-                                <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
-                            </CommandItem>
-                        ))}
-                    </CommandList>
-                </Command>
+                </div>
+                <CustomFieldsForm entityType="Customer" control={form.control} />
+                <div className="flex justify-end gap-2 pt-2">
+                    {onCancel && (
+                        <Button type="button" variant="outline" onClick={onCancel}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                    )}
+                    <Button type="submit" disabled={!form.formState.isValid}>
+                        <Trans>Create customer</Trans>
+                    </Button>
+                </div>
+            </form>
+        </Form>
+    );
+}
+
+export function CustomerSelector(props: CustomerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState<string>('existing');
+
+    const trigger = (
+        <PopoverTrigger
+            render={
+                <Button
+                    variant="outline"
+                    size="sm"
+                    type="button"
+                    disabled={props.readOnly}
+                    className="gap-2"
+                />
+            }
+        >
+            <Plus className="h-4 w-4" />
+            {props.label ?? <Trans>Select customer</Trans>}
+        </PopoverTrigger>
+    );
+
+    // When inline creation is not enabled, preserve the original lightweight popover behaviour.
+    if (!props.allowCreateNew) {
+        return (
+            <Popover open={open} onOpenChange={setOpen}>
+                {trigger}
+                <PopoverContent className="p-0 w-[350px]" align="start">
+                    <CustomerSearch
+                        onSelect={customer => {
+                            props.onSelect(customer);
+                            setOpen(false);
+                        }}
+                    />
+                </PopoverContent>
+            </Popover>
+        );
+    }
+
+    return (
+        <Popover
+            open={open}
+            onOpenChange={(isOpen, eventDetails) => {
+                // While the create tab is open, only our own submit/cancel may close the popover
+                if (!isOpen && activeTab === 'new') {
+                    return eventDetails.cancel();
+                }
+                setOpen(isOpen);
+                if (!isOpen) {
+                    setActiveTab('existing');
+                }
+            }}
+        >
+            {trigger}
+            <PopoverContent className="w-[420px] p-0" align="start">
+                <div className="p-4">
+                    <Tabs value={activeTab} onValueChange={setActiveTab}>
+                        <TabsList className="grid w-full grid-cols-2">
+                            <TabsTrigger value="existing">
+                                <Users className="mr-2 h-4 w-4" />
+                                <Trans>Existing customer</Trans>
+                            </TabsTrigger>
+                            <TabsTrigger value="new">
+                                <Plus className="mr-2 h-4 w-4" />
+                                <Trans>Create new customer</Trans>
+                            </TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="existing">
+                            <div className="mt-2 rounded-md border">
+                                <CustomerSearch
+                                    onSelect={customer => {
+                                        props.onSelect(customer);
+                                        setOpen(false);
+                                        setActiveTab('existing');
+                                    }}
+                                />
+                            </div>
+                        </TabsContent>
+                        <TabsContent value="new">
+                            <div className="mt-2">
+                                <CreateCustomerForm
+                                    onSubmit={async input => {
+                                        await props.onCreateNew?.(input);
+                                        setOpen(false);
+                                        setActiveTab('existing');
+                                    }}
+                                    onCancel={() => {
+                                        setOpen(false);
+                                        setActiveTab('existing');
+                                    }}
+                                />
+                            </div>
+                        </TabsContent>
+                    </Tabs>
+                </div>
             </PopoverContent>
         </Popover>
     );