From 83705d54c8fd7caaa2b1bebf2758094926f31ffe Mon Sep 17 00:00:00 2001
From: Yash Sharma <syash5575@gmail.com>
Date: Sun, 13 Oct 2024 00:07:15 +0530
Subject: [PATCH] feat: preview link as

---
 components/links/links-table.tsx | 50 +++++++++++++++++++++++++-------
 pages/view/[linkId]/index.tsx    | 15 ++++++++--
 2 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/components/links/links-table.tsx b/components/links/links-table.tsx
index 052230a20..d2f5f5a18 100644
--- a/components/links/links-table.tsx
+++ b/components/links/links-table.tsx
@@ -47,6 +47,8 @@ import LinkSheet, {
 } from "./link-sheet";
 import LinksVisitors from "./links-visitors";
 
+export type PreviewType = "QUICK_PREVIEW" | "COMPLETE_PREVIEW";
+
 export default function LinksTable({
   targetType,
   links,
@@ -114,7 +116,10 @@ export default function LinksTable({
     }, 0);
   };
 
-  const handlePreviewLink = async (link: LinkWithViews) => {
+  const handlePreviewLink = async (
+    link: LinkWithViews,
+    viewAs: PreviewType,
+  ) => {
     if (link.domainId && plan === "free") {
       toast.error("You need to upgrade to preview this link");
       return;
@@ -133,7 +138,7 @@ export default function LinksTable({
     }
 
     const { previewToken } = await response.json();
-    const previewLink = `${process.env.NEXT_PUBLIC_MARKETING_URL}/view/${link.id}?previewToken=${previewToken}`;
+    const previewLink = `${process.env.NEXT_PUBLIC_MARKETING_URL}/view/${link.id}?previewToken=${previewToken}&viewAs=${viewAs}`;
 
     window.open(previewLink, "_blank");
   };
@@ -313,15 +318,38 @@ export default function LinksTable({
                               )}
                             </div>
                             <ButtonTooltip content="Preview link">
-                              <Button
-                                variant={"link"}
-                                size={"icon"}
-                                className="group h-7 w-8"
-                                onClick={() => handlePreviewLink(link)}
-                              >
-                                <span className="sr-only">Preview link</span>
-                                <EyeIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-500" />
-                              </Button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant="ghost"
+                                    className="h-8 w-8 p-0 group-hover/row:ring-1 group-hover/row:ring-gray-200 group-hover/row:dark:ring-gray-700"
+                                  >
+                                    <span className="sr-only">Open menu</span>
+                                    <EyeIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-500" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuLabel>View As</DropdownMenuLabel>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={() =>
+                                      handlePreviewLink(link, "QUICK_PREVIEW")
+                                    }
+                                  >
+                                    Quick Preview
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onClick={() =>
+                                      handlePreviewLink(
+                                        link,
+                                        "COMPLETE_PREVIEW",
+                                      )
+                                    }
+                                  >
+                                    Complete Preview
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
                             </ButtonTooltip>
                             <ButtonTooltip content="Edit link">
                               <Button
diff --git a/pages/view/[linkId]/index.tsx b/pages/view/[linkId]/index.tsx
index 1ee3b34c6..bc28756fe 100644
--- a/pages/view/[linkId]/index.tsx
+++ b/pages/view/[linkId]/index.tsx
@@ -10,6 +10,7 @@ import { useSession } from "next-auth/react";
 import { ExtendedRecordMap } from "notion-types";
 import { parsePageId } from "notion-utils";
 
+import { PreviewType } from "@/components/links/links-table";
 import LoadingSpinner from "@/components/ui/loading-spinner";
 import CustomMetaTag from "@/components/view/custom-metatag";
 import DataroomView from "@/components/view/dataroom/dataroom-view";
@@ -230,10 +231,12 @@ export default function ViewPage({
     email: verifiedEmail,
     d: disableEditEmail,
     previewToken,
+    viewAs,
   } = router.query as {
     email: string;
     d: string;
     previewToken?: string;
+    viewAs?: PreviewType;
   };
   const { linkType, link, brand } = linkData;
 
@@ -304,7 +307,11 @@ export default function ViewPage({
           link={link}
           userEmail={verifiedEmail ?? storedEmail ?? userEmail}
           userId={userId}
-          isProtected={!!(emailProtected || linkPassword || enableAgreement)}
+          isProtected={
+            viewAs === "QUICK_PREVIEW"
+              ? false
+              : !!(emailProtected || linkPassword || enableAgreement)
+          }
           notionData={notionData}
           brand={brand}
           showPoweredByBanner={showPoweredByBanner}
@@ -387,7 +394,11 @@ export default function ViewPage({
           link={link}
           userEmail={verifiedEmail ?? storedEmail ?? userEmail}
           userId={userId}
-          isProtected={!!(emailProtected || linkPassword || enableAgreement)}
+          isProtected={
+            viewAs === "QUICK_PREVIEW"
+              ? false
+              : !!(emailProtected || linkPassword || enableAgreement)
+          }
           brand={brand}
           useAdvancedExcelViewer={useAdvancedExcelViewer}
           previewToken={previewToken}