added tooltip support, all known bugs fixed

ping-browser · Aug 16, 2024 · 1382ea4 · 1382ea4
1 parent 968a1bf
commit 1382ea4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 52 deletions.
diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/Header.tsx
@@ -98,7 +98,7 @@ export const Header: React.FC<HeaderProps> = ({
                     <StyledHeaderControlsBar />
                     <Tooltip
                         text={message}
-                        isVisible={!isVerificationFailed}
+                        isVisible={isVerificationFailed}
                         isError={true}
                     >
                         <StyledHeaderButton

diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/ToolTip.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/ToolTip.tsx
@@ -3,26 +3,53 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 import * as React from 'react';
 import { TooltipContainer, TooltipText } from './styles';
-
-interface TooltipProps {
-  children: React.ReactNode;
-  text: string;
-  isVisible?: boolean;
-  isError?: boolean;
-}
+import { TooltipProps } from '../../utils/types';
 
 export const Tooltip: React.FC<TooltipProps> = ({
   children,
   text,
   isVisible = true,
-  isError = false
+  isError = false,
+  errorDelay = 1000
 }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [showErrorTooltip, setShowErrorTooltip] = React.useState(false);
+  const firstHoverRef = React.useRef(true);
+
+  React.useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isError && isHovered) {
+      if (firstHoverRef.current) {
+        timer = setTimeout(() => {
+          setShowErrorTooltip(true);
+          firstHoverRef.current = false;
+        }, errorDelay);
+      } else {
+        setShowErrorTooltip(true);
+      }
+    } else {
+      setShowErrorTooltip(false);
+    }
+    return () => clearTimeout(timer);
+  }, [isError, isHovered, errorDelay]);
+
   return (
-    <TooltipContainer>
+    <TooltipContainer
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        setShowErrorTooltip(false);
+      }}
+    >
       {children}
-      <TooltipText isVisible={isVisible} isError={isError}>
-        {text}
-      </TooltipText>
+      {isVisible && (
+        <TooltipText
+          isVisible={isError ? showErrorTooltip : isHovered}
+          isError={isError}
+        >
+          {text}
+        </TooltipText>
+      )}
     </TooltipContainer>
   );
 };
diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts
@@ -1,42 +1,40 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
-import styled from 'styled-components';
+ import styled from 'styled-components';
 
-export const TooltipContainer = styled.div`
+ export const TooltipContainer = styled.div`
    position: relative;
    display: inline-block;
  `;
-
-export const TooltipText = styled.div<{ isVisible: boolean; isError: boolean }>`
-  visibility: hidden;
-  width: fit-content;
-  text-wrap: wrap;
-  background-color: ${props => props.isError ? '#ff4d4d' : '#555'};
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 8px;
-  position: absolute;
-  z-index: 1;
-  top: 100%;
-  left: 50%;
-  margin-left: -60px;
-  transition: opacity 0.3s, visibility 0.3s;
-
-  ${TooltipContainer}:hover & {
-    visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
-
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent ${props => props.isError ? '#ff4d4d' : '#555'} transparent;
-  }
-  `;
+
+ export const TooltipText = styled.div<{ isVisible: boolean; isError: boolean }>`
+   visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
+   opacity: ${props => props.isVisible ? 1 : 0};
+   width: max-content;
+   max-width: 200px;
+   text-wrap: wrap;
+   background-color: ${props => props.isError ? '#ff4d4d' : '#555'};
+   color: #fff;
+   text-align: center;
+   border-radius: 6px;
+   padding: 8px;
+   position: absolute;
+   z-index: 1;
+   top: 100%;
+   left: 50%;
+   transform: translateX(-50%);
+   margin-top: 5px;
+   transition: opacity 0.3s, visibility 0.3s;
+ 
+   &::after {
+     content: "";
+     position: absolute;
+     bottom: 100%;
+     left: 50%;
+     transform: translateX(-50%);
+     border-width: 5px;
+     border-style: solid;
+     border-color: transparent transparent ${props => props.isError ? '#ff4d4d' : '#555'} transparent;
+   }
+ `;
diff --git a/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx b/components/brave_rewards/resources/page/ping_doc_signer/pdf_renderer.tsx
@@ -67,6 +67,7 @@ export const PdfRenderer: React.FC = () => {
   const pageRefs = useRef<Array<HTMLDivElement | null>>([]);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [isSigned, setIsSigned] = useState<boolean>(false);
+  const [verificationErrorMessage, setVerificationErrorMessage] = useState<string>('');
 
   const resetSignatureState = useCallback(() => {
     setIsSelectionEnabled(false);
@@ -313,6 +314,7 @@ export const PdfRenderer: React.FC = () => {
     } catch (error) {
       setStatusMessage('Verification Failed');
       setStatusType('error');
+      setVerificationErrorMessage(`${error}`);
       setIsVerified(false);
       setIsVerificationFailed(true);
     } finally {
@@ -451,7 +453,7 @@ export const PdfRenderer: React.FC = () => {
         handleLogoClick={handleLogoClick}
         fileInputRef={fileInputRef}
         isSigned={isSigned}
-        message={errorMessage}
+        message={verificationErrorMessage}
       />
       <S.PdfContainer>
         {!pdfFile ? (

diff --git a/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts b/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts
@@ -103,8 +103,9 @@ export type PdfPageProps = {
 }
 
 export type TooltipProps = {
-  text: string;
-  isVisible: boolean;
-  isVerificationFailed: boolean;
   children: React.ReactNode;
+  text: string;
+  isVisible?: boolean;
+  isError?: boolean;
+  errorDelay?: number;
 }