feat: add screen protection

components/links/link-sheet/index.tsx

@@ -37,6 +37,7 @@ export const DEFAULT_LINK_PROPS = {
   denyList: [],
   enableNotification: true,
   enableFeedback: true,
+  enableScreenshotProtection: false,
   enableCustomMetatag: false,
   metaTitle: null,
   metaDescription: null,
@@ -60,6 +61,7 @@ export type DEFAULT_LINK_TYPE = {
   denyList: string[];
   enableNotification: boolean;
   enableFeedback: boolean;
+  enableScreenshotProtection: boolean;
   enableCustomMetatag: boolean; // metatags
   metaTitle: string | null; // metatags
   metaDescription: string | null; // metatags

components/links/link-sheet/link-options.tsx

@@ -20,6 +20,7 @@ import FeedbackSection from "@/components/links/link-sheet/feedback-section";
 import { UpgradePlanModal } from "@/components/billing/upgrade-plan-modal";
 import { usePlan } from "@/lib/swr/use-billing";
 import QuestionSection from "./question-section";
+import ScreenshotProtectionSection from "./screenshot-protection-section";
 
 export const LinkOptions = ({
   data,
@@ -34,10 +35,18 @@ export const LinkOptions = ({
 
   const [openUpgradeModal, setOpenUpgradeModal] = useState<boolean>(false);
   const [trigger, setTrigger] = useState<string>("");
+  const [upgradePlan, setUpgradePlan] = useState<"Pro" | "Business">("Pro");
 
-  const handleUpgradeStateChange = (state: boolean, trigger: string) => {
+  const handleUpgradeStateChange = (
+    state: boolean,
+    trigger: string,
+    plan?: "Pro" | "Business",
+  ) => {
     setOpenUpgradeModal(state);
     setTrigger(trigger);
+    if (plan) {
+      setUpgradePlan(plan);
+    }
   };
 
   return (
@@ -76,6 +85,11 @@ export const LinkOptions = ({
               handleUpgradeStateChange={handleUpgradeStateChange}
             />
             <PasswordSection {...{ data, setData }} />
+            <ScreenshotProtectionSection
+              {...{ data, setData }}
+              hasFreePlan={isNotBusiness}
+              handleUpgradeStateChange={handleUpgradeStateChange}
+            />
             <FeedbackSection {...{ data, setData }} />
             <QuestionSection
               {...{ data, setData }}
@@ -85,9 +99,9 @@ export const LinkOptions = ({
           </AccordionContent>
         </AccordionItem>
       </Accordion>
-      {hasFreePlan ? (
+      {hasFreePlan || isNotBusiness ? (
         <UpgradePlanModal
-          clickedPlan="Pro"
+          clickedPlan={upgradePlan}
           open={openUpgradeModal}
           setOpen={setOpenUpgradeModal}
           trigger={trigger}

components/links/link-sheet/question-section.tsx

@@ -36,7 +36,11 @@ export default function QuestionSection({
   data: DEFAULT_LINK_TYPE;
   setData: Dispatch<SetStateAction<DEFAULT_LINK_TYPE>>;
   hasFreePlan: boolean;
-  handleUpgradeStateChange: (state: boolean, trigger: string) => void;
+  handleUpgradeStateChange: (
+    state: boolean,
+    trigger: string,
+    plan?: "Pro" | "Business",
+  ) => void;
 }) {
   const { enableQuestion, questionText, questionType } = data;
   const [enabled, setEnabled] = useState<boolean>(false);
@@ -68,14 +72,15 @@ export default function QuestionSection({
                     handleUpgradeStateChange(
                       true,
                       "link_sheet_question_section",
+                      "Business",
                     )
                 : undefined
             }
           >
             Feedback Question
-            <span>
+            {/* <span>
               <HelpCircleIcon className="text-muted-foreground h-4 w-4" />
-            </span>
+            </span> */}
             {hasFreePlan && (
               <span className="bg-background text-foreground ring-1 ring-gray-800 dark:ring-gray-500 rounded-full px-2 py-0.5 text-xs ml-2">
                 Business
@@ -88,7 +93,11 @@ export default function QuestionSection({
           onClick={
             hasFreePlan
               ? () =>
-                  handleUpgradeStateChange(true, "link_sheet_question_section")
+                  handleUpgradeStateChange(
+                    true,
+                    "link_sheet_question_section",
+                    "Business",
+                  )
               : undefined
           }
           className={hasFreePlan ? "opacity-50" : undefined}

components/links/link-sheet/screenshot-protection-section.tsx

@@ -0,0 +1,86 @@
+import { Dispatch, SetStateAction, useState, useEffect } from "react";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { DEFAULT_LINK_TYPE } from ".";
+
+export default function ScreenshotProtectionSection({
+  data,
+  setData,
+  hasFreePlan,
+  handleUpgradeStateChange,
+}: {
+  data: DEFAULT_LINK_TYPE;
+  setData: Dispatch<SetStateAction<DEFAULT_LINK_TYPE>>;
+  hasFreePlan: boolean;
+  handleUpgradeStateChange: (
+    state: boolean,
+    trigger: string,
+    plan?: "Pro" | "Business",
+  ) => void;
+}) {
+  const { enableScreenshotProtection } = data;
+  const [enabled, setEnabled] = useState<boolean>(true);
+
+  useEffect(() => {
+    setEnabled(enableScreenshotProtection);
+  }, [enableScreenshotProtection]);
+
+  const handleEnableScreenshotProtection = () => {
+    const updatedEnableScreenshotProtection = !enabled;
+    setData({
+      ...data,
+      enableScreenshotProtection: updatedEnableScreenshotProtection,
+    });
+    setEnabled(updatedEnableScreenshotProtection);
+  };
+
+  return (
+    <div className="pb-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between space-x-2">
+          <h2
+            className={cn(
+              "text-sm font-medium leading-6",
+              enabled ? "text-foreground" : "text-muted-foreground",
+              hasFreePlan ? "cursor-pointer" : undefined,
+            )}
+            onClick={
+              hasFreePlan
+                ? () =>
+                    handleUpgradeStateChange(
+                      true,
+                      "link_sheet_screenshot_protection_section",
+                      "Business",
+                    )
+                : undefined
+            }
+          >
+            Enable screenshot protection*
+            {hasFreePlan && (
+              <span className="bg-background text-foreground ring-1 ring-gray-800 dark:ring-gray-500 rounded-full px-2 py-0.5 text-xs ml-2">
+                Business
+              </span>
+            )}
+          </h2>
+        </div>
+        <Switch
+          checked={enabled}
+          onClick={
+            hasFreePlan
+              ? () =>
+                  handleUpgradeStateChange(
+                    true,
+                    "link_sheet_screenshot_protection_section",
+                    "Business",
+                  )
+              : undefined
+          }
+          className={hasFreePlan ? "opacity-50" : undefined}
+          onCheckedChange={
+            hasFreePlan ? undefined : handleEnableScreenshotProtection
+          }
+        />
+      </div>
+    </div>
+  );
+}

components/links/links-table.tsx

@@ -81,6 +81,9 @@ export default function LinksTable({
         ? link.enableNotification
         : false,
       enableFeedback: link.enableFeedback ? link.enableFeedback : false,
+      enableScreenshotProtection: link.enableScreenshotProtection
+        ? link.enableScreenshotProtection
+        : false,
       enableCustomMetatag: link.enableCustomMetatag
         ? link.enableCustomMetatag
         : false,

components/view/PagesViewer.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
 import { PoweredBy } from "./powered-by";
 import Question from "./question";
 import { cn } from "@/lib/utils";
+import { ScreenProtector } from "./ScreenProtection";
 
 const DEFAULT_PRELOADED_IMAGES_NUM = 10;
 
@@ -21,6 +22,7 @@ export default function PagesViewer({
   assistantEnabled,
   allowDownload,
   feedbackEnabled,
+  screenshotProtectionEnabled,
   versionNumber,
   brand,
   documentName,
@@ -37,6 +39,7 @@ export default function PagesViewer({
   assistantEnabled?: boolean;
   allowDownload: boolean;
   feedbackEnabled: boolean;
+  screenshotProtectionEnabled: boolean;
   versionNumber: number;
   brand?: Brand | DataroomBrand;
   documentName?: string;
@@ -240,7 +243,7 @@ export default function PagesViewer({
           {pageNumber <= numPages &&
             (pages && loadedImages[pageNumber - 1] ? (
               pages.map((page, index) => {
-                // contains cloudfront.net in the file path, then use img tag otherwise use next/image
+                // served from cloudfront, then use img tag otherwise use next/image
                 if (page.file.toLowerCase().includes("files.papermark.io")) {
                   return (
                     <img
@@ -291,6 +294,7 @@ export default function PagesViewer({
         {feedbackEnabled && pageNumber !== numPagesWithFeedback ? (
           <Toolbar viewId={viewId} pageNumber={pageNumber} />
         ) : null}
+        {screenshotProtectionEnabled ? <ScreenProtector /> : null}
         {showPoweredByBanner ? <PoweredBy linkId={linkId} /> : null}
       </div>
     </>

components/view/ScreenProtection.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+
+export const ScreenProtector = () => {
+  const [blockScreen, setBlockScreen] = useState<boolean>(false);
+
+  // Key combinations for screenshot in Windows, Linux, and macOS
+  useHotkeys(
+    "mod+shift+3, mod+shift+4, mod+shift+5, mod+shift+6, alt+printscreen, printscreen, mod+ctrl+shift+3, mod+ctrl+shift+4",
+    (event) => {
+      setBlockScreen(true);
+      // Set timeout to hide the block screen after a delay
+      setTimeout(() => {
+        setBlockScreen(false);
+      }, 500); // Display the white screen for 2 seconds
+      event.preventDefault();
+    },
+  );
+
+  if (blockScreen) {
+    return <div className="absolute bg-white inset-0 w-screen h-screen"></div>;
+  }
+  return null;
+};

components/view/dataroom/dataroom-view.tsx

@@ -239,6 +239,7 @@ export default function DataroomView({
           documentName={documentData.name}
           allowDownload={link.allowDownload!}
           feedbackEnabled={link.enableFeedback!}
+          screenshotProtectionEnabled={link.enableScreenshotProtection!}
           versionNumber={documentData.documentVersionNumber}
           brand={brand}
           dataroomId={dataroom.id}

components/view/view-data.tsx

@@ -23,6 +23,7 @@ export default function ViewData({
   showPoweredByBanner?: boolean;
 }) {
   const { document } = link;
+
   return notionData?.recordMap ? (
     <NotionPage
       recordMap={notionData.recordMap}
@@ -42,6 +43,7 @@ export default function ViewData({
       assistantEnabled={document.assistantEnabled}
       allowDownload={link.allowDownload!}
       feedbackEnabled={link.enableFeedback!}
+      screenshotProtectionEnabled={link.enableScreenshotProtection!}
       versionNumber={document.versions[0].versionNumber}
       brand={brand}
       showPoweredByBanner={showPoweredByBanner}

package.json

@@ -95,6 +95,7 @@
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
     "react-email": "^2.1.1",
+    "react-hotkeys-hook": "^4.5.0",
     "react-intersection-observer": "^9.8.2",
     "react-notion-x": "^6.16.0",
     "react-pdf": "^7.7.1",

pages/api/links/[id]/dataroom.ts

@@ -29,6 +29,7 @@ export default async function handle(
           password: true,
           isArchived: true,
           enableCustomMetatag: true,
+          enableScreenshotProtection: true,
           metaTitle: true,
           metaDescription: true,
           metaImage: true,

pages/api/links/[id]/index.ts

@@ -26,6 +26,7 @@ export default async function handle(
           emailAuthenticated: true,
           allowDownload: true,
           enableFeedback: true,
+          enableScreenshotProtection: true,
           password: true,
           isArchived: true,
           enableCustomMetatag: true,
@@ -184,6 +185,7 @@ export default async function handle(
         slug: slug || null,
         enableNotification: linkData.enableNotification,
         enableFeedback: linkData.enableFeedback,
+        enableScreenshotProtection: linkData.enableScreenshotProtection,
         enableCustomMetatag: linkData.enableCustomMetatag,
         metaTitle: linkData.metaTitle || null,
         metaDescription: linkData.metaDescription || null,

pages/api/links/domains/[...domainSlug].ts

@@ -40,6 +40,7 @@ export default async function handle(
           isArchived: true,
           enableCustomMetatag: true,
           enableFeedback: true,
+          enableScreenshotProtection: true,
           metaTitle: true,
           metaDescription: true,
           metaImage: true,

pages/api/links/index.ts

@@ -127,6 +127,7 @@ export default async function handler(
           slug: slug || null,
           enableNotification: linkData.enableNotification,
           enableFeedback: linkData.enableFeedback,
+          enableScreenshotProtection: linkData.enableScreenshotProtection,
           enableCustomMetatag: linkData.enableCustomMetatag,
           metaTitle: linkData.metaTitle || null,
           metaDescription: linkData.metaDescription || null,

prisma/migrations/20240424152839_add_screenprotection_to_link/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Link" ADD COLUMN     "enableScreenshotProtection" BOOLEAN DEFAULT false;