feat: update disabled dropzone text (#787)

Update the dropzone so it will display the relevant disabled text based
on the reason it is disabled.

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -36,6 +36,16 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
+  const disabledMessage = useMemo(() => {
+    if (remaining.documents === 0) {
+      return 'You have reached your document limit.';
+    }
+
+    if (!session?.user.emailVerified) {
+      return 'Verify your email to upload documents.';
+    }
+  }, [remaining.documents, session?.user.emailVerified]);
+
   const onFileDrop = async (file: File) => {
     try {
       setIsLoading(true);
@@ -91,6 +101,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       <DocumentDropzone
         className="min-h-[40vh]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabledMessage={disabledMessage}
         onDrop={onFileDrop}
       />
 

packages/ui/primitives/document-dropzone.tsx

@@ -87,6 +87,7 @@ const DocumentDescription = {
 export type DocumentDropzoneProps = {
   className?: string;
   disabled?: boolean;
+  disabledMessage?: string;
   onDrop?: (_file: File) => void | Promise<void>;
   type?: 'document' | 'template';
   [key: string]: unknown;
@@ -96,6 +97,7 @@ export const DocumentDropzone = ({
   className,
   onDrop,
   disabled,
+  disabledMessage = 'You cannot upload documents at this time.',
   type = 'document',
   ...props
 }: DocumentDropzoneProps) => {
@@ -172,7 +174,9 @@ export const DocumentDropzone = ({
             {DocumentDescription[type].headline}
           </p>
 
-          <p className="text-muted-foreground/80 mt-1 text-sm ">Drag & drop your document here.</p>
+          <p className="text-muted-foreground/80 mt-1 text-sm">
+            {disabled ? disabledMessage : 'Drag & drop your document here.'}
+          </p>
         </CardContent>
       </Card>
     </motion.div>