@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const facetValueFragment = graphql(`
     fragment FacetValue on FacetValue {
@@ -102,3 +102,82 @@ export const deleteFacetDocument = graphql(`
         }
     }
 `);
+
+export const assignFacetsToChannelDocument = graphql(`
+    mutation AssignFacetsToChannel($input: AssignFacetsToChannelInput!) {
+        assignFacetsToChannel(input: $input) {
+            id
+        }
+    }
+`);
+
+export const removeFacetsFromChannelDocument = graphql(`
+    mutation RemoveFacetsFromChannel($input: RemoveFacetsFromChannelInput!) {
+        removeFacetsFromChannel(input: $input) {
+            ... on Facet {
+                id
+            }
+            ... on ErrorResult {
+                message
+            }
+        }
+    }
+`);
+
+export const deleteFacetsDocument = graphql(`
+    mutation DeleteFacets($ids: [ID!]!) {
+        deleteFacets(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const deleteFacetValuesDocument = graphql(`
+    mutation DeleteFacetValues($ids: [ID!]!) {
+        deleteFacetValues(ids: $ids) {
+            result
+            message
+        }
+    }
+`);
+
+export const facetValueDetailDocument = graphql(`
+    query FacetValueDetail($id: ID!) {
+        facetValue(id: $id) {
+            id
+            createdAt
+            updatedAt
+            name
+            code
+            languageCode
+            translations {
+                id
+                languageCode
+                name
+            }
+            facet {
+                id
+                name
+                code
+            }
+            customFields
+        }
+    }
+`);
+
+export const createFacetValueDocument = graphql(`
+    mutation CreateFacetValue($input: CreateFacetValueInput!) {
+        createFacetValue(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateFacetValueDocument = graphql(`
+    mutation UpdateFacetValue($input: UpdateFacetValueInput!) {
+        updateFacetValue(input: $input) {
+            id
+        }
+    }
+`);

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -1,13 +1,19 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { FacetValueChip } from '@/components/shared/facet-value-chip.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
 import { PlusIcon } from 'lucide-react';
+import {
+    AssignFacetsToChannelBulkAction,
+    DeleteFacetsBulkAction,
+    DuplicateFacetsBulkAction,
+    RemoveFacetsFromChannelBulkAction,
+} from './components/facet-bulk-actions.js';
 import { FacetValuesSheet } from './components/facet-values-sheet.js';
 import { deleteFacetDocument, facetListDocument } from './facets.graphql.js';
 
@@ -80,6 +86,24 @@ function FacetListPage() {
                     },
                 };
             }}
+            bulkActions={[
+                {
+                    order: 100,
+                    component: AssignFacetsToChannelBulkAction,
+                },
+                {
+                    order: 200,
+                    component: RemoveFacetsFromChannelBulkAction,
+                },
+                {
+                    order: 300,
+                    component: DuplicateFacetsBulkAction,
+                },
+                {
+                    order: 400,
+                    component: DeleteFacetsBulkAction,
+                },
+            ]}
             route={Route}
         >
             <PageActionBarRight>

package/src/app/routes/_authenticated/_facets/facets_.$facetId.values_.$id.tsx

@@ -0,0 +1,147 @@
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import {
+    CustomFieldsPageBlock,
+    DetailFormGrid,
+    Page,
+    PageActionBar,
+    PageActionBarRight,
+    PageBlock,
+    PageLayout,
+    PageTitle,
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import {
+    createFacetValueDocument,
+    facetValueDetailDocument,
+    updateFacetValueDocument,
+} from './facets.graphql.js';
+import { PageBreadcrumb } from '@/vdb/components/layout/generated-breadcrumbs.js';
+
+const pageId = 'facet-value-detail';
+
+export const Route = createFileRoute('/_authenticated/_facets/facets_/$facetId/values_/$id')({
+    component: FacetValueDetailPage,
+    loader: detailPageRouteLoader({
+        pageId,
+        queryDocument: facetValueDetailDocument,
+        breadcrumb(isNew, entity) {
+            const facetName = entity?.facet.name ?? 'Facet Value';
+            const breadcrumb: PageBreadcrumb[] = [{ path: '/facets', label: 'Facets' }];
+            if (isNew) {
+                breadcrumb.push(<Trans>New facet value</Trans>);
+            } else if (entity) {
+                breadcrumb.push({ path: `/facets/${entity?.facet.id}`, label: facetName }, entity.name);
+            }
+            return breadcrumb;
+        },
+    }),
+    errorComponent: ({ error }) => <ErrorPage message={error.message} />,
+});
+
+function FacetValueDetailPage() {
+    const params = Route.useParams();
+    const navigate = useNavigate();
+    const creatingNewEntity = params.id === NEW_ENTITY_PATH;
+    const { i18n } = useLingui();
+
+    const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
+        queryDocument: facetValueDetailDocument,
+        createDocument: createFacetValueDocument,
+        updateDocument: updateFacetValueDocument,
+        setValuesForUpdate: entity => {
+            return {
+                id: entity.id,
+                code: entity.code,
+                name: entity.name,
+                translations: entity.translations.map(translation => ({
+                    id: translation.id,
+                    languageCode: translation.languageCode,
+                    name: translation.name,
+                    customFields: (translation as any).customFields,
+                })),
+                customFields: entity.customFields as any,
+            };
+        },
+        transformCreateInput: (value): any => {
+            return {
+                ...value,
+                facetId: params.facetId,
+            };
+        },
+        params: { id: params.id },
+        onSuccess: async data => {
+            toast(i18n.t('Successfully updated facet value'));
+            resetForm();
+            const created = Array.isArray(data) ? data[0] : data;
+            if (creatingNewEntity && created) {
+                await navigate({ to: `../$id`, params: { id: (created as any).id } });
+            }
+        },
+        onError: err => {
+            toast(i18n.t('Failed to update facet value'), {
+                description: err instanceof Error ? err.message : 'Unknown error',
+            });
+        },
+    });
+
+    return (
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+            <PageTitle>
+                {creatingNewEntity ? <Trans>New facet value</Trans> : ((entity as any)?.name ?? '')}
+            </PageTitle>
+            <PageActionBar>
+                <PageActionBarRight>
+                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
+                        <Button
+                            type="submit"
+                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                        >
+                            <Trans>Update</Trans>
+                        </Button>
+                    </PermissionGuard>
+                </PageActionBarRight>
+            </PageActionBar>
+            <PageLayout>
+                <PageBlock column="side" blockId="facet-info">
+                    {entity?.facet && (
+                        <div className="space-y-2">
+                            <div className="text-sm font-medium">
+                                <Trans>Facet</Trans>
+                            </div>
+                            <div className="text-sm text-muted-foreground">{entity?.facet.name}</div>
+                            <div className="text-xs text-muted-foreground">{entity?.facet.code}</div>
+                        </div>
+                    )}
+                </PageBlock>
+                <PageBlock column="main" blockId="main-form">
+                    <DetailFormGrid>
+                        <TranslatableFormFieldWrapper
+                            control={form.control}
+                            name="name"
+                            label={<Trans>Name</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                        <FormFieldWrapper
+                            control={form.control}
+                            name="code"
+                            label={<Trans>Code</Trans>}
+                            render={({ field }) => <Input {...field} />}
+                        />
+                    </DetailFormGrid>
+                </PageBlock>
+                <CustomFieldsPageBlock column="main" entityType="FacetValue" control={form.control} />
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated/_facets/facets_.$id.tsx

@@ -1,11 +1,11 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -15,18 +15,21 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { FacetValuesTable } from './components/facet-values-table.js';
 import { createFacetDocument, facetDetailDocument, updateFacetDocument } from './facets.graphql.js';
 
+const pageId = 'facet-detail';
+
 export const Route = createFileRoute('/_authenticated/_facets/facets_/$id')({
     component: FacetDetailPage,
     loader: detailPageRouteLoader({
+        pageId,
         queryDocument: facetDetailDocument,
         breadcrumb(isNew, entity) {
             return [{ path: '/facets', label: 'Facets' }, isNew ? <Trans>New facet</Trans> : entity?.name];
@@ -42,6 +45,7 @@ function FacetDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
+        pageId,
         queryDocument: facetDetailDocument,
         createDocument: createFacetDocument,
         updateDocument: updateFacetDocument,
@@ -82,7 +86,7 @@ function FacetDetailPage() {
     });
 
     return (
-        <Page pageId="facet-detail" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New facet</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

package/src/app/routes/_authenticated/_global-settings/global-settings.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const globalSettingsDocument = graphql(`
     query GlobalSettings {

package/src/app/routes/_authenticated/_global-settings/global-settings.tsx

@@ -1,11 +1,13 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { LanguageSelector } from '@/components/shared/language-selector.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { LanguageSelector } from '@/vdb/components/shared/language-selector.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { extendDetailFormQuery } from '@/vdb/framework/document-extension/extend-detail-form-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -15,21 +17,26 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
 
+const pageId = 'global-settings';
+
 export const Route = createFileRoute('/_authenticated/_global-settings/global-settings')({
     component: GlobalSettingsPage,
     loader: async ({ context }) => {
-        await context.queryClient.ensureQueryData({
-            queryFn: () => api.query(globalSettingsDocument),
-            queryKey: ['DetailPage', 'globalSettings'],
-        });
+        const { extendedQuery: extendedQueryDocument } = extendDetailFormQuery(
+            addCustomFields(globalSettingsDocument),
+            pageId,
+        );
+        await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(extendedQueryDocument, { id: '' }),
+            {},
+        );
         return {
             breadcrumb: [{ path: '/global-settings', label: <Trans>Global settings</Trans> }],
         };
@@ -45,8 +52,9 @@ function GlobalSettingsPage() {
 
     const { form, submitHandler, entity, isPending } = useDetailPage({
         queryDocument: globalSettingsDocument,
-        entityField: 'globalSettings',
+        entityName: 'GlobalSettings',
         updateDocument: updateGlobalSettingsDocument,
+        pageId,
         setValuesForUpdate: entity => {
             return {
                 id: entity.id,
@@ -78,7 +86,7 @@ function GlobalSettingsPage() {
     });
 
     return (
-        <Page pageId="global-settings" form={form} submitHandler={submitHandler}>
+        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
                 <Trans>Global settings</Trans>
             </PageTitle>

package/src/app/routes/_authenticated/_orders/components/add-manual-payment-dialog.tsx

@@ -0,0 +1,191 @@
+import {
+    RelationSelector,
+    createRelationSelectorConfig,
+} from '@/vdb/components/data-input/relation-selector.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+    addManualPaymentToOrderDocument,
+    paymentMethodsDocument
+} from '../orders.graphql.js';
+import { Order } from '../utils/order-types.js';
+import { calculateOutstandingPaymentAmount } from '../utils/order-utils.js';
+
+interface AddManualPaymentDialogProps {
+    order: Order;
+    onSuccess?: () => void;
+}
+
+interface FormData {
+    method: string;
+    transactionId: string;
+}
+
+export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualPaymentDialogProps>) {
+    const { i18n } = useLingui();
+    const { formatCurrency } = useLocalFormat();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const addManualPaymentMutation = useMutation({
+        mutationFn: api.mutate(addManualPaymentToOrderDocument),
+        onSuccess: (result: any) => {
+            const { addManualPaymentToOrder } = result;
+            if (addManualPaymentToOrder.__typename === 'Order') {
+                toast(i18n.t('Successfully added payment to order'));
+                onSuccess?.();
+            } else {
+                toast(i18n.t('Failed to add payment'), {
+                    description: addManualPaymentToOrder.message,
+                });
+            }
+        },
+        onError: error => {
+            toast(i18n.t('Failed to add payment'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const form = useForm<FormData>({
+        defaultValues: {
+            method: '',
+            transactionId: '',
+        },
+    });
+    const method = form.watch('method');
+
+    const handleSubmit = async (data: FormData) => {
+        setIsSubmitting(true);
+        try {
+            addManualPaymentMutation.mutate({
+                input: {
+                    orderId: order.id,
+                    method: data.method,
+                    transactionId: data.transactionId,
+                    metadata: {},
+                },
+            });
+            setOpen(false);
+            form.reset();
+        } catch (error) {
+            toast(i18n.t('Failed to add payment'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleCancel = () => {
+        form.reset();
+        setOpen(false);
+    };
+
+    const outstandingAmount = calculateOutstandingPaymentAmount(order);
+    const currencyCode = order.currencyCode;
+
+    // Create relation selector config for payment methods
+    const paymentMethodSelectorConfig = createRelationSelectorConfig({
+        listQuery: paymentMethodsDocument,
+        idKey: 'code',
+        labelKey: 'name',
+        placeholder: i18n.t('Search payment methods...'),
+        multiple: false,
+        label: (method: any) => `${method.name} (${method.code})`,
+    });
+
+    return (
+        <>
+            <Button
+                onClick={e => {
+                    e.stopPropagation();
+                    setOpen(true);
+                }}
+                className="mr-2"
+            >
+                <Trans>Add payment to order ({formatCurrency(outstandingAmount, currencyCode)})</Trans>
+            </Button>
+            <Dialog open={open}>
+                <DialogContent className="sm:max-w-[500px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Add payment to order</Trans>
+                        </DialogTitle>
+                        <DialogDescription>
+                            <Trans>
+                                Add a manual payment of {formatCurrency(outstandingAmount, currencyCode)}
+                            </Trans>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Form {...form}>
+                        <form onSubmit={e => {
+                            e.stopPropagation();
+                            form.handleSubmit(handleSubmit)(e);
+                        }} className="space-y-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="method"
+                                label={<Trans>Payment method</Trans>}
+                                rules={{ required: i18n.t('Payment method is required') }}
+                                render={({ field }) => (
+                                    <RelationSelector
+                                        config={paymentMethodSelectorConfig}
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        disabled={isSubmitting}
+                                    />
+                                )}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="transactionId"
+                                label={<Trans>Transaction ID</Trans>}
+                                rules={{ required: i18n.t('Transaction ID is required') }}
+                                render={({ field }) => (
+                                    <Input {...field} placeholder={i18n.t('Enter transaction ID')} />
+                                )}
+                            />
+                            <DialogFooter>
+                                <Button type="button" variant="outline" onClick={handleCancel}>
+                                    <Trans>Cancel</Trans>
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    disabled={
+                                        !form.formState.isValid || isSubmitting || !method
+                                    }
+                                >
+                                    {isSubmitting ? (
+                                        <Trans>Adding...</Trans>
+                                    ) : (
+                                        <Trans>
+                                            Add payment ({formatCurrency(outstandingAmount, currencyCode)})
+                                        </Trans>
+                                    )}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/customer-address-selector.tsx

@@ -1,15 +1,14 @@
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Card } from '@/vdb/components/ui/card.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
-import { Trans } from '@/lib/trans.js';
-import { useLingui } from '@/lib/trans.js';
-import { addressFragment } from '../../_customers/customers.graphql.js';
-import { Card } from '@/components/ui/card.js';
-import { cn } from '@/lib/utils.js';
-import { useState } from 'react';
 import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { addressFragment } from '../../_customers/customers.graphql.js';
 
 const getCustomerAddressesDocument = graphql(
     `
@@ -32,8 +31,7 @@ interface CustomerAddressSelectorProps {
     onSelect: (address: ResultOf<typeof addressFragment>) => void;
 }
 
-export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddressSelectorProps) {
-    const { i18n } = useLingui();
+export function CustomerAddressSelector({ customerId, onSelect }: Readonly<CustomerAddressSelectorProps>) {
     const [open, setOpen] = useState(false);
 
     const { data, isLoading } = useQuery<CustomerAddressesQuery>({
@@ -72,9 +70,7 @@ export function CustomerAddressSelector({ customerId, onSelect }: CustomerAddres
                             addresses.map(address => (
                                 <Card
                                     key={address.id}
-                                    className={cn(
-                                        'p-4 cursor-pointer hover:bg-accent transition-colors',
-                                    )}
+                                    className={cn('p-4 cursor-pointer hover:bg-accent transition-colors')}
                                     onClick={() => {
                                         onSelect(address);
                                         setOpen(false);