From 686d7e85f212f14ca34930845ef3e3890c0e9081 Mon Sep 17 00:00:00 2001 From: MasterK0927 Date: Sat, 10 Aug 2024 17:21:19 +0530 Subject: [PATCH] fixed open bugs --- .../components/Header/styles.ts | 20 +------ .../SignatureMethodPopup.tsx | 6 +- .../components/SignatureMethodPopup/styles.ts | 3 +- .../SignaturePopup/SignaturePopup.tsx | 4 +- .../components/SignaturePopup/styles.ts | 2 +- .../SignatureTypePopup/SignatureTypePopup.tsx | 2 +- .../components/SignerLoader/SignerLoader.tsx | 14 +++++ .../components/SignerLoader/styles.ts | 43 ++++++++++++++ .../components/SuccessPopup/SuccessPopup.tsx | 2 - .../components/SuccessPopup/styles.ts | 2 +- .../components/ToolTip/ToolTip.tsx | 19 +++++++ .../components/ToolTip/styles.ts | 36 ++++++++++++ .../page/ping_doc_signer/utils/errorTypes.ts | 57 +++++++++++++++++++ .../page/ping_doc_signer/utils/types.ts | 10 +++- 14 files changed, 190 insertions(+), 30 deletions(-) create mode 100644 components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/SignerLoader.tsx create mode 100644 components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/styles.ts create mode 100644 components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/ToolTip.tsx create mode 100644 components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts create mode 100644 components/brave_rewards/resources/page/ping_doc_signer/utils/errorTypes.ts diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts index f87ab865a703..2321ceea94df 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/Header/styles.ts @@ -203,7 +203,8 @@ export const StyledNavBar = styled('nav')` font-weight: 400; line-height: normal; margin-right: 12px; - margin-left: 20px + cursor: pointer; + margin-left: 20px; `; export const StyledHelpButton = styled('button')` @@ -214,6 +215,7 @@ export const StyledNavBar = styled('nav')` border: 2px solid #FFF; border-radius: 20px; background: transparent; + cursor: pointer; `; export const StyledHelpButtonContainer = styled.div` @@ -247,22 +249,6 @@ export const StyledNavBar = styled('nav')` export const StyledNotVerified = styled('span')` color: red; - - &::after { - display: flex; - position: absolute; - content: "i"; - text-align: center; - font-size: 6px; - padding: 1px 0px 3px 4px; - width: 12px; - color: #ff7e00d4; - height: 12px; - border-radius: 10px; - border: 1px solid #ff5b00b3; - right: 8px; - top: 12px; - } `; export const StyledInstructionText = styled('p')` diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/SignatureMethodPopup.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/SignatureMethodPopup.tsx index 9a812a1bb73c..3e16b67569ae 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/SignatureMethodPopup.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/SignatureMethodPopup.tsx @@ -18,16 +18,16 @@ export const SignatureMethodPopup: React.FC = ({ onCl Choose Your Digital Signature Method - X + x onSelectMethod('digitalID')}> Sign with digital ID (Recommended) Sign documents quickly using your pre-uploaded signature data for a seamless and efficient signing process - onSelectMethod('imageUpload')}> + {/* onSelectMethod('imageUpload')}> Upload Image Signature Select and upload an image of your signature from your device to sign documents easily and securely. - + */} diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/styles.ts index 4654bb654e70..d0c54e77e7e0 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureMethodPopup/styles.ts @@ -24,7 +24,8 @@ display: flex; flex-direction: column; gap: 10px; - height: ${p => p.selected ? '656px' : '390px'}; + min-height: 268px; + max-height: ${p => p.selected ? '656px' : '390px'}; border: 1px solid #CACACA; background: #323639; position: relative; diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/SignaturePopup.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/SignaturePopup.tsx index cb9bb4fd0aea..a66727db578c 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/SignaturePopup.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/SignaturePopup.tsx @@ -11,7 +11,6 @@ import { StyledSelectedSignature, StyledSelectedSignatureH3, StyledSelectedSignatureP, - StyledBrowseImage, StyledSignatureList, StyledSignatureOption, StyledSignatureOptionInput, @@ -66,7 +65,7 @@ export const SignaturePopup: React.FC = ({ onClose, onConfi Choose a digital ID to sign with: - × + x {signatures.length === 0 ? ( @@ -85,7 +84,6 @@ export const SignaturePopup: React.FC = ({ onClose, onConfi {selectedSignature.name} Valid until: {selectedSignature.expiry.toLocaleString()} - View Certificate Details )} diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/styles.ts index 3557adf70a37..4d2e5121af74 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignaturePopup/styles.ts @@ -23,7 +23,7 @@ display: flex; flex-direction: column; gap: 10px; - height: ${p => p.selected ? '656px' : '390px'}; + height: ${p => p.selected ? 'fit-content' : 'fit-content'}; border: 1px solid #CACACA; background: #323639; position: relative; diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureTypePopup/SignatureTypePopup.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureTypePopup/SignatureTypePopup.tsx index 6b91d50e4ef8..318c21d276d5 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureTypePopup/SignatureTypePopup.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignatureTypePopup/SignatureTypePopup.tsx @@ -19,7 +19,7 @@ export const SignatureTypePopup: React.FC = ({ onClose, Choose a digital ID to sign with: - × + x {signatureName} diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/SignerLoader.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/SignerLoader.tsx new file mode 100644 index 000000000000..d80ae5b42083 --- /dev/null +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/SignerLoader.tsx @@ -0,0 +1,14 @@ +/* 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 * as React from 'react'; +import * as S from './styles'; +import loading from '../../../assets/loader.png' + +const Loader = () => ( + + Loading... + +); + +export default Loader; diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/styles.ts new file mode 100644 index 000000000000..de139bffe3ee --- /dev/null +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SignerLoader/styles.ts @@ -0,0 +1,43 @@ +/* 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'; + +export const LoaderContainer = styled.div` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; +`; + +export const LoadingOverlay = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 9998; + display: flex; + justify-content: center; + align-items: center; +`; + +export const LoadingSpinner = styled.div` + border: 4px solid rgba(0, 0, 0, 0.1); + border-left-color: #000; + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + + @keyframes spin { + to { + transform: rotate(360deg); + } + } +`; diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/SuccessPopup.tsx b/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/SuccessPopup.tsx index ed0939f2aec7..8c5dbd2f06d8 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/SuccessPopup.tsx +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/SuccessPopup.tsx @@ -6,7 +6,6 @@ import { StyledSuccessPopup, StyledSuccessTitle, StyledSuccessMessage, - StyledSuccessName, StyledSuccessButtons, StyledConfirmButton } from './styles'; @@ -18,7 +17,6 @@ export const SuccessPopup: React.FC = ({ message, onSave, onC Signature complete! {message} - Placeholder Save as Continue diff --git a/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/styles.ts b/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/styles.ts index 3493c0ff3474..97b32ae863d3 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/styles.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/SuccessPopup/styles.ts @@ -15,7 +15,7 @@ display: flex; flex-direction: column; gap: 10px; - height: 350px; + height: fit-content; border: 1px solid #CACACA; transition: height 0.3s ease; overflow: hidden; 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 new file mode 100644 index 000000000000..2c469cd4ae61 --- /dev/null +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/ToolTip.tsx @@ -0,0 +1,19 @@ +/* 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 * as React from 'react'; +import { TooltipContainer, StyledTooltip } from './styles'; + +interface TooltipProps { + text: string; + isVisible: boolean; + isError?: boolean; + children: React.ReactNode; +} + +export const Tooltip: React.FC = ({ text, isVisible, isError, children }) => ( + + {children} + {isVisible && {text}} + +); \ No newline at end of file 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 new file mode 100644 index 000000000000..bbb09b1a4202 --- /dev/null +++ b/components/brave_rewards/resources/page/ping_doc_signer/components/ToolTip/styles.ts @@ -0,0 +1,36 @@ +/* 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'; + +export const TooltipContainer = styled.div` + position: relative; + display: inline-block; + `; + +export const StyledTooltip = styled.div<{ isError?: boolean }>` + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + background-color: ${({ isError }) => (isError ? '#e74c3c' : '#333')}; + color: #fff; + padding: 5px; + border-radius: 3px; + white-space: nowrap; + z-index: 1000; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + margin-top: 8px; + opacity: 0.9; + + &::after { + content: ''; + position: absolute; + top: -5px; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: transparent transparent ${({ isError }) => (isError ? '#e74c3c' : '#333')} transparent; + } + `; diff --git a/components/brave_rewards/resources/page/ping_doc_signer/utils/errorTypes.ts b/components/brave_rewards/resources/page/ping_doc_signer/utils/errorTypes.ts new file mode 100644 index 000000000000..01f179e1bed6 --- /dev/null +++ b/components/brave_rewards/resources/page/ping_doc_signer/utils/errorTypes.ts @@ -0,0 +1,57 @@ +/* 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/. */ +export enum ErrorType { + PDF_LOADING_ERROR = 'PDF_LOADING_ERROR', + INVALID_FILE_TYPE = 'INVALID_FILE_TYPE', + SIGNING_ERROR = 'SIGNING_ERROR', + VERIFICATION_ERROR = 'VERIFICATION_ERROR', + INVALID_PIN = 'INVALID_PIN', + INVALID_SELECTION = 'INVALID_SELECTION', + NO_PDF_UPLOADED = 'NO_PDF_UPLOADED', + NETWORK_ERROR = 'NETWORK_CONNECTION_IS_BAD' + } + + export enum SuccessPopupErrorType { + SAVE_FAILED = 'SAVE_FAILED', + CONTINUE_FAILED = 'CONTINUE_FAILED', + MESSAGE_MISSING = 'MESSAGE_MISSING', + INVALID_CALLBACK = 'INVALID_CALLBACK' + } + + export enum DropZoneErrorType { + FILE_TOO_LARGE = "FILE_TOO_LARGE", + INVALID_FILE_TYPE = "INVALID_FILE_TYPE", + FILE_READ_ERROR = "FILE_READ_ERROR", + DROP_ZONE_UNAVAILABLE = "DROP_ZONE_UNAVAILABLE", + UPLOAD_FAILED = "UPLOAD_FAILED", + MULTIPLE_FILES_SELECTED = "MULTIPLE_FILES_SELECTED", + NO_FILE_SELECTED = "NO_FILE_SELECTED", + BROWSER_NOT_SUPPORTED = "BROWSER_NOT_SUPPORTED", + NETWORK_ERROR = "NETWORK_ERROR", + UNKNOWN_ERROR = "UNKNOWN_ERROR" + } + + export enum ErrorStates { + None = "None", + VerificationFailed = "VerificationFailed", + SignatureAdditionFailed = "SignatureAdditionFailed", + FileUploadFailed = "FileUploadFailed", + PageNumberError = "PageNumberError", + GeneralError = "GeneralError" +} + +export enum PdfSignerErrorStates { + MODULE_NOT_FOUND = 'MODULE_NOT_FOUND', + SLOT_NOT_FOUND = 'SLOT_NOT_FOUND', + LOGIN_FAILED = 'LOGIN_FAILED', + SIGNING_FAILURE = 'SIGNING_FAILURE', + NO_OBJS_FOUND = 'NO_OBJS_FOUND', + GETTING_CERT = 'GETTING_CERT' +} + +export enum pdfVerifyErrorStates { + BYTE_RANGE_NOT_FOUND = 'BYTE_RANGE_NOT_FOUND', + INVALID_AUTHENTICATED_ATTRIBUTES = 'INVALID_AUTHENTICATED_ATTRIBUTES', + INVALID_CONTENT_DIGEST = 'INVALID_CONTENT_DIGEST' +} \ No newline at end of file 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 index 13bc057ec923..f32dd6b234d7 100644 --- a/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts +++ b/components/brave_rewards/resources/page/ping_doc_signer/utils/types.ts @@ -14,7 +14,8 @@ export type DropZoneProps = { onFileInput: (event: React.ChangeEvent) => void; isDragging: boolean; - + handleDrop: (event: React.DragEvent) => void; + setIsDragging: React.Dispatch>; } export type HeaderProps = { @@ -92,4 +93,11 @@ export type PdfPageProps = { pdfCanvasRef: React.Ref; overlayCanvasRef: React.Ref; pageRef: React.Ref; +} + +export type TooltipProps = { + text: string; + isVisible: boolean; + isVerificationFailed: boolean; + children: React.ReactNode; } \ No newline at end of file