@tuturuuu/ui 0.38.0 → 0.39.0

package/src/components/ui/finance/invoices/invoiceId/invoice-card-date.test.tsx

@@ -0,0 +1,169 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen } from '@testing-library/react';
+import { NextIntlClientProvider } from 'next-intl';
+import { Component, type ComponentProps, type ReactNode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import en from '../../../../../../../../apps/contacts/messages/en.json';
+import viMessages from '../../../../../../../../apps/contacts/messages/vi.json';
+import { WorkspaceVisibilityProvider } from '../../../../../hooks/use-workspace-visibility';
+import InvoiceCard from './invoice-card';
+
+let caught: string[] = [];
+class DateBoundary extends Component<
+  { children: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error: Error) {
+    caught.push(error.name);
+  }
+  render() {
+    return this.state.failed ? (
+      <p>Synthetic date boundary</p>
+    ) : (
+      this.props.children
+    );
+  }
+}
+function invoice(id: string): ComponentProps<typeof InvoiceCard>['invoice'] {
+  return {
+    id,
+    category_id: 'synthetic-category',
+    completed_at: null,
+    creator_id: null,
+    customer_id: null,
+    note: null,
+    notice: null,
+    paid_amount: 0,
+    platform_creator_id: null,
+    subscription_months: null,
+    transaction_id: null,
+    valid_until: null,
+    wallet_id: 'synthetic-wallet',
+    ws_id: 'synthetic-workspace',
+    created_at: '2026-10-01T10:00:00Z',
+    price: 100,
+    total_diff: 0,
+    customer_display_name: `Customer ${id}`,
+    customer_full_name: null,
+    wallet: null,
+    creator: null,
+  };
+}
+function mount(locale: 'en' | 'vi', compact: boolean) {
+  window.localStorage.setItem('invoice-compact-view', JSON.stringify(compact));
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const content = (created_at: string | null) => (
+    <QueryClientProvider client={client}>
+      <WorkspaceVisibilityProvider actorId="synthetic-account">
+        <NextIntlClientProvider
+          locale={locale}
+          messages={locale === 'en' ? en : viMessages}
+          timeZone="UTC"
+          now={new Date('2026-10-01T10:00:00Z')}
+        >
+          <DateBoundary>
+            <InvoiceCard
+              wsId="synthetic-workspace"
+              lang={locale}
+              configs={[]}
+              invoice={{ ...invoice('synthetic-invoice'), created_at }}
+              products={[]}
+              promotions={[]}
+            />
+          </DateBoundary>
+        </NextIntlClientProvider>
+      </WorkspaceVisibilityProvider>
+    </QueryClientProvider>
+  );
+  const view = render(content('2026-10-01T10:00:00Z'));
+  return {
+    ...view,
+    replaceDate: (value: string | null) => view.rerender(content(value)),
+  };
+}
+beforeEach(() => {
+  caught = [];
+  window.localStorage.clear();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(() => {
+      throw new Error('Unexpected synthetic card request');
+    })
+  );
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+for (const locale of ['en', 'vi'] as const) {
+  for (const compact of [false, true]) {
+    describe(`${locale} actual ${compact ? 'compact' : 'full'} invoice card date`, () => {
+      const messages = locale === 'en' ? en : viMessages;
+      async function ready() {
+        expect(
+          await screen.findByRole('tab', {
+            name: messages.invoices[compact ? 'compact' : 'full'],
+          })
+        ).toHaveAttribute('aria-selected', 'true');
+      }
+      for (const date of ['not-a-date', ' ', '2026-13-40T10:00:00Z']) {
+        it(`keeps the actual card usable for unrenderable date ${JSON.stringify(date)}`, async () => {
+          const view = mount(locale, compact);
+          await ready();
+          view.replaceDate(date);
+          expect(caught).toEqual([]);
+          expect(
+            screen.queryByText('Synthetic date boundary')
+          ).not.toBeInTheDocument();
+          expect(screen.getByText('Customer synthetic-invoice')).toBeVisible();
+          expect(
+            screen.getByRole('button', { name: messages.common.export })
+          ).toBeEnabled();
+          expect(
+            document.getElementById('printable-area')?.textContent
+          ).not.toContain('Invalid Date');
+          if (date.trim())
+            expect(
+              document.getElementById('printable-area')?.textContent
+            ).not.toContain(date);
+        });
+      }
+      for (const date of [null, '']) {
+        it(`preserves the existing missing date omission for ${JSON.stringify(date)}`, async () => {
+          const view = mount(locale, compact);
+          await ready();
+          view.replaceDate(date);
+          expect(caught).toEqual([]);
+          expect(screen.getByText('Customer synthetic-invoice')).toBeVisible();
+          expect(
+            document.getElementById('printable-area')?.textContent
+          ).not.toContain(messages.invoices.invoice_date);
+        });
+      }
+      it('preserves locale formatting and preview controls for valid dates', async () => {
+        mount(locale, compact);
+        await ready();
+        const expected = new Intl.DateTimeFormat(locale, {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        }).format(new Date('2026-10-01T10:00:00Z'));
+        expect(
+          document.getElementById('printable-area')?.textContent
+        ).toContain(expected);
+        expect(caught).toEqual([]);
+        expect(
+          screen.getByRole('button', { name: messages.common.export })
+        ).toBeEnabled();
+      });
+    });
+  }
+}

package/src/components/ui/finance/invoices/invoiceId/invoice-card-storage.test.tsx

@@ -0,0 +1,120 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import type { ComponentProps, ReactNode } from 'react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { WorkspaceVisibilityProvider } from '../../../../../hooks/use-workspace-visibility';
+import InvoiceCard from './invoice-card';
+
+function renderCard(card: ReactNode) {
+  return render(
+    <QueryClientProvider client={new QueryClient()}>
+      <WorkspaceVisibilityProvider actorId="synthetic-account">
+        {card}
+      </WorkspaceVisibilityProvider>
+    </QueryClientProvider>
+  );
+}
+
+const capture = vi.hoisted(() => vi.fn());
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('html2canvas-pro', () => ({ default: capture }));
+vi.mock('../../shared/use-finance-confidential-visibility', () => ({
+  useFinanceConfidentialVisibility: () => ({ isConfidential: false }),
+}));
+const invoice: ComponentProps<typeof InvoiceCard>['invoice'] = {
+  category_id: 'synthetic-category',
+  completed_at: null,
+  creator_id: null,
+  customer_id: null,
+  note: null,
+  notice: null,
+  paid_amount: 0,
+  platform_creator_id: null,
+  subscription_months: null,
+  transaction_id: null,
+  valid_until: null,
+  wallet_id: 'synthetic-wallet',
+  ws_id: 'synthetic-workspace',
+  id: 'synthetic-invoice',
+  created_at: '2026-10-01T10:00:00Z',
+  price: 0,
+  total_diff: 0,
+  customer_display_name: 'Synthetic customer',
+  customer_full_name: null,
+  wallet: null,
+  creator: null,
+};
+beforeEach(() => {
+  window.localStorage.clear();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+  capture.mockResolvedValue({
+    toBlob: (callback: BlobCallback) => callback(null),
+  });
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  capture.mockReset();
+  window.history.replaceState({}, '', '/');
+});
+for (const kind of ['getItem', 'getter'])
+  it(`renders the actual invoice and enters PNG export after ${kind} denial`, async () => {
+    const storage = window.localStorage;
+    if (kind === 'getItem')
+      vi.spyOn(storage, 'getItem').mockImplementation(() => {
+        throw new DOMException('Synthetic denied storage', 'SecurityError');
+      });
+    else
+      Object.defineProperty(window, 'localStorage', {
+        configurable: true,
+        get() {
+          throw new DOMException('Synthetic denied getter', 'SecurityError');
+        },
+      });
+    window.history.replaceState({}, '', '/?image=true');
+    try {
+      renderCard(
+        <InvoiceCard
+          wsId="synthetic-workspace"
+          lang="en"
+          configs={[]}
+          invoice={invoice}
+          products={[]}
+          promotions={[]}
+        />
+      );
+      expect(
+        await screen.findByRole('tab', { name: 'invoices.full' })
+      ).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByText('Synthetic customer')).toBeInTheDocument();
+      await waitFor(() => expect(capture).toHaveBeenCalledTimes(1));
+      expect(capture.mock.calls[0]?.[0]).toBe(
+        document.getElementById('printable-area')
+      );
+      await waitFor(() => expect(window.location.search).toBe(''));
+    } finally {
+      if (kind === 'getter')
+        Object.defineProperty(window, 'localStorage', {
+          configurable: true,
+          writable: true,
+          value: storage,
+        });
+    }
+  });
+it('retains a valid saved compact preference in the actual invoice', async () => {
+  window.localStorage.setItem('invoice-compact-view', 'true');
+  renderCard(
+    <InvoiceCard
+      wsId="synthetic-workspace"
+      lang="en"
+      configs={[]}
+      invoice={invoice}
+      products={[]}
+      promotions={[]}
+    />
+  );
+  expect(
+    await screen.findByRole('tab', { name: 'invoices.compact' })
+  ).toHaveAttribute('aria-selected', 'true');
+  expect(capture).not.toHaveBeenCalled();
+});

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

@@ -26,10 +26,13 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Tabs, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useFinanceConfidentialVisibility } from '../../shared/use-finance-confidential-visibility';
 import { CompactInvoiceTemplate } from './compact-invoice-template';
 import { FullInvoiceTemplate } from './full-invoice-template';
+import { useInvoicePngExport } from './use-invoice-png-export';
 
 export default function InvoiceCard({
+  wsId,
   lang,
   configs,
   invoice,
@@ -37,6 +40,7 @@ export default function InvoiceCard({
   promotions,
   currency = 'VND',
 }: {
+  wsId: string;
   lang: string;
   configs: WorkspaceConfig[];
   invoice: Invoice & {
@@ -56,13 +60,32 @@ export default function InvoiceCard({
 }) {
   const t = useTranslations();
 
+  const { isConfidential } = useFinanceConfidentialVisibility();
   const printableRef = useRef<HTMLDivElement>(null);
   const [isDarkPreview, setIsDarkPreview] = useState(false);
   const [isCompact, setIsCompact, isCompactInitialized] = useLocalStorage(
     'invoice-compact-view',
     false
   );
-  const [isExporting, setIsExporting] = useState(false);
+  const { isExporting, handlePngExport } = useInvoicePngExport({
+    wsId,
+    invoice,
+    printableRef,
+    isDarkPreview,
+    ready: isCompactInitialized,
+    renderInputs: [
+      lang,
+      currency,
+      invoice,
+      configs,
+      products,
+      promotions,
+      isDarkPreview,
+      isCompact,
+      isCompactInitialized,
+      isConfidential,
+    ],
+  });
 
   const handlePrintExport = useCallback(() => {
     const printableArea = document.getElementById('printable-area');
@@ -155,66 +178,6 @@ export default function InvoiceCard({
     document.body.appendChild(iframe);
   }, [invoice.id, t]);
 
-  const handlePngExport = useCallback(async () => {
-    setIsExporting(true);
-    try {
-      const html2canvas = (await import('html2canvas-pro')).default;
-      const element = document.getElementById('printable-area');
-      if (!element) throw new Error('Printable area not found');
-
-      const canvas = await html2canvas(element, {
-        scale: 2,
-        useCORS: true,
-        backgroundColor: isDarkPreview ? '#1a1a1a' : '#ffffff',
-        width: element.scrollWidth,
-        height: element.scrollHeight,
-      });
-
-      await new Promise<void>((resolve, reject) => {
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              reject(new Error('Failed to create image'));
-              return;
-            }
-
-            try {
-              const url = URL.createObjectURL(blob);
-              const link = document.createElement('a');
-              link.href = url;
-
-              const sanitizedId = invoice.id
-                .normalize('NFD')
-                .replace(/[\u0300-\u036f]/g, '')
-                .replace(/đ/g, 'd')
-                .replace(/Đ/g, 'D')
-                .replace(/[^a-z0-9]/gi, '_')
-                .toLowerCase()
-                .replace(/_+/g, '_')
-                .replace(/^_|_$/g, '');
-
-              link.download = `invoice-${sanitizedId}.png`;
-              document.body.appendChild(link);
-              link.click();
-              document.body.removeChild(link);
-              URL.revokeObjectURL(url);
-              resolve();
-            } catch (error) {
-              reject(error);
-            }
-          },
-          'image/png',
-          1.0
-        );
-      });
-      toast.success(t('common.export-success'));
-    } catch {
-      toast.error(t('common.export-error'));
-    } finally {
-      setIsExporting(false);
-    }
-  }, [invoice.id, isDarkPreview, t]);
-
   // Auto trigger print or image download when URL contains ?print=true or ?image=true
   useEffect(() => {
     if (!isCompactInitialized) return;
@@ -232,7 +195,7 @@ export default function InvoiceCard({
             }
 
             if (shouldDownloadImage) {
-              await handlePngExport();
+              if (!(await handlePngExport())) return;
             }
           } catch {
             toast.error(t('common.export-error'));

package/src/components/ui/finance/invoices/invoiceId/invoice-details-page.tsx

@@ -153,6 +153,7 @@ export default async function InvoiceDetailsPage({
           </div>
 
           <InvoiceCard
+            wsId={wsId}
             lang={locale}
             configs={configs}
             invoice={{