diff --git a/apps/web/src/app/(dashboard)/documents/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
index 04ba990d5..65b95f9ec 100644
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/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) => {
Drag & drop your document here.
++ {disabled ? disabledMessage : 'Drag & drop your document here.'} +