@tuturuuu/ui 0.30.2 → 0.31.0

package/src/components/ui/report-problem-model.ts

@@ -0,0 +1,133 @@
+import type { InternalApiClientOptions } from '@tuturuuu/internal-api/client';
+import type { Product, SupportType } from '@tuturuuu/types';
+import type React from 'react';
+import { z } from 'zod';
+export interface ReportProblemFormData {
+  product: Product | '';
+  type: SupportType | '';
+  suggestion: string;
+  media: File[];
+}
+
+export const MAX_MEDIA_SIZE = 5 * 1024 * 1024; // 5MB
+export const MAX_FILES = 5;
+
+// Allowed media types
+export const ALLOWED_IMAGE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+];
+export const ALLOWED_VIDEO_TYPES = [
+  'video/mp4',
+  'video/webm',
+  'video/quicktime',
+];
+
+// Zod schema for form validation
+export const reportProblemSchema = z.object({
+  product: z.enum(
+    [
+      'web',
+      'nova',
+      'rewise',
+      'calendar',
+      'finance',
+      'tudo',
+      'tumeet',
+      'shortener',
+      'qr',
+      'drive',
+      'mail',
+      'other',
+    ],
+    {
+      message: 'Please select a product',
+    }
+  ),
+  type: z.enum(['bug', 'feature-request'], {
+    message: 'Please select a support type',
+  }),
+  suggestion: z
+    .string()
+    .trim()
+    .min(1, 'Please describe the issue or suggestion')
+    .max(1000, 'Suggestion must be at most 1000 characters'),
+  media: z
+    .array(z.instanceof(File))
+    .max(MAX_FILES, `You can upload up to ${MAX_FILES} files`)
+    .refine(
+      (files) =>
+        files.every(
+          (f) =>
+            ALLOWED_IMAGE_TYPES.includes(f.type) ||
+            ALLOWED_VIDEO_TYPES.includes(f.type)
+        ),
+      {
+        message:
+          'Only image (PNG, JPEG, WebP, GIF) and video (MP4, WebM, MOV) files are allowed',
+      }
+    )
+    .refine((files) => files.every((f) => f.size <= MAX_MEDIA_SIZE), {
+      message: 'Each file must be 5MB or less',
+    }),
+});
+
+export interface ReportProblemDialogProps {
+  ImageComponent?: React.ComponentType<{
+    src: string;
+    alt: string;
+    className: string;
+    width: number;
+    height: number;
+  }>;
+  t: (
+    key:
+      | 'affected-product-required'
+      | 'cancel'
+      | 'media-alt'
+      | 'media-optional'
+      | 'report-problem'
+      | 'report-problem-description'
+      | 'report-submitted-success'
+      | 'select-product-placeholder'
+      | 'submit-report'
+      | 'submitting'
+      | 'suggestion-improve'
+      | 'suggestion-placeholder',
+    values?: Record<string, string | number>
+  ) => string;
+  apiOptions?: InternalApiClientOptions;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  products?: Array<{ value: Product; label: string }>;
+  className?: string;
+  trigger?: React.ReactNode;
+  showTrigger?: boolean;
+}
+
+export const DEFAULT_PRODUCTS: Array<{ value: Product; label: string }> = [
+  { value: 'web', label: 'Web Dashboard' },
+  { value: 'nova', label: 'Nova' },
+  { value: 'rewise', label: 'Rewise' },
+  { value: 'calendar', label: 'Calendar' },
+  { value: 'finance', label: 'Finance' },
+  { value: 'tudo', label: 'Tuturuuu Tasks' },
+  { value: 'tumeet', label: 'Tuturuuu Meet' },
+  { value: 'shortener', label: 'URL Shortener' },
+  { value: 'qr', label: 'QR Code' },
+  { value: 'drive', label: 'Drive' },
+  { value: 'mail', label: 'Mail' },
+  { value: 'other', label: 'Other' },
+];
+
+export const DEFAULT_SUPPORT_TYPES: Array<{
+  value: SupportType;
+  label: string;
+}> = [
+  { value: 'bug', label: 'Bug Report' },
+  { value: 'feature-request', label: 'Feature Request' },
+];
+
+export const LOCAL_STORAGE_KEY = 'report-problem-form-data';

package/src/components/ui/report-problem-mutation.ts

@@ -0,0 +1,122 @@
+import { useMutation } from '@tanstack/react-query';
+import type { InternalApiClientOptions } from '@tuturuuu/internal-api/client';
+import {
+  createReportUploadUrls,
+  deleteReportUploadPaths,
+  submitReport,
+} from '@tuturuuu/internal-api/reports';
+import type { Product, SupportType } from '@tuturuuu/types';
+
+interface SubmitReportMutationInput {
+  product: Product;
+  type: SupportType;
+  suggestion: string;
+  subject: string;
+  media: File[];
+}
+
+export function useSubmitReportMutation(apiOptions?: InternalApiClientOptions) {
+  return useMutation({
+    mutationFn: async ({
+      product,
+      type,
+      suggestion,
+      subject,
+      media,
+    }: SubmitReportMutationInput) => {
+      const uploadedPaths: string[] = [];
+
+      const cleanupUploadedMedia = async () => {
+        if (uploadedPaths.length === 0) {
+          return;
+        }
+
+        try {
+          await deleteReportUploadPaths({ paths: uploadedPaths }, apiOptions);
+        } catch (cleanupError) {
+          console.error(
+            'Failed to clean up uploaded support report media:',
+            cleanupError
+          );
+        }
+      };
+
+      try {
+        if (media.length > 0) {
+          const { uploads } = await createReportUploadUrls(
+            {
+              files: media.map((file) => ({
+                filename: file.name,
+                contentType: file.type,
+                size: file.size,
+              })),
+            },
+            apiOptions
+          );
+
+          if (uploads.length !== media.length) {
+            throw new Error('Failed to prepare media uploads');
+          }
+
+          for (const [index, upload] of uploads.entries()) {
+            const file = media[index];
+
+            if (!file) {
+              throw new Error('Missing media file during upload');
+            }
+
+            let uploadResponse = await fetch(upload.signedUrl, {
+              method: 'PUT',
+              cache: 'no-store',
+              headers: {
+                Authorization: `Bearer ${upload.token}`,
+                'Content-Type': file.type || 'application/octet-stream',
+              },
+              body: file,
+            });
+
+            if (!uploadResponse.ok) {
+              uploadResponse = await fetch(upload.signedUrl, {
+                method: 'PUT',
+                cache: 'no-store',
+                headers: {
+                  Authorization: `Bearer ${upload.token}`,
+                },
+                body: file,
+              });
+            }
+
+            if (!uploadResponse.ok) {
+              const text = await uploadResponse.text().catch(() => '');
+              throw new Error(
+                `Failed to upload media (${uploadResponse.status})${text ? `: ${text}` : ''}`
+              );
+            }
+
+            uploadedPaths.push(upload.path);
+          }
+        }
+
+        const result = await submitReport(
+          {
+            product,
+            type,
+            suggestion,
+            subject,
+            imagePaths: uploadedPaths,
+          },
+          apiOptions
+        );
+
+        if (!result.success) {
+          throw new Error(result.message || 'Failed to submit report');
+        }
+
+        return result;
+      } catch (error) {
+        await cleanupUploadedMedia();
+        throw error;
+      }
+    },
+  });
+}

package/src/components/ui/save-notification.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { notifySave } from './save-notification';
+import { Toaster, toast } from './sonner';
+
+afterEach(() => {
+  toast.dismiss();
+  vi.unstubAllGlobals();
+});
+
+it('renders persistent save failures in the toaster used by app layouts', async () => {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn(() => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+  );
+  render(<Toaster />);
+  act(() => {
+    notifySave({
+      title: 'Save failed',
+      description: 'Your draft is preserved. Try again.',
+      variant: 'destructive',
+      duration: Number.POSITIVE_INFINITY,
+    });
+  });
+  expect(await screen.findByText('Save failed')).toBeInTheDocument();
+  expect(
+    screen.getByText('Your draft is preserved. Try again.')
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: 'Close toast' })
+  ).toBeInTheDocument();
+});

package/src/components/ui/save-notification.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { toast } from './sonner';
+
+interface SaveNotification {
+  title: ReactNode;
+  description?: ReactNode;
+  variant?: 'default' | 'destructive';
+  duration?: number;
+}
+
+/** Save feedback must use the Sonner toaster mounted by the application shells. */
+export function notifySave({ title, variant, ...options }: SaveNotification) {
+  const notify = variant === 'destructive' ? toast.error : toast.success;
+  return notify(title, { ...options, closeButton: true });
+}