@vendure/dashboard 3.2.0

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -0,0 +1,155 @@
+import { ResultOf } from '@/graphql/graphql.js';
+
+import { addressFragment, deleteCustomerAddressDocument, updateCustomerAddressDocument } from '../customers.graphql.js';
+import {
+    DialogContent,
+    Dialog,
+    DialogTrigger,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from '@/components/ui/dialog.js';
+import { Trans } from '@/lib/trans.js';
+import { useLingui } from '@/lib/trans.js';
+import { AddressFormValues, CustomerAddressForm } from './customer-address-form.js';
+import { EditIcon, TrashIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge.js';
+import { api } from '@/graphql/api.js';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog.js';
+
+export function CustomerAddressCard({
+    address,
+    editable = false,
+    deletable = false,
+    onUpdate,
+    onDelete,
+}: {
+    address: ResultOf<typeof addressFragment>;
+    editable?: boolean;
+    deletable?: boolean;
+    onUpdate?: () => void;
+    onDelete?: () => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const { i18n } = useLingui();
+    const { mutate: deleteAddress } = useMutation({
+        mutationFn: api.mutate(deleteCustomerAddressDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Address deleted successfully'));
+            onDelete?.();
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to delete address'));
+        },
+    }); 
+    
+    // Set up mutation for updating address
+    const { mutate: updateAddress } = useMutation({
+        mutationFn: api.mutate(updateCustomerAddressDocument),
+        onSuccess: () => {
+            toast.success(i18n.t('Address updated successfully'));
+            onUpdate?.();
+        },
+        onError: error => {
+            toast.error(i18n.t('Failed to update address'));
+            console.error('Error updating address:', error);
+        },
+    });
+
+    // Form submission handler
+    const onSubmit = (values: AddressFormValues) => {
+        // Type assertion to handle the mutation parameters
+        updateAddress({
+            input: {
+                id: values.id,
+                fullName: values.fullName,
+                company: values.company,
+                streetLine1: values.streetLine1,
+                streetLine2: values.streetLine2,
+                city: values.city,
+                province: values.province,
+                postalCode: values.postalCode,
+                countryCode: values.countryCode,
+                phoneNumber: values.phoneNumber,
+                defaultShippingAddress: values.defaultShippingAddress,
+                defaultBillingAddress: values.defaultBillingAddress,
+                customFields: values.customFields,
+            },
+        } as any);
+        setOpen(false);
+    };
+
+    return (
+        <div className="border border-border rounded-md p-4 relative text-sm">
+            {(address.defaultShippingAddress || address.defaultBillingAddress) && (
+                <div className="flex flex-wrap gap-1 mb-2">
+                    {address.defaultShippingAddress && (
+                        <Badge className="text-xs px-2 py-1 bg-primary/10 text-primary rounded-md">
+                            Default Shipping
+                        </Badge>
+                    )}
+                    {address.defaultBillingAddress && (
+                        <Badge className="text-xs px-2 py-1 bg-primary/10 text-primary rounded-md">
+                            Default Billing
+                        </Badge>
+                    )}
+                </div>
+            )}
+
+            <div className="flex flex-col gap-1">
+                <div className="font-semibold">{address.fullName}</div>
+                {address.company && <div>{address.company}</div>}
+                <div>{address.streetLine1}</div>
+                {address.streetLine2 && <div>{address.streetLine2}</div>}
+                <div>
+                    {address.city}
+                    {address.province && `, ${address.province}`}
+                </div>
+                <div>{address.postalCode}</div>
+                <div>{address.country.name}</div>
+                {address.phoneNumber && <div>{address.phoneNumber}</div>}
+            </div>
+
+            {(editable || deletable) && (
+                <div className="flex gap-4 mt-3 pt-3 border-t border-border">
+                    {editable && (
+                        <Dialog open={open} onOpenChange={setOpen}>
+                            <DialogTrigger>
+                                <EditIcon className="w-4 h-4" />
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>
+                                        <Trans>Edit Address</Trans>
+                                    </DialogTitle>
+                                    <DialogDescription>
+                                        <Trans>Edit the address details below.</Trans>
+                                    </DialogDescription>
+                                </DialogHeader>
+                                <CustomerAddressForm
+                                    address={address}
+                                    onSubmit={onSubmit}
+                                />
+                            </DialogContent>
+                        </Dialog>
+                    )}
+                    {deletable && (
+                        <ConfirmationDialog
+                            title={i18n.t('Delete Address')}
+                            description={i18n.t('Are you sure you want to delete this address?')}
+                            onConfirm={() => {
+                                deleteAddress({ id: address.id });
+                                onDelete?.();
+                            }}
+                        >
+                            <TrashIcon className="w-4 h-4 text-destructive" />
+                        </ConfirmationDialog>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_customers/components/customer-address-form.tsx

@@ -0,0 +1,344 @@
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ControllerRenderProps, FieldPath, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { addressFragment } from '../customers.graphql.js';
+
+// Query document to fetch available countries
+const getAvailableCountriesDocument = graphql(`
+    query GetAvailableCountries {
+        countries(options: { filter: { enabled: { eq: true } } }) {
+            items {
+                id
+                code
+                name
+            }
+        }
+    }
+`);
+
+// Define the form schema using zod
+const addressFormSchema = z.object({
+    id: z.string(),
+    fullName: z.string().optional(),
+    company: z.string().optional(),
+    streetLine1: z.string().min(1, { message: 'Street address is required' }),
+    streetLine2: z.string().optional(),
+    city: z.string().min(1, { message: 'City is required' }),
+    province: z.string().optional(),
+    postalCode: z.string().optional(),
+    countryCode: z.string().min(1, { message: 'Country is required' }),
+    phoneNumber: z.string().optional(),
+    defaultShippingAddress: z.boolean().default(false),
+    defaultBillingAddress: z.boolean().default(false),
+    customFields: z.any().optional(),
+});
+
+export type AddressFormValues = z.infer<typeof addressFormSchema>;
+
+interface CustomerAddressFormProps {
+    address?: ResultOf<typeof addressFragment>;
+    onSubmit?: (values: AddressFormValues) => void;
+    onCancel?: () => void;
+}
+
+export function CustomerAddressForm({ address, onSubmit, onCancel }: CustomerAddressFormProps) {
+    const { i18n } = useLingui();
+
+    // Fetch available countries
+    const { data: countriesData, isLoading: isLoadingCountries } = useQuery({
+        queryKey: ['availableCountries'],
+        queryFn: () => api.query(getAvailableCountriesDocument),
+        staleTime: 1000 * 60 * 60 * 24, // 24 hours
+    });
+
+    // Set up form with react-hook-form and zod
+    const form = useForm<AddressFormValues>({
+        resolver: zodResolver(addressFormSchema),
+        values: {
+            id: address?.id || '',
+            fullName: address?.fullName || '',
+            company: address?.company || '',
+            streetLine1: address?.streetLine1 || '',
+            streetLine2: address?.streetLine2 || '',
+            city: address?.city || '',
+            province: address?.province || '',
+            postalCode: address?.postalCode || '',
+            countryCode: address?.country.code || '',
+            phoneNumber: address?.phoneNumber || '',
+            defaultShippingAddress: address?.defaultShippingAddress || false,
+            defaultBillingAddress: address?.defaultBillingAddress || false,
+            customFields: (address as any)?.customFields || {},
+        },
+    });
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={e => {
+                    e.stopPropagation();
+                    onSubmit && form.handleSubmit(onSubmit)(e);
+                }}
+                className="space-y-4"
+            >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {/* Full Name */}
+                    <FormField
+                        control={form.control}
+                        name="fullName"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Full Name</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input placeholder="John Doe" {...field} value={field.value || ''} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Company */}
+                    <FormField
+                        control={form.control}
+                        name="company"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Company</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input
+                                        placeholder="Company (optional)"
+                                        {...field}
+                                        value={field.value || ''}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Street Line 1 */}
+                    <FormField
+                        control={form.control}
+                        name="streetLine1"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Street Address</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input placeholder="123 Main St" {...field} value={field.value || ''} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Street Line 2 */}
+                    <FormField
+                        control={form.control}
+                        name="streetLine2"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Apartment, suite, etc.</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input
+                                        placeholder="Apt 4B (optional)"
+                                        {...field}
+                                        value={field.value || ''}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* City */}
+                    <FormField
+                        control={form.control}
+                        name="city"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>City</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input placeholder="City" {...field} value={field.value || ''} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Province/State */}
+                    <FormField
+                        control={form.control}
+                        name="province"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>State/Province</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input
+                                        placeholder="State/Province (optional)"
+                                        {...field}
+                                        value={field.value || ''}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Postal Code */}
+                    <FormField
+                        control={form.control}
+                        name="postalCode"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Postal Code</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input placeholder="Postal Code" {...field} value={field.value || ''} />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Country */}
+                    <FormField
+                        control={form.control}
+                        name="countryCode"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Country</Trans>
+                                </FormLabel>
+                                <Select
+                                    onValueChange={field.onChange}
+                                    defaultValue={field.value || undefined}
+                                    value={field.value || undefined}
+                                    disabled={isLoadingCountries}
+                                >
+                                    <FormControl>
+                                        <SelectTrigger>
+                                            <SelectValue placeholder={i18n.t('Select a country')} />
+                                        </SelectTrigger>
+                                    </FormControl>
+                                    <SelectContent>
+                                        {countriesData?.countries.items.map(country => (
+                                            <SelectItem key={country.code} value={country.code}>
+                                                {country.name}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* Phone Number */}
+                    <FormField
+                        control={form.control}
+                        name="phoneNumber"
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>
+                                    <Trans>Phone Number</Trans>
+                                </FormLabel>
+                                <FormControl>
+                                    <Input
+                                        placeholder="Phone (optional)"
+                                        {...field}
+                                        value={field.value || ''}
+                                    />
+                                </FormControl>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* Default Address Checkboxes */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
+                    <FormField
+                        control={form.control}
+                        name="defaultShippingAddress"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                                <FormControl>
+                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                                </FormControl>
+                                <div className="space-y-1 leading-none">
+                                    <FormLabel>
+                                        <Trans>Default Shipping Address</Trans>
+                                    </FormLabel>
+                                    <FormDescription>
+                                        <Trans>Use as the default shipping address</Trans>
+                                    </FormDescription>
+                                </div>
+                            </FormItem>
+                        )}
+                    />
+
+                    <FormField
+                        control={form.control}
+                        name="defaultBillingAddress"
+                        render={({ field }) => (
+                            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                                <FormControl>
+                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                                </FormControl>
+                                <div className="space-y-1 leading-none">
+                                    <FormLabel>
+                                        <Trans>Default Billing Address</Trans>
+                                    </FormLabel>
+                                    <FormDescription>
+                                        <Trans>Use as the default billing address</Trans>
+                                    </FormDescription>
+                                </div>
+                            </FormItem>
+                        )}
+                    />
+                </div>
+
+                {/* Form Actions */}
+                <div className="flex justify-end gap-2 pt-4">
+                    {onCancel && (
+                        <Button type="button" variant="outline" onClick={onCancel}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                    )}
+                    <Button type="submit">
+                        <Trans>Save Address</Trans>
+                    </Button>
+                </div>
+            </form>
+        </Form>
+    );
+}

package/src/app/routes/_authenticated/_customers/components/customer-group-controls.tsx

@@ -0,0 +1,4 @@
+export function CustomerGroupControls() {
+    return <div>CustomerGroupControls</div>;
+}
+

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-container.tsx

@@ -0,0 +1,78 @@
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
+import { Trans } from '@/lib/trans.js';
+import { TriangleAlert } from 'lucide-react';
+import { CustomerHistory } from './customer-history.js';
+import { useCustomerHistory } from './use-customer-history.js';
+import { Button } from '@/components/ui/button.js';
+
+interface CustomerHistoryContainerProps {
+    customerId: string;
+}
+
+export function CustomerHistoryContainer({ customerId }: CustomerHistoryContainerProps) {
+    const {
+        historyEntries,
+        customer,
+        loading,
+        error,
+        addNote,
+        updateNote,
+        deleteNote,
+        fetchNextPage,
+        hasNextPage,
+    } = useCustomerHistory({ customerId, pageSize: 10 });
+
+    if (loading && !customer) {
+        return (
+            <div className="space-y-4">
+                <h2 className="text-xl font-semibold">
+                    <Trans>Customer history</Trans>
+                </h2>
+                <div className="space-y-2">
+                    <Skeleton className="h-20 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                    <Skeleton className="h-24 w-full" />
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <Alert variant="destructive">
+                <TriangleAlert className="h-4 w-4" />
+                <AlertDescription>
+                    <Trans>Error loading customer history: {error.message}</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (!customer) {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <Trans>Customer not found</Trans>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    return (
+        <>
+            <CustomerHistory
+                customer={customer}
+                historyEntries={historyEntries ?? []}
+                onAddNote={addNote}
+                onUpdateNote={updateNote}
+                onDeleteNote={deleteNote}
+            />
+            {hasNextPage && (
+                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+                    <Trans>Load more</Trans>
+                </Button>
+            )}
+        </>
+    );
+}

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history.tsx

@@ -0,0 +1,77 @@
+import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Trans } from '@/lib/trans.js';
+import { CheckIcon, SquarePen } from 'lucide-react';
+
+interface CustomerHistoryProps {
+    customer: {
+        id: string;
+    };
+    historyEntries: Array<HistoryEntryItem>;
+    onAddNote: (note: string, isPrivate: boolean) => void;
+    onUpdateNote?: (entryId: string, note: string, isPrivate: boolean) => void;
+    onDeleteNote?: (entryId: string) => void;
+}
+
+export function CustomerHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: CustomerHistoryProps) {
+    const getTimelineIcon = (entry: CustomerHistoryProps['historyEntries'][0]) => {
+        switch (entry.type) {
+            case 'CUSTOMER_NOTE':
+                return <SquarePen className="h-4 w-4" />;
+            default:
+                return <CheckIcon className="h-4 w-4" />;
+        }
+    };
+
+    const getTitle = (entry: CustomerHistoryProps['historyEntries'][0]) => {
+        switch (entry.type) {
+            case 'CUSTOMER_NOTE':
+                return <Trans>Note added</Trans>;
+            default:
+                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+        }
+    };
+
+    return (
+        <div className="">
+            <div className="mb-4">
+                <HistoryNoteInput onAddNote={onAddNote} />
+            </div>
+            <HistoryTimeline onEditNote={onUpdateNote} onDeleteNote={onDeleteNote}>
+                {historyEntries.map(entry => (
+                    <HistoryEntry
+                        key={entry.id}
+                        entry={entry}
+                        isNoteEntry={entry.type === 'CUSTOMER_NOTE'}
+                        timelineIcon={getTimelineIcon(entry)}
+                        title={getTitle(entry)}
+                    >
+                        {entry.type === 'CUSTOMER_NOTE' && (
+                            <div className="flex items-center space-x-2">
+                                <Badge variant={entry.isPublic ? 'outline' : 'secondary'} className="text-xs">
+                                    {entry.isPublic ? 'Public' : 'Private'}
+                                </Badge>
+                                <span>{entry.data.note}</span>
+                            </div>
+                        )}
+                        <div className="text-sm text-muted-foreground">
+                            {entry.type === 'CUSTOMER_NOTE' && (
+                                <Trans>
+                                    From {entry.data.from} to {entry.data.to}
+                                </Trans>
+                            )}
+                            {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                <Trans>
+                                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                                </Trans>
+                            )}
+                        </div>
+                    </HistoryEntry>
+                ))}
+                
+            </HistoryTimeline>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_customers/components/customer-history/index.ts

@@ -0,0 +1,3 @@
+export * from './customer-history.js';
+export * from './customer-history-container.js';
+export * from './use-customer-history.js';