feat: small fixes

components/document-upload.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "next-themes";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 
+import { SUPPORTED_DOCUMENT_MIME_TYPES } from "@/lib/constants";
 import { usePlan } from "@/lib/swr/use-billing";
 import { bytesToSize } from "@/lib/utils";
 import { fileIcon } from "@/lib/utils/get-file-icon";
@@ -105,12 +106,20 @@ export default function DocumentUpload({
         });
     },
     onDropRejected: (fileRejections) => {
-      const { errors } = fileRejections[0];
+      console.log("fileRejections", fileRejections);
+      const { errors, file } = fileRejections[0];
       let message;
       if (errors[0].code === "file-too-large") {
-        message = `File size too big (max. ${maxSize} MB)`;
+        message = `File size too big (max. ${maxSize} MB)${
+          isFreePlan && !isTrial
+            ? `. Upgrade to a paid plan to increase the limit.`
+            : ""
+        }`;
       } else if (errors[0].code === "file-invalid-type") {
-        message = "File type not supported";
+        const isSupported = SUPPORTED_DOCUMENT_MIME_TYPES.includes(file.type);
+        message = `File type not supported ${
+          isFreePlan && !isTrial && isSupported ? `on free plan` : ""
+        }`;
       } else {
         message = errors[0].message;
       }
@@ -151,9 +160,7 @@ export default function DocumentUpload({
                     isLight,
                   })}
                 </div>
-                <p className="max-w-[280px] truncate">
-                  {(currentFile.name)}
-                </p>
+                <p className="max-w-[280px] truncate">{currentFile.name}</p>
                 <p className="text-gray-500">{bytesToSize(currentFile.size)}</p>
               </div>
             ) : (

components/documents/add-document-modal.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { FormEvent, useEffect, useState } from "react";
@@ -29,7 +30,6 @@ import {
 } from "@/lib/documents/create-document";
 import { putFile } from "@/lib/files/put-file";
 import useLimits from "@/lib/swr/use-limits";
-import { copyToClipboard } from "@/lib/utils";
 import { getSupportedContentType } from "@/lib/utils/get-content-type";
 
 import { UpgradePlanModal } from "../billing/upgrade-plan-modal";
@@ -418,10 +418,21 @@ export function AddDocumentModal({
                   {newVersion ? `Upload a new version` : `Share a document`}
                 </CardTitle>
                 <CardDescription>
-                  {newVersion
-                    ? `After you upload a new version, the existing links will remain the unchanged.`
-                    : `After you upload the document, a shareable link will be
-                generated and copied to your clipboard.`}
+                  {newVersion ? (
+                    `After you upload a new version, the existing links will remain the unchanged.`
+                  ) : (
+                    <span>
+                      After you upload the document, create a shareable link on
+                      the document page.{" "}
+                      <Link
+                        href="https://www.papermark.io/help/article/document-types"
+                        target="_blank"
+                        className="underline underline-offset-4 transition-all hover:text-muted-foreground/80 hover:dark:text-muted-foreground/80"
+                      >
+                        Learn more about what file types are supported.
+                      </Link>
+                    </span>
+                  )}
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">