Add help / info tips to link settings

mfts · Oct 23, 2024 · 1a281a2 · 1a281a2
1 parent 83b0dcf
commit 1a281a2
Show file tree

Hide file tree

Showing 20 changed files with 111 additions and 14 deletions.
diff --git a/components/documents/document-header.tsx b/components/documents/document-header.tsx
@@ -481,7 +481,10 @@ export default function DocumentHeader({
             openModal={openAddDocModal}
             setAddDocumentModalOpen={setOpenAddDocModal}
           >
-            <ButtonTooltip content="Upload a new version">
+            <ButtonTooltip
+              content="Upload a new version"
+              link="https://www.papermark.io/help/article/document-versions"
+            >
               <button
                 title="Upload a new version"
                 onClick={(e) => {

diff --git a/components/links/link-sheet/agreement-section.tsx b/components/links/link-sheet/agreement-section.tsx
@@ -68,6 +68,8 @@ export default function AgreementSection({
     <div className="pb-5">
       <LinkItem
         title="Require NDA to view"
+        link="https://www.papermark.io/help/article/require-nda-to-view"
+        tooltipContent="Users must sign a Non-Disclosure Agreement to access the content."
         enabled={enabled}
         action={handleAgreement}
         isAllowed={isAllowed}

diff --git a/components/links/link-sheet/allow-download-section.tsx b/components/links/link-sheet/allow-download-section.tsx
@@ -28,7 +28,9 @@ export default function AllowDownloadSection({
       <LinkItem
         title="Allow downloading"
         enabled={enabled}
+        link="https://www.papermark.io/help/article/link-settings"
         action={handleAllowDownload}
+        tooltipContent="Permit viewers to download the content."
       />
     </div>
   );

diff --git a/components/links/link-sheet/allow-list-section.tsx b/components/links/link-sheet/allow-list-section.tsx
@@ -76,6 +76,8 @@ export default function AllowListSection({
       <div className="flex flex-col space-y-4">
         <LinkItem
           title="Allow specified viewers"
+          link="https://www.papermark.io/help/article/allow-list"
+          tooltipContent="Restrict access to a selected group of viewers. Enter restricted emails or domains."
           enabled={enabled}
           isAllowed={isAllowed}
           action={handleEnableAllowList}

diff --git a/components/links/link-sheet/allow-notification-section.tsx b/components/links/link-sheet/allow-notification-section.tsx
@@ -27,8 +27,10 @@ export default function AllowNotificationSection({
     <div className="pb-5">
       <LinkItem
         title="Receive email notification"
+        link="https://www.papermark.io/help/article/link-settings"
         enabled={enabled}
         action={handleEnableNotification}
+        tooltipContent="Get notified via email when someone views your content."
       />
     </div>
   );

diff --git a/components/links/link-sheet/deny-list-section.tsx b/components/links/link-sheet/deny-list-section.tsx
@@ -76,7 +76,9 @@ export default function DenyListSection({
       <div className="flex flex-col space-y-4">
         <LinkItem
           title="Block specified viewers"
+          tooltipContent="Prevent certain users from accessing the content. Enter allowed emails or domains."
           enabled={enabled}
+          link="https://www.papermark.io/help/article/block-list"
           action={handleEnableDenyList}
           isAllowed={isAllowed}
           requiredPlan="business"

diff --git a/components/links/link-sheet/email-authentication-section.tsx b/components/links/link-sheet/email-authentication-section.tsx
@@ -40,6 +40,8 @@ export default function EmailAuthenticationSection({
     <div className="pb-5">
       <LinkItem
         title="Require email verification"
+        link="https://www.papermark.io/help/article/require-email-verification"
+        tooltipContent="Users must verify their email before accessing the content."
         enabled={enabled}
         action={handleEnableAuthentication}
         isAllowed={isAllowed}

diff --git a/components/links/link-sheet/email-protection-section.tsx b/components/links/link-sheet/email-protection-section.tsx
@@ -34,8 +34,10 @@ export default function EmailProtectionSection({
     <div className="pb-5">
       <LinkItem
         title="Require email to view"
+        link="https://www.papermark.io/help/article/require-email-to-view-document"
         enabled={enabled}
         action={handleEnableProtection}
+        tooltipContent="Users must provide their email to access this content"
       />
     </div>
   );

diff --git a/components/links/link-sheet/expiration-section.tsx b/components/links/link-sheet/expiration-section.tsx
@@ -37,7 +37,9 @@ export default function ExpirationSection({
       <LinkItem
         title="Expiration Date"
         enabled={enabled}
+        link="https://www.papermark.io/help/article/expiration-date"
         action={handleEnableExpiration}
+        tooltipContent="Set a date after which the link will no longer be accessible."
       />
 
       {enabled && (

diff --git a/components/links/link-sheet/feedback-section.tsx b/components/links/link-sheet/feedback-section.tsx
@@ -28,6 +28,7 @@ export default function FeedbackSection({
       <LinkItem
         title="Enable feedback from visitors"
         enabled={enabled}
+        tooltipContent="Allow viewers to provide feedback on your content."
         action={handleEnableFeedback}
       />
     </div>

diff --git a/components/links/link-sheet/link-item.tsx b/components/links/link-sheet/link-item.tsx
@@ -1,9 +1,9 @@
-import { RotateCcwIcon } from "lucide-react";
+import { InfoIcon, RotateCcwIcon } from "lucide-react";
 
 import PlanBadge from "@/components/billing/plan-badge";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { ButtonTooltip } from "@/components/ui/tooltip";
+import { BadgeTooltip, ButtonTooltip, Tooltip } from "@/components/ui/tooltip";
 
 import { cn } from "@/lib/utils";
 
@@ -15,27 +15,36 @@ export default function LinkItem({
   requiredPlan,
   upgradeAction,
   resetAction,
+  link,
+  tooltipContent,
 }: {
   title: string;
   enabled: boolean;
   action: () => void;
   isAllowed?: boolean;
   requiredPlan?: string;
   upgradeAction?: () => void;
+  link?: string;
   resetAction?: () => void;
+  tooltipContent?: string;
 }) {
   return (
     <div className="flex items-center justify-between gap-x-2">
       <div className="flex w-full items-center justify-between space-x-2">
         <h2
           className={cn(
-            "flex-1 cursor-pointer text-sm font-medium leading-6",
+            "flex flex-1 cursor-pointer flex-row items-center gap-2 text-sm font-medium leading-6",
             enabled ? "text-foreground" : "text-muted-foreground",
           )}
           onClick={isAllowed ? action : () => upgradeAction?.()}
         >
-          {title}
+          <span>{title}</span>
           {!isAllowed && requiredPlan && <PlanBadge plan={requiredPlan} />}
+          {!!tooltipContent && (
+            <BadgeTooltip content={tooltipContent} key="verified" link={link}>
+              <InfoIcon className="h-4 w-4 shrink-0 text-foreground" />
+            </BadgeTooltip>
+          )}
         </h2>
         {enabled && resetAction && (
           <ButtonTooltip content="Reset to defaults">

diff --git a/components/links/link-sheet/og-section.tsx b/components/links/link-sheet/og-section.tsx
@@ -169,7 +169,9 @@ export default function OGSection({
   return (
     <div className="pb-5">
       <LinkItem
+        tooltipContent="Customize how your content appears when shared on social media."
         title="Custom social media cards"
+        link="https://www.papermark.io/help/article/change-social-media-cards"
         enabled={enableCustomMetatag}
         action={handleCustomMetatag}
         isAllowed={isAllowed}

diff --git a/components/links/link-sheet/password-section.tsx b/components/links/link-sheet/password-section.tsx
@@ -40,6 +40,7 @@ export default function PasswordSection({
         title="Require password to view"
         enabled={enabled}
         action={handleEnablePassword}
+        tooltipContent="Users must enter a password to access the content."
       />
 
       {enabled && (

diff --git a/components/links/link-sheet/question-section.tsx b/components/links/link-sheet/question-section.tsx
@@ -51,6 +51,7 @@ export default function QuestionSection({
     <div className="pb-5">
       <LinkItem
         title="Feedback Question"
+        tooltipContent="Create a concise question for visitor feedback."
         enabled={enabled}
         action={handleQuestion}
         isAllowed={isAllowed}

diff --git a/components/links/link-sheet/screenshot-protection-section.tsx b/components/links/link-sheet/screenshot-protection-section.tsx
@@ -39,6 +39,7 @@ export default function ScreenshotProtectionSection({
     <div className="pb-5">
       <LinkItem
         title="Enable screenshot protection"
+        tooltipContent="Prevent users from taking screenshots of your content."
         enabled={enabled}
         action={handleEnableScreenshotProtection}
         isAllowed={isAllowed}

diff --git a/components/links/link-sheet/watermark-section.tsx b/components/links/link-sheet/watermark-section.tsx
@@ -70,6 +70,8 @@ export default function WatermarkSection({
     <div className="pb-5">
       <LinkItem
         title="Apply Watermark"
+        link="https://www.papermark.io/help/article/document-watermark"
+        tooltipContent="Add a watermark to your content for copyright protection."
         enabled={enabled}
         action={handleWatermarkToggle}
         isAllowed={isAllowed}

diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
@@ -53,16 +53,34 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export const BadgeTooltip = ({
   content,
   children,
+  linkText,
+  link,
 }: {
+  link?: string;
   content: string;
   children: React.ReactNode;
+  linkText?: string;
 }) => {
   return (
     <Tooltip>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>
-          <p>{content}</p>
+        <TooltipContent className="max-w-72 text-center">
+          {link ? (
+            <p>
+              {content}{" "}
+              <a
+                href={link}
+                className="underline underline-offset-4 transition-all hover:text-gray-800 hover:dark:text-muted-foreground/80"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {linkText || "Learn more"}
+              </a>
+            </p>
+          ) : (
+            <p>{content}</p>
+          )}
         </TooltipContent>
       </TooltipPortal>
     </Tooltip>
@@ -74,11 +92,13 @@ export const ButtonTooltip = ({
   sideOffset = 0,
   className,
   children,
+  link,
 }: {
   content: string;
   sideOffset?: number;
   className?: string;
   children: React.ReactNode;
+  link?: string;
 }) => {
   return (
     <Tooltip>
@@ -88,7 +108,21 @@ export const ButtonTooltip = ({
           sideOffset={sideOffset}
           className={cn("bg-[#474e5a] px-2 py-1 text-white", className)}
         >
-          <p>{content}</p>
+          {link ? (
+            <p>
+              {content}{" "}
+              <a
+                href={link}
+                className="underline underline-offset-4 transition-all hover:text-gray-800 hover:dark:text-muted-foreground/80"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learn more
+              </a>
+            </p>
+          ) : (
+            <p>{content}</p>
+          )}
         </TooltipContent>
       </TooltipPortal>
     </Tooltip>

diff --git a/pages/settings/branding.tsx b/pages/settings/branding.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
-import { PlusIcon } from "lucide-react";
+import { InfoIcon, PlusIcon } from "lucide-react";
 import { encode } from "next-auth/jwt";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 import { toast } from "sonner";
@@ -22,6 +22,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { BadgeTooltip } from "@/components/ui/tooltip";
 
 import { usePlan } from "@/lib/swr/use-billing";
 import { useBrand } from "@/lib/swr/use-brand";
@@ -143,9 +144,17 @@ export default function Branding() {
               <h3 className="text-2xl font-semibold tracking-tight text-foreground">
                 Branding
               </h3>
-              <p className="text-sm text-muted-foreground">
+              <p className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
                 Customize how your brand appears globally across Papermark
                 documents your visitors see.
+                <BadgeTooltip
+                  linkText="Click here"
+                  content="How to customize data room branding?"
+                  key="verified"
+                  link="https://www.papermark.io/help/article/how-to-add-custom-domain-to-link"
+                >
+                  <InfoIcon className="h-4 w-4 shrink-0 text-foreground" />
+                </BadgeTooltip>
               </p>
             </div>
           </div>

diff --git a/pages/settings/domains.tsx b/pages/settings/domains.tsx
@@ -1,13 +1,15 @@
 import { useState } from "react";
 
 import { useTeam } from "@/context/team-context";
+import { InfoIcon } from "lucide-react";
 import { mutate } from "swr";
 
 import { AddDomainModal } from "@/components/domains/add-domain-modal";
 import DomainCard from "@/components/domains/domain-card";
 import AppLayout from "@/components/layouts/app";
 import { SettingsHeader } from "@/components/settings/settings-header";
 import { Button } from "@/components/ui/button";
+import { BadgeTooltip } from "@/components/ui/tooltip";
 
 import { useDomains } from "@/lib/swr/use-domains";
 
@@ -43,8 +45,16 @@ export default function Domains() {
               <h3 className="text-2xl font-semibold tracking-tight text-foreground">
                 Domains
               </h3>
-              <p className="text-sm text-muted-foreground">
+              <p className="flx-row flex items-center gap-2 text-sm text-muted-foreground">
                 Manage your custom domain for document sharing
+                <BadgeTooltip
+                  content="How to connect a custom domain to your link?"
+                  key="verified"
+                  linkText="Click here"
+                  link="https://www.papermark.io/help/article/how-to-add-custom-domain-to-link"
+                >
+                  <InfoIcon className="h-4 w-4 shrink-0 text-foreground" />
+                </BadgeTooltip>
               </p>
             </div>
             <ul className="flex items-center justify-between gap-4">

diff --git a/pages/settings/presets.tsx b/pages/settings/presets.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
 import { LinkPreset } from "@prisma/client";
-import { Upload as ArrowUpTrayIcon, PlusIcon } from "lucide-react";
+import { Upload as ArrowUpTrayIcon, InfoIcon, PlusIcon } from "lucide-react";
 import { DropEvent } from "react-dropzone";
 import { toast } from "sonner";
 import useSWR, { mutate } from "swr";
@@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import LoadingSpinner from "@/components/ui/loading-spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { BadgeTooltip } from "@/components/ui/tooltip";
 
 import { usePlan } from "@/lib/swr/use-billing";
 import {
@@ -213,11 +214,18 @@ export default function Presets() {
         <div>
           <div className="mb-4 flex items-center justify-between md:mb-8 lg:mb-12">
             <div className="space-y-1">
-              <h3 className="text-2xl font-semibold tracking-tight text-foreground">
+              <h3 className="flex flex-row items-center gap-2 text-2xl font-semibold tracking-tight text-foreground">
                 Link Presets
               </h3>
-              <p className="text-sm text-muted-foreground">
+              <p className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
                 Configure your default link settings.
+                <BadgeTooltip
+                  content="Customize how your content appears when shared on social media."
+                  key="verified"
+                  link="https://www.papermark.io/help/article/change-social-media-cards"
+                >
+                  <InfoIcon className="h-4 w-4 shrink-0 cursor-pointer text-foreground" />
+                </BadgeTooltip>
               </p>
             </div>
           </div>