chore: tidy code

packages/ui/lib/document-dropzone-constants.ts

@@ -67,18 +67,19 @@ export const DocumentDropzoneCardCenterVariants: Variants = {
 
 export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
   initial: {
-    x: 40,
+    x: 50,
     y: 0,
     rotate: -14,
   },
   animate: {
-    x: 40,
+    x: 50,
     y: 0,
     rotate: -14,
   },
   hover: {
     x: 30,
     y: 0,
+    rotate: -17,
     transition: { type: 'spring', duration: 0.3, stiffness: 500 },
   },
 };
@@ -86,17 +87,18 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
 export const DocumentDropzoneDisabledCardRightVariants: Variants = {
   initial: {
     x: -50,
-    y: 5,
+    y: 0,
     rotate: 14,
   },
   animate: {
     x: -50,
-    y: 5,
+    y: 0,
     rotate: 14,
   },
   hover: {
-    x: -40,
-    y: 5,
+    x: -30,
+    y: 0,
+    rotate: 17,
     transition: { type: 'spring', duration: 0.3, stiffness: 500 },
   },
 };
@@ -111,9 +113,8 @@ export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
     y: 0,
   },
   hover: {
-    x: -20,
+    x: [-15, -10, -5, -10],
     y: 0,
-    rotate: -5,
     transition: { type: 'spring', duration: 0.3, stiffness: 1000 },
   },
 };

packages/ui/primitives/document-dropzone.tsx

@@ -6,7 +6,7 @@ import { motion } from 'framer-motion';
 import { AlertTriangle, Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 
-import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 
 import {
@@ -37,18 +37,10 @@ export const DocumentDropzone = ({
   onDrop,
   onDropRejected,
   disabled,
-  disabledMessage = 'You can upload up to 5 documents per month on your current plan.',
+  disabledMessage = 'You cannot upload documents at this time.',
   type = 'document',
   ...props
 }: DocumentDropzoneProps) => {
-  const DocumentDescription = {
-    document: {
-      headline: disabled ? 'You have reached your document limit.' : 'Add a document',
-    },
-    template: {
-      headline: 'Upload Template Document',
-    },
-  };
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       'application/pdf': ['.pdf'],
@@ -68,11 +60,22 @@ export const DocumentDropzone = ({
     maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });
 
+  const heading = {
+    document: disabled ? 'You have reached your document limit.' : 'Add a document',
+    template: 'Upload Template Document',
+  };
+
   return (
+    <motion.div
+      variants={DocumentDropzoneContainerVariants}
+      initial="initial"
+      animate="animate"
+      whileHover="hover"
+    >
       <Card
         role="button"
         className={cn(
-        'focus-visible:ring-ring ring-offset-background flex flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'focus-visible:ring-ring ring-offset-background group flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
           className,
         )}
         gradient={!disabled}
@@ -82,12 +85,6 @@ export const DocumentDropzone = ({
         {...props}
       >
         <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
-        <motion.div
-          variants={DocumentDropzoneContainerVariants}
-          initial="initial"
-          animate="animate"
-          whileHover="hover"
-        >
           {disabled ? (
             // Disabled State
             <div className="flex">
@@ -151,21 +148,22 @@ export const DocumentDropzone = ({
               </motion.div>
             </div>
           )}
-        </motion.div>
 
           <input {...getInputProps()} />
 
-        <p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p>
+          <p className="text-foreground mt-8 font-medium">{heading[type]}</p>
 
           <p className="text-muted-foreground/80 mt-1 text-center text-sm">
             {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
           </p>
-        {disabled && (
+
+          {disabled && IS_BILLING_ENABLED() && (
             <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
               <Link href="/settings/billing">Upgrade</Link>
             </Button>
           )}
         </CardContent>
       </Card>
+    </motion.div>
   );
 };