feat(portal): display policies with PDF format (#1559)

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: Dhanus3133

apps/app/.env.example

@@ -7,7 +7,7 @@ REVALIDATION_SECRET="" # openssl rand -base64 32
 NEXT_PUBLIC_PORTAL_URL="http://localhost:3002" # The employee portal uses port 3002 by default
 
 # Recommended
-# Store attachemnts in any S3 compatible bucket, we use AWS
+# Store attachments in any S3 compatible bucket, we use AWS
 APP_AWS_ACCESS_KEY_ID="" # AWS Access Key ID
 APP_AWS_SECRET_ACCESS_KEY="" # AWS Secret Access Key
 APP_AWS_REGION="" # AWS Region

apps/portal/.env.example

@@ -8,4 +8,10 @@ RESEND_DOMAIN="" # ex. mail.trycomp.ai
 DATABASE_URL="" # Format: postgresql://user:password@host:port/database
 
 # Public
-NEXT_PUBLIC_BETTER_AUTH_URL="" # http://localhost:30001
+NEXT_PUBLIC_BETTER_AUTH_URL="" # http://localhost:30001
+
+# AWS
+APP_AWS_ACCESS_KEY_ID="" # AWS Access Key ID
+APP_AWS_SECRET_ACCESS_KEY="" # AWS Secret Access Key
+APP_AWS_REGION="" # AWS Region
+APP_AWS_BUCKET_NAME="" # AWS Bucket Name

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/PolicyCard.tsx

@@ -14,6 +14,7 @@ import type { JSONContent } from '@tiptap/react';
 import { ArrowRight, Check } from 'lucide-react';
 import { useState } from 'react';
 import { PolicyEditor } from './PolicyEditor';
+import { PortalPdfViewer } from './PortalPdfViewer';
 
 interface PolicyCardProps {
   policy: Policy;
@@ -24,21 +25,16 @@ interface PolicyCardProps {
   isLastPolicy?: boolean;
 }
 
-export function PolicyCard({
-  policy,
-  onNext,
-  onComplete,
-  onClick,
-  member,
-  isLastPolicy,
-}: PolicyCardProps) {
+export function PolicyCard({ policy, onNext, onComplete, member, isLastPolicy }: PolicyCardProps) {
   const [isAccepted, setIsAccepted] = useState(policy.signedBy.includes(member.id));
 
   const handleAccept = () => {
     setIsAccepted(true);
     onComplete?.();
   };
 
+  const isPdfPolicy = policy.displayFormat === 'PDF';
+
   return (
     <Card className="relative flex max-h-[calc(100vh-450px)] w-full flex-col shadow-md">
       {isAccepted && (
@@ -68,7 +64,11 @@ export function PolicyCard({
       <CardContent className="w-full flex-1 overflow-y-auto">
         <div className="w-full border-t pt-6">
           <div className="max-w-none">
-            <PolicyEditor content={policy.content as JSONContent[]} />
+            {isPdfPolicy ? (
+              <PortalPdfViewer policyId={policy.id} s3Key={policy.pdfUrl} />
+            ) : (
+              <PolicyEditor content={policy.content as JSONContent[]} />
+            )}
           </div>
           <p className="text-muted-foreground mt-4 text-sm">
             Status: {policy.status}{' '}

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/PortalPdfViewer.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Card, CardContent } from '@comp/ui/card';
+import { FileText, Loader2 } from 'lucide-react';
+import { useAction } from 'next-safe-action/hooks';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { getPolicyPdfUrl } from '../../../actions/getPolicyPdfUrl';
+
+interface PortalPdfViewerProps {
+  policyId: string;
+  s3Key?: string | null;
+}
+
+export function PortalPdfViewer({ policyId, s3Key }: PortalPdfViewerProps) {
+  const [signedUrl, setSignedUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { execute: getUrl } = useAction(getPolicyPdfUrl, {
+    onSuccess: (result) => {
+      const url = result?.data?.data ?? null;
+      if (result?.data?.success && url) {
+        setSignedUrl(url);
+      } else {
+        setSignedUrl(null);
+        toast.error('Could not load the policy document.');
+      }
+    },
+    onError: () => toast.error('An error occurred while loading the policy.'),
+    onSettled: () => setIsLoading(false),
+  });
+
+  useEffect(() => {
+    if (s3Key) {
+      getUrl({ policyId });
+    } else {
+      setIsLoading(false);
+    }
+  }, [s3Key, policyId, getUrl]);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[500px] w-full items-center justify-center rounded-md border">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (signedUrl) {
+    return (
+      <iframe
+        key={signedUrl}
+        src={signedUrl}
+        className="h-[500px] w-full rounded-md border"
+        title="Policy Document"
+      />
+    );
+  }
+
+  // Fallback UI if there's no PDF or an error occurs
+  return (
+    <Card className="flex h-[500px] w-full flex-col items-center justify-center">
+      <CardContent className="text-center">
+        <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
+        <p className="mt-4 font-semibold">PDF Document Not Available</p>
+        <p className="text-sm text-muted-foreground">
+          This policy is stored as a PDF, but it could not be loaded.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

apps/portal/src/app/(app)/(home)/[orgId]/policy/[policyId]/PolicyViewer.tsx

@@ -1,35 +1,22 @@
 'use client';
 
+import type { Policy } from '@db';
 import type { JSONContent } from '@tiptap/react';
 import { PolicyEditor } from '../../components/policy/PolicyEditor';
+import { PortalPdfViewer } from '../../components/policy/PortalPdfViewer';
 
 interface PolicyViewerProps {
-  content: JSONContent | JSONContent[] | unknown;
+  policy: Policy;
 }
 
-export default function PolicyViewer({ content }: PolicyViewerProps) {
-  // Convert content to array format if needed
-  let contentArray: JSONContent[];
-
-  if (Array.isArray(content)) {
-    contentArray = content as JSONContent[];
-  } else if (typeof content === 'object' && content !== null) {
-    // If it's a single JSONContent object, wrap it in an array
-    contentArray = [content as JSONContent];
-  } else {
-    // Fallback for string or other formats
-    contentArray = [
-      {
-        type: 'paragraph',
-        content: [
-          {
-            type: 'text',
-            text: typeof content === 'string' ? content : 'Policy content not available',
-          },
-        ],
-      },
-    ];
+export default function PolicyViewer({ policy }: PolicyViewerProps) {
+  if (policy.displayFormat === 'PDF') {
+    return <PortalPdfViewer policyId={policy.id} s3Key={policy.pdfUrl} />;
   }
 
+  const contentArray = (
+    Array.isArray(policy.content) ? policy.content : [policy.content]
+  ) as JSONContent[];
+
   return <PolicyEditor content={contentArray} />;
 }

apps/portal/src/app/(app)/(home)/[orgId]/policy/[policyId]/page.tsx

@@ -65,7 +65,7 @@ export default async function PolicyPage({
         {isAccepted && (
           <div className="bg-green-50 border-green-200 mb-4 flex items-center gap-2 rounded-t-xs border p-3">
             <Check className="text-green-600 h-5 w-5" />
-            <span className="text-green-800  text-sm font-medium">
+            <span className="text-green-800 text-sm font-medium">
               You have accepted this policy
             </span>
           </div>
@@ -79,8 +79,8 @@ export default async function PolicyPage({
           )}
         </CardHeader>
         <CardContent>
-          <div className="prose  max-w-none">
-            <PolicyViewer content={policy.content} />
+          <div className="prose max-w-none">
+            <PolicyViewer policy={policy} />
           </div>
           {policy.updatedAt && (
             <p className="text-muted-foreground mt-6 text-sm">

apps/portal/src/app/(app)/(home)/actions/getPolicyPdfUrl.ts

@@ -0,0 +1,56 @@
+'use server';
+
+import { authActionClient } from '@/actions/safe-action';
+import { BUCKET_NAME, s3Client } from '@/utils/s3';
+import { GetObjectCommand } from '@aws-sdk/client-s3';
+import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { db } from '@db';
+import { z } from 'zod';
+
+export const getPolicyPdfUrl = authActionClient
+  .inputSchema(z.object({ policyId: z.string() }))
+  .metadata({
+    name: 'getPolicyPdfUrl',
+    track: {
+      event: 'portal-get-policy-pdf-url',
+      channel: 'server',
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { policyId } = parsedInput;
+    const { user } = ctx;
+
+    if (!user) {
+      throw new Error('Unauthorized');
+    }
+
+    try {
+      const policy = await db.policy.findUnique({
+        where: { id: policyId, status: 'published' },
+        select: { pdfUrl: true, organizationId: true },
+      });
+
+      if (!policy?.pdfUrl) {
+        return { success: false, error: 'No PDF found for this policy.' };
+      }
+
+      const member = await db.member.findFirst({
+        where: { userId: user.id, organizationId: policy.organizationId },
+      });
+
+      if (!member) {
+        return { success: false, error: 'Access denied.' };
+      }
+
+      const command = new GetObjectCommand({
+        Bucket: BUCKET_NAME,
+        Key: policy.pdfUrl,
+      });
+      const signedUrl = await getSignedUrl(s3Client, command, { expiresIn: 900 });
+
+      return { success: true, data: signedUrl };
+    } catch (error) {
+      console.error('Error generating signed URL for portal:', error);
+      return { success: false, error: 'Could not retrieve PDF.' };
+    }
+  });