From cd8c42914fcfeeda7b8471cf84538a1b37cf24ed Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Mon, 10 Jun 2024 20:07:32 +1000
Subject: [PATCH] fix: add tooltip

---
 .../public-profile-page-view.tsx              | 70 ++++++++++++++-----
 apps/web/src/app/(profile)/p/[url]/page.tsx   |  2 +-
 .../components/forms/public-profile-form.tsx  | 37 ++++++++--
 3 files changed, 85 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx b/apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx
index 7af86553d..90759f68e 100644
--- a/apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx
@@ -15,6 +15,7 @@ import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Switch } from '@documenso/ui/primitives/switch';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
@@ -54,6 +55,7 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
   const { toast } = useToast();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
 
   const { data } = trpc.template.findTemplates.useQuery({
     perPage: 100,
@@ -80,16 +82,22 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
 
   const onProfileUpdate = async (data: TPublicProfileFormSchema) => {
     if (team) {
-      return updateTeamProfile({
+      await updateTeamProfile({
         teamId: team.id,
         ...data,
       });
+    } else {
+      await updateUserProfile(data);
     }
 
-    return updateUserProfile(data);
+    if (data.enabled === undefined && !isPublicProfileVisible) {
+      setIsTooltipOpen(true);
+    }
   };
 
   const togglePublicProfileVisibility = async (isVisible: boolean) => {
+    setIsTooltipOpen(false);
+
     if (isUpdating) {
       return;
     }
@@ -127,23 +135,47 @@ export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePage
   return (
     <div className="max-w-2xl">
       <SettingsHeader title={profileText.settingsTitle} subtitle={profileText.settingsSubtitle}>
-        <div
-          className={cn(
-            'text-muted-foreground/50 flex flex-row items-center justify-center space-x-2 text-xs',
-            {
-              '[&>*:first-child]:text-muted-foreground': !isPublicProfileVisible,
-              '[&>*:last-child]:text-muted-foreground': isPublicProfileVisible,
-            },
-          )}
-        >
-          <span>Hide</span>
-          <Switch
-            disabled={isUpdating}
-            checked={isPublicProfileVisible}
-            onCheckedChange={togglePublicProfileVisibility}
-          />
-          <span>Show</span>
-        </div>
+        <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'text-muted-foreground/50 flex flex-row items-center justify-center space-x-2 text-xs',
+                {
+                  '[&>*:first-child]:text-muted-foreground': !isPublicProfileVisible,
+                  '[&>*:last-child]:text-muted-foreground': isPublicProfileVisible,
+                },
+              )}
+            >
+              <span>Hide</span>
+              <Switch
+                disabled={isUpdating}
+                checked={isPublicProfileVisible}
+                onCheckedChange={togglePublicProfileVisibility}
+              />
+              <span>Show</span>
+            </div>
+          </TooltipTrigger>
+
+          <TooltipContent className="text-muted-foreground max-w-[40ch] space-y-2 py-2">
+            {isPublicProfileVisible ? (
+              <>
+                <p>
+                  Profile is currently <strong>visible</strong>.
+                </p>
+
+                <p>Toggle the switch to hide your profile from the public.</p>
+              </>
+            ) : (
+              <>
+                <p>
+                  Profile is currently <strong>hidden</strong>.
+                </p>
+
+                <p>Toggle the switch to show your profile to the public.</p>
+              </>
+            )}
+          </TooltipContent>
+        </Tooltip>
       </SettingsHeader>
 
       <PublicProfileForm
diff --git a/apps/web/src/app/(profile)/p/[url]/page.tsx b/apps/web/src/app/(profile)/p/[url]/page.tsx
index b19fd05c7..efd555502 100644
--- a/apps/web/src/app/(profile)/p/[url]/page.tsx
+++ b/apps/web/src/app/(profile)/p/[url]/page.tsx
@@ -58,7 +58,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
     <div className="flex flex-col items-center justify-center py-4 sm:py-32">
       <div className="flex flex-col items-center">
         <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
-          <AvatarFallback className="text-xs text-gray-400">
+          <AvatarFallback className="text-sm text-gray-400">
             {extractInitials(publicProfile.name)}
           </AvatarFallback>
         </Avatar>
diff --git a/apps/web/src/components/forms/public-profile-form.tsx b/apps/web/src/components/forms/public-profile-form.tsx
index a4263e423..b370b866c 100644
--- a/apps/web/src/components/forms/public-profile-form.tsx
+++ b/apps/web/src/components/forms/public-profile-form.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import { useState } from 'react';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { motion } from 'framer-motion';
 import { AnimatePresence } from 'framer-motion';
-import { CopyIcon } from 'lucide-react';
+import { CheckSquareIcon, CopyIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -55,6 +57,8 @@ export const PublicProfileForm = ({
 
   const [, copy] = useCopyToClipboard();
 
+  const [copiedTimeout, setCopiedTimeout] = useState<NodeJS.Timeout | null>(null);
+
   const form = useForm<TPublicProfileFormSchema>({
     values: {
       url: profileUrl ?? '',
@@ -103,14 +107,25 @@ export const PublicProfileForm = ({
     }
   };
 
-  const onCopy = async () =>
-    copy(formatUserProfilePath(form.getValues('url') ?? '')).then(() => {
+  const onCopy = async () => {
+    await copy(formatUserProfilePath(form.getValues('url') ?? '')).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'The profile link has been copied to your clipboard',
       });
     });
 
+    if (copiedTimeout) {
+      clearTimeout(copiedTimeout);
+    }
+
+    setCopiedTimeout(
+      setTimeout(() => {
+        setCopiedTimeout(null);
+      }, 2000),
+    );
+  };
+
   return (
     <Form {...form}>
       <form
@@ -152,7 +167,21 @@ export const PublicProfileForm = ({
                             </p>
 
                             <div className="ml-1 flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
-                              <CopyIcon className="h-3.5 w-3.5" />
+                              <AnimatePresence mode="wait" initial={false}>
+                                <motion.div
+                                  key={copiedTimeout ? 'copied' : 'copy'}
+                                  initial={{ opacity: 0 }}
+                                  animate={{ opacity: 1 }}
+                                  exit={{ opacity: 0, transition: { duration: 0.1 } }}
+                                  className="absolute"
+                                >
+                                  {copiedTimeout ? (
+                                    <CheckSquareIcon className="h-3.5 w-3.5" />
+                                  ) : (
+                                    <CopyIcon className="h-3.5 w-3.5" />
+                                  )}
+                                </motion.div>
+                              </AnimatePresence>
                             </div>
                           </Button>
                         </div>