@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.ts

@@ -8,6 +8,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
+import { hasInvalidSubscriptionLinks } from '../subscription-admission';
 import type {
   Product,
   ProductInventory,
@@ -37,7 +38,7 @@ interface UseSubscriptionAutoSelectionProps {
   workspaceTimezone?: string | null;
 }
 
-export type UseSubscriptionAutoSelectionResult = undefined;
+export type UseSubscriptionAutoSelectionResult = { blocked: boolean };
 
 const buildAutoSelectedProductsForGroup = (
   groupLinked: UserGroupProducts[],
@@ -58,7 +59,8 @@ const buildAutoSelectedProductsForGroup = (
         ? groupAttendanceDaysMap[groupId]
         : attendanceDays;
 
-    const desiredUnitId = linkItem.inventory_units.id;
+    const desiredUnitId = linkItem.inventory_units?.id;
+    if (!desiredUnitId) continue;
     const desiredWarehouseId = linkItem.warehouse_id;
 
     const product = allProducts.find((p) => p.id === productId);
@@ -223,6 +225,7 @@ export function useSubscriptionAutoSelection({
   workspaceTimezone,
 }: UseSubscriptionAutoSelectionProps): UseSubscriptionAutoSelectionResult {
   const t = useTranslations();
+  const blocked = hasInvalidSubscriptionLinks(groupProducts, products);
   const previousGroupIdRef = useRef<string>('');
   const fallbackToastShownRef = useRef<boolean>(false);
   const initialPrefillUsedRef = useRef<boolean>(false);
@@ -291,6 +294,7 @@ export function useSubscriptionAutoSelection({
   useEffect(() => {
     if (
       !enabled ||
+      blocked ||
       sortedSelectedGroupIds.length === 0 ||
       groupProducts.length === 0
     ) {
@@ -330,6 +334,7 @@ export function useSubscriptionAutoSelection({
     }
   }, [
     enabled,
+    blocked,
     sortedSelectedGroupIds,
     selectedMonth,
     prefillAmount,
@@ -342,4 +347,5 @@ export function useSubscriptionAutoSelection({
     groupAttendanceDaysMap,
     prepaidMonthCount,
   ]);
+  return { blocked };
 }

package/src/components/ui/finance/invoices/hooks/use-subscription-create.ts

@@ -0,0 +1,219 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useRouter } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useWorkspaceActor } from '../../../../../hooks/use-workspace-visibility';
+import { useFinanceHref } from '../../finance-route-context';
+import {
+  type CreateSubscriptionInvoicePayload,
+  createSubscriptionInvoiceWithInternalApi,
+} from '../internal-api';
+import { formatInvoiceRecalculationDescription } from '../invoice-visibility-format';
+import { invalidateInvoiceMutationQueries } from '../query-invalidation';
+import type { getSubscriptionBlockReason } from '../subscription-admission';
+
+type Options = {
+  createMultipleInvoices: boolean;
+  printAfterCreate: boolean;
+  downloadImageAfterCreate: boolean;
+};
+type Scope = {
+  actor: ReturnType<typeof useWorkspaceActor>;
+  wsId: string;
+  customerId: string;
+};
+type Intent = {
+  scope: Scope;
+  revision: number;
+  payload: CreateSubscriptionInvoicePayload;
+  options: Options;
+  onReset: () => void;
+  areNumbersHidden: boolean;
+  currency: string;
+};
+
+/** Completion belongs to a draft; admission is never undone by leaving it. */
+export function useSubscriptionCreate({
+  wsId,
+  payload,
+  options,
+  blockedReason,
+  checkoutReady,
+  areNumbersHidden,
+  currency,
+  onReset,
+}: {
+  wsId: string;
+  payload: CreateSubscriptionInvoicePayload;
+  options: Options;
+  blockedReason: ReturnType<typeof getSubscriptionBlockReason>;
+  checkoutReady: boolean;
+  areNumbersHidden: boolean;
+  currency: string;
+  onReset: () => void;
+}) {
+  const actor = useWorkspaceActor();
+  const client = useQueryClient();
+  const router = useRouter();
+  const financeHref = useFinanceHref();
+  const t = useTranslations();
+  const locale = useLocale();
+  const scope = useMemo(
+    () => ({ actor, wsId, customerId: payload.customer_id }),
+    [actor, wsId, payload.customer_id]
+  );
+  const draft = JSON.stringify({
+    payload,
+    options,
+    areNumbersHidden,
+    currency,
+    locale,
+    blockedReason,
+    checkoutReady,
+  });
+  const state = useRef<{
+    active: boolean;
+    scope: Scope;
+    revision: number;
+    draft: string;
+    owner: Intent | null;
+  }>({ active: false, scope, revision: 0, draft: '', owner: null });
+  const [creating, setCreating] = useState(false);
+  useLayoutEffect(() => {
+    state.current = {
+      active: true,
+      scope,
+      revision: state.current.revision + 1,
+      draft: '',
+      owner: null,
+    };
+    setCreating(false);
+    return () => {
+      state.current.active = false;
+      state.current.revision++;
+      state.current.owner = null;
+    };
+  }, [scope]);
+  useLayoutEffect(() => {
+    if (state.current.draft !== draft) {
+      state.current.draft = draft;
+      state.current.revision++;
+    }
+  }, [draft]);
+  const active = (intent: Intent) => {
+    if (
+      !state.current.active ||
+      state.current.scope !== intent.scope ||
+      state.current.owner !== intent ||
+      state.current.revision !== intent.revision ||
+      !intent.scope.actor
+    )
+      return false;
+    try {
+      intent.scope.actor.assertActive();
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const submit = async () => {
+    if (
+      state.current.owner ||
+      !state.current.active ||
+      state.current.scope !== scope
+    )
+      return;
+    if (blockedReason) {
+      toast(t(`ws-invoices.${blockedReason}`));
+      return;
+    }
+    if (!checkoutReady) {
+      toast(t('ws-invoices.create_subscription_invoice_validation'));
+      return;
+    }
+    if (!payload.products.length) {
+      toast(t('ws-invoices.no_products_to_invoice'));
+      return;
+    }
+    const intent: Intent = {
+      scope,
+      revision: state.current.revision,
+      payload: structuredClone(payload),
+      options: { ...options },
+      onReset,
+      areNumbersHidden,
+      currency,
+    };
+    state.current.owner = intent;
+    if (!active(intent)) {
+      state.current.owner = null;
+      return;
+    }
+    setCreating(true);
+    try {
+      if (!active(intent)) return;
+      const result = await createSubscriptionInvoiceWithInternalApi(
+        intent.scope.wsId,
+        intent.payload
+      );
+      if (!active(intent)) return;
+      void invalidateInvoiceMutationQueries(client, intent.scope.wsId);
+      if (!active(intent)) return;
+      if (result.data?.values_recalculated) {
+        const { calculated_values, frontend_values } = result.data;
+        toast(t('ws-invoices.subscription_invoice_created_recalculated'), {
+          description: formatInvoiceRecalculationDescription({
+            areNumbersHidden: intent.areNumbersHidden,
+            calculatedTotal: calculated_values.total,
+            currency: intent.currency,
+            frontendTotal: frontend_values?.total || 0,
+            roundingApplied: calculated_values.rounding_applied,
+            t,
+          }),
+          duration: 5000,
+        });
+      } else
+        toast(
+          t('ws-invoices.subscription_invoice_created_success', {
+            invoiceId: result.invoice_id,
+          })
+        );
+      if (!active(intent)) return;
+      if (intent.options.createMultipleInvoices) intent.onReset();
+      else {
+        const params = new URLSearchParams();
+        if (intent.options.printAfterCreate) params.set('print', 'true');
+        if (intent.options.downloadImageAfterCreate)
+          params.set('image', 'true');
+        router.push(
+          `/${intent.scope.wsId}${financeHref(`/invoices/${result.invoice_id}`)}${params.toString() ? `?${params.toString()}` : ''}`
+        );
+      }
+    } catch (error) {
+      if (active(intent))
+        toast(
+          t('ws-invoices.error_creating_subscription_invoice', {
+            error:
+              error instanceof Error
+                ? error.message
+                : t('ws-invoices.failed_to_create_subscription_invoice'),
+          })
+        );
+    } finally {
+      // A newer draft may expire effects, but only this still-owned pending write
+      // can release its indicator. An old scope can never clear a new owner.
+      if (
+        state.current.active &&
+        state.current.scope === intent.scope &&
+        state.current.owner === intent
+      ) {
+        state.current.owner = null;
+        setCreating(false);
+      }
+    }
+  };
+  return { submit, creating };
+}

package/src/components/ui/finance/invoices/hooks/use-subscription-invoice-context.ts

@@ -0,0 +1,59 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  getSubscriptionInvoiceContext,
+  type SubscriptionInvoiceContextResponse,
+} from '@tuturuuu/internal-api/finance';
+import { useWorkspaceActor } from '../../../../../hooks/use-workspace-visibility';
+
+import { invoiceActorLifetimeKey } from './invoice-actor-lifetime-key';
+
+export function useSubscriptionInvoiceContext(
+  wsId: string,
+  userId: string,
+  groupIds: string[],
+  month: string,
+  monthCount = 1
+) {
+  const actor = useWorkspaceActor();
+  return useQuery({
+    queryKey: [
+      'subscription-invoice-context',
+      wsId,
+      userId,
+      groupIds,
+      month,
+      monthCount,
+      actor?.actorId ?? null,
+      actor ? invoiceActorLifetimeKey(actor.lifetime) : null,
+    ],
+    queryFn: async (): Promise<SubscriptionInvoiceContextResponse> => {
+      if (!actor) throw new Error('Workspace account unavailable');
+      actor.assertActive();
+      if (!wsId || !userId || groupIds.length === 0 || !month) {
+        return {
+          attendance: [],
+          latestInvoices: [],
+          scheduledSessionsByGroupId: {},
+        };
+      }
+      try {
+        const response = await getSubscriptionInvoiceContext(wsId, {
+          groupIds,
+          month,
+          monthCount,
+          userId,
+        });
+        actor.assertActive();
+        return response;
+      } catch (error) {
+        actor.assertActive();
+        throw error;
+      }
+    },
+    enabled: !!actor && !!wsId && !!userId && groupIds.length > 0 && !!month,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+}

package/src/components/ui/finance/invoices/hooks/use-user-groups.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import { useWorkspaceActor } from '../../../../../hooks/use-workspace-visibility';
+import { listUserGroupsWithInternalApi } from '../internal-api';
+import type { UserGroup } from '../utils';
+import { invoiceActorLifetimeKey } from './invoice-actor-lifetime-key';
+
+export function useUserGroups(wsId: string, userId: string) {
+  const actor = useWorkspaceActor();
+  return useQuery({
+    queryKey: [
+      'user-groups',
+      wsId,
+      userId,
+      actor?.actorId ?? null,
+      actor ? invoiceActorLifetimeKey(actor.lifetime) : null,
+    ],
+    queryFn: async (): Promise<UserGroup[]> => {
+      if (!actor) throw new Error('Workspace account unavailable');
+      actor.assertActive();
+      if (!userId) return [];
+      try {
+        const groups = await listUserGroupsWithInternalApi(wsId, userId);
+        actor.assertActive();
+        return (groups || []).map((group) => ({
+          workspace_user_groups: group.workspace_user_groups ?? null,
+        }));
+      } catch (error) {
+        actor.assertActive();
+        throw error;
+      }
+    },
+    enabled: !!actor && !!wsId && !!userId,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
+}

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

@@ -1,13 +1,11 @@
 import {
   keepPreviousData,
-  useInfiniteQuery,
   useMutation,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
 import {
   getPendingFinanceInvoicesCount,
-  getSubscriptionInvoiceContext,
   listFinanceInvoices,
   listPendingFinanceInvoices,
   listTransactionCategories,
@@ -28,14 +26,15 @@ import {
   listMultiGroupProductsWithInternalApi,
   listPromotionsWithInternalApi,
   listUserGroupProductsWithInternalApi,
-  listUserGroupsWithInternalApi,
   listUserLinkedPromotionsWithInternalApi,
   listUserReferralDiscountsWithInternalApi,
   listWorkspaceUsersWithInternalApi,
 } from './internal-api';
-import type { UserGroup } from './utils';
 
+export { useInfiniteUserInvoices } from './hooks/use-infinite-user-invoices';
 export { useInvoiceCustomerSearch } from './hooks/use-invoice-customer-search';
+export { useSubscriptionInvoiceContext } from './hooks/use-subscription-invoice-context';
+export { useUserGroups } from './hooks/use-user-groups';
 
 const invoiceSchema = z.object({
   id: z.string(),
@@ -343,102 +342,6 @@ export const useUserInvoices = (wsId: string, userId: string) => {
   });
 };
 
-export const useInfiniteUserInvoices = (
-  wsId: string,
-  userId: string,
-  pageSize = 10
-) => {
-  return useInfiniteQuery({
-    queryKey: ['infinite-user-invoices', wsId, userId],
-    queryFn: async ({ pageParam = 1 }: { pageParam: number }) => {
-      const payload = await listFinanceInvoices(wsId, {
-        customerIds: [userId],
-        page: String(pageParam),
-        pageSize: String(pageSize),
-      });
-      const data = payload.data || [];
-      const count = payload.count ?? 0;
-      const fetchedCount = pageParam * pageSize;
-
-      return {
-        data,
-        count,
-        nextPage: fetchedCount < count ? pageParam + 1 : null,
-        hasMore: fetchedCount < count,
-      };
-    },
-    initialPageParam: 1,
-    getNextPageParam: (lastPage) => lastPage.nextPage,
-    enabled: !!userId,
-  });
-};
-
-export const useUserGroups = (wsId: string, userId: string) => {
-  return useQuery({
-    queryKey: ['user-groups', wsId, userId],
-    queryFn: async (): Promise<UserGroup[]> => {
-      if (!userId) return [];
-      const groups = await listUserGroupsWithInternalApi(wsId, userId);
-      return (groups || []).map((group) => ({
-        workspace_user_groups: group.workspace_user_groups ?? null,
-      }));
-    },
-    enabled: !!wsId && !!userId,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-    gcTime: 10 * 60 * 1000, // 10 minutes
-    refetchOnWindowFocus: false,
-    retry: false,
-  });
-};
-
-export const useSubscriptionInvoiceContext = (
-  wsId: string,
-  userId: string,
-  groupIds: string[],
-  month: string,
-  monthCount = 1
-) => {
-  return useQuery({
-    queryKey: [
-      'subscription-invoice-context',
-      wsId,
-      userId,
-      groupIds,
-      month,
-      monthCount,
-    ],
-    queryFn: async () => {
-      if (!wsId || !userId || groupIds.length === 0 || !month) {
-        return {
-          attendance: [] as Array<{
-            status: string;
-            date: string;
-            group_id?: string;
-          }>,
-          latestInvoices: [] as Array<{
-            group_id?: string;
-            valid_until?: string | null;
-            created_at?: string | null;
-          }>,
-          scheduledSessionsByGroupId: {} as Record<string, string[]>,
-        };
-      }
-
-      return getSubscriptionInvoiceContext(wsId, {
-        groupIds,
-        month,
-        monthCount,
-        userId,
-      });
-    },
-    enabled: !!wsId && !!userId && groupIds.length > 0 && !!month,
-    staleTime: 5 * 60 * 1000,
-    gcTime: 10 * 60 * 1000,
-    refetchOnWindowFocus: false,
-    retry: false,
-  });
-};
-
 // Get workspace config for attendance-based invoice calculation
 // Returns true if attendance-based calculation should be used (default), false if all sessions should be included
 export const useInvoiceAttendanceConfig = (

package/src/components/ui/finance/invoices/invoiceId/compact-invoice-template.tsx

@@ -3,6 +3,7 @@ import type { WorkspaceConfig } from '@tuturuuu/types/primitives/WorkspaceConfig
 import { formatCurrency } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { FinanceDisplayAmount } from '../../shared/finance-display-amount';
+import { formatInvoiceTemplateDate } from './format-invoice-template-date';
 
 export function CompactInvoiceTemplate({
   invoice,
@@ -36,13 +37,7 @@ export function CompactInvoiceTemplate({
   const brandLogoAlt = BRAND_NAME
     ? t('invoices.brand_logo_alt', { brand: BRAND_NAME })
     : t('invoices.logo_alt');
-  const invoiceDate = invoice.created_at
-    ? new Intl.DateTimeFormat(lang, {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-      }).format(new Date(invoice.created_at))
-    : null;
+  const invoiceDate = formatInvoiceTemplateDate(invoice.created_at, lang);
   const dividerClass = isDarkPreview
     ? 'border-foreground/30 print:border-black'
     : 'border-black/30 print:border-black';

package/src/components/ui/finance/invoices/invoiceId/format-invoice-template-date.ts

@@ -0,0 +1,13 @@
+export function formatInvoiceTemplateDate(
+  value: string | null | undefined,
+  locale: string
+): string | null {
+  if (!value) return null;
+  const date = new Date(value);
+  if (!Number.isFinite(date.getTime())) return null;
+  return new Intl.DateTimeFormat(locale, {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  }).format(date);
+}

package/src/components/ui/finance/invoices/invoiceId/full-invoice-template.tsx

@@ -9,6 +9,7 @@ import { formatCurrency } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { FinanceDisplayAmount } from '../../shared/finance-display-amount';
 import { getSavedInvoiceDiscount } from '../invoice-discount';
+import { formatInvoiceTemplateDate } from './format-invoice-template-date';
 
 export function FullInvoiceTemplate({
   invoice,
@@ -43,13 +44,7 @@ export function FullInvoiceTemplate({
   const brandLogoAlt = brandName
     ? t('invoices.brand_logo_alt', { brand: brandName })
     : t('invoices.logo_alt');
-  const invoiceDate = invoice.created_at
-    ? new Intl.DateTimeFormat(lang, {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-      }).format(new Date(invoice.created_at))
-    : null;
+  const invoiceDate = formatInvoiceTemplateDate(invoice.created_at, lang);
 
   const subtotal = products.reduce((total, product) => {
     return total + product.price * product.amount;