feat: add option to remove visitor stats and papermark branding

components/links/link-sheet/index.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { LinkType } from "@prisma/client";
 import { toast } from "sonner";
 import { mutate } from "swr";
 
@@ -14,23 +15,21 @@ import { Separator } from "@/components/ui/separator";
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
 
 import { useAnalytics } from "@/lib/analytics";
 import { usePlan } from "@/lib/swr/use-billing";
-import { useDocumentLinks } from "@/lib/swr/use-document";
 import { useDomains } from "@/lib/swr/use-domains";
 import { LinkWithViews } from "@/lib/types";
 import { convertDataUrlToFile, uploadImage } from "@/lib/utils";
 
 import DomainSection from "./domain-section";
 import { LinkOptions } from "./link-options";
 
-export const DEFAULT_LINK_PROPS = {
+export const DEFAULT_LINK_PROPS = (linkType: LinkType) => ({
   id: null,
   name: null,
   domain: null,
@@ -43,7 +42,7 @@ export const DEFAULT_LINK_PROPS = {
   allowList: [],
   denyList: [],
   enableNotification: true,
-  enableFeedback: true,
+  enableFeedback: false,
   enableScreenshotProtection: false,
   enableCustomMetatag: false,
   metaTitle: null,
@@ -54,7 +53,8 @@ export const DEFAULT_LINK_PROPS = {
   questionType: null,
   enableAgreement: false,
   agreementId: null,
-};
+  showBanner: linkType === LinkType.DOCUMENT_LINK ? true : false,
+});
 
 export type DEFAULT_LINK_TYPE = {
   id: string | null;
@@ -80,6 +80,7 @@ export type DEFAULT_LINK_TYPE = {
   questionType: string | null;
   enableAgreement: boolean; // agreement
   agreementId: string | null;
+  showBanner: boolean;
 };
 
 export default function LinkSheet({
@@ -91,22 +92,24 @@ export default function LinkSheet({
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
-  linkType: "DOCUMENT_LINK" | "DATAROOM_LINK";
+  linkType: LinkType;
   currentLink?: DEFAULT_LINK_TYPE;
   existingLinks?: LinkWithViews[];
 }) {
   const { domains } = useDomains();
   const teamInfo = useTeam();
   const { plan } = usePlan();
   const analytics = useAnalytics();
-  const [data, setData] = useState<DEFAULT_LINK_TYPE>(DEFAULT_LINK_PROPS);
+  const [data, setData] = useState<DEFAULT_LINK_TYPE>(
+    DEFAULT_LINK_PROPS(linkType),
+  );
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const router = useRouter();
   const targetId = router.query.id as string;
 
   useEffect(() => {
-    setData(currentLink || DEFAULT_LINK_PROPS);
+    setData(currentLink || DEFAULT_LINK_PROPS(linkType));
   }, [currentLink]);
 
   const handleSubmit = async (event: any) => {
@@ -195,7 +198,7 @@ export default function LinkSheet({
       toast.success("Link created successfully");
     }
 
-    setData(DEFAULT_LINK_PROPS);
+    setData(DEFAULT_LINK_PROPS(linkType));
     setIsLoading(false);
   };
 
@@ -248,7 +251,11 @@ export default function LinkSheet({
                       </div>
                     </div>
 
-                    <LinkOptions data={data} setData={setData} />
+                    <LinkOptions
+                      data={data}
+                      setData={setData}
+                      linkType={linkType}
+                    />
                   </div>
                 </div>
               </div>

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

@@ -3,8 +3,6 @@ import { Switch } from "@/components/ui/switch";
 
 import { cn } from "@/lib/utils";
 
-import { LinkUpgradeOptions } from "./link-options";
-
 export default function LinkItem({
   title,
   enabled,

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

@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+import { LinkType } from "@prisma/client";
+
 import { UpgradePlanModal } from "@/components/billing/upgrade-plan-modal";
 import { DEFAULT_LINK_TYPE } from "@/components/links/link-sheet";
 import AllowDownloadSection from "@/components/links/link-sheet/allow-download-section";
@@ -12,12 +14,7 @@ import ExpirationSection from "@/components/links/link-sheet/expiration-section"
 import FeedbackSection from "@/components/links/link-sheet/feedback-section";
 import OGSection from "@/components/links/link-sheet/og-section";
 import PasswordSection from "@/components/links/link-sheet/password-section";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+import { ProBannerSection } from "@/components/links/link-sheet/pro-banner-section";
 
 import { usePlan } from "@/lib/swr/use-billing";
 import useLimits from "@/lib/swr/use-limits";
@@ -35,9 +32,11 @@ export type LinkUpgradeOptions = {
 export const LinkOptions = ({
   data,
   setData,
+  linkType,
 }: {
   data: DEFAULT_LINK_TYPE;
   setData: React.Dispatch<React.SetStateAction<DEFAULT_LINK_TYPE>>;
+  linkType: LinkType;
 }) => {
   const { plan } = usePlan();
   const { limits } = useLimits();
@@ -117,7 +116,13 @@ export const LinkOptions = ({
         hasFreePlan={isNotDatarooms}
         handleUpgradeStateChange={handleUpgradeStateChange}
       />
-
+      {linkType === LinkType.DOCUMENT_LINK ? (
+        <ProBannerSection
+          {...{ data, setData }}
+          hasFreePlan={hasFreePlan || plan === "starter"}
+          handleUpgradeStateChange={handleUpgradeStateChange}
+        />
+      ) : null}
       <UpgradePlanModal
         clickedPlan={upgradePlan}
         open={openUpgradeModal}

components/links/link-sheet/pro-banner-section.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+import { DEFAULT_LINK_TYPE } from ".";
+import LinkItem from "./link-item";
+import { LinkUpgradeOptions } from "./link-options";
+
+export function ProBannerSection({
+  data,
+  setData,
+  hasFreePlan,
+  handleUpgradeStateChange,
+}: {
+  data: DEFAULT_LINK_TYPE;
+  setData: React.Dispatch<React.SetStateAction<DEFAULT_LINK_TYPE>>;
+  hasFreePlan: boolean;
+  handleUpgradeStateChange: ({
+    state,
+    trigger,
+    plan,
+  }: LinkUpgradeOptions) => void;
+}) {
+  const { showBanner } = data;
+  const [enabled, setEnabled] = useState<boolean>(showBanner);
+
+  useEffect(() => {
+    setEnabled(showBanner);
+  }, [showBanner]);
+
+  const handleShowBanner = () => {
+    const updatedShowBanner = !enabled;
+    console.log("updatedShowBanner", updatedShowBanner);
+    setData({ ...data, showBanner: updatedShowBanner });
+    setEnabled(updatedShowBanner);
+  };
+
+  return (
+    <div className="pb-5">
+      <LinkItem
+        title="Show Visitor Statistics & Papermark Branding"
+        enabled={enabled}
+        action={handleShowBanner}
+        hasFreePlan={hasFreePlan}
+        requiredPlan="pro"
+        upgradeAction={() =>
+          handleUpgradeStateChange({
+            state: true,
+            trigger: "link_sheet_hide_pro_banner_section",
+            plan: "Pro",
+          })
+        }
+      />
+    </div>
+  );
+}

components/links/links-table.tsx

@@ -62,8 +62,9 @@ export default function LinksTable({
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isLinkSheetVisible, setIsLinkSheetVisible] = useState<boolean>(false);
-  const [selectedLink, setSelectedLink] =
-    useState<DEFAULT_LINK_TYPE>(DEFAULT_LINK_PROPS);
+  const [selectedLink, setSelectedLink] = useState<DEFAULT_LINK_TYPE>(
+    DEFAULT_LINK_PROPS(`${targetType}_LINK`),
+  );
 
   const handleCopyToClipboard = (linkString: string) => {
     copyToClipboard(`${linkString}`, "Link copied to clipboard.");
@@ -100,6 +101,7 @@ export default function LinksTable({
       metaImage: link.metaImage,
       enableAgreement: link.enableAgreement ? link.enableAgreement : false,
       agreementId: link.agreementId,
+      showBanner: link.showBanner ?? false,
     });
     //wait for dropdown to close before opening the link sheet
     setTimeout(() => {

components/view/PagesViewerNew.tsx

@@ -21,7 +21,6 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useMediaQuery } from "@/lib/utils/use-media-query";
 
-import LoadingSpinner from "../ui/loading-spinner";
 import { ScreenProtector } from "./ScreenProtection";
 import { TDocumentData } from "./dataroom/dataroom-view";
 import Nav from "./nav";
@@ -124,7 +123,8 @@ export default function PagesViewer({
   const showStatsSlideWithAccountCreation =
     showAccountCreationSlide && // if showAccountCreationSlide is enabled
     sessionStatus !== "authenticated" && // and user is not authenticated
-    !dataroomId; // and it's not a dataroom
+    !dataroomId && // and it's not a dataroom
+    !isVertical; // and it's not vertical document
 
   const numPages = pages.length;
   const numPagesWithFeedback =

components/welcome/notion-form.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { type FormEvent, use, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { LinkType } from "@prisma/client";
 import { motion } from "framer-motion";
 import { usePlausible } from "next-plausible";
 import { parsePageId } from "notion-utils";
@@ -41,8 +42,9 @@ export default function NotionForm() {
   const [currentLinkId, setCurrentLinkId] = useState<string | null>(null);
   const [currentDocId, setCurrentDocId] = useState<string | null>(null);
   const [notionLink, setNotionLink] = useState<string | null>(null);
-  const [linkData, setLinkData] =
-    useState<DEFAULT_LINK_TYPE>(DEFAULT_LINK_PROPS);
+  const [linkData, setLinkData] = useState<DEFAULT_LINK_TYPE>(
+    DEFAULT_LINK_PROPS(LinkType.DOCUMENT_LINK),
+  );
   const teamInfo = useTeam();
 
   const createNotionFileName = () => {
@@ -325,7 +327,11 @@ export default function NotionForm() {
                           </span>
                         </AccordionTrigger>
                         <AccordionContent className="first:pt-5">
-                          <LinkOptions data={linkData} setData={setLinkData} />
+                          <LinkOptions
+                            data={linkData}
+                            setData={setLinkData}
+                            linkType={LinkType.DOCUMENT_LINK}
+                          />
                         </AccordionContent>
                       </AccordionItem>
                     </Accordion>

components/welcome/special-upload.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { LinkType } from "@prisma/client";
 import { motion } from "framer-motion";
 import Cookies from "js-cookie";
 import { usePlausible } from "next-plausible";
@@ -42,8 +43,9 @@ export default function DeckGeneratorUpload() {
   const [currentBlob, setCurrentBlob] = useState<boolean>(false);
   const [currentLinkId, setCurrentLinkId] = useState<string | null>(null);
   const [currentDocId, setCurrentDocId] = useState<string | null>(null);
-  const [linkData, setLinkData] =
-    useState<DEFAULT_LINK_TYPE>(DEFAULT_LINK_PROPS);
+  const [linkData, setLinkData] = useState<DEFAULT_LINK_TYPE>(
+    DEFAULT_LINK_PROPS(LinkType.DOCUMENT_LINK),
+  );
   const teamInfo = useTeam();
 
   const teamId = teamInfo?.currentTeam?.id as string;
@@ -334,7 +336,11 @@ export default function DeckGeneratorUpload() {
                           </span>
                         </AccordionTrigger>
                         <AccordionContent className="first:pt-5">
-                          <LinkOptions data={linkData} setData={setLinkData} />
+                          <LinkOptions
+                            data={linkData}
+                            setData={setLinkData}
+                            linkType={LinkType.DOCUMENT_LINK}
+                          />
                         </AccordionContent>
                       </AccordionItem>
                     </Accordion>

components/welcome/upload.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { LinkType } from "@prisma/client";
 import { motion } from "framer-motion";
 import { usePlausible } from "next-plausible";
 import { toast } from "sonner";
@@ -41,8 +42,9 @@ export default function Upload() {
   const [currentBlob, setCurrentBlob] = useState<boolean>(false);
   const [currentLinkId, setCurrentLinkId] = useState<string | null>(null);
   const [currentDocId, setCurrentDocId] = useState<string | null>(null);
-  const [linkData, setLinkData] =
-    useState<DEFAULT_LINK_TYPE>(DEFAULT_LINK_PROPS);
+  const [linkData, setLinkData] = useState<DEFAULT_LINK_TYPE>(
+    DEFAULT_LINK_PROPS(LinkType.DOCUMENT_LINK),
+  );
   const teamInfo = useTeam();
 
   const teamId = teamInfo?.currentTeam?.id as string;
@@ -314,7 +316,11 @@ export default function Upload() {
                           </span>
                         </AccordionTrigger>
                         <AccordionContent className="first:pt-5">
-                          <LinkOptions data={linkData} setData={setLinkData} />
+                          <LinkOptions
+                            data={linkData}
+                            setData={setLinkData}
+                            linkType={LinkType.DOCUMENT_LINK}
+                          />
                         </AccordionContent>
                       </AccordionItem>
                     </Accordion>

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

@@ -52,6 +52,7 @@ export default async function handle(
           },
           enableAgreement: true,
           agreement: true,
+          showBanner: true,
         },
       });
 
@@ -327,6 +328,7 @@ export default async function handle(
         },
         enableAgreement: linkData.enableAgreement,
         agreementId: linkData.agreementId || null,
+        showBanner: linkData.showBanner,
       },
       include: {
         views: {

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

@@ -62,6 +62,7 @@ export default async function handle(
           },
           enableAgreement: true,
           agreement: true,
+          showBanner: true,
           document: {
             select: {
               team: {

pages/api/links/index.ts

@@ -160,6 +160,7 @@ export default async function handler(
             enableAgreement: linkData.enableAgreement,
             agreementId: linkData.agreementId,
           }),
+          showBanner: linkData.showBanner,
         },
       });