feat: dataroom share feature (#286)

* feat: some changes on share flow

* feat: render contact and recipient's avatars

* chore: update badge color

* feat: update Share to ShareModal

* feat: use common router

* feat: create data room recipients records

* feat: reload page on success

* fix: modal input ring

* feat: getting started with async dataroom email job

* feat: getting started with document share page layout

* feat: render DataRoomFileExplorer on shared dataroom

* feat: shorten url with (document)

* feat: rendering dataroom preview page (layout) as well

* feat: rename folder structure

* feat: cleaning up env variables

* feat: remove access to dataroom

* feat: cleaning up share/access modal

* feat: send a link shared data room with jwt token

* feat: return a share link that can be copied on share modal

* feat: secure shared dataroom page

* feat: securing dataroom file preview page as well

* chore: export/import ExtendedRecipientType

Author: dahal

.env.example

@@ -9,8 +9,11 @@
 # When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 
+# Next.js environment variables
 NODE_ENV="development"
 NEXT_PUBLIC_NODE_ENV="development"
+BASE_URL="http://localhost:3000"
+NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 
 # Next.js collects completely anonymous telemetry data about general usage. Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line to disable telemetry at run time
@@ -22,8 +25,9 @@ DATABASE_URL="postgres://captable:[email protected]:54321/captable"
 
 # Next Auth
 # You can generate a new secret on the command line with:
-# openssl rand -base64 32
 # https://next-auth.js.org/configuration/options#secret
+
+# openssl rand -base64 32
 NEXTAUTH_SECRET="xxxxxxxxxx"
 NEXTAUTH_URL="http://localhost:3000"
 

.gitpod.yml

@@ -3,7 +3,8 @@ tasks:
       yarn &&
       cp .env.example .env &&
       export NEXTAUTH_SECRET="$(openssl rand -base64 32)" &&
-      export NEXTAUTH_URL="$(gp url 3000)" &&
+      export BASE_URL="$(gp url 3000)" &&
+      export NEXT_PUBLIC_BASE_URL="$(gp url 3000)" &&
       export EMAIL_SERVER_PORT=2500 &&
       yarn docker:start &&
       npx prisma migrate dev

prisma/migrations/20240430070047_update_data_room_recipient/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `expiresAt` on the `DataRoomRecipient` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[dataRoomId,email]` on the table `DataRoomRecipient` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `name` to the `DataRoomRecipient` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "DataRoomRecipient" DROP COLUMN "expiresAt",
+ADD COLUMN     "name" TEXT NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DataRoomRecipient_dataRoomId_email_key" ON "DataRoomRecipient"("dataRoomId", "email");

prisma/migrations/20240430070149_make_name_optional/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "DataRoomRecipient" ALTER COLUMN "name" DROP NOT NULL;

prisma/migrations/20240501052622_index_public_id/migration.sql

@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "DataRoom_publicId_idx" ON "DataRoom"("publicId");

prisma/migrations/20240503082232_index_id_and_dataroomid/migration.sql

@@ -0,0 +1,2 @@
+-- CreateIndex
+CREATE INDEX "DataRoomRecipient_id_dataRoomId_idx" ON "DataRoomRecipient"("id", "dataRoomId");

prisma/schema.prisma

@@ -367,8 +367,9 @@ model DataRoom {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  @@unique([companyId, name])
   @@unique([publicId])
+  @@unique([companyId, name])
+  @@index([publicId])
   @@index([companyId])
 }
 
@@ -388,6 +389,7 @@ model DataRoomDocument {
 
 model DataRoomRecipient {
   id         String   @id @default(cuid())
+  name       String?
   email      String
   dataRoomId String
   dataRoom   DataRoom @relation(fields: [dataRoomId], references: [id], onDelete: Cascade)
@@ -398,10 +400,11 @@ model DataRoomRecipient {
   stakeholderId String?
   stakeholder   Stakeholder? @relation(fields: [stakeholderId], references: [id], onDelete: SetNull)
 
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  expiresAt DateTime?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 
+  @@unique([dataRoomId, email])
+  @@index([id, dataRoomId])
   @@index([memberId])
   @@index([dataRoomId])
   @@index([stakeholderId])

prisma/seeds/team.ts

@@ -72,6 +72,7 @@ const seedTeam = async () => {
         name,
         email,
         password: hashedPassword,
+        emailVerified: new Date(),
         // image,
       },
     });

src/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/[dataRoomPublicId]/page.tsx

@@ -1,7 +1,8 @@
 "use server";
 
-import { getServerAuthSession } from "@/server/auth";
+import { type ExtendedRecipientType } from "@/components/common/share-modal";
 import { api } from "@/trpc/server";
+import type { Bucket, DataRoom } from "@prisma/client";
 import { notFound } from "next/navigation";
 import DataRoomFiles from "../components/data-room-files";
 
@@ -10,21 +11,27 @@ const DataRoomSettinsPage = async ({
 }: {
   params: { publicId: string; dataRoomPublicId: string };
 }) => {
-  const session = await getServerAuthSession();
-  const { dataRoom, documents } = await api.dataRoom.getDataRoom.query({
-    dataRoomPublicId,
-  });
-  const contacts = await api.dataRoom.getContacts.query();
+  const { dataRoom, documents, recipients } =
+    await api.dataRoom.getDataRoom.query({
+      dataRoomPublicId,
+      include: {
+        company: false,
+        recipients: true,
+        documents: true,
+      },
+    });
+  const contacts = await api.common.getContacts.query();
 
   if (!dataRoom) {
     return notFound();
   }
 
   return (
     <DataRoomFiles
-      dataRoom={dataRoom}
       contacts={contacts}
-      documents={documents}
+      dataRoom={dataRoom as DataRoom}
+      recipients={recipients as ExtendedRecipientType[]}
+      documents={documents as Bucket[]}
       companyPublicId={publicId}
     />
   );

src/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx

@@ -1,19 +1,23 @@
 "use client";
 
 import EmptyState from "@/components/common/empty-state";
-import ShareModal from "@/components/common/share";
+import ShareModal, {
+  type ExtendedRecipientType,
+} from "@/components/common/share-modal";
 import DataRoomFileExplorer from "@/components/documents/data-room/explorer";
 import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/trpc/react";
+import type { DataRoomRecipientType } from "@/trpc/routers/data-room-router/schema";
 import { type ContactsType } from "@/types/contacts";
 import type { Bucket, DataRoom } from "@prisma/client";
 import { RiShareLine } from "@remixicon/react";
+import { useRouter } from "next/navigation";
 import { useDebounceCallback } from "usehooks-ts";
 
 import {
   RiFolder3Fill as FolderIcon,
   RiAddFill,
-  // RiShareLine,
   RiUploadCloudLine,
 } from "@remixicon/react";
 import Link from "next/link";
@@ -31,6 +35,7 @@ interface DataRoomType extends DataRoom {
 type DataRoomFilesProps = {
   dataRoom: DataRoom;
   documents: Bucket[];
+  recipients: ExtendedRecipientType[];
   companyPublicId: string;
   contacts: ContactsType;
 };
@@ -39,11 +44,56 @@ const DataRoomFiles = ({
   dataRoom,
   documents,
   contacts,
+  recipients,
   companyPublicId,
 }: DataRoomFilesProps) => {
-  const { mutateAsync } = api.dataRoom.save.useMutation();
+  const router = useRouter();
+  const { toast } = useToast();
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+  const { mutateAsync: saveDataRoomMutation } = api.dataRoom.save.useMutation();
+  const { mutateAsync: shareDataRoomMutation } = api.dataRoom.share.useMutation(
+    {
+      onSuccess: () => {
+        router.refresh();
+
+        toast({
+          title: "✨ Complete",
+          description: "Data room successfully shared.",
+        });
+      },
+
+      onError: (error) => {
+        toast({
+          title: error.message,
+          description: "",
+          variant: "destructive",
+        });
+      },
+    },
+  );
+
+  const { mutateAsync: unShareDataRoomMutation } =
+    api.dataRoom.unShare.useMutation({
+      onSuccess: () => {
+        router.refresh();
+
+        toast({
+          title: "✨ Complete",
+          description: "Successfully removed access to data room.",
+        });
+      },
+
+      onError: (error) => {
+        toast({
+          title: error.message,
+          description: "",
+          variant: "destructive",
+        });
+      },
+    });
+
   const debounced = useDebounceCallback(async (name) => {
-    await mutateAsync({
+    await saveDataRoomMutation({
       name,
       publicId: dataRoom.publicId,
     });
@@ -84,9 +134,25 @@ const DataRoomFiles = ({
           {documents.length > 0 && (
             <div className="flex gap-3">
               <ShareModal
+                recipients={recipients}
                 contacts={contacts}
+                baseLink={`${baseUrl}/data-rooms/${dataRoom.publicId}`}
                 title={`Share data room - "${dataRoom.name}"`}
                 subtitle="Share this data room with others."
+                onShare={async ({ selectedContacts, others }) => {
+                  await shareDataRoomMutation({
+                    dataRoomId: dataRoom.id,
+                    selectedContacts:
+                      selectedContacts as DataRoomRecipientType[],
+                    others: others as DataRoomRecipientType[],
+                  });
+                }}
+                removeAccess={async ({ recipientId }) => {
+                  await unShareDataRoomMutation({
+                    dataRoomId: dataRoom.id,
+                    recipientId,
+                  });
+                }}
                 trigger={
                   <Button variant={"outline"}>
                     <RiShareLine className="mr-2 h-5 w-5" />

src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/components/table.tsx

@@ -57,7 +57,7 @@ export const ESignTable = ({ documents, companyPublicId }: ESignTableProps) => {
                 {item.status === "DRAFT" && (
                   <Link
                     className={buttonVariants()}
-                    href={`/${companyPublicId}/documents/esign/${item.publicId}`}
+                    href={`/${companyPublicId}/esign/${item.publicId}`}
                   >
                     Edit
                   </Link>

src/app/(documents)/data-rooms/[publicId]/[bucketId]/page.tsx

@@ -0,0 +1,116 @@
+"use server";
+
+import { SharePageLayout } from "@/components/share/page-layout";
+import { decode, type JWTVerifyResult } from "@/lib/jwt";
+import { db } from "@/server/db";
+import { RiFolder3Fill as FolderIcon } from "@remixicon/react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+const DataRoomPage = async ({
+  params: { publicId, bucketId },
+  searchParams: { token },
+}: {
+  params: { publicId: string; bucketId: string };
+  searchParams: { token: string };
+}) => {
+  let decodedToken: JWTVerifyResult | null = null;
+
+  try {
+    decodedToken = await decode(token);
+  } catch (error) {
+    return notFound();
+  }
+
+  const { companyId, dataRoomId, recipientId } = decodedToken?.payload;
+  if (!companyId || !recipientId || !dataRoomId) {
+    return notFound();
+  }
+
+  const recipient = await db.dataRoomRecipient.findFirstOrThrow({
+    where: {
+      id: recipientId,
+      dataRoomId,
+    },
+
+    select: {
+      id: true,
+    },
+  });
+
+  if (!recipient) {
+    return notFound();
+  }
+
+  const dataRoom = await db.dataRoom.findFirstOrThrow({
+    where: {
+      publicId,
+    },
+
+    include: {
+      company: true,
+      documents: {
+        include: {
+          document: {
+            include: {
+              bucket: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const dataRoomFile = dataRoom.documents.find(
+    (doc) => doc.document.bucket.id === bucketId,
+  );
+
+  if (
+    dataRoomId !== dataRoom.id ||
+    dataRoom?.companyId !== companyId ||
+    !dataRoomFile
+  ) {
+    return notFound();
+  }
+
+  const file = dataRoomFile?.document.bucket;
+
+  if (!file) {
+    return notFound();
+  }
+
+  const company = dataRoom.company;
+
+  return (
+    <SharePageLayout
+      medium="dataRoom"
+      company={{
+        name: company.name,
+        logo: company.logo,
+      }}
+      title={
+        <div className="flex">
+          <FolderIcon
+            className="mr-3 mt-1 h-6 w-6 text-primary/60"
+            aria-hidden="true"
+          />
+
+          <h1 className="text-2xl font-semibold tracking-tight">
+            <span className="text-primary/60">Data room / </span>
+            <Link
+              href={`/data-rooms/${publicId}?token=${token}`}
+              className="text-primary/60 hover:text-primary/90 hover:underline"
+            >
+              {dataRoom.name}
+            </Link>
+            {` / ${file.name}`}
+          </h1>
+        </div>
+      }
+    >
+      <div>File preview {file.name}</div>
+    </SharePageLayout>
+  );
+};
+
+export default DataRoomPage;