@tuturuuu/ui 0.32.0 → 0.33.0

package/src/components/ui/finance/invoices/components/invoice-data-state.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { InvoiceDataState } from './invoice-data-state';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+describe('InvoiceDataState', () => {
+  it('announces loading without offering duplicate requests', () => {
+    render(<InvoiceDataState loading onRetry={vi.fn()} />);
+    expect(screen.getByRole('status')).toHaveTextContent('ws-invoices.loading');
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('replaces loading with an actionable retry after failure', () => {
+    const onRetry = vi.fn();
+    const { rerender } = render(<InvoiceDataState loading onRetry={onRetry} />);
+    rerender(<InvoiceDataState loading={false} onRetry={onRetry} />);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ws-invoices.load_failed'
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'common.retry' }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+});

package/src/components/ui/finance/invoices/components/invoice-data-state.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+
+export function InvoiceDataState({
+  loading,
+  onRetry,
+}: {
+  loading: boolean;
+  onRetry: () => void;
+}) {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-8">
+      <div
+        role={loading ? 'status' : 'alert'}
+        className="flex items-center gap-2"
+      >
+        {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+        <p className="text-muted-foreground text-sm">
+          {t(loading ? 'ws-invoices.loading' : 'ws-invoices.load_failed')}
+        </p>
+      </div>
+      {!loading && (
+        <Button type="button" variant="outline" onClick={onRetry}>
+          {t('common.retry')}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/hooks/use-invoice-customer-search.test.tsx

@@ -0,0 +1,89 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import type { PropsWithChildren } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useInvoiceCustomerSearch } from './use-invoice-customer-search';
+
+const api = vi.hoisted(() => ({ list: vi.fn(), get: vi.fn() }));
+vi.mock('../internal-api', () => ({
+  listWorkspaceUsersWithInternalApi: api.list,
+  getWorkspaceUserWithInternalApi: api.get,
+}));
+
+beforeEach(() => {
+  api.list.mockReset();
+  api.get.mockReset();
+});
+
+function renderSearch(selectedUserId = '') {
+  const client = new QueryClient();
+  function Wrapper({ children }: PropsWithChildren) {
+    return (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+  }
+  return renderHook(
+    () => useInvoiceCustomerSearch('ws-1', '', selectedUserId),
+    {
+      wrapper: Wrapper,
+    }
+  );
+}
+
+describe('invoice customer loading recovery', () => {
+  it('surfaces a failed read immediately and allows a manual retry', async () => {
+    api.list.mockRejectedValueOnce(new Error('Timed out')).mockResolvedValue({
+      data: [{ id: 'customer-1' }],
+      count: 1,
+    });
+    const { result } = renderSearch();
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    expect(result.current.isLoading).toBe(false);
+    expect(api.list).toHaveBeenCalledOnce();
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() => expect(result.current.error).toBeNull());
+    expect(result.current.customers).toEqual([{ id: 'customer-1' }]);
+  });
+
+  it('retries the selected customer as well as the customer list', async () => {
+    api.list.mockResolvedValue({ data: [], count: 0 });
+    api.get
+      .mockRejectedValueOnce(new Error('Timed out'))
+      .mockResolvedValue({ id: 'selected' });
+    const { result } = renderSearch('selected');
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() =>
+      expect(result.current.selectedUser?.id).toBe('selected')
+    );
+    expect(result.current.error).toBeNull();
+    expect(api.get).toHaveBeenCalledTimes(2);
+  });
+
+  it('ignores an old detail error once the list contains the selected customer', async () => {
+    api.list.mockResolvedValueOnce({ data: [], count: 0 }).mockResolvedValue({
+      data: [{ id: 'selected' }],
+      count: 1,
+    });
+    api.get.mockRejectedValue(new Error('Detail unavailable'));
+    const { result } = renderSearch('selected');
+    await waitFor(() => expect(result.current.error).toBeTruthy());
+    await act(async () => {
+      await result.current.refetch();
+    });
+    await waitFor(() => expect(result.current.error).toBeNull());
+    expect(result.current.selectedUser?.id).toBe('selected');
+  });
+
+  it('stops offering more customers when an empty page has a stale count', async () => {
+    api.list.mockResolvedValue({ data: [], count: 10 });
+    const { result } = renderSearch();
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.hasNextPage).toBe(false);
+  });
+});

package/src/components/ui/finance/invoices/hooks/use-invoice-customer-search.ts

@@ -0,0 +1,117 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
+import {
+  getWorkspaceUserWithInternalApi,
+  listWorkspaceUsersWithInternalApi,
+} from '../internal-api';
+
+const INVOICE_CUSTOMER_PAGE_SIZE = 25;
+
+type WorkspaceUsersPage = {
+  data: WorkspaceUser[];
+  count: number;
+  offset: number;
+};
+
+async function fetchInvoiceCustomerPage(
+  wsId: string,
+  searchQuery: string,
+  offset: number
+): Promise<WorkspaceUsersPage> {
+  const payload = await listWorkspaceUsersWithInternalApi(wsId, {
+    from: offset,
+    limit: INVOICE_CUSTOMER_PAGE_SIZE,
+    q: searchQuery.trim() || undefined,
+    to: offset + INVOICE_CUSTOMER_PAGE_SIZE - 1,
+  });
+
+  return {
+    data: payload.data,
+    count: payload.count,
+    offset,
+  };
+}
+
+async function fetchWorkspaceUserById(
+  wsId: string,
+  userId: string
+): Promise<WorkspaceUser | null> {
+  return getWorkspaceUserWithInternalApi(wsId, userId);
+}
+
+export function useInvoiceCustomerSearch(
+  wsId: string,
+  searchQuery: string,
+  selectedUserId: string
+) {
+  const normalizedSearchQuery = searchQuery.trim();
+
+  const usersQuery = useInfiniteQuery({
+    queryKey: ['invoice-customer-search', wsId, normalizedSearchQuery],
+    queryFn: async ({ pageParam = 0 }) =>
+      fetchInvoiceCustomerPage(wsId, normalizedSearchQuery, pageParam),
+    initialPageParam: 0,
+    placeholderData: (previousData) => previousData,
+    getNextPageParam: (lastPage, allPages) => {
+      const loadedCount = allPages.reduce(
+        (total, page) => total + page.data.length,
+        0
+      );
+      return lastPage.data.length > 0 && loadedCount < lastPage.count
+        ? loadedCount
+        : undefined;
+    },
+    enabled: !!wsId,
+    retry: false,
+    staleTime: 30 * 1000,
+    gcTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  const loadedCustomers =
+    usersQuery.data?.pages.flatMap((page) => page.data) ?? [];
+  const needsSelectedUser =
+    !!wsId &&
+    !!selectedUserId &&
+    !loadedCustomers.some((user) => user.id === selectedUserId);
+  const selectedUserQuery = useQuery({
+    queryKey: ['invoice-customer', wsId, selectedUserId],
+    queryFn: async () => fetchWorkspaceUserById(wsId, selectedUserId),
+    enabled: needsSelectedUser,
+    retry: false,
+    staleTime: 30 * 1000,
+    gcTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+  });
+
+  const customersById = new Map<string, WorkspaceUser>();
+
+  if (selectedUserQuery.data) {
+    customersById.set(selectedUserQuery.data.id, selectedUserQuery.data);
+  }
+
+  for (const customer of loadedCustomers) {
+    customersById.set(customer.id, customer);
+  }
+
+  const customers = Array.from(customersById.values());
+  const selectedUser =
+    (selectedUserId
+      ? customers.find((user) => user.id === selectedUserId)
+      : undefined) ?? undefined;
+
+  return {
+    ...usersQuery,
+    customers,
+    selectedUser,
+    error:
+      usersQuery.error ?? (needsSelectedUser ? selectedUserQuery.error : null),
+    isLoading: usersQuery.isLoading || selectedUserQuery.isLoading,
+    isFetchingSelectedUser: selectedUserQuery.isFetching,
+    refetch: () =>
+      Promise.all([
+        usersQuery.refetch(),
+        ...(needsSelectedUser ? [selectedUserQuery.refetch()] : []),
+      ]),
+  };
+}

package/src/components/ui/finance/invoices/hooks.ts

@@ -20,12 +20,10 @@ import {
 import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
 import type { PendingInvoice } from '@tuturuuu/types/primitives/PendingInvoice';
 import { parseMonthsOwed } from '@tuturuuu/types/primitives/PendingInvoice';
-import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
 import { z } from 'zod';
 import type { WorkspaceUserLinkedPromotion } from './internal-api';
 import {
   createPromotionWithInternalApi,
-  getWorkspaceUserWithInternalApi,
   listInvoiceProductsWithInternalApi,
   listMultiGroupProductsWithInternalApi,
   listPromotionsWithInternalApi,
@@ -37,7 +35,7 @@ import {
 } from './internal-api';
 import type { UserGroup } from './utils';
 
-// ==================== ZOD SCHEMAS ====================
+export { useInvoiceCustomerSearch } from './hooks/use-invoice-customer-search';
 
 const invoiceSchema = z.object({
   id: z.string(),
@@ -184,8 +182,6 @@ function isInvoiceQueryEnabled(options?: InvoiceQueryOptions) {
   return options?.enabled !== false;
 }
 
-// ==================== INVOICES DATA FETCHING ====================
-
 export interface InvoicesParams {
   q?: string;
   page?: number;
@@ -258,8 +254,6 @@ export function useWorkspaceInvoices(
   });
 }
 
-// ==================== LEGACY HOOKS ====================
-
 // React Query hooks for data fetching
 export const useUsers = (wsId: string) => {
   return useQuery({
@@ -273,106 +267,6 @@ export const useUsers = (wsId: string) => {
   });
 };
 
-const INVOICE_CUSTOMER_PAGE_SIZE = 25;
-
-type WorkspaceUsersPage = {
-  data: WorkspaceUser[];
-  count: number;
-  offset: number;
-};
-
-async function fetchInvoiceCustomerPage(
-  wsId: string,
-  searchQuery: string,
-  offset: number
-): Promise<WorkspaceUsersPage> {
-  const payload = await listWorkspaceUsersWithInternalApi(wsId, {
-    from: offset,
-    limit: INVOICE_CUSTOMER_PAGE_SIZE,
-    q: searchQuery.trim() || undefined,
-    to: offset + INVOICE_CUSTOMER_PAGE_SIZE - 1,
-  });
-
-  return {
-    data: payload.data,
-    count: payload.count,
-    offset,
-  };
-}
-
-async function fetchWorkspaceUserById(
-  wsId: string,
-  userId: string
-): Promise<WorkspaceUser | null> {
-  return getWorkspaceUserWithInternalApi(wsId, userId);
-}
-
-export function useInvoiceCustomerSearch(
-  wsId: string,
-  searchQuery: string,
-  selectedUserId: string
-) {
-  const normalizedSearchQuery = searchQuery.trim();
-
-  const usersQuery = useInfiniteQuery({
-    queryKey: ['invoice-customer-search', wsId, normalizedSearchQuery],
-    queryFn: async ({ pageParam = 0 }) =>
-      fetchInvoiceCustomerPage(wsId, normalizedSearchQuery, pageParam),
-    initialPageParam: 0,
-    placeholderData: (previousData) => previousData,
-    getNextPageParam: (lastPage, allPages) => {
-      const loadedCount = allPages.reduce(
-        (total, page) => total + page.data.length,
-        0
-      );
-      return loadedCount < lastPage.count ? loadedCount : undefined;
-    },
-    enabled: !!wsId,
-    staleTime: 30 * 1000,
-    gcTime: 5 * 60 * 1000,
-    refetchOnWindowFocus: false,
-  });
-
-  const loadedCustomers =
-    usersQuery.data?.pages.flatMap((page) => page.data) ?? [];
-  const selectedUserQuery = useQuery({
-    queryKey: ['invoice-customer', wsId, selectedUserId],
-    queryFn: async () => fetchWorkspaceUserById(wsId, selectedUserId),
-    enabled:
-      !!wsId &&
-      !!selectedUserId &&
-      !loadedCustomers.some((user) => user.id === selectedUserId),
-    staleTime: 30 * 1000,
-    gcTime: 5 * 60 * 1000,
-    refetchOnWindowFocus: false,
-  });
-
-  const customersById = new Map<string, WorkspaceUser>();
-
-  if (selectedUserQuery.data) {
-    customersById.set(selectedUserQuery.data.id, selectedUserQuery.data);
-  }
-
-  for (const customer of loadedCustomers) {
-    customersById.set(customer.id, customer);
-  }
-
-  const customers = Array.from(customersById.values());
-  const selectedUser =
-    (selectedUserId
-      ? customers.find((user) => user.id === selectedUserId)
-      : undefined) ?? undefined;
-
-  return {
-    ...usersQuery,
-    customers,
-    selectedUser,
-    error: usersQuery.error ?? selectedUserQuery.error,
-    isLoading: usersQuery.isLoading || selectedUserQuery.isLoading,
-    isFetchingSelectedUser: selectedUserQuery.isFetching,
-  };
-}
-
 // Users with selectable groups (groups where they have STUDENT role)
 export const useUsersWithSelectableGroups = (wsId: string) => {
   return useQuery({
@@ -391,6 +285,7 @@ export const useProducts = (wsId: string, options?: InvoiceQueryOptions) => {
     queryKey: ['products', wsId],
     queryFn: () => listInvoiceProductsWithInternalApi(wsId),
     enabled: !!wsId && isInvoiceQueryEnabled(options),
+    retry: false,
     staleTime: INVOICE_STATIC_QUERY_STALE_TIME,
     gcTime: INVOICE_STATIC_QUERY_GC_TIME,
     refetchOnWindowFocus: false,
@@ -493,7 +388,7 @@ export const useUserGroups = (wsId: string, userId: string) => {
     staleTime: 5 * 60 * 1000, // 5 minutes
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false,
-    retry: 3,
+    retry: false,
   });
 };
 
@@ -540,7 +435,7 @@ export const useSubscriptionInvoiceContext = (
     staleTime: 5 * 60 * 1000,
     gcTime: 10 * 60 * 1000,
     refetchOnWindowFocus: false,
-    retry: 3,
+    retry: false,
   });
 };
 
@@ -677,7 +572,7 @@ export const useMultiGroupProducts = (
     staleTime: 5 * 60 * 1000, // 5 minutes
     gcTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false,
-    retry: 3,
+    retry: false,
   });
 };
 

package/src/components/ui/finance/invoices/internal-api.test.ts

@@ -0,0 +1,122 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  getWorkspaceUserWithInternalApi,
+  listInvoiceProductsWithInternalApi,
+  listMultiGroupProductsWithInternalApi,
+  listUserGroupsWithInternalApi,
+  listWorkspaceUsersWithInternalApi,
+} from './internal-api';
+
+const mocks = vi.hoisted(() => ({ json: vi.fn() }));
+vi.mock('@tuturuuu/internal-api/client', () => ({
+  encodePathSegment: encodeURIComponent,
+  getInternalApiClient: () => ({ json: mocks.json }),
+}));
+
+beforeEach(() => {
+  mocks.json.mockReset();
+});
+afterEach(() => vi.restoreAllMocks());
+
+describe('invoice product loading', () => {
+  it('loads every product page and shares one deadline across pages', async () => {
+    const firstPage = Array.from({ length: 500 }, (_, id) => ({
+      id: String(id),
+    }));
+    mocks.json
+      .mockResolvedValueOnce({ data: firstPage, count: 501 })
+      .mockResolvedValueOnce({ data: [{ id: 'last' }], count: 501 });
+
+    const result = await listInvoiceProductsWithInternalApi('ws-1');
+
+    expect(result).toEqual([...firstPage, { id: 'last' }]);
+    expect(mocks.json).toHaveBeenCalledTimes(2);
+    expect(mocks.json.mock.calls.map((call) => call[1].query.page)).toEqual([
+      1, 2,
+    ]);
+    expect(mocks.json.mock.calls[0]?.[1].signal).toBe(
+      mocks.json.mock.calls[1]?.[1].signal
+    );
+  });
+
+  it('accepts an empty catalog', async () => {
+    mocks.json.mockResolvedValue({ data: [], count: 0 });
+    await expect(listInvoiceProductsWithInternalApi('ws-1')).resolves.toEqual(
+      []
+    );
+    expect(mocks.json).toHaveBeenCalledTimes(1);
+  });
+
+  it('fails instead of looping forever when an empty page retains a total', async () => {
+    mocks.json
+      .mockResolvedValueOnce({ data: [{ id: 'first' }], count: 2 })
+      .mockResolvedValueOnce({ data: [], count: 2 })
+      .mockRejectedValue(new Error('Unexpected extra page'));
+
+    await expect(listInvoiceProductsWithInternalApi('ws-1')).rejects.toThrow(
+      'stopped making progress'
+    );
+    expect(mocks.json).toHaveBeenCalledTimes(2);
+  });
+
+  it('fails when the server repeats a page without adding products', async () => {
+    mocks.json.mockResolvedValue({ data: [{ id: 'same' }], count: 3 });
+    await expect(listInvoiceProductsWithInternalApi('ws-1')).rejects.toThrow(
+      'stopped making progress'
+    );
+    expect(mocks.json).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not return a partial catalog when a later page fails', async () => {
+    mocks.json
+      .mockResolvedValueOnce({ data: [{ id: 'first' }], count: 2 })
+      .mockRejectedValueOnce(new Error('Unavailable'));
+    await expect(listInvoiceProductsWithInternalApi('ws-1')).rejects.toThrow(
+      'Unavailable'
+    );
+  });
+
+  it('stops when the catalog shrinks between pages', async () => {
+    mocks.json
+      .mockResolvedValueOnce({ data: [{ id: 'first' }], count: 2 })
+      .mockResolvedValueOnce({ data: [], count: 1 });
+    await expect(listInvoiceProductsWithInternalApi('ws-1')).resolves.toEqual([
+      { id: 'first' },
+    ]);
+  });
+});
+
+describe('invoice startup request deadlines', () => {
+  it.each([
+    ['products', () => listInvoiceProductsWithInternalApi('ws-1')],
+    ['customers', () => listWorkspaceUsersWithInternalApi('ws-1')],
+    [
+      'selected customer',
+      () => getWorkspaceUserWithInternalApi('ws-1', 'user-1'),
+    ],
+    ['customer groups', () => listUserGroupsWithInternalApi('ws-1', 'user-1')],
+    [
+      'group products',
+      () => listMultiGroupProductsWithInternalApi('ws-1', ['group-1']),
+    ],
+  ])('aborts a stalled %s read', async (_name, load) => {
+    const controller = new AbortController();
+    const timeout = vi
+      .spyOn(AbortSignal, 'timeout')
+      .mockReturnValue(controller.signal);
+    mocks.json.mockImplementation(
+      (_path, options) =>
+        new Promise((_resolve, reject) => {
+          options.signal.addEventListener('abort', () =>
+            reject(options.signal.reason)
+          );
+        })
+    );
+
+    const pending = load();
+    const assertion = expect(pending).rejects.toThrow('Timed out');
+    controller.abort(new Error('Timed out'));
+    await assertion;
+    expect(timeout).toHaveBeenCalledWith(15_000);
+  });
+});

package/src/components/ui/finance/invoices/internal-api.ts

@@ -203,6 +203,7 @@ export async function listWorkspaceUsersWithInternalApi(
     WorkspaceUser[] | { data?: WorkspaceUser[]; count?: number }
   >(`/api/v1/workspaces/${encodePathSegment(workspaceId)}/users`, {
     cache: 'no-store',
+    signal: AbortSignal.timeout(15_000),
     query: {
       from: query.from,
       limit: query.limit,
@@ -233,6 +234,7 @@ export async function getWorkspaceUserWithInternalApi(
     `/api/v1/workspaces/${encodePathSegment(workspaceId)}/users/${encodePathSegment(userId)}`,
     {
       cache: 'no-store',
+      signal: AbortSignal.timeout(15_000),
     }
   );
 
@@ -246,6 +248,8 @@ export async function getWorkspaceUserWithInternalApi(
 export async function listInvoiceProductsWithInternalApi(workspaceId: string) {
   const client = getInternalApiClient();
   const products: Product[] = [];
+  const productIds = new Set<string>();
+  const signal = AbortSignal.timeout(15_000);
   const pageSize = 500;
   let page = 1;
   let count = 0;
@@ -255,6 +259,7 @@ export async function listInvoiceProductsWithInternalApi(workspaceId: string) {
       `/api/v1/workspaces/${encodePathSegment(workspaceId)}/inventory/products`,
       {
         cache: 'no-store',
+        signal,
         query: {
           page,
           pageSize,
@@ -262,7 +267,18 @@ export async function listInvoiceProductsWithInternalApi(workspaceId: string) {
       }
     );
 
-    products.push(...(payload.data ?? []));
+    const pageProducts = payload.data ?? [];
+    const newProducts = pageProducts.filter(
+      (product) => !productIds.has(product.id)
+    );
+    if (pageProducts.length === 0 || newProducts.length === 0) {
+      if (products.length < (payload.count ?? 0)) {
+        throw new Error('Invoice product pagination stopped making progress');
+      }
+      break;
+    }
+    for (const product of newProducts) productIds.add(product.id);
+    products.push(...newProducts);
     count = payload.count ?? products.length;
     page += 1;
   } while (products.length < count);
@@ -326,6 +342,7 @@ export function listUserGroupsWithInternalApi(
     `/api/v1/workspaces/${encodePathSegment(workspaceId)}/users/${encodePathSegment(userId)}/user-groups`,
     {
       cache: 'no-store',
+      signal: AbortSignal.timeout(15_000),
     }
   );
 }
@@ -384,6 +401,7 @@ export function listMultiGroupProductsWithInternalApi(
       `/api/v1/workspaces/${encodePathSegment(workspaceId)}/user-groups/linked-products?${searchParams.toString()}`,
       {
         cache: 'no-store',
+        signal: AbortSignal.timeout(15_000),
       }
     )
     .then((payload) => payload.items ?? []);