Merge pull request #19409 from alitoshmatov/disable-resend-code

Added disable resend link to signin and contact methods
Expensify · Jun 22, 2023 · 18d62d0 · 18d62d0
2 parents e6c4b4e + 2571a7a
commit 18d62d0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -16,6 +16,10 @@ import Button from '../../../../../components/Button';
 import DotIndicatorMessage from '../../../../../components/DotIndicatorMessage';
 import * as Session from '../../../../../libs/actions/Session';
 import Text from '../../../../../components/Text';
+import {withNetwork} from '../../../../../components/OnyxProvider';
+import PressableWithFeedback from '../../../../../components/Pressable/PressableWithFeedback';
+import themeColors from '../../../../../styles/themes/default';
+import * as StyleUtils from '../../../../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -138,12 +142,18 @@ function BaseValidateCodeForm(props) {
                 onClose={() => User.clearContactMethodErrors(props.contactMethod, 'validateCodeSent')}
             >
                 <View style={[styles.mt2, styles.dFlex, styles.flexColumn, styles.alignItemsStart]}>
-                    <Text
-                        style={[styles.link, styles.mr1]}
+                    <PressableWithFeedback
+                        disabled={props.network.isOffline}
+                        style={[styles.mr1]}
                         onPress={resendValidateCode}
+                        underlayColor={themeColors.componentBG}
+                        hoverDimmingValue={1}
+                        pressDimmingValue={0.2}
+                        accessibilityRole="button"
+                        accessibilityLabel={props.translate('contacts.resendMagicCode')}
                     >
-                        {props.translate('contacts.resendMagicCode')}
-                    </Text>
+                        <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>{props.translate('contacts.resendMagicCode')}</Text>
+                    </PressableWithFeedback>
                     {props.hasMagicCodeBeenSent && (
                         <DotIndicatorMessage
                             type="success"
@@ -160,6 +170,7 @@ function BaseValidateCodeForm(props) {
                 onClose={() => User.clearContactMethodErrors(props.contactMethod, 'validateLogin')}
             >
                 <Button
+                    isDisabled={props.network.isOffline}
                     text={props.translate('common.verify')}
                     onPress={validateAndSubmitForm}
                     style={[styles.mt4]}
@@ -180,4 +191,5 @@ export default compose(
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
     }),
+    withNetwork(),
 )(BaseValidateCodeForm);
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -27,6 +27,7 @@ import Terms from '../Terms';
 import DotIndicatorMessage from '../../../components/DotIndicatorMessage';
 import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 import usePrevious from '../../../hooks/usePrevious';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /* Onyx Props */
@@ -213,7 +214,7 @@ function BaseValidateCodeForm(props) {
     }, [props.account.requiresTwoFactorAuth, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
 
     const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
-    const resendButtonStyle = props.network.isOffline ? styles.buttonOpacityDisabled : {};
+
     return (
         <>
             {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
@@ -249,7 +250,7 @@ function BaseValidateCodeForm(props) {
                     />
                     <View>
                         <PressableWithFeedback
-                            style={[styles.mt2, resendButtonStyle]}
+                            style={[styles.mt2]}
                             onPress={resendValidateCode}
                             underlayColor={themeColors.componentBG}
                             disabled={props.network.isOffline}
@@ -258,7 +259,7 @@ function BaseValidateCodeForm(props) {
                             accessibilityRole="button"
                             accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                         >
-                            <Text style={[styles.link]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                            <Text style={[StyleUtils.getDisabledLinkStyles(props.network.isOffline)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
                         </PressableWithFeedback>
                         {linkSent && !hasError && !_.isEmpty(props.account.message) && (
                             <DotIndicatorMessage

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -9,6 +9,7 @@ import styles from './styles';
 import spacing from './utilities/spacing';
 import * as UserUtils from '../libs/UserUtils';
 import * as Browser from '../libs/Browser';
+import cursor from './utilities/cursor';
 
 const workspaceColorOptions = [
     {backgroundColor: colors.blue200, fill: colors.blue700},
@@ -1196,6 +1197,23 @@ function getWrappingStyle(isExtraSmallScreenWidth) {
     };
 }
 
+/**
+ * Returns link styles based on whether the link is disabled or not
+ * @param {Boolean} isDisabled
+ * @returns {Object}
+ */
+function getDisabledLinkStyles(isDisabled = false) {
+    const disabledLinkStyles = {
+        color: themeColors.textSupporting,
+        ...cursor.cursorDisabled,
+    };
+
+    return {
+        ...styles.link,
+        ...(isDisabled ? disabledLinkStyles : {}),
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -1263,4 +1281,5 @@ export {
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
     getWrappingStyle,
+    getDisabledLinkStyles,
 };