@tuturuuu/ui 0.13.0 → 0.16.0

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,
+        })
+      )
+    );
+  });
+});

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

@@ -37,6 +37,7 @@ import {
 } from './components/invoice-products-permission-warning';
 import { SubscriptionAttendanceSummary } from './components/subscription-attendance-summary';
 import { SubscriptionGroupSelector } from './components/subscription-group-selector';
+import { SubscriptionInvoiceProposal } from './components/subscription-invoice-proposal';
 import { SubscriptionPrepaidControls } from './components/subscription-prepaid-controls';
 import { CreatePromotionDialog } from './create-promotion-dialog';
 import type { AvailablePromotion } from './hooks';
@@ -71,23 +72,27 @@ import {
   getBillableAttendanceRecordsInRange,
   getBillableSessionsForGroupsInRange,
   getCoverageValidUntilMonthValue,
+  getCurrentBillingDate,
+  getCurrentMonthValue,
   getGroupsDateRange,
-  getLinkedFinanceCategorySelection,
   getMonthStartDate,
   getSubscriptionAttendanceDisplayData,
   isSubscriptionRangeFullyPaidForGroups,
   PREPAID_MONTH_OPTION_HORIZON,
+  resolveSubscriptionInvoiceCategoryId,
 } from './utils';
 
 interface Props {
   wsId: string;
-  prefillAmount?: number | null; // Total attendance days to prefill product quantities
+  prefillQuantity?: number | null;
+  suggestedTotal?: number | null;
   createMultipleInvoices: boolean;
   printAfterCreate?: boolean;
   downloadImageAfterCreate?: boolean;
   defaultWalletId?: string;
   defaultCategoryId?: string;
   defaultCurrency?: string;
+  workspaceTimezone?: string | null;
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
   canReadInvoiceProducts?: boolean;
@@ -98,13 +103,15 @@ interface Props {
 
 export function SubscriptionInvoice({
   wsId,
-  prefillAmount,
+  prefillQuantity,
+  suggestedTotal,
   createMultipleInvoices,
   printAfterCreate = false,
   downloadImageAfterCreate = false,
   defaultWalletId,
   defaultCategoryId,
   defaultCurrency: rawDefaultCurrency = 'USD',
+  workspaceTimezone,
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
   canReadInvoiceProducts = true,
@@ -133,7 +140,7 @@ export function SubscriptionInvoice({
     })
   );
   const [selectedMonth, setSelectedMonth] = useQueryState('month', {
-    defaultValue: formatMonthValue(new Date()),
+    defaultValue: getCurrentMonthValue(workspaceTimezone),
     shallow: true,
   });
   const [prepaidMonthCount, setPrepaidMonthCount] = useState(1);
@@ -144,6 +151,8 @@ export function SubscriptionInvoice({
     useState<SelectedProductItem[]>([]);
   const hasSelectedGroups = selectedGroupIds.length > 0;
   const hasSelectedProducts = subscriptionSelectedProducts.length > 0;
+  const shouldPreloadPaymentSettings =
+    hasSelectedProducts || Boolean(defaultWalletId || defaultCategoryId);
 
   const updateSearchParam = useCallback(
     (key: string, value: string) => {
@@ -197,10 +206,10 @@ export function SubscriptionInvoice({
     { enabled: hasSelectedProducts }
   );
   const { data: wallets = [] } = useWallets(wsId, {
-    enabled: hasSelectedProducts,
+    enabled: shouldPreloadPaymentSettings,
   });
   const { data: categories = [] } = useCategories(wsId, {
-    enabled: hasSelectedProducts,
+    enabled: shouldPreloadPaymentSettings,
   });
 
   // Blocked groups check
@@ -236,9 +245,7 @@ export function SubscriptionInvoice({
     ) : null;
 
   useEffect(() => {
-    if (defaultWalletId) {
-      setSelectedWalletId(defaultWalletId);
-    }
+    setSelectedWalletId(defaultWalletId || '');
   }, [defaultWalletId]);
 
   const [selectedPromotionId, setSelectedPromotionId] =
@@ -286,9 +293,10 @@ export function SubscriptionInvoice({
         [],
         locale,
         selectedMonth,
-        PREPAID_MONTH_OPTION_HORIZON
+        PREPAID_MONTH_OPTION_HORIZON,
+        { workspaceTimezone }
       ),
-    [locale, selectedGroupIds, selectedMonth, userGroups]
+    [locale, selectedGroupIds, selectedMonth, userGroups, workspaceTimezone]
   );
 
   const effectiveSelectedMonth = useMemo(() => {
@@ -309,7 +317,7 @@ export function SubscriptionInvoice({
       return selectedMonth;
     }
 
-    const now = new Date();
+    const now = getCurrentBillingDate(workspaceTimezone);
     let defaultMonth: Date;
 
     if (!latestEnd || (now >= earliestStart && now <= latestEnd)) {
@@ -321,7 +329,13 @@ export function SubscriptionInvoice({
     }
 
     return formatMonthValue(defaultMonth);
-  }, [availableMonthOptions, selectedGroupIds, selectedMonth, userGroups]);
+  }, [
+    availableMonthOptions,
+    selectedGroupIds,
+    selectedMonth,
+    userGroups,
+    workspaceTimezone,
+  ]);
 
   const {
     data: subscriptionInvoiceContext,
@@ -538,7 +552,7 @@ export function SubscriptionInvoice({
     enabled: true,
     selectedGroupIds,
     selectedMonth: effectiveSelectedMonth,
-    prefillAmount,
+    prefillAmount: prefillQuantity,
     groupProducts,
     products,
     userGroups,
@@ -547,6 +561,7 @@ export function SubscriptionInvoice({
     latestSubscriptionInvoices,
     onSelectedProductsChange: setSubscriptionSelectedProducts,
     prepaidMonthCount,
+    workspaceTimezone,
   });
 
   useSubscriptionInvoiceContent({
@@ -566,21 +581,18 @@ export function SubscriptionInvoice({
   });
 
   const subtotal = useInvoiceSubtotal(subscriptionSelectedProducts);
-  const linkedFinanceCategorySelection = useMemo(
-    () => getLinkedFinanceCategorySelection(subscriptionSelectedProducts),
-    [subscriptionSelectedProducts]
+  const resolvedSubscriptionCategoryId = useMemo(
+    () =>
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId,
+        items: subscriptionSelectedProducts,
+      }),
+    [defaultCategoryId, subscriptionSelectedProducts]
   );
 
   useEffect(() => {
-    if (linkedFinanceCategorySelection.categoryId) {
-      setSelectedCategoryId(linkedFinanceCategorySelection.categoryId);
-      return;
-    }
-
-    if (linkedFinanceCategorySelection.hasMixedCategories) {
-      setSelectedCategoryId('');
-    }
-  }, [linkedFinanceCategorySelection]);
+    setSelectedCategoryId(resolvedSubscriptionCategoryId);
+  }, [resolvedSubscriptionCategoryId]);
 
   useBestPromotionSelection({
     enabled: true,
@@ -677,7 +689,8 @@ export function SubscriptionInvoice({
         latestSubscriptionInvoices,
         locale,
         effectiveSelectedMonth,
-        PREPAID_MONTH_OPTION_HORIZON
+        PREPAID_MONTH_OPTION_HORIZON,
+        { workspaceTimezone }
       ),
     [
       effectiveSelectedMonth,
@@ -685,6 +698,7 @@ export function SubscriptionInvoice({
       selectedGroupIds,
       latestSubscriptionInvoices,
       locale,
+      workspaceTimezone,
     ]
   );
 
@@ -732,7 +746,7 @@ export function SubscriptionInvoice({
       if (lastValidatedKeyRef.current === monthValidationKey) return;
       lastValidatedKeyRef.current = monthValidationKey;
 
-      const now = new Date();
+      const now = getCurrentBillingDate(workspaceTimezone);
       let defaultMonth: Date;
 
       if (now >= earliestStart && now <= latestEnd) defaultMonth = now;
@@ -754,6 +768,7 @@ export function SubscriptionInvoice({
     selectedMonth,
     updateSearchParam,
     userGroups,
+    workspaceTimezone,
   ]);
 
   const navigateMonth = (direction: 'prev' | 'next') => {
@@ -1020,6 +1035,16 @@ export function SubscriptionInvoice({
           <InvoiceBlockedState type="subscription" />
         ) : (
           <>
+            {suggestedTotal != null && (
+              <SubscriptionInvoiceProposal
+                billableQuantity={prefillQuantity}
+                currency={defaultCurrency}
+                currentTotal={subscriptionRoundedTotal}
+                hasSelectedProducts={hasSelectedProducts}
+                suggestedTotal={suggestedTotal}
+              />
+            )}
+
             {selectedGroupIds.length > 0 && effectiveSelectedMonth && (
               <SubscriptionAttendanceSummary
                 selectedGroupIds={selectedGroupIds}

package/src/components/ui/finance/invoices/utils.test.ts

@@ -6,11 +6,14 @@ import {
   getBillableQuantityMapForGroupsRange,
   getBillableSessionsForGroups,
   getCoverageMonths,
+  getCurrentMonthValue,
   getLinkedFinanceCategorySelection,
   getSubscriptionAttendanceDisplayData,
   getSubscriptionCoverageInvoiceForGroup,
   isSubscriptionMonthPaidForGroup,
   isSubscriptionRangeFullyPaidForGroups,
+  resolveBillingTimezone,
+  resolveSubscriptionInvoiceCategoryId,
   type UserGroup,
 } from './utils';
 
@@ -169,6 +172,19 @@ describe('subscription invoice coverage', () => {
     ).toBe(false);
   });
 
+  it('treats timestamp valid_until values as civil invoice months', () => {
+    const latestInvoices = [
+      { group_id: groupId, valid_until: '2026-07-01T00:00:00.000Z' },
+    ];
+
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-06', latestInvoices)
+    ).toBe(true);
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-07', latestInvoices)
+    ).toBe(false);
+  });
+
   it('treats null and invalid valid_until values as unpaid', () => {
     expect(
       isSubscriptionMonthPaidForGroup(groupId, '2026-05', [
@@ -265,6 +281,50 @@ describe('subscription invoice coverage', () => {
       })
     ).toEqual({ [groupId]: 2 });
   });
+
+  it('uses workspace timezone, not browser timezone, for current-month recommendations', () => {
+    const groups = [
+      {
+        workspace_user_groups: {
+          id: groupId,
+          name: 'Math 7',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+          ending_date: null,
+        } as NonNullable<UserGroup['workspace_user_groups']>,
+      },
+    ] satisfies UserGroup[];
+    const now = new Date('2026-06-30T18:00:00.000Z');
+
+    expect(getCurrentMonthValue('UTC', now)).toBe('2026-06');
+    expect(getCurrentMonthValue('Asia/Ho_Chi_Minh', now)).toBe('2026-07');
+    expect(getCurrentMonthValue('America/Los_Angeles', now)).toBe('2026-06');
+    expect(resolveBillingTimezone('auto')).toBe('UTC');
+    expect(resolveBillingTimezone('Not/A_Timezone')).toBe('UTC');
+
+    expect(
+      getBillableQuantityMapForGroupsRange({
+        groupIds: [groupId],
+        now,
+        selectedMonth: '2026-07',
+        useAttendanceBased: true,
+        userAttendance: [],
+        userGroups: groups,
+        workspaceTimezone: 'Asia/Ho_Chi_Minh',
+      })
+    ).toEqual({ [groupId]: 0 });
+    expect(
+      getBillableQuantityMapForGroupsRange({
+        groupIds: [groupId],
+        now,
+        selectedMonth: '2026-07',
+        useAttendanceBased: true,
+        userAttendance: [],
+        userGroups: groups,
+        workspaceTimezone: 'America/Los_Angeles',
+      })
+    ).toEqual({ [groupId]: 1 });
+  });
 });
 
 describe('linked finance category selection', () => {
@@ -294,4 +354,28 @@ describe('linked finance category selection', () => {
       hasSingleCategory: false,
     });
   });
+
+  it('resolves subscription checkout category precedence', () => {
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [{ product: { finance_category_id: 'category-linked' } }],
+      })
+    ).toBe('category-linked');
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [
+          { product: { finance_category_id: 'category-a' } },
+          { product: { finance_category_id: 'category-b' } },
+        ],
+      })
+    ).toBe('');
+    expect(
+      resolveSubscriptionInvoiceCategoryId({
+        defaultCategoryId: 'category-default',
+        items: [{ product: { finance_category_id: null } }],
+      })
+    ).toBe('category-default');
+  });
 });