Merge pull request #20409 from Expensify/cristi_merge-tfa-and-abracad…

…abra-modals Merge tfa and abracadabra modals
Expensify · Jun 8, 2023 · fb48246 · fb48246
2 parents feafeef + 0ec73b9
commit fb48246
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 98 deletions.
diff --git a/src/components/ValidateCode/AbracadabraModal.js b/src/components/ValidateCode/AbracadabraModal.js
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import colors from '../../styles/colors';
+import styles from '../../styles/styles';
+import Icon from '../Icon';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Text from '../Text';
+import * as Expensicons from '../Icon/Expensicons';
+import * as Illustrations from '../Icon/Illustrations';
+import variables from '../../styles/variables';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Whether the 2FA is needed to get fully authenticated. */
+    is2FARequired: PropTypes.bool.isRequired,
+};
+
+function JustSignedInModal(props) {
+    return (
+        <View style={styles.deeplinkWrapperContainer}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={variables.modalTopIconWidth}
+                        height={props.is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight}
+                        src={props.is2FARequired ? Illustrations.SafeBlue : Illustrations.Abracadabra}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>
+                    {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')}
+                </Text>
+                <View style={[styles.mt2, styles.mb2]}>
+                    <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
+                        {props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')}
+                    </Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
+                <Icon
+                    width={variables.modalWordmarkWidth}
+                    height={variables.modalWordmarkHeight}
+                    fill={colors.green}
+                    src={Expensicons.ExpensifyWordmark}
+                />
+            </View>
+        </View>
+    );
+}
+
+JustSignedInModal.propTypes = propTypes;
+export default withLocalize(JustSignedInModal);
diff --git a/src/components/ValidateCode/TfaRequiredModal.js b/src/components/ValidateCode/TfaRequiredModal.js
diff --git a/src/pages/ValidateLoginPage/index.website.js b/src/pages/ValidateLoginPage/index.website.js
@@ -11,12 +11,11 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as Session from '../../libs/actions/Session';
 import Permissions from '../../libs/Permissions';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import AbracadabraModal from '../../components/ValidateCode/AbracadabraModal';
 import ExpiredValidateCodeModal from '../../components/ValidateCode/ExpiredValidateCodeModal';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
-import TfaRequiredModal from '../../components/ValidateCode/TfaRequiredModal';
+import JustSignedInModal from '../../components/ValidateCode/JustSignedInModal';
 
 const propTypes = {
     /** The accountID and validateCode are passed via the URL */
@@ -124,8 +123,8 @@ class ValidateLoginPage extends Component {
         return (
             <>
                 {currentAuthState === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
-                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && <TfaRequiredModal />}
-                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && <AbracadabraModal />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && <JustSignedInModal is2FARequired />}
+                {currentAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && <JustSignedInModal is2FARequired={false} />}
                 {currentAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isSignedIn && (
                     <ValidateCodeModal
                         accountID={this.getAccountID()}