Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 17:21:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: plan limits

Browse Source
This commit is contained in:
Mythie
2023-10-15 20:26:32 +11:00
parent f75f191a9a
commit c343e8a221
31 changed files with 750 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,15 @@
import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Loader } from 'lucide-react';
import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
import { putFile } from '@documenso/lib/universal/upload/put-file';
import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
@ -22,6 +25,8 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
const { toast } = useToast();
const { quota, remaining } = useLimits();
const [isLoading, setIsLoading] = useState(false);
const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
@ -52,11 +57,19 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
} catch (error) {
console.error(error);
toast({
title: 'Error',
description: 'An error occurred while uploading your document.',
variant: 'destructive',
});
if (error instanceof TRPCClientError) {
toast({
title: 'Error',
description: error.message,
variant: 'destructive',
});
} else {
toast({
title: 'Error',
description: 'An error occurred while uploading your document.',
variant: 'destructive',
});
}
} finally {
setIsLoading(false);
}
@ -64,13 +77,46 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
return (
<div className={cn('relative', className)}>
<DocumentDropzone className="min-h-[40vh]" onDrop={onFileDrop} />
<DocumentDropzone
className="min-h-[40vh]"
disabled={remaining.documents === 0}
onDrop={onFileDrop}
/>
<div className="absolute -bottom-6 right-0">
{remaining.documents > 0 && Number.isFinite(remaining.documents) && (
<p className="text-muted-foreground/60 text-xs">
{remaining.documents} of {quota.documents} documents remaining this month.
</p>
)}
</div>
{isLoading && (
<div className="bg-background/50 absolute inset-0 flex items-center justify-center">
<div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
<Loader className="text-muted-foreground h-12 w-12 animate-spin" />
</div>
)}
{remaining.documents === 0 && (
<div className="bg-background/60 absolute inset-0 flex items-center justify-center rounded-lg backdrop-blur-sm">
<div className="text-center">
<h2 className="text-muted-foreground/80 text-xl font-semibold">
You have reached your document limit.
</h2>
<p className="text-muted-foreground/60 mt-2 text-sm">
You can upload up to {quota.documents} documents per month on your current plan.
</p>
<Link
className="text-primary hover:text-primary/80 mt-6 block font-medium"
href="/settings/billing"
>
Upgrade your account to upload more documents.
</Link>
</div>
</div>
)}
</div>
);
};