@wilshop/dashboard 3.5.6 → 3.5.7

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -41,49 +41,124 @@ export const Route = createFileRoute('/_authenticated/_collections/collections')
 
 type Collection = ResultOf<typeof collectionListDocument>['collections']['items'][number];
 
+const CHILDREN_PAGE_SIZE = 20;
+
+type LoadMoreRow = {
+    _isLoadMore: true;
+    _parentId: string;
+    _totalItems: number;
+    _loadedItems: number;
+    id: string;
+    breadcrumbs: { id: string; name: string; slug: string }[];
+};
+
+type CollectionOrLoadMore = Collection | LoadMoreRow;
+
+function isLoadMoreRow(row: CollectionOrLoadMore): row is LoadMoreRow {
+    return '_isLoadMore' in row && row._isLoadMore === true;
+}
+
 function CollectionListPage() {
     const { t } = useLingui();
     const queryClient = useQueryClient();
     const [expanded, setExpanded] = useState<ExpandedState>({});
     const [searchTerm, setSearchTerm] = useState<string>('');
+    const [accumulatedChildren, setAccumulatedChildren] = useState<
+        Record<string, { items: Collection[]; totalItems: number }>
+    >({});
+    const [nextPageToFetch, setNextPageToFetch] = useState<Record<string, number>>({});
 
-    const childrenQueries = useQueries({
-        queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
-            return {
-                queryKey: ['childCollections', collectionId],
-                queryFn: () =>
-                    api.query(collectionListDocument, {
-                        options: {
-                            filter: {
-                                parentId: { eq: collectionId },
+    useQueries({
+        queries: expanded === true ? [] : Object.entries(expanded)
+            .filter(([collectionId]) => !accumulatedChildren[collectionId])
+            .map(([collectionId]) => {
+                return {
+                    queryKey: ['childCollections', collectionId, 'page', 0],
+                    queryFn: async () => {
+                        const result = await api.query(collectionListDocument, {
+                            options: {
+                                filter: {
+                                    parentId: { eq: collectionId },
+                                },
+                                take: CHILDREN_PAGE_SIZE,
+                                skip: 0,
+                            },
+                        });
+                        setAccumulatedChildren(prev => ({
+                            ...prev,
+                            [collectionId]: {
+                                items: result.collections.items,
+                                totalItems: result.collections.totalItems,
                             },
-                        },
-                    }),
-                staleTime: 1000 * 60 * 5,
-            } satisfies FetchQueryOptions;
-        }),
+                        }));
+                        return result;
+                    },
+                    staleTime: 1000 * 60 * 5,
+                } satisfies FetchQueryOptions;
+            }),
     });
 
-    const childCollectionsByParentId = childrenQueries.reduce(
-        (acc, query, index) => {
-            const collectionId = Object.keys(expanded)[index];
-            if (query.data) {
-                acc[collectionId] = query.data.collections.items;
-            }
-            return acc;
-        },
-        {} as Record<string, any[]>,
-    );
+    useQueries({
+        queries: Object.entries(nextPageToFetch)
+            .filter(([_, page]) => page > 0)
+            .map(([collectionId, page]) => {
+                return {
+                    queryKey: ['childCollections', collectionId, 'page', page],
+                    queryFn: async () => {
+                        const result = await api.query(collectionListDocument, {
+                            options: {
+                                filter: {
+                                    parentId: { eq: collectionId },
+                                },
+                                take: CHILDREN_PAGE_SIZE,
+                                skip: page * CHILDREN_PAGE_SIZE,
+                            },
+                        });
+                        setAccumulatedChildren(prev => {
+                            const existing = prev[collectionId];
+                            if (!existing) return prev;
+                            return {
+                                ...prev,
+                                [collectionId]: {
+                                    items: [...existing.items, ...result.collections.items],
+                                    totalItems: result.collections.totalItems,
+                                },
+                            };
+                        });
+                        setNextPageToFetch(prev => {
+                            const { [collectionId]: _, ...rest } = prev;
+                            return rest;
+                        });
+                        return result;
+                    },
+                    staleTime: 1000 * 60 * 5,
+                } satisfies FetchQueryOptions;
+            }),
+    });
 
-    const addSubCollections = (data: Collection[]) => {
-        const allRows = [] as Collection[];
+    const addSubCollections = (data: Collection[]): CollectionOrLoadMore[] => {
+        const allRows: CollectionOrLoadMore[] = [];
         const addSubRows = (row: Collection) => {
-            const subRows = childCollectionsByParentId[row.id] || [];
-            if (subRows.length) {
-                for (const subRow of subRows) {
+            const isExpanded = expanded === true || (typeof expanded === 'object' && expanded[row.id]);
+            if (!isExpanded) {
+                return;
+            }
+            const childData = accumulatedChildren[row.id];
+            if (childData?.items.length) {
+                for (const subRow of childData.items) {
                     allRows.push(subRow);
                     addSubRows(subRow);
                 }
+                if (childData.totalItems > childData.items.length) {
+                    allRows.push({
+                        _isLoadMore: true,
+                        _parentId: row.id,
+                        _totalItems: childData.totalItems,
+                        _loadedItems: childData.items.length,
+                        id: `load-more-${row.id}`,
+                        breadcrumbs: [...(row.breadcrumbs || []), { id: row.id, name: row.name, slug: row.slug }],
+                    });
+                }
             }
         };
         data.forEach(row => {
@@ -93,37 +168,56 @@ function CollectionListPage() {
         return allRows;
     };
 
+    const handleLoadMoreChildren = (parentId: string) => {
+        const currentItems = accumulatedChildren[parentId]?.items.length ?? 0;
+        const nextPage = Math.floor(currentItems / CHILDREN_PAGE_SIZE);
+        setNextPageToFetch(prev => ({
+            ...prev,
+            [parentId]: nextPage,
+        }));
+    };
+
     const handleReorder = async (oldIndex: number, newIndex: number, item: Collection, allItems?: Collection[]) => {
+        if (isLoadMoreRow(item as CollectionOrLoadMore)) {
+            return;
+        }
         try {
-            const items = allItems || [];
+            const rawItems = (allItems || []) as CollectionOrLoadMore[];
+
+            // Filter out LoadMoreRows - they shouldn't affect position calculations
+            const items = rawItems.filter((i): i is Collection => !isLoadMoreRow(i));
+
+            // Recalculate indices in the filtered array
+            const adjustedOldIndex = items.findIndex(i => i.id === item.id);
+            const targetItem = rawItems[newIndex];
+            const adjustedNewIndex = isLoadMoreRow(targetItem)
+                ? items.findIndex(i => i.id === targetItem._parentId)
+                : items.findIndex(i => i.id === (targetItem as Collection).id);
+
             const sourceParentId = getItemParentId(item);
 
             if (!sourceParentId) {
                 throw new Error('Unable to determine parent collection ID');
             }
 
-            // Calculate target position (parent and index)
             const { targetParentId, adjustedIndex: initialIndex } = calculateDragTargetPosition({
                 item,
-                oldIndex,
-                newIndex,
+                oldIndex: adjustedOldIndex,
+                newIndex: adjustedNewIndex,
                 items,
                 sourceParentId,
                 expanded,
             });
 
-            // Validate no circular references when moving to different parent
             if (targetParentId !== sourceParentId && isCircularReference(item, targetParentId, items)) {
                 toast.error(t`Cannot move a collection into its own descendant`);
                 throw new Error('Circular reference detected');
             }
 
-            // Calculate final index (adjust for same-parent moves)
             const adjustedIndex = targetParentId === sourceParentId
-                ? calculateSiblingIndex({ item, oldIndex, newIndex, items, parentId: sourceParentId })
+                ? calculateSiblingIndex({ item, oldIndex: adjustedOldIndex, newIndex: adjustedNewIndex, items, parentId: sourceParentId })
                 : initialIndex;
 
-            // Perform the move
             await api.mutate(moveCollectionDocument, {
                 input: {
                     collectionId: item.id,
@@ -132,7 +226,15 @@ function CollectionListPage() {
                 },
             });
 
-            // Invalidate queries and show success message
+            setAccumulatedChildren(prev => {
+                const newState = { ...prev };
+                delete newState[sourceParentId];
+                if (targetParentId !== sourceParentId) {
+                    delete newState[targetParentId];
+                }
+                return newState;
+            });
+
             const queriesToInvalidate = [
                 queryClient.invalidateQueries({ queryKey: ['childCollections', sourceParentId] }),
                 queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] }),
@@ -178,11 +280,12 @@ function CollectionListPage() {
                         dependencies: ['children', 'breadcrumbs'],
                     },
                     cell: ({ row }) => {
+                        const original = row.original as Collection;
                         const isExpanded = row.getIsExpanded();
-                        const hasChildren = !!row.original.children?.length;
+                        const hasChildren = !!original.children?.length;
                         return (
                             <div
-                                style={{ marginLeft: (row.original.breadcrumbs?.length - 2) * 20 + 'px' }}
+                                style={{ marginLeft: (original.breadcrumbs?.length - 2) * 20 + 'px' }}
                                 className="flex gap-2 items-center"
                             >
                                 <Button
@@ -194,7 +297,7 @@ function CollectionListPage() {
                                 >
                                     {isExpanded ? <FolderOpen /> : <Folder />}
                                 </Button>
-                                <DetailPageButton id={row.original.id} label={row.original.name} />
+                                <DetailPageButton id={original.id} label={original.name} />
                             </div>
                         );
                     },
@@ -218,7 +321,7 @@ function CollectionListPage() {
                         );
                     },
                 },
-                productVariants: {
+                productVariantCount: {
                     header: () => <Trans>Contents</Trans>,
                     cell: ({ row }) => {
                         return (
@@ -226,7 +329,7 @@ function CollectionListPage() {
                                 collectionId={row.original.id}
                                 collectionName={row.original.name}
                             >
-                                <Trans>{row.original.productVariants?.totalItems} variants</Trans>
+                                <Trans>{row.original.productVariantCount} variants</Trans>
                             </CollectionContentsSheet>
                         );
                     },
@@ -257,7 +360,7 @@ function CollectionListPage() {
                 'name',
                 'slug',
                 'breadcrumbs',
-                'productVariants',
+                'productVariantCount',
             ]}
             transformData={data => {
                 return addSubCollections(data);
@@ -270,12 +373,30 @@ function CollectionListPage() {
                 options.onExpandedChange = setExpanded;
                 options.getExpandedRowModel = getExpandedRowModel();
                 options.getRowCanExpand = () => true;
-                options.getRowId = row => {
-                    return row.id;
-                };
+                options.getRowId = row => row.id;
+                options.enableRowSelection = row => !isLoadMoreRow(row.original);
                 options.meta = {
                     ...options.meta,
                     resetExpanded: () => setExpanded({}),
+                    isUtilityRow: (row: { original: CollectionOrLoadMore }) => isLoadMoreRow(row.original),
+                    renderUtilityRow: (row: { original: CollectionOrLoadMore }) => {
+                        const original = row.original as LoadMoreRow;
+                        const remaining = original._totalItems - original._loadedItems;
+                        return (
+                            <div
+                                style={{ paddingLeft: (original.breadcrumbs?.length - 1) * 20 + 'px' }}
+                                className="flex justify-center py-2"
+                            >
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() => handleLoadMoreChildren(original._parentId)}
+                                >
+                                    <Trans>Load {Math.min(remaining, CHILDREN_PAGE_SIZE)} more ({remaining} remaining)</Trans>
+                                </Button>
+                            </div>
+                        );
+                    },
                 };
                 return options;
             }}
@@ -319,7 +440,7 @@ function CollectionListPage() {
                 },
             ]}
             onReorder={handleReorder}
-            disableDragAndDrop={!!searchTerm} // Disable dragging while searching
+            disableDragAndDrop={!!searchTerm}
         >
             <PageActionBarRight>
                 <PermissionGuard requires={['CreateCollection', 'CreateCatalog']}>

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -22,8 +22,11 @@ import {
 } 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 { useJobQueuePolling } from '@/vdb/hooks/use-job-queue-polling.js';
 import { Trans, useLingui } from '@lingui/react/macro';
+import { useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import {
     collectionDetailDocument,
@@ -54,6 +57,12 @@ function CollectionDetailPage() {
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
     const { t } = useLingui();
+    const queryClient = useQueryClient();
+
+    const { isPolling: pendingFilterApplication, startPolling } = useJobQueuePolling(
+        'apply-collection-filters',
+        () => queryClient.invalidateQueries({ queryKey: ['PaginatedListDataTable'] }),
+    );
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -79,6 +88,7 @@ function CollectionDetailPage() {
                     name: translation.name,
                     slug: translation.slug,
                     description: translation.description,
+                    customFields: (translation as any).customFields,
                 })),
                 filters: entity.filters.map(f => ({
                     code: f.code,
@@ -90,12 +100,20 @@ function CollectionDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
+            const filtersWereDirty =
+                form.getFieldState('inheritFilters').isDirty || form.getFieldState('filters').isDirty;
             toast(
                 creatingNewEntity ? t`Successfully created collection` : t`Successfully updated collection`,
             );
             resetForm();
+            if (filtersWereDirty) {
+                startPolling();
+            }
             if (creatingNewEntity) {
-                await navigate({ to: `../$id`, params: { id: data.id } });
+                await navigate({
+                    to: `../$id`,
+                    params: { id: data.id },
+                });
             }
         },
         onError: err => {
@@ -106,11 +124,15 @@ function CollectionDetailPage() {
     });
 
     const shouldPreviewContents =
-        form.getFieldState('inheritFilters').isDirty || form.getFieldState('filters').isDirty;
+        form.getFieldState('inheritFilters').isDirty ||
+        form.getFieldState('filters').isDirty ||
+        pendingFilterApplication;
 
     const currentFiltersValue = form.watch('filters');
     const currentInheritFiltersValue = form.watch('inheritFilters');
 
+    const [filtersArgsValid, setFiltersArgsValid] = useState(true);
+
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New collection</Trans> : (entity?.name ?? '')}</PageTitle>
@@ -119,7 +141,12 @@ function CollectionDetailPage() {
                     <PermissionGuard requires={['UpdateCollection', 'UpdateCatalog']}>
                         <Button
                             type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                            disabled={
+                                !form.formState.isDirty ||
+                                !form.formState.isValid ||
+                                isPending ||
+                                !filtersArgsValid
+                            }
                         >
                             {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
@@ -188,7 +215,11 @@ function CollectionDetailPage() {
                         control={form.control}
                         name="filters"
                         render={({ field }) => (
-                            <CollectionFiltersSelector value={field.value ?? []} onChange={field.onChange} />
+                            <CollectionFiltersSelector
+                                value={field.value ?? []}
+                                onChange={field.onChange}
+                                onValidityChange={setFiltersArgsValid}
+                            />
                         )}
                     />
                 </PageBlock>
@@ -220,7 +251,7 @@ function CollectionDetailPage() {
                     </FormItem>
                 </PageBlock>
                 <PageBlock column="main" blockId="contents" title={<Trans>Contents</Trans>}>
-                    {shouldPreviewContents || creatingNewEntity ? (
+                    {pendingFilterApplication || shouldPreviewContents || creatingNewEntity ? (
                         <CollectionContentsPreviewTable
                             parentId={entity?.parent?.id}
                             filters={currentFiltersValue ?? []}

package/src/app/routes/_authenticated/_collections/components/collection-bulk-actions.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';

package/src/app/routes/_authenticated/_collections/components/collection-filters-selector.tsx

@@ -5,9 +5,14 @@ import { getCollectionFiltersQueryOptions } from '../collections.graphql.js';
 export interface CollectionFiltersSelectorProps {
     value: ConfigurableOperationInputType[];
     onChange: (filters: ConfigurableOperationInputType[]) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
-export function CollectionFiltersSelector({ value, onChange }: Readonly<CollectionFiltersSelectorProps>) {
+export function CollectionFiltersSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<CollectionFiltersSelectorProps>) {
     return (
         <div className="mt-4">
             <ConfigurableOperationMultiSelector
@@ -18,6 +23,7 @@ export function CollectionFiltersSelector({ value, onChange }: Readonly<Collecti
                 dataPath="collectionFilters"
                 buttonText="Add collection filter"
                 showEnhancedDropdown={false}
+                onValidityChange={onValidityChange}
             />
         </div>
     );

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

@@ -141,36 +141,38 @@ export function CustomerPasswordResetVerifiedComponent(props: Readonly<HistoryEn
     );
 }
 
-export function CustomerEmailUpdateComponent({ entry }: Readonly<HistoryEntryProps>) {
-    const { oldEmailAddress, newEmailAddress } = entry.data || {};
+export function CustomerEmailUpdateComponent(props: Readonly<HistoryEntryProps>) {
+    const { oldEmailAddress, newEmailAddress } = props.entry.data || {};
 
     return (
-        <div className="space-y-2">
-            {(oldEmailAddress || newEmailAddress) && (
-                <details className="text-xs">
-                    <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
-                        <Trans>View details</Trans>
-                    </summary>
-                    <div className="mt-2 space-y-1">
-                        {oldEmailAddress && (
-                            <div>
-                                <span className="font-medium">
-                                    <Trans>Old email:</Trans>
-                                </span>{' '}
-                                {oldEmailAddress}
-                            </div>
-                        )}
-                        {newEmailAddress && (
-                            <div>
-                                <span className="font-medium">
-                                    <Trans>New email:</Trans>
-                                </span>{' '}
-                                {newEmailAddress}
-                            </div>
-                        )}
-                    </div>
-                </details>
-            )}
-        </div>
+        <HistoryEntry {...props}>
+            <div className="space-y-2">
+                {(oldEmailAddress || newEmailAddress) && (
+                    <details className="text-xs">
+                        <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                            <Trans>View details</Trans>
+                        </summary>
+                        <div className="mt-2 space-y-1">
+                            {oldEmailAddress && (
+                                <div>
+                                    <span className="font-medium">
+                                        <Trans>Old email:</Trans>
+                                    </span>{' '}
+                                    {oldEmailAddress}
+                                </div>
+                            )}
+                            {newEmailAddress && (
+                                <div>
+                                    <span className="font-medium">
+                                        <Trans>New email:</Trans>
+                                    </span>{' '}
+                                    {newEmailAddress}
+                                </div>
+                            )}
+                        </div>
+                    </details>
+                )}
+            </div>
+        </HistoryEntry>
     );
 }

package/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -10,6 +10,7 @@ export const customerListDocument = graphql(`
                 firstName
                 lastName
                 emailAddress
+                phoneNumber
                 groups {
                     id
                     name

package/src/app/routes/_authenticated/_customers/customers.tsx

@@ -30,6 +30,9 @@ function CustomerListPage() {
                     emailAddress: {
                         contains: searchTerm,
                     },
+                    phoneNumber: {
+                        contains: searchTerm,
+                    },
                 };
             }}
             transformVariables={variables => {

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

@@ -23,7 +23,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { globalSettingsDocument, updateGlobalSettingsDocument } from './global-settings.graphql.js';
-import { globalLanguageCodes } from '@/vdb/utils/global-languages.js';
+import { schemaLanguageCodes as globalLanguageCodes } from '@/vdb/graphql/schema-enums.js';
 
 const pageId = 'global-settings';
 

package/src/app/routes/_authenticated/_orders/components/draft-order-status.tsx

@@ -0,0 +1,48 @@
+import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AlertTriangle, CheckCircle } from 'lucide-react';
+
+export type DraftOrderStatusProps = Readonly<{
+    hasCustomer: boolean;
+    hasLines: boolean;
+    hasShippingMethod: boolean;
+    isDraftState: boolean;
+}>;
+
+export function DraftOrderStatus({
+    hasCustomer,
+    hasLines,
+    hasShippingMethod,
+    isDraftState,
+}: DraftOrderStatusProps) {
+    const { t } = useLingui();
+    const isCompleteDraftDisabled = !hasCustomer || !hasLines || !hasShippingMethod || !isDraftState;
+
+    let completeDraftDisabledReason: string | null = null;
+    if (!hasCustomer) {
+        completeDraftDisabledReason = t`Select a customer to continue`;
+    } else if (!hasLines) {
+        completeDraftDisabledReason = t`Add at least one item to the order`;
+    } else if (!hasShippingMethod) {
+        completeDraftDisabledReason = t`Set a shipping address and select a shipping method`;
+    } else if (!isDraftState) {
+        completeDraftDisabledReason = t`Only draft orders can be completed`;
+    }
+
+    const Icon = isCompleteDraftDisabled ? AlertTriangle : CheckCircle;
+    const title = isCompleteDraftDisabled ? (
+        <Trans>Order draft isn't ready to be completed</Trans>
+    ) : (
+        <Trans>Order draft is ready to be completed</Trans>
+    );
+
+    return (
+        <Alert variant={isCompleteDraftDisabled ? 'destructive' : 'default'}>
+            <Icon className={isCompleteDraftDisabled ? '' : 'stroke-success'} />
+            <AlertTitle className={isCompleteDraftDisabled ? '' : 'text-success'}>{title}</AlertTitle>
+            {completeDraftDisabledReason ? (
+                <AlertDescription>{completeDraftDisabledReason}</AlertDescription>
+            ) : null}
+        </Alert>
+    );
+}