@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507021511

package/src/lib/components/shared/facet-value-selector.tsx

@@ -1,11 +1,18 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandGroup, 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 { useDebounce } from '@uidotdev/usehooks';
-import { Trans } from '@/lib/trans.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 
@@ -99,13 +106,13 @@ export function FacetValueSelector({
             return api.query(getFacetValueListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for facets based on search
@@ -118,13 +125,13 @@ export function FacetValueSelector({
             return api.query(getFacetListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch }
+                        name: { contains: debouncedSearch },
                     },
-                    take: 100
-                }
+                    take: 100,
+                },
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
     });
 
     // Query for paginated values of a specific facet when expanded
@@ -133,7 +140,7 @@ export function FacetValueSelector({
         isLoading: isLoadingExpandedFacet,
         fetchNextPage,
         hasNextPage,
-        isFetchingNextPage
+        isFetchingNextPage,
     } = useInfiniteQuery({
         queryKey: ['facetValues', expandedFacetId, 'infinite'],
         queryFn: async ({ pageParam = 0 }) => {
@@ -144,7 +151,7 @@ export function FacetValueSelector({
                     sort: { code: 'ASC' },
                     skip: pageParam * pageSize,
                     take: pageSize,
-                }
+                },
             });
             return response.facetValues;
         },
@@ -163,22 +170,23 @@ export function FacetValueSelector({
     const expandedFacetName = expandedFacetValues[0]?.facet.name;
 
     // Group facet values by facet
-    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>((groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
-        const facetId = facetValue.facet.id;
-        if (!groups[facetId]) {
-            groups[facetId] = [];
-        }
-        groups[facetId].push(facetValue);
-        return groups;
-    }, {});
+    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>(
+        (groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
+            const facetId = facetValue.facet.id;
+            if (!groups[facetId]) {
+                groups[facetId] = [];
+            }
+            groups[facetId].push(facetValue);
+            return groups;
+        },
+        {},
+    );
 
     const isLoading = isLoadingFacetValues || isLoadingFacets || isLoadingExpandedFacet;
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
         const target = e.currentTarget;
-        const scrolledToBottom = Math.abs(
-            target.scrollHeight - target.clientHeight - target.scrollTop
-        ) < 1;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
 
         if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
             fetchNextPage();
@@ -188,32 +196,23 @@ export function FacetValueSelector({
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button 
-                    variant="outline" 
-                    size="sm" 
-                    type="button"
-                    disabled={disabled}
-                    className="gap-2"
-                >
+                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
                     <Plus className="h-4 w-4" />
                     <Trans>Add facet values</Trans>
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0 w-[400px]" align="start">
                 <Command shouldFilter={false}>
-                    <CommandInput 
-                        placeholder={placeholder} 
+                    <CommandInput
+                        placeholder={placeholder}
                         value={searchTerm}
-                        onValueChange={(value) => {
+                        onValueChange={value => {
                             setSearchTerm(value);
                             setExpandedFacetId(null);
                         }}
                         disabled={disabled}
                     />
-                    <CommandList 
-                        className="h-[200px] overflow-y-auto" 
-                        onScroll={handleScroll}
-                    >
+                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
                         <CommandEmpty>
                             {debouncedSearch.length < 2 ? (
                                 <Trans>Type at least 2 characters to search...</Trans>
@@ -223,7 +222,7 @@ export function FacetValueSelector({
                                 <Trans>No results found</Trans>
                             )}
                         </CommandEmpty>
-                        
+
                         {expandedFacetId ? (
                             <>
                                 <CommandGroup>
@@ -235,7 +234,7 @@ export function FacetValueSelector({
                                     </CommandItem>
                                 </CommandGroup>
                                 <CommandGroup heading={expandedFacetName}>
-                                    {expandedFacetValues.map((facetValue) => (
+                                    {expandedFacetValues.map(facetValue => (
                                         <CommandItem
                                             key={facetValue.id}
                                             value={facetValue.id}
@@ -265,7 +264,7 @@ export function FacetValueSelector({
                             <>
                                 {facets.length > 0 && (
                                     <CommandGroup heading={<Trans>Facets</Trans>}>
-                                        {facets.map((facet) => (
+                                        {facets.map(facet => (
                                             <CommandItem
                                                 key={facet.id}
                                                 value={`facet-${facet.id}`}
@@ -278,24 +277,26 @@ export function FacetValueSelector({
                                         ))}
                                     </CommandGroup>
                                 )}
-                                
-                                {Object.entries(facetGroups).map(([facetId, values]: [string, FacetValue[]]) => (
-                                    <CommandGroup key={facetId} heading={values[0]?.facet.name}>
-                                        {values.map((facetValue: FacetValue) => (
-                                            <CommandItem
-                                                key={facetValue.id}
-                                                value={facetValue.id}
-                                                onSelect={() => {
-                                                    onValueSelect(facetValue);
-                                                    setSearchTerm('');
-                                                    setOpen(false);
-                                                }}
-                                            >
-                                                {facetValue.name}
-                                            </CommandItem>
-                                        ))}
-                                    </CommandGroup>
-                                ))}
+
+                                {Object.entries(facetGroups).map(
+                                    ([facetId, values]: [string, FacetValue[]]) => (
+                                        <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                            {values.map((facetValue: FacetValue) => (
+                                                <CommandItem
+                                                    key={facetValue.id}
+                                                    value={facetValue.id}
+                                                    onSelect={() => {
+                                                        onValueSelect(facetValue);
+                                                        setSearchTerm('');
+                                                        setOpen(false);
+                                                    }}
+                                                >
+                                                    {facetValue.name}
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                    ),
+                                )}
                             </>
                         )}
                     </CommandList>

package/src/lib/components/shared/history-timeline/history-entry.tsx

@@ -1,13 +1,13 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { Separator } from '@/components/ui/separator.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 import { useCallback } from 'react';
 import { useHistoryTimeline } from './history-timeline.js';

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,5 +1,5 @@
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Trans } from '@/lib/trans.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,9 +6,9 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Textarea } from '@/components/ui/textarea.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button.js';
-import { Textarea } from '@/components/ui/textarea.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-timeline.tsx

@@ -1,5 +1,5 @@
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { useState, createContext, useContext } from 'react';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { createContext, useContext, useState } from 'react';
 import { HistoryNoteEditor } from './history-note-editor.js';
 
 interface HistoryTimelineProps {
@@ -13,7 +13,10 @@ interface HistoryTimelineProps {
 const HistoryTimelineContext = createContext<{
     editNote: (noteId: string, note: string, isPrivate: boolean) => void;
     deleteNote: (noteId: string) => void;
-}>({ editNote: () => {}, deleteNote: () => {} });
+}>({
+    editNote: () => {},
+    deleteNote: () => {},
+});
 
 type NoteEditorNote = { noteId: string; note: string; isPrivate: boolean };
 
@@ -23,23 +26,27 @@ export function useHistoryTimeline() {
 
 export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
     const [noteEditorOpen, setNoteEditorOpen] = useState(false);
-    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({ noteId: '', note: '', isPrivate: true });
+    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({
+        noteId: '',
+        note: '',
+        isPrivate: true,
+    });
 
     const editNote = (noteId: string, note: string, isPrivate: boolean) => {
         setNoteEditorNote({ noteId, note, isPrivate });
         setNoteEditorOpen(true);
-    }
+    };
 
     const deleteNote = (noteId: string) => {
         setNoteEditorNote({ noteId, note: '', isPrivate: true });
-    }
+    };
 
     return (
         <HistoryTimelineContext.Provider value={{ editNote, deleteNote }}>
             <ScrollArea className=" pr-4">
                 <div className="relative">
                     <div className="absolute left-5 top-0 bottom-[44px] w-0.5 bg-gray-200" />
-                {children}
+                    {children}
                 </div>
             </ScrollArea>
             <HistoryNoteEditor

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

@@ -1,9 +1,9 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
 const availableGlobalLanguages = graphql(`
     query AvailableGlobalLanguages {
@@ -32,7 +32,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
-        label: formatLanguageName(language)
+        label: formatLanguageName(language),
     }));
 
     return (

package/src/lib/components/shared/multi-select.tsx

@@ -1,8 +1,8 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Badge } from '@/components/ui/badge.js';
-import { X, ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils.js';
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ChevronDown, X } from 'lucide-react';
 import { useState } from 'react';
 import { Input } from '../ui/input.js';
 

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

@@ -1,9 +1,16 @@
-import { Trans } from '@/lib/trans.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 
 import { Button } from '../ui/button.js';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '../ui/dialog.js';
 
 export interface NavigationConfirmationProps {
     form: UseFormReturn<any>;
@@ -14,11 +21,13 @@ export interface NavigationConfirmationProps {
  */
 export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
     const { proceed, reset, status } = useBlocker({
-        shouldBlockFn: (args) => {
+        shouldBlockFn: args => {
             // When a new entity is being created, we don't want to block navigation
             // to the newly-created entity page.
-            const isNavigatingToNewlyCreatedEntity = args.current.fullPath === args.next.fullPath
-                && args.current.params.id === 'new' && args.next.params.id !== 'new'
+            const isNavigatingToNewlyCreatedEntity =
+                args.current.fullPath === args.next.fullPath &&
+                args.current.params.id === 'new' &&
+                args.next.params.id !== 'new';
             if (isNavigatingToNewlyCreatedEntity) {
                 return false;
             }
@@ -31,14 +40,20 @@ export function NavigationConfirmation(props: Readonly<NavigationConfirmationPro
         <Dialog open={status === 'blocked'} onOpenChange={reset}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle><Trans>Confirm navigation</Trans></DialogTitle>
+                    <DialogTitle>
+                        <Trans>Confirm navigation</Trans>
+                    </DialogTitle>
                     <DialogDescription>
-                        <Trans>Are you sure you want to navigate away from this page? Any unsaved changes will be
-                            lost.</Trans>
+                        <Trans>
+                            Are you sure you want to navigate away from this page? Any unsaved changes will be
+                            lost.
+                        </Trans>
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                    <Button variant="outline" onClick={reset}><Trans>Cancel</Trans></Button>
+                    <Button variant="outline" onClick={reset}>
+                        <Trans>Cancel</Trans>
+                    </Button>
                     <Button type="button" onClick={proceed}>
                         <Trans>Confirm</Trans>
                     </Button>

package/src/lib/components/shared/option-value-input.tsx

@@ -1,10 +1,9 @@
-import { useFieldArray } from "react-hook-form";
-import { useFormContext } from "react-hook-form";
-import { useState } from "react";
-import { Input } from "@/components/ui/input.js";
-import { Button } from "@/components/ui/button.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Plus, X } from "lucide-react";
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 
 interface OptionValue {
     value: string;
@@ -16,12 +15,15 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<string, {
-        enabled: boolean;
-        sku: string;
-        price: string;
-        stock: string;
-    }>;
+    variants: Record<
+        string,
+        {
+            enabled: boolean;
+            sku: string;
+            price: string;
+            stock: string;
+        }
+    >;
 }
 
 interface OptionValueInputProps {
@@ -92,4 +94,4 @@ export function OptionValueInput({ groupIndex, disabled = false }: OptionValueIn
             </div>
         </div>
     );
-}
+}

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -1,12 +1,12 @@
-import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header.js';
-import { DataTable, FacetedFilter } from '@/components/data-table/data-table.js';
+import { DataTableColumnHeader } from '@/vdb/components/data-table/data-table-column-header.js';
+import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
 import {
     FieldInfo,
     getObjectPathToPaginatedList,
     getTypeFieldInfo,
-} from '@/framework/document-introspection/get-document-structure.js';
-import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
-import { api } from '@/graphql/api.js';
+} from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
+import { api } from '@/vdb/graphql/api.js';
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
@@ -20,18 +20,18 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
+} from '@/vdb/components/ui/alert-dialog.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
-import { BulkAction } from '@/framework/data-table/data-table-types.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { useExtendedListQuery } from '@/hooks/use-extended-list-query.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
+import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import {
     ColumnFiltersState,

package/src/lib/components/shared/permission-guard.tsx

@@ -1,5 +1,5 @@
-import { usePermissions } from "@/hooks/use-permissions.js";
-import { Permission } from "@vendure/common/lib/generated-types";
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { Permission } from '@vendure/common/lib/generated-types';
 
 export interface PermissionGuardProps {
     requires: Permission | string | string[] | Permission[];
@@ -11,11 +11,11 @@ export interface PermissionGuardProps {
  * This component is used to protect a route from unauthorized access.
  * It will render the children if the user has the required permissions.
  */
-export function PermissionGuard({ requires, children }: PermissionGuardProps ) {
+export function PermissionGuard({ requires, children }: PermissionGuardProps) {
     const { hasPermissions } = usePermissions();
     const permissions = Array.isArray(requires) ? requires : [requires];
     if (!hasPermissions(permissions)) {
         return null;
     }
     return children;
-}
+}

package/src/lib/components/shared/product-variant-selector.tsx

@@ -1,35 +1,40 @@
-import { Command, CommandEmpty, CommandGroup, 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 { cn } from '@/lib/utils.js';
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
-import { ChevronsUpDown, Plus } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '../ui/button.js';
-import { assetFragment } from '@/graphql/fragments.js';
 import { VendureImage } from './vendure-image.js';
 
-const productVariantListDocument = graphql(`
-    query ProductVariantList($options: ProductVariantListOptions) {
-        productVariants(options: $options) {
-            items {
-                id
-                name
-                sku
-                featuredAsset {
-                    ...Asset
+const productVariantListDocument = graphql(
+    `
+        query ProductVariantList($options: ProductVariantListOptions) {
+            productVariants(options: $options) {
+                items {
+                    id
+                    name
+                    sku
+                    featuredAsset {
+                        ...Asset
+                    }
                 }
+                totalItems
             }
-            totalItems
         }
-    }
-`, [assetFragment]);
+    `,
+    [assetFragment],
+);
 
 export interface ProductVariantSelectorProps {
     onProductVariantIdChange: (productVariantId: string) => void;
@@ -60,11 +65,7 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    className="w-full"
-                >
+                <Button variant="outline" role="combobox" className="w-full">
                     Add item to order
                     <Plus className="opacity-50" />
                 </Button>
@@ -74,12 +75,12 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
                     <CommandInput
                         placeholder="Add item to order..."
                         className="h-9"
-                       onValueChange={(value) => setSearch(value)}
+                        onValueChange={value => setSearch(value)}
                     />
                     <CommandList>
                         <CommandEmpty>No products found.</CommandEmpty>
                         <CommandGroup>
-                            {data?.productVariants.items.map((variant) => (
+                            {data?.productVariants.items.map(variant => (
                                 <CommandItem
                                     key={variant.id}
                                     value={variant.id}
@@ -108,4 +109,4 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
             </PopoverContent>
         </Popover>
     );
-}
+}