From b88f5c436af8eeb85b22f815ad82042b0cbb2bd5 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Date: Mon, 20 May 2024 21:12:32 +0800 Subject: [PATCH] Jim/wall 4000/too many attempts modal doesnt appear new (#15220) * chore: send email when forgot password is clicked * chore: add sendemail call to modal on mobile * chore: rename hook * docs: add tsdoc * chore: add sendemail to dependency array * chore: add error handling logic * chore: add error handling for sent email template * chore: add modal with lightbox in mobile Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> * chore: add password limit modal * chore: remove prop causing re-rendering * chore: remove title from email modal * chore: move modal title from the body to the header * chore: rename classes --------- Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> --- .../Base/WalletButton/WalletButton.scss | 11 +++ .../Base/WalletButton/WalletButton.tsx | 4 + .../DxtradeEnterPasswordModal.tsx | 17 +++- .../PasswordLimitExceededModal.scss | 41 +++++++++ .../PasswordLimitExceededModal.tsx | 87 +++++++++++++++++++ .../PasswordLimitExceededModal/index.ts | 1 + 6 files changed, 159 insertions(+), 2 deletions(-) create mode 100644 packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.scss create mode 100644 packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.tsx create mode 100644 packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/index.ts diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss index e6903331b632..ef21269a2922 100644 --- a/packages/wallets/src/components/Base/WalletButton/WalletButton.scss +++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.scss @@ -108,4 +108,15 @@ $size-map: ( } } } + &__border { + &--none { + border-width: 0; + } + &--sm { + border-width: 1px; + } + &--md { + border-width: 2px; + } + } } diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx index e5a551508092..60e157e39cbe 100644 --- a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx +++ b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx @@ -7,9 +7,11 @@ import './WalletButton.scss'; type TVariant = 'contained' | 'ghost' | 'outlined'; type TColor = 'black' | 'primary-light' | 'primary' | 'white'; +type TBorderWidth = Extract | 'none'; interface WalletButtonProps { ariaLabel?: ComponentProps<'button'>['aria-label']; + borderWidth?: TBorderWidth; color?: TColor; disabled?: ComponentProps<'button'>['disabled']; icon?: ReactElement; @@ -25,6 +27,7 @@ interface WalletButtonProps { const WalletButton: FC> = ({ ariaLabel, + borderWidth = 'sm', children, color = 'primary', disabled = false, @@ -45,6 +48,7 @@ const WalletButton: FC> = ({ `wallets-button__size--${size}`, `wallets-button__variant--${variant}`, `wallets-button__rounded--${rounded}`, + `wallets-button__border--${borderWidth}`, isContained && `wallets-button__color--${color}`, isFullWidth && 'wallets-button__full-width' ); diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx index a198975abdc9..3ffad4d2cac1 100644 --- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx @@ -13,6 +13,7 @@ import useDevice from '../../../../hooks/useDevice'; import useSendPasswordResetEmail from '../../../../hooks/useSendPasswordResetEmail'; import { PlatformDetails } from '../../constants'; import { CFDSuccess, CreatePassword, EnterPassword } from '../../screens'; +import { PasswordLimitExceededModal } from '../PasswordLimitExceededModal'; import './DxtradeEnterPasswordModal.scss'; const DxtradeEnterPasswordModal = () => { @@ -28,7 +29,6 @@ const DxtradeEnterPasswordModal = () => { mutateAsync, status, } = useCreateOtherCFDAccount(); - const { data: dxtradeAccount, isSuccess: dxtradeAccountListSuccess } = useDxtradeAccountsList(); const { data: activeWallet } = useActiveWalletAccount(); const { @@ -68,7 +68,7 @@ const DxtradeEnterPasswordModal = () => { if (!isResetPasswordSuccessful) return; if (!isDxtradePasswordNotSet && isMobile) { show( - + ); @@ -233,6 +233,19 @@ const DxtradeEnterPasswordModal = () => { sendEmail, ]); + if (status === 'error' && error?.error?.code === 'PasswordReset') { + return ( + { + sendEmail({ + platform: dxtradePlatform, + }); + }} + /> + ); + } + if (status === 'error' && error?.error?.code !== 'PasswordError') { return ; } diff --git a/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.scss b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.scss new file mode 100644 index 000000000000..c7e7b54f94d7 --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.scss @@ -0,0 +1,41 @@ +.wallets-password-limit-exceeded-modal { + position: relative; + display: flex; + flex-direction: column; + background: var(--system-light-8-primary-background, #fff); + border-radius: 0.8rem; + width: 44rem; + height: 18rem; + padding: 2.4rem; + gap: 2.4rem; + @include mobile { + width: 100%; + height: 100%; + padding: 0; + gap: 0; + } + &__title { + display: flex; + width: 100%; + @include mobile { + padding: 2rem; + align-items: center; + justify-content: center; + } + } + &__content { + width: 100%; + display: flex; + flex-direction: column; + justify-content: stretch; + + @include mobile { + padding: 1rem; + } + } + &__buttons { + display: flex; + gap: 0.8rem; + justify-content: flex-end; + } +} diff --git a/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.tsx b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.tsx new file mode 100644 index 000000000000..9333cd22750e --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { + ModalStepWrapper, + ModalWrapper, + WalletButton, + WalletButtonGroup, + WalletText, +} from '../../../../components/Base'; +import useDevice from '../../../../hooks/useDevice'; +import './PasswordLimitExceededModal.scss'; + +type TProps = { + onPrimaryClick: () => void; + onSecondaryClick: () => void; +}; + +const PasswordLimitExceededModal: React.FC = ({ onPrimaryClick, onSecondaryClick }) => { + const { isMobile } = useDevice(); + const textSize = isMobile ? 'md' : 'sm'; + const alignment = isMobile ? 'center' : 'start'; + if (isMobile) { + return ( + { + return ( + + + Forgot password? + + + Try later + + + ); + }} + title='Too many attempts' + > +
+
+ + Please try again in a minute. + +
+
+ + ); + } + return ( + +
+
+ + Too many attempts + +
+
+ + Please try again in a minute. + +
+
+ + Forgot password? + + + Try later + +
+
+ + ); +}; + +export default PasswordLimitExceededModal; diff --git a/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/index.ts b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/index.ts new file mode 100644 index 000000000000..3c13e14845db --- /dev/null +++ b/packages/wallets/src/features/cfd/modals/PasswordLimitExceededModal/index.ts @@ -0,0 +1 @@ +export { default as PasswordLimitExceededModal } from './PasswordLimitExceededModal';