@tuturuuu/ui 0.14.0 → 0.16.0

package/src/components/ui/finance/invoices/pending-columns.tsx

@@ -21,6 +21,40 @@ type PendingInvoiceRow = PendingInvoice & {
   group_names?: string[];
 };
 
+export function buildPendingInvoiceCreateUrl({
+  attendanceDays,
+  financePrefix,
+  groupIds,
+  month,
+  potentialTotal,
+  useAttendanceBased,
+  userId,
+  wsId,
+}: {
+  attendanceDays: number;
+  financePrefix: string;
+  groupIds: string[];
+  month: string;
+  potentialTotal: number;
+  useAttendanceBased: boolean;
+  userId: string;
+  wsId: string;
+}) {
+  const searchParams = new URLSearchParams({
+    type: 'subscription',
+    user_id: userId,
+  });
+
+  if (month) searchParams.set('month', month);
+  if (useAttendanceBased) {
+    searchParams.set('billable_quantity', String(attendanceDays));
+  }
+  searchParams.set('suggested_total', String(potentialTotal));
+  if (groupIds.length > 0) searchParams.set('group_ids', groupIds.join(','));
+
+  return `/${wsId}${financePrefix}/invoices/new?${searchParams.toString()}`;
+}
+
 function PendingInvoicePotentialTotalCell({
   amount,
   currency,
@@ -268,6 +302,7 @@ export const pendingInvoiceColumns = (
         ).filter((id: string) => Boolean(id));
         const monthsOwed = row.getValue<string[]>('months_owed');
         const attendanceDays = row.getValue<number>('attendance_days');
+        const potentialTotal = row.getValue<number>('potential_total') || 0;
 
         // Get the LAST (most recent) unpaid month from the array
         const lastUnpaidMonth =
@@ -277,20 +312,16 @@ export const pendingInvoiceColumns = (
 
         if (!wsId) return null;
 
-        const searchParams = new URLSearchParams();
-        searchParams.set('type', 'subscription');
-        searchParams.set('user_id', userId);
-        if (lastUnpaidMonth) {
-          searchParams.set('month', lastUnpaidMonth);
-        }
-        if (useAttendanceBased) {
-          searchParams.set('amount', String(attendanceDays));
-        }
-        if (groupIds.length > 0) {
-          searchParams.set('group_ids', groupIds.join(','));
-        }
-
-        const createInvoiceUrl = `/${wsId}${financePrefix}/invoices/new?${searchParams.toString()}`;
+        const createInvoiceUrl = buildPendingInvoiceCreateUrl({
+          attendanceDays,
+          financePrefix,
+          groupIds,
+          month: lastUnpaidMonth ?? '',
+          potentialTotal,
+          useAttendanceBased,
+          userId,
+          wsId,
+        });
 
         return (
           <div className="flex items-center gap-2">

package/src/components/ui/finance/invoices/standard-invoice.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { resolveStandardInvoiceCategoryId } from './standard-invoice';
+
+describe('resolveStandardInvoiceCategoryId', () => {
+  it('prefers a single linked product finance category', () => {
+    expect(
+      resolveStandardInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        linkedFinanceCategoryIds: ['category-linked'],
+      })
+    ).toBe('category-linked');
+  });
+
+  it('requires explicit selection when linked product finance categories are mixed', () => {
+    expect(
+      resolveStandardInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        linkedFinanceCategoryIds: ['category-a', 'category-b'],
+      })
+    ).toBe('');
+  });
+
+  it('falls back to the transaction default when products do not provide a category', () => {
+    expect(
+      resolveStandardInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        linkedFinanceCategoryIds: [],
+      })
+    ).toBe('category-default');
+  });
+});

package/src/components/ui/finance/invoices/standard-invoice.tsx

@@ -57,6 +57,7 @@ interface Props {
   printAfterCreate?: boolean;
   downloadImageAfterCreate?: boolean;
   defaultWalletId?: string;
+  defaultCategoryId?: string;
   defaultCurrency?: string;
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
@@ -71,6 +72,7 @@ export function StandardInvoice({
   printAfterCreate = false,
   downloadImageAfterCreate = false,
   defaultWalletId,
+  defaultCategoryId,
   defaultCurrency: rawDefaultCurrency = 'USD',
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
@@ -194,7 +196,9 @@ export function StandardInvoice({
   }, [defaultWalletId]);
   const [selectedPromotionId, setSelectedPromotionId] =
     useState<string>('none');
-  const [selectedCategoryId, setSelectedCategoryId] = useState<string>('');
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string>(
+    defaultCategoryId || ''
+  );
   const [invoiceContent, setInvoiceContent] = useState<string>('');
   const [invoiceNotes, setInvoiceNotes] = useState<string>('');
   const [isCreating, setIsCreating] = useState(false);
@@ -280,7 +284,6 @@ export function StandardInvoice({
     [selectedProducts]
   );
   const hasMixedLinkedFinanceCategories = linkedFinanceCategoryIds.length > 1;
-  const hasSingleLinkedFinanceCategory = linkedFinanceCategoryIds.length === 1;
 
   // Auto-generate invoice content based on selected products
   useEffect(() => {
@@ -318,19 +321,13 @@ export function StandardInvoice({
   }, [selectedUserId]);
 
   useEffect(() => {
-    if (hasSingleLinkedFinanceCategory) {
-      setSelectedCategoryId(linkedFinanceCategoryIds[0] ?? '');
-      return;
-    }
-
-    if (hasMixedLinkedFinanceCategories) {
-      setSelectedCategoryId('');
-    }
-  }, [
-    hasMixedLinkedFinanceCategories,
-    hasSingleLinkedFinanceCategory,
-    linkedFinanceCategoryIds,
-  ]);
+    setSelectedCategoryId(
+      resolveStandardInvoiceCategoryId({
+        defaultCategoryId,
+        linkedFinanceCategoryIds,
+      })
+    );
+  }, [defaultCategoryId, linkedFinanceCategoryIds]);
 
   useBestPromotionSelection({
     enabled: promotionsAllowed,
@@ -422,7 +419,7 @@ export function StandardInvoice({
         resetRounding();
         setSelectedUserId(null);
         setSelectedWalletId(defaultWalletId || '');
-        setSelectedCategoryId('');
+        setSelectedCategoryId(defaultCategoryId || '');
         setCustomerSearch('');
       }
     } catch (error) {
@@ -657,3 +654,23 @@ export function StandardInvoice({
     </div>
   );
 }
+
+export function resolveStandardInvoiceCategoryId({
+  defaultCategoryId,
+  linkedFinanceCategoryIds,
+}: {
+  defaultCategoryId?: string;
+  linkedFinanceCategoryIds: string[];
+}) {
+  const uniqueLinkedCategoryIds = [...new Set(linkedFinanceCategoryIds)];
+
+  if (uniqueLinkedCategoryIds.length === 1) {
+    return uniqueLinkedCategoryIds[0] ?? '';
+  }
+
+  if (uniqueLinkedCategoryIds.length > 1) {
+    return '';
+  }
+
+  return defaultCategoryId || '';
+}

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

@@ -0,0 +1,331 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+import type { ComponentProps, PropsWithChildren } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SubscriptionInvoice } from './subscription-invoice';
+
+const testState = vi.hoisted(() => {
+  const inventory = {
+    amount: 5,
+    min_amount: 1,
+    price: 100,
+    unit_id: 'unit-1',
+    unit_name: 'Seat',
+    warehouse_id: 'warehouse-1',
+    warehouse_name: 'Main',
+  };
+  const product = {
+    category: null,
+    category_id: 'inventory-category',
+    created_at: null,
+    description: null,
+    finance_category_id: null as string | null,
+    id: 'product-1',
+    inventory: [inventory],
+    manufacturer: null,
+    name: 'Subscription seat',
+    usage: null,
+    ws_id: 'ws-1',
+  };
+
+  return {
+    InvoicePaymentSettings: vi.fn(),
+    categories: [] as Array<{ id: string; name: string }>,
+    groupIds: ['group-1'],
+    month: '2026-07',
+    productSelectionInjected: false,
+    products: [product],
+    selectedProducts: [{ inventory, product, quantity: 1 }],
+    useCategories: vi.fn(),
+    useWallets: vi.fn(),
+    userId: 'user-1',
+    wallets: [] as Array<{
+      currency: string;
+      id: string;
+      name: string;
+      type: string;
+    }>,
+  };
+});
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en-US',
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock('nuqs', () => ({
+  parseAsArrayOf: () => ({
+    withDefault: () => ({
+      withOptions: () => ({}),
+    }),
+  }),
+  parseAsString: {},
+  useQueryState: (key: string, options?: { defaultValue?: unknown }) => {
+    if (key === 'user_id') return [testState.userId, vi.fn()];
+    if (key === 'group_ids') return [testState.groupIds, vi.fn()];
+    if (key === 'month') return [testState.month, vi.fn()];
+    return [options?.defaultValue ?? '', vi.fn()];
+  },
+}));
+
+vi.mock('../../../../hooks/use-debounce', () => ({
+  useDebounce: (value: string) => [value],
+}));
+
+vi.mock('../finance-route-context', () => ({
+  useFinanceHref: () => (path: string) => path,
+}));
+
+vi.mock('../shared/use-finance-confidential-visibility', () => ({
+  useFinanceConfidentialVisibility: () => ({ isConfidential: false }),
+}));
+
+vi.mock('./components/invoice-blocked-state', () => ({
+  InvoiceBlockedState: () => null,
+}));
+
+vi.mock('./components/invoice-checkout-summary', () => ({
+  InvoiceCheckoutSummary: () => null,
+}));
+
+vi.mock('./components/invoice-content-editor', () => ({
+  InvoiceContentEditor: () => null,
+}));
+
+vi.mock('./components/invoice-customer-select-card', () => ({
+  InvoiceCustomerSelectCard: () => null,
+}));
+
+vi.mock('./components/invoice-payment-settings', () => ({
+  InvoicePaymentSettings: (props: unknown) => {
+    testState.InvoicePaymentSettings(props);
+    return null;
+  },
+}));
+
+vi.mock('./components/invoice-products-permission-warning', () => ({
+  InvoiceProductsPermissionWarning: () => null,
+  isPermissionRequestError: () => false,
+}));
+
+vi.mock('./components/subscription-attendance-summary', () => ({
+  SubscriptionAttendanceSummary: () => null,
+}));
+
+vi.mock('./components/subscription-group-selector', () => ({
+  SubscriptionGroupSelector: () => null,
+}));
+
+vi.mock('./components/subscription-prepaid-controls', () => ({
+  SubscriptionPrepaidControls: () => null,
+}));
+
+vi.mock('./create-promotion-dialog', () => ({
+  CreatePromotionDialog: () => null,
+}));
+
+vi.mock('./product-selection', () => ({
+  ProductSelection: (props: {
+    onSelectedProductsChange: (
+      products: typeof testState.selectedProducts
+    ) => void;
+  }) => {
+    if (!testState.productSelectionInjected) {
+      testState.productSelectionInjected = true;
+      queueMicrotask(() =>
+        props.onSelectedProductsChange(testState.selectedProducts)
+      );
+    }
+    return null;
+  },
+}));
+
+vi.mock('./hooks', () => ({
+  useAvailablePromotions: () => ({ data: [] }),
+  useCategories: (wsId: string, options?: unknown) => {
+    testState.useCategories(wsId, options);
+    return { data: testState.categories };
+  },
+  useInvoiceAttendanceConfig: () => ({ data: true }),
+  useInvoiceBlockedGroups: () => ({ data: [] }),
+  useInvoiceCustomerSearch: () => ({
+    customers: [],
+    error: null,
+    fetchNextPage: vi.fn(),
+    hasNextPage: false,
+    isFetching: false,
+    isFetchingNextPage: false,
+    isLoading: false,
+    selectedUser: { id: testState.userId, display_name: 'Customer' },
+  }),
+  useMultiGroupProducts: () => ({
+    data: [],
+    error: null,
+    isLoading: false,
+  }),
+  useProducts: () => ({
+    data: testState.products,
+    error: null,
+    isLoading: false,
+  }),
+  useSubscriptionInvoiceContext: () => ({
+    data: { attendance: [], latestInvoices: [] },
+    error: null,
+    isLoading: false,
+  }),
+  useUserGroups: () => ({
+    data: [
+      {
+        workspace_user_groups: {
+          ending_date: null,
+          id: 'group-1',
+          name: 'Group 1',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+        },
+      },
+    ],
+    isLoading: false,
+  }),
+  useUserLinkedPromotions: () => ({ data: [] }),
+  useUserReferralDiscounts: () => ({ data: [] }),
+  useWallets: (wsId: string, options?: unknown) => {
+    testState.useWallets(wsId, options);
+    return { data: testState.wallets };
+  },
+}));
+
+vi.mock('./hooks/use-best-promotion-selection', () => ({
+  useBestPromotionSelection: () => undefined,
+}));
+
+vi.mock('./hooks/use-invoice-rounding', () => ({
+  useInvoiceRounding: () => ({
+    resetRounding: vi.fn(),
+    roundDown: vi.fn(),
+    roundUp: vi.fn(),
+    roundedTotal: 100,
+  }),
+}));
+
+vi.mock('./hooks/use-invoice-subtotal', () => ({
+  useInvoiceSubtotal: () => 100,
+}));
+
+vi.mock('./hooks/use-subscription-auto-selection', () => ({
+  useSubscriptionAutoSelection: () => undefined,
+}));
+
+vi.mock('./hooks/use-subscription-invoice-content', () => ({
+  useSubscriptionInvoiceContent: () => undefined,
+}));
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+}
+
+function Wrapper({ children }: PropsWithChildren) {
+  return (
+    <QueryClientProvider client={createQueryClient()}>
+      {children}
+    </QueryClientProvider>
+  );
+}
+
+function renderSubscriptionInvoice(
+  props: Partial<ComponentProps<typeof SubscriptionInvoice>> = {}
+) {
+  return render(
+    <SubscriptionInvoice
+      wsId="ws-1"
+      createMultipleInvoices={false}
+      defaultCategoryId="category-default"
+      defaultCurrency="VND"
+      defaultWalletId="wallet-default"
+      workspaceTimezone="Asia/Ho_Chi_Minh"
+      {...props}
+    />,
+    { wrapper: Wrapper }
+  );
+}
+
+describe('SubscriptionInvoice checkout defaults', () => {
+  beforeEach(() => {
+    testState.InvoicePaymentSettings.mockClear();
+    testState.useCategories.mockClear();
+    testState.useWallets.mockClear();
+    testState.productSelectionInjected = false;
+    testState.products[0]!.finance_category_id = null;
+    testState.wallets = [];
+    testState.categories = [];
+  });
+
+  it('preloads payment options from defaults and keeps default IDs while options load', async () => {
+    const { rerender } = renderSubscriptionInvoice();
+
+    expect(testState.useWallets).toHaveBeenCalledWith('ws-1', {
+      enabled: true,
+    });
+    expect(testState.useCategories).toHaveBeenCalledWith('ws-1', {
+      enabled: true,
+    });
+
+    await waitFor(() =>
+      expect(testState.InvoicePaymentSettings).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          categories: [],
+          selectedCategoryId: 'category-default',
+          selectedWalletId: 'wallet-default',
+          wallets: [],
+        })
+      )
+    );
+
+    testState.wallets = [
+      {
+        currency: 'VND',
+        id: 'wallet-default',
+        name: 'Default wallet',
+        type: 'STANDARD',
+      },
+    ];
+    testState.categories = [
+      {
+        id: 'category-default',
+        name: 'Default category',
+      },
+    ];
+
+    rerender(
+      <SubscriptionInvoice
+        wsId="ws-1"
+        createMultipleInvoices={false}
+        defaultCategoryId="category-default"
+        defaultCurrency="VND"
+        defaultWalletId="wallet-default"
+        workspaceTimezone="Asia/Ho_Chi_Minh"
+      />
+    );
+
+    await waitFor(() =>
+      expect(testState.InvoicePaymentSettings).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          categories: testState.categories,
+          selectedCategoryId: 'category-default',
+          selectedWalletId: 'wallet-default',
+          wallets: testState.wallets,
+        })
+      )
+    );
+  });
+});