feat: add custom field response display

mfts · Jan 14, 2025 · ffaf168 · ffaf168
1 parent 16bd8bb
commit ffaf168
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 4 deletions.
diff --git a/components/visitors/visitor-custom-fields.tsx b/components/visitors/visitor-custom-fields.tsx
@@ -0,0 +1,43 @@
+import { Fragment } from "react";
+
+import useSWR from "swr";
+
+import { fetcher } from "@/lib/utils";
+
+type CustomFieldResponse = {
+  identifier: string;
+  label: string;
+  response: string;
+};
+
+export default function VisitorCustomFields({
+  viewId,
+  teamId,
+  documentId,
+}: {
+  viewId: string;
+  teamId: string;
+  documentId: string;
+}) {
+  const { data: customFieldResponse } = useSWR<CustomFieldResponse[] | null>(
+    `/api/teams/${teamId}/documents/${documentId}/views/${viewId}/custom-fields`,
+    fetcher,
+  );
+
+  console.log("customFieldResponse", customFieldResponse);
+
+  if (!customFieldResponse) return null;
+
+  return (
+    <div className="space-y-2 px-1.5 pb-2 md:px-2">
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
+        {customFieldResponse.map((field, index) => (
+          <Fragment key={index}>
+            <dt className="text-sm text-muted-foreground">{field.label}</dt>
+            <dd className="text-sm">{field.response}</dd>
+          </Fragment>
+        ))}
+      </dl>
+    </div>
+  );
+}
diff --git a/components/visitors/visitor-useragent.tsx b/components/visitors/visitor-useragent.tsx
@@ -6,11 +6,15 @@ export default function VisitorUserAgent({ viewId }: { viewId: string }) {
   const { userAgent, error } = useVisitorUserAgent(viewId);
 
   if (error) {
-    return <div>No useragent info</div>;
+    return (
+      <div className="pb-0.5 pl-1.5 text-muted-foreground md:pb-1 md:pl-2">
+        No useragent info
+      </div>
+    );
   }
 
   if (!userAgent) {
-    return <div>Loading...</div>;
+    return <div className="pb-0.5 pl-1.5 md:pb-1 md:pl-2">Loading...</div>;
   }
 
   return <VisitorUserAgentBase userAgent={userAgent} />;

diff --git a/components/visitors/visitors-table.tsx b/components/visitors/visitors-table.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { DocumentVersion } from "@prisma/client";
 import {
   AlertTriangleIcon,
   ArchiveIcon,
@@ -61,13 +62,16 @@ import {
 import { VisitorAvatar } from "./visitor-avatar";
 import VisitorChart from "./visitor-chart";
 import VisitorClicks from "./visitor-clicks";
+import VisitorCustomFields from "./visitor-custom-fields";
 import VisitorUserAgent from "./visitor-useragent";
 import VisitorUserAgentPlaceholder from "./visitor-useragent-placeholder";
 import VisitorVideoChart from "./visitor-video-chart";
 
 export default function VisitorsTable({
+  primaryVersion,
   isVideo = false,
 }: {
+  primaryVersion: DocumentVersion;
   isVideo?: boolean;
 }) {
   const teamInfo = useTeam();
@@ -400,17 +404,26 @@ export default function VisitorsTable({
                         <>
                           <TableRow className="hover:bg-transparent">
                             <TableCell colSpan={5}>
+                              {!isFreePlan && (
+                                <VisitorCustomFields
+                                  viewId={view.id}
+                                  teamId={view.teamId!}
+                                  documentId={view.documentId!}
+                                />
+                              )}
                               {!isFreePlan ? (
                                 <VisitorUserAgent viewId={view.id} />
                               ) : (
                                 <VisitorUserAgentPlaceholder />
                               )}
+
                               <div className="pb-0.5 pl-0.5 md:pb-1 md:pl-1">
                                 <div className="flex items-center gap-x-1 px-1">
                                   <FileDigitIcon className="size-4" /> Document
                                   Version {view.versionNumber}
                                 </div>
                               </div>
+
                               {isVideo ? (
                                 <VisitorVideoChart
                                   documentId={view.documentId!}
@@ -425,7 +438,7 @@ export default function VisitorsTable({
                                   versionNumber={view.versionNumber}
                                 />
                               )}
-                              {!isFreePlan ? (
+                              {!isFreePlan && primaryVersion.type === "pdf" ? (
                                 <VisitorClicks
                                   teamId={view.teamId!}
                                   documentId={view.documentId!}

diff --git a/pages/api/teams/[teamId]/documents/[id]/views/[viewId]/custom-fields.ts b/pages/api/teams/[teamId]/documents/[id]/views/[viewId]/custom-fields.ts
@@ -0,0 +1,77 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+import { getServerSession } from "next-auth/next";
+
+import { errorhandler } from "@/lib/errorHandler";
+import prisma from "@/lib/prisma";
+import { CustomUser } from "@/lib/types";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "GET") {
+    // GET /api/teams/:teamId/documents/:id/views/:viewId/custom-fields
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const {
+      teamId,
+      id: docId,
+      viewId,
+    } = req.query as {
+      teamId: string;
+      id: string;
+      viewId: string;
+    };
+
+    const userId = (session.user as CustomUser).id;
+
+    try {
+      const team = await prisma.team.findUnique({
+        where: {
+          id: teamId,
+          users: {
+            some: {
+              userId: userId,
+            },
+          },
+        },
+        select: {
+          id: true,
+          plan: true,
+        },
+      });
+
+      if (!team) {
+        return res.status(401).end("Unauthorized");
+      }
+
+      if (team.plan.includes("free")) {
+        return res.status(403).end("Forbidden");
+      }
+
+      const customFields = await prisma.customFieldResponse.findFirst({
+        where: {
+          viewId: viewId,
+        },
+        select: {
+          data: true,
+        },
+      });
+
+      const data = customFields?.data;
+
+      return res.status(200).json(data);
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    // We only allow GET requests
+    res.setHeader("Allow", ["GET"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}
diff --git a/pages/documents/[id]/index.tsx b/pages/documents/[id]/index.tsx
@@ -95,7 +95,10 @@ export default function DocumentPage() {
             />
 
             {/* Visitors */}
-            <VisitorsTable isVideo={primaryVersion.type === "video"} />
+            <VisitorsTable
+              primaryVersion={primaryVersion}
+              isVideo={primaryVersion.type === "video"}
+            />
 
             <LinkSheet
               isOpen={isLinkSheetOpen}