From 5a11de1db9f09471b0ffe21bc60391cc53f7831c Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <55143799+dephraiim@users.noreply.github.com>
Date: Wed, 27 Dec 2023 02:54:46 +0000
Subject: [PATCH] feat: disable upload document animation for unverified users
 (#749)

---
 apps/web/src/providers/next-auth.tsx         |  2 +-
 packages/ui/primitives/document-dropzone.tsx | 11 ++++++-----
 packages/ui/primitives/toast.tsx             |  3 ++-
 packages/ui/primitives/use-toast.ts          |  2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/providers/next-auth.tsx b/apps/web/src/providers/next-auth.tsx
index 8f7d099a5..db8676d99 100644
--- a/apps/web/src/providers/next-auth.tsx
+++ b/apps/web/src/providers/next-auth.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Session } from 'next-auth';
+import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
 
 export type NextAuthProviderProps = {
diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx
index 9ae4c2adb..8ba22109a 100644
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@@ -115,11 +115,12 @@ export const DocumentDropzone = ({
 
   return (
     <motion.div
-      className={cn('flex', className)}
+      className={cn('flex aria-disabled:cursor-not-allowed', className)}
       variants={DocumentDropzoneContainerVariants}
       initial="initial"
       animate="animate"
       whileHover="hover"
+      aria-disabled={disabled}
     >
       <Card
         role="button"
@@ -137,8 +138,8 @@ export const DocumentDropzone = ({
           {/* <FilePlus strokeWidth="1px" className="h-16 w-16"/> */}
           <div className="flex">
             <motion.div
-              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardLeftVariants}
+              className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
+              variants={!disabled ? DocumentDropzoneCardLeftVariants : undefined}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
@@ -147,7 +148,7 @@ export const DocumentDropzone = ({
 
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardCenterVariants}
+              variants={!disabled ? DocumentDropzoneCardCenterVariants : undefined}
             >
               <Plus
                 strokeWidth="2px"
@@ -157,7 +158,7 @@ export const DocumentDropzone = ({
 
             <motion.div
               className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm"
-              variants={DocumentDropzoneCardRightVariants}
+              variants={!disabled ? DocumentDropzoneCardRightVariants : undefined}
             >
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
               <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
diff --git a/packages/ui/primitives/toast.tsx b/packages/ui/primitives/toast.tsx
index 89616c132..7c3a14f4d 100644
--- a/packages/ui/primitives/toast.tsx
+++ b/packages/ui/primitives/toast.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import * as ToastPrimitives from '@radix-ui/react-toast';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
 import { cn } from '../lib/utils';
diff --git a/packages/ui/primitives/use-toast.ts b/packages/ui/primitives/use-toast.ts
index 6524baf30..093ec8bb5 100644
--- a/packages/ui/primitives/use-toast.ts
+++ b/packages/ui/primitives/use-toast.ts
@@ -1,7 +1,7 @@
 // Inspired by react-hot-toast library
 import * as React from 'react';
 
-import { ToastActionElement, type ToastProps } from './toast';
+import type { ToastActionElement, ToastProps } from './toast';
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;