[WEBREL] Jim/WEBREL-3159/add account button enabled before tnc is che…

…cked (#16815) * fix: disable button if tnc is not checked * chore: lift state to parent component * ci: fix test cases
binary-com · Sep 12, 2024 · b93e6fd · b93e6fd
1 parent 023d720
commit b93e6fd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -18,7 +18,7 @@ import useDevice from '../../../../hooks/useDevice';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
 import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
 import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
-import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
+import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails, PRODUCT } from '../../constants';
 import { CreatePassword, CreatePasswordMT5, EnterPassword, MT5ResetPasswordModal } from '../../screens';
 import MT5AccountAdded from '../MT5AccountAdded/MT5AccountAdded';
 import { PasswordLimitExceededModal } from '../PasswordLimitExceededModal';
@@ -37,6 +37,7 @@ export type TPlatformPasswordChange = {
 };
 
 const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, product }) => {
+    const [isTncChecked, setIsTncChecked] = useState(!(product === PRODUCT.ZEROSPREAD && !isVirtual));
     const {
         data: createMT5AccountData,
         error: createMT5AccountError,
@@ -211,7 +212,8 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
                     !password ||
                     createMT5AccountLoading ||
                     tradingPlatformPasswordChangeLoading ||
-                    !validPassword(password)
+                    !validPassword(password) ||
+                    !isTncChecked
                 }
                 isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
                 onPrimaryClick={onSubmit}
@@ -229,6 +231,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         password,
         sendEmailVerification,
         tradingPlatformPasswordChangeLoading,
+        isTncChecked,
     ]);
 
     const PasswordComponent = useMemo(() => {
@@ -269,12 +272,14 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         return (
             <EnterPassword
                 isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
+                isTncChecked={isTncChecked}
                 isVirtual={activeWalletData?.is_virtual}
                 marketType={marketType}
                 modalTitle={localize('Enter your Deriv MT5 password')}
                 onPasswordChange={e => setPassword(e.target.value)}
                 onPrimaryClick={onSubmit}
                 onSecondaryClick={() => sendEmailVerification()}
+                onTncChange={() => setIsTncChecked(prev => !prev)}
                 password={password}
                 passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
                 platform={mt5Platform}
@@ -286,6 +291,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         isMT5PasswordNotSet,
         tradingPlatformPasswordChangeLoading,
         createMT5AccountLoading,
+        isTncChecked,
         onSubmit,
         password,
         mt5Platform,
@@ -300,6 +306,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         localize,
         createMT5AccountError?.error?.code,
         sendEmailVerification,
+        setIsTncChecked,
     ]);
 
     if (emailVerificationStatus === 'error') {

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
@@ -12,12 +12,14 @@ import './EnterPassword.scss';
 type TProps = {
     isForgotPasswordLoading?: boolean;
     isLoading?: boolean;
+    isTncChecked: boolean;
     isVirtual?: boolean;
     marketType: TMarketTypes.CreateOtherCFDAccount;
     modalTitle?: string;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick?: () => void;
     onSecondaryClick?: () => void;
+    onTncChange: () => void;
     password: string;
     passwordError?: boolean;
     platform: TPlatforms.All;
@@ -28,12 +30,14 @@ type TProps = {
 const EnterPassword: React.FC<TProps> = ({
     isForgotPasswordLoading,
     isLoading,
+    isTncChecked,
     isVirtual,
     marketType,
     modalTitle,
     onPasswordChange,
     onPrimaryClick,
     onSecondaryClick,
+    onTncChange,
     password,
     passwordError,
     platform,
@@ -52,7 +56,6 @@ const EnterPassword: React.FC<TProps> = ({
         'Hint: You may have entered your Deriv password, which is different from your {{title}} password.',
         { title }
     );
-    const [checked, setChecked] = useState(!(product === PRODUCT.ZEROSPREAD && !isVirtual));
 
     useEffect(() => {
         if (passwordError) {
@@ -91,8 +94,8 @@ const EnterPassword: React.FC<TProps> = ({
                 {passwordError && <Text size={isDesktop ? 'sm' : 'md'}>{passwordErrorHints}</Text>}
                 {product === PRODUCT.ZEROSPREAD && !isVirtual && (
                     <CFDPasswordModalTnc
-                        checked={checked}
-                        onChange={() => setChecked(prev => !prev)}
+                        checked={isTncChecked}
+                        onChange={onTncChange}
                         platform={platform}
                         product={product}
                     />
@@ -110,7 +113,7 @@ const EnterPassword: React.FC<TProps> = ({
                         <Localize i18n_default_text='Forgot password?' />
                     </Button>
                     <Button
-                        disabled={isLoading || !validPassword(password)}
+                        disabled={isLoading || !validPassword(password) || !isTncChecked}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='lg'

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
@@ -33,7 +33,16 @@ describe('EnterPassword', () => {
     };
 
     const renderComponent = (props = {}) => {
-        return render(<EnterPassword {...defaultProps} {...props} />);
+        return render(
+            <EnterPassword
+                isTncChecked={true}
+                onTncChange={function (): void {
+                    throw new Error('Function not implemented.');
+                }}
+                {...defaultProps}
+                {...props}
+            />
+        );
     };
 
     it('renders the component correctly', () => {