@vendure/dashboard 3.2.0

package/src/lib/components/shared/confirmation-dialog.tsx

@@ -0,0 +1,58 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog.js';
+import { Trans } from '@/lib/trans.js';
+import { useState } from 'react';
+
+export function ConfirmationDialog({
+    title,
+    description,
+    onConfirm,
+    children,
+    confirmText,
+    cancelText,
+}: {
+    title: string;
+    description: string;
+    onConfirm: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    children: React.ReactNode;
+}) {
+    const [open, setOpen] = useState(false);
+    return (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+            <AlertDialogTrigger asChild onClick={() => setOpen(true)}>
+                {children}
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription>{description}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={() => setOpen(false)}>
+                        {cancelText ?? <Trans>Cancel</Trans>}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        type="button"
+                        onClick={() => {
+                            onConfirm();
+                            setOpen(false);
+                        }}
+                    >
+                        {confirmText ?? <Trans>Continue</Trans>}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

package/src/lib/components/shared/copyable-text.tsx

@@ -0,0 +1,31 @@
+import { useCopyToClipboard } from '@uidotdev/usehooks';
+import { CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+import { CheckIcon } from 'lucide-react';
+
+export function CopyableText({ text }: { text: string }) {
+    const [copiedId, setCopiedId] = useState<string | null>(null);
+    const [, copy] = useCopyToClipboard();
+
+    const handleCopy = async (text: string, id: string) => {
+        await copy(text);
+        setCopiedId(id);
+        setTimeout(() => setCopiedId(null), 2000);
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <div className="font-mono text-sm">{text}</div>
+            <button
+                onClick={() => handleCopy(text, 'page')}
+                className="p-1 hover:bg-muted rounded-md transition-colors"
+            >
+                {copiedId === 'page' ? (
+                    <CheckIcon className="h-4 w-4 text-green-500" />
+                ) : (
+                    <CopyIcon className="h-4 w-4" />
+                )}
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,105 @@
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const countryListDocument = graphql(`
+    query CountryList($options: CountryListOptions) {
+        countries(options: $options) {
+            items {
+                id
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Country {
+    id: string;
+    name: string;
+    code: string;
+}
+
+export interface CountrySelectorProps {
+    onSelect: (value: Country) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function CountrySelector(props: CountrySelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['countries', searchTerm],
+        queryFn: () =>
+            api.query(countryListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm ? {
+                        name: { contains: searchTerm },
+                        code: { contains: searchTerm },
+                    } : undefined,
+                    filterOperator: searchTerm ? 'OR' : undefined,
+                },
+            }),
+        staleTime: 1000 * 60 * 60, // 1 hour
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {props.label ?? <Trans>Select country</Trans>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                        <CommandInput 
+                            placeholder="Search countries..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No countries found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.countries.items.map(country => (
+                            <CommandItem
+                                key={country.id}
+                                onSelect={() => {
+                                    props.onSelect(country);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{country.name}</div>
+                                <div className="text-sm text-muted-foreground">{country.code}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}
+

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

@@ -0,0 +1,33 @@
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { CurrencyCode } from '@/constants.js';
+import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
+
+export interface CurrencySelectorProps<T extends boolean> {    
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    availableCurrencyCodes?: string[];
+}
+
+export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps<T>) {
+    const { formatCurrencyName } = useLocalFormat();
+    const { value, onChange, multiple, availableCurrencyCodes } = props;
+    const { i18n } = useLingui();
+
+    const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
+        value: currencyCode,
+        label: formatCurrencyName(currencyCode)
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a currency')}
+            searchPlaceholder={i18n.t('Search currencies...')}
+        />
+    );
+}

package/src/lib/components/shared/custom-fields-form.tsx

@@ -0,0 +1,86 @@
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
+import { Control, ControllerRenderProps } from 'react-hook-form';
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Switch } from '../ui/switch.js';
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
+import { TranslatableFormField } from './translatable-form-field.js';
+import { customFieldConfigFragment } from '@/providers/server-config.js';
+import { ResultOf } from 'gql.tada';
+
+type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
+
+interface CustomFieldsFormProps {
+    entityType: string;
+    control: Control<any, any>;
+}
+
+export function CustomFieldsForm({ entityType, control }: CustomFieldsFormProps) {
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
+    }
+    const customFields = useCustomFieldConfig(entityType);
+    return (
+        <div className="grid grid-cols-2 gap-4">
+            {customFields?.map(fieldDef => (
+                <div key={fieldDef.name}>
+                    {fieldDef.type === 'localeString' || fieldDef.type === 'localeText' ? (
+                        <TranslatableFormField
+                            control={control}
+                            name={`customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                    <FormControl>
+                                        {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    ) : (
+                        <FormField
+                            control={control}
+                            name={`customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                <FormControl>
+                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                </FormControl>
+                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                            )}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
+    switch (fieldDef.type as CustomFieldType) {    
+        case 'string':
+            return <Input {...field} />;
+        case 'float':
+        case 'int':
+            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
+        case 'boolean':
+            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
+        default:
+            return <Input {...field} />
+    }
+}

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

@@ -0,0 +1,330 @@
+import { Button } from '@vendure/dashboard';
+import { Checkbox } from '@vendure/dashboard';
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@vendure/dashboard';
+import { Input } from '@vendure/dashboard';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@vendure/dashboard';
+import { api } from '@vendure/dashboard';
+import { graphql } from '@vendure/dashboard';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+// 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<T = any> {
+    address?: T;
+    setValuesForUpdate?: (values: T) => AddressFormValues;
+    onSubmit?: (values: AddressFormValues) => void;
+    onCancel?: () => void;
+}
+
+export function CustomerAddressForm<T>({ address, setValuesForUpdate, onSubmit, onCancel }: CustomerAddressFormProps<T>) {
+    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: address ? setValuesForUpdate?.(address) : undefined,
+    });
+
+    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/lib/components/shared/customer-group-chip.tsx

@@ -0,0 +1,30 @@
+import { X } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+
+export function CustomerGroupChip({
+    group,
+    onRemove,
+}: {
+    group: { id: string; name: string };
+    onRemove?: (id: string) => void;
+}) {
+    return (
+        <Badge
+            key={group.id}
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            {group.name}
+            {onRemove && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30"
+                    onClick={() => onRemove(group.id)}
+                    aria-label={`Remove ${group.name}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}