Jim/wall 4000/too many attempts modal doesnt appear new (binary-com#1…

…5220) * 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>
jim-deriv · May 20, 2024 · b88f5c4 · b88f5c4
1 parent 5fdf2bd
commit b88f5c4
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 2 deletions.
diff --git 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
@@ -7,9 +7,11 @@ import './WalletButton.scss';
 
 type TVariant = 'contained' | 'ghost' | 'outlined';
 type TColor = 'black' | 'primary-light' | 'primary' | 'white';
+type TBorderWidth = Extract<TGenericSizes, 'md' | 'sm'> | '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<PropsWithChildren<WalletButtonProps>> = ({
     ariaLabel,
+    borderWidth = 'sm',
     children,
     color = 'primary',
     disabled = false,
@@ -45,6 +48,7 @@ const WalletButton: FC<PropsWithChildren<WalletButtonProps>> = ({
         `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/...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/...s/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(
-                <ModalStepWrapper title="We've sent you an email">
+                <ModalStepWrapper>
                     <SentEmailContent onErrorButtonClick={hide} platform={dxtradePlatform} />
                 </ModalStepWrapper>
             );
@@ -233,6 +233,19 @@ const DxtradeEnterPasswordModal = () => {
         sendEmail,
     ]);
 
+    if (status === 'error' && error?.error?.code === 'PasswordReset') {
+        return (
+            <PasswordLimitExceededModal
+                onPrimaryClick={hide}
+                onSecondaryClick={() => {
+                    sendEmail({
+                        platform: dxtradePlatform,
+                    });
+                }}
+            />
+        );
+    }
+
     if (status === 'error' && error?.error?.code !== 'PasswordError') {
         return <WalletError errorMessage={error?.error.message} onClick={hide} title={error?.error?.code} />;
     }

diff --git a/...allets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.scss b/...allets/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/...wallets/src/features/cfd/modals/PasswordLimitExceededModal/PasswordLimitExceededModal.tsx b/...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<TProps> = ({ onPrimaryClick, onSecondaryClick }) => {
+    const { isMobile } = useDevice();
+    const textSize = isMobile ? 'md' : 'sm';
+    const alignment = isMobile ? 'center' : 'start';
+    if (isMobile) {
+        return (
+            <ModalStepWrapper
+                renderFooter={() => {
+                    return (
+                        <WalletButtonGroup isFullWidth>
+                            <WalletButton
+                                borderWidth='md'
+                                isFullWidth
+                                onClick={onSecondaryClick}
+                                size='lg'
+                                textSize='md'
+                                variant='outlined'
+                            >
+                                Forgot password?
+                            </WalletButton>
+                            <WalletButton isFullWidth onClick={onPrimaryClick} size='lg' textSize='md'>
+                                Try later
+                            </WalletButton>
+                        </WalletButtonGroup>
+                    );
+                }}
+                title='Too many attempts'
+            >
+                <div className='wallets-password-limit-exceeded-modal'>
+                    <div className='wallets-password-limit-exceeded-modal__content'>
+                        <WalletText align={alignment} size={textSize}>
+                            Please try again in a minute.
+                        </WalletText>
+                    </div>
+                </div>
+            </ModalStepWrapper>
+        );
+    }
+    return (
+        <ModalWrapper hideCloseButton>
+            <div className='wallets-password-limit-exceeded-modal'>
+                <div className='wallets-password-limit-exceeded-modal__title'>
+                    <WalletText align='start' weight='bold'>
+                        Too many attempts
+                    </WalletText>
+                </div>
+                <div className='wallets-password-limit-exceeded-modal__content'>
+                    <WalletText align={alignment} size={textSize}>
+                        Please try again in a minute.
+                    </WalletText>
+                </div>
+                <div className='wallets-password-limit-exceeded-modal__buttons'>
+                    <WalletButton
+                        borderWidth='md'
+                        onClick={onSecondaryClick}
+                        size='lg'
+                        textSize={textSize}
+                        variant='outlined'
+                    >
+                        Forgot password?
+                    </WalletButton>
+                    <WalletButton onClick={onPrimaryClick} size='lg' textSize={textSize}>
+                        Try later
+                    </WalletButton>
+                </div>
+            </div>
+        </ModalWrapper>
+    );
+};
+
+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
@@ -0,0 +1 @@
+export { default as PasswordLimitExceededModal } from './PasswordLimitExceededModal';