@leandrosk/dashboard 3.5.5

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

@@ -0,0 +1,33 @@
+import { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@lingui/react/macro';
+import { MultiSelect } from './multi-select.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 { t } = 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={t`Select a currency`}
+            searchPlaceholder={t`Search currencies...`}
+        />
+    );
+}

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

@@ -0,0 +1,305 @@
+import { CustomFieldListInput } from '@/vdb/components/data-input/custom-field-list-input.js';
+import { StructFormInput } from '@/vdb/components/data-input/struct-form-input.js';
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/vdb/components/ui/form.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
+import { ConfigurableFieldDef } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
+import { useLingui } from '@lingui/react/macro';
+import { ResultOf } from 'gql.tada';
+import React, { useMemo } from 'react';
+import { Control } from 'react-hook-form';
+import { FormControlAdapter } from '../../framework/form-engine/form-control-adapter.js';
+import { TranslatableFormField } from './translatable-form-field.js';
+
+type CustomFieldConfig = Omit<ResultOf<typeof customFieldConfigFragment>, '__typename'>;
+
+interface CustomFieldsFormProps {
+    entityType: string;
+    control: Control<any, any>;
+    formPathPrefix?: string;
+    disabled?: boolean;
+}
+
+export function CustomFieldsForm({ entityType, control, formPathPrefix, disabled }: Readonly<CustomFieldsFormProps>) {
+    const { t } = useLingui();
+    const customFields = useCustomFieldConfig(entityType);
+
+    const getCustomFieldBaseName = (fieldDef: CustomFieldConfig) => {
+        if (fieldDef.type !== 'relation') {
+            return fieldDef.name;
+        }
+        return fieldDef.list ? fieldDef.name + 'Ids' : fieldDef.name + 'Id';
+    };
+
+    const getFieldName = (fieldDef: CustomFieldConfig) => {
+        const name = getCustomFieldBaseName(fieldDef);
+        return formPathPrefix ? `${formPathPrefix}.customFields.${name}` : `customFields.${name}`;
+    };
+
+    // Group custom fields by tabs
+    const groupedFields = useMemo(() => {
+        if (!customFields) return [];
+
+        const tabMap = new Map<string, CustomFieldConfig[]>();
+        const defaultTabName = '__default_tab__';
+
+        for (const field of customFields) {
+            const tabName = field.ui?.tab ?? defaultTabName;
+            if (tabMap.has(tabName)) {
+                tabMap.get(tabName)?.push(field);
+            } else {
+                tabMap.set(tabName, [field]);
+            }
+        }
+
+        return Array.from(tabMap.entries())
+            .sort((a, b) => (a[0] === defaultTabName ? -1 : 1))
+            .map(([tabName, customFields]) => ({
+                tabName: tabName === defaultTabName ? 'general' : tabName,
+                customFields,
+            }));
+    }, [customFields]);
+
+    // Check if we should show tabs (more than one tab or at least one field has a tab)
+    const shouldShowTabs = useMemo(() => {
+        if (!customFields) return false;
+        const hasTabbedFields = customFields.some(field => field.ui?.tab);
+        return hasTabbedFields && groupedFields.length > 1;
+    }, [customFields, groupedFields.length]);
+
+    if (!shouldShowTabs) {
+        // Single tab view - use the original grid layout
+        return (
+            <div className="grid @md:grid-cols-2 gap-6">
+                {customFields?.map(fieldDef => (
+                    <CustomFieldItem
+                        key={fieldDef.name}
+                        fieldDef={fieldDef}
+                        control={control}
+                        fieldName={getFieldName(fieldDef)}
+                        disabled={disabled}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    // Tabbed view
+    return (
+        <Tabs defaultValue={groupedFields[0]?.tabName} className="w-full">
+            <TabsList className="h-auto w-full flex-wrap justify-start">
+                {groupedFields.map(group => (
+                    <TabsTrigger key={group.tabName} value={group.tabName}>
+                        {group.tabName === 'general' ? t`General` : group.tabName}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {groupedFields.map(group => (
+                <TabsContent key={group.tabName} value={group.tabName} className="mt-4">
+                    <div className="grid @md:grid-cols-2 gap-6">
+                        {group.customFields.map(fieldDef => (
+                            <CustomFieldItem
+                                key={fieldDef.name}
+                                fieldDef={fieldDef}
+                                control={control}
+                                fieldName={getFieldName(fieldDef)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    </div>
+                </TabsContent>
+            ))}
+        </Tabs>
+    );
+}
+
+interface CustomFieldItemProps {
+    fieldDef: ConfigurableFieldDef;
+    control: Control<any>;
+    fieldName: string;
+    disabled?: boolean;
+}
+
+function CustomFieldItem({ fieldDef, control, fieldName, disabled }: Readonly<CustomFieldItemProps>) {
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+
+    const getTranslation = (
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => {
+        if (typeof input === 'string') {
+            return input;
+        }
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
+    };
+    const hasCustomFormComponent = fieldDef.ui?.component;
+    const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
+    const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
+    const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
+    const isReadonly = (fieldDef as CustomFieldConfig).readonly ?? false;
+
+    // For locale fields, always use TranslatableFormField regardless of custom components
+    if (isLocaleField) {
+        return (
+            <div className={containerClassName}>
+                <TranslatableFormField
+                    control={control}
+                    name={fieldName}
+                    disabled={disabled}
+                    render={({ field, ...props }) => (
+                        <FormItem>
+                            <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                            <FormControl>
+                                {hasCustomFormComponent ? (
+                                    <CustomFormComponent fieldDef={fieldDef} {...field} />
+                                ) : (
+                                    <FormControlAdapter
+                                        fieldDef={fieldDef}
+                                        field={field}
+                                        valueMode="native"
+                                    />
+                                )}
+                            </FormControl>
+                            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
+        );
+    }
+
+    // For non-locale fields with custom components
+    if (hasCustomFormComponent) {
+        return (
+            <div className={containerClassName}>
+                <FormField
+                    control={control}
+                    name={fieldName}
+                    disabled={disabled}
+                    render={fieldProps => (
+                        <CustomFieldFormItem
+                            fieldDef={fieldDef}
+                            getTranslation={getTranslation}
+                            fieldName={fieldProps.field.name}
+                        >
+                            <CustomFormComponent fieldDef={fieldDef} {...fieldProps.field} />
+                        </CustomFieldFormItem>
+                    )}
+                />
+            </div>
+        );
+    }
+
+    // For struct fields, use the special struct component
+    if (fieldDef.type === 'struct') {
+        const isList = fieldDef.list ?? false;
+
+        // Handle struct lists - entire struct objects in a list
+        if (isList) {
+            return (
+                <div className={containerClassName}>
+                    <FormField
+                        control={control}
+                        name={fieldName}
+                        disabled={disabled}
+                        render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
+                                <FormControl>
+                                    <CustomFieldListInput
+                                        {...field}
+                                        disabled={isReadonly}
+                                        renderInput={(index, inputField) => (
+                                            <StructFormInput {...inputField} fieldDef={fieldDef} />
+                                        )}
+                                        defaultValue={{}} // Empty struct object as default
+                                    />
+                                </FormControl>
+                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                        )}
+                    />
+                </div>
+            );
+        }
+
+        // Handle single struct fields
+        return (
+            <div className={containerClassName}>
+                <FormField
+                    control={control}
+                    name={fieldName}
+                    disabled={disabled}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
+                            <FormControl>
+                                <StructFormInput {...field} fieldDef={fieldDef} />
+                            </FormControl>
+                            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
+        );
+    }
+
+    // For regular fields without custom components
+    return (
+        <div className={containerClassName}>
+            <FormField
+                control={control}
+                name={fieldName}
+                disabled={disabled}
+                render={({ field }) => (
+                    <CustomFieldFormItem
+                        fieldDef={fieldDef}
+                        getTranslation={getTranslation}
+                        fieldName={fieldDef.name}
+                    >
+                        <FormControlAdapter fieldDef={fieldDef} field={field} valueMode="native" />
+                    </CustomFieldFormItem>
+                )}
+            />
+        </div>
+    );
+}
+
+interface CustomFieldFormItemProps {
+    fieldDef: ConfigurableFieldDef;
+    getTranslation: (
+        input: string | Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+    fieldName: string;
+    children: React.ReactNode;
+}
+
+function CustomFieldFormItem({
+    fieldDef,
+    getTranslation,
+    fieldName,
+    children,
+}: Readonly<CustomFieldFormItemProps>) {
+    return (
+        <FormItem>
+            <FormLabel>{getTranslation(fieldDef.label) ?? fieldName}</FormLabel>
+            <FormControl>{children}</FormControl>
+            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+            <FormMessage />
+        </FormItem>
+    );
+}

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

@@ -0,0 +1,338 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '../ui/form.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+import { CustomFieldsForm } from './custom-fields-form.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<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 { t } = 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={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>
+
+                {/* 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">
+                    <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>
+    );
+}