Show all Expensify logins in Contact Methods page & view each in new Contact Method Details page

src/ROUTES.js

@@ -51,6 +51,8 @@ export default {
     SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: `${SETTINGS_PERSONAL_DETAILS}/date-of-birth`,
     SETTINGS_PERSONAL_DETAILS_ADDRESS: `${SETTINGS_PERSONAL_DETAILS}/address`,
     SETTINGS_CONTACT_METHODS,
+    SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
+    getEditContactMethodRoute: contactMethod => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     REPORT,

src/components/AvatarWithIndicator.js

@@ -15,6 +15,8 @@ import {policyPropTypes} from '../pages/workspace/withPolicy';
 import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
+import * as UserUtils from '../libs/UserUtils';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** URL for the avatar */
@@ -26,6 +28,8 @@ const propTypes = {
     /** To show a tooltip on hover */
     tooltipText: PropTypes.string,
 
+    /* Onyx Props */
+
     /** The employee list of all policies (coming from Onyx) */
     policiesMemberList: PropTypes.objectOf(policyMemberPropType),
 
@@ -43,6 +47,15 @@ const propTypes = {
 
     /** Information about the user accepting the terms for payments */
     walletTerms: walletTermsPropTypes,
+
+    /** Login list for the user that is signed in */
+    loginList: PropTypes.shape({
+        /** Date login was validated, used to show info indicator status */
+        validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
 };
 
 const defaultProps = {
@@ -54,45 +67,50 @@ const defaultProps = {
     cardList: {},
     userWallet: {},
     walletTerms: {},
+    loginList: {},
 };
 
 const AvatarWithIndicator = (props) => {
-    const isLarge = props.size === 'large';
-    const indicatorStyles = [
-        styles.alignItemsCenter,
-        styles.justifyContentCenter,
-        isLarge ? styles.statusIndicatorLarge : styles.statusIndicator,
-    ];
-
     // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
     // those should be cleaned out before doing any error checking
     const cleanPolicies = _.pick(props.policies, policy => policy);
     const cleanPolicyMembers = _.pick(props.policiesMemberList, member => member);
 
-    // All of the error-checking methods are put into an array. This is so that using _.some() will return
-    // early as soon as the first error is returned. This makes the error checking very efficient since
-    // we only care if a single error exists anywhere.
+    // All of the error & info-checking methods are put into an array. This is so that using _.some() will return
+    // early as soon as the first error / info condition is returned. This makes the checks very efficient since
+    // we only care if a single error / info condition exists anywhere.
     const errorCheckingMethods = [
         () => !_.isEmpty(props.userWallet.errors),
         () => PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList),
         () => _.some(cleanPolicies, PolicyUtils.hasPolicyError),
         () => _.some(cleanPolicies, PolicyUtils.hasCustomUnitsError),
         () => _.some(cleanPolicyMembers, PolicyUtils.hasPolicyMemberError),
+        () => UserUtils.hasLoginListError(props.loginList),
 
         // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
         () => !_.isEmpty(props.walletTerms.errors) && !props.walletTerms.chatReportID,
     ];
-    const shouldShowIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
+    const infoCheckingMethods = [
+        () => UserUtils.hasLoginListInfo(props.loginList),
+    ];
+    const shouldShowErrorIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
+    const shouldShowInfoIndicator = !shouldShowErrorIndicator && _.some(infoCheckingMethods, infoCheckingMethod => infoCheckingMethod());
+
+    const indicatorColor = shouldShowErrorIndicator ? themeColors.danger : themeColors.success;
+    const indicatorStyles = [
+        styles.alignItemsCenter,
+        styles.justifyContentCenter,
+        styles.statusIndicator(indicatorColor),
+    ];
 
     return (
-        <View style={[isLarge ? styles.avatarLarge : styles.sidebarAvatar]}>
+        <View style={[styles.sidebarAvatar]}>
             <Tooltip text={props.tooltipText}>
                 <Avatar
-                    imageStyles={[isLarge ? styles.avatarLarge : null]}
                     source={props.source}
                     size={props.size}
                 />
-                {shouldShowIndicator && (
+                {(shouldShowErrorIndicator || shouldShowInfoIndicator) && (
                     <View style={StyleSheet.flatten(indicatorStyles)} />
                 )}
             </Tooltip>
@@ -123,4 +141,7 @@ export default withOnyx({
     walletTerms: {
         key: ONYXKEYS.WALLET_TERMS,
     },
+    loginList: {
+        key: ONYXKEYS.LOGIN_LIST,
+    },
 })(AvatarWithIndicator);

src/components/MenuItem.js

@@ -62,7 +62,7 @@ const MenuItem = (props) => {
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
-        styles.breakAll,
+        styles.breakWord,
         styles.lineHeightNormal,
     ], props.style);
 

src/languages/en.js

@@ -118,6 +118,8 @@ export default {
         youAppearToBeOffline: 'You appear to be offline.',
         thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
         areYouSure: 'Are you sure?',
+        verify: 'Verify',
+        yesContinue: 'Yes, continue',
         zipCodeExample: 'e.g. 12345, 12345-1234, 12345 1234',
         websiteExample: 'e.g. https://www.expensify.com',
     },
@@ -341,6 +343,20 @@ export default {
     contacts: {
         contactMethod: 'Contact method',
         contactMethods: 'Contact methods',
+        helpTextBeforeEmail: 'Add more ways for people to find you, and forward receipts to ',
+        helpTextAfterEmail: ' from multiple email addresses.',
+        pleaseVerify: 'Please verify this contact method',
+        getInTouch: "Whenever we need to get in touch with you, we'll use this contact method.",
+        enterMagicCode: ({contactMethod}) => `Please enter the magic code sent to ${contactMethod}`,
+        yourDefaultContactMethod: 'This is your current default contact method. You will not be able to delete this contact method until you set an alternative default by selecting another contact method and pressing “Set as default”.',
+        removeContactMethod: 'Remove contact method',
+        removeAreYouSure: 'Are you sure you want to remove this contact method? This action cannot be undone.',
+        resendMagicCode: 'Resend magic code',
+        genericFailureMessages: {
+            requestContactMethodValidateCode: 'Failed to send a new magic code. Please wait a bit and try again.',
+            validateSecondaryLogin: 'Failed to validate contact method with given magic code. Please request a new code and try again.',
+            deleteContactMethod: 'Failed to delete contact method. Please reach out to Concierge for help.',
+        },
     },
     pronouns: {
         coCos: 'Co / Cos',

src/languages/es.js

@@ -118,6 +118,8 @@ export default {
         youAppearToBeOffline: 'Parece que estás desconectado.',
         thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
         areYouSure: '¿Estás seguro?',
+        verify: 'Verifique',
+        yesContinue: 'Sí, Continuar',
         zipCodeExample: 'p. ej. 12345, 12345-1234, 12345 1234',
         websiteExample: 'p. ej. https://www.expensify.com',
     },
@@ -341,6 +343,20 @@ export default {
     contacts: {
         contactMethod: 'Método de contacto',
         contactMethods: 'Métodos de contacto',
+        helpTextBeforeEmail: 'Añade más formas de que la gente te encuentre y reenvía los recibos a ',
+        helpTextAfterEmail: ' desde varias direcciones de correo electrónico.',
+        pleaseVerify: 'Por favor verifica este método de contacto',
+        getInTouch: 'Utilizaremos este método de contacto cuando necesitemos contactarte.',
+        enterMagicCode: ({contactMethod}) => `Por favor, introduce el código mágico enviado a ${contactMethod}`,
+        yourDefaultContactMethod: 'Este es tu método de contacto predeterminado. No podrás eliminarlo hasta que añadas otro método de contacto y lo marques como predeterminado pulsando "Establecer como predeterminado".',
+        removeContactMethod: 'Eliminar método de contacto',
+        removeAreYouSure: '¿Estás seguro de que quieres eliminar este método de contacto? Esta acción no se puede deshacer.',
+        resendMagicCode: 'Reenviar código mágico',
+        genericFailureMessages: {
+            requestContactMethodValidateCode: 'No se ha podido enviar un nuevo código mágico. Espera un rato y vuelve a intentarlo.',
+            validateSecondaryLogin: 'No se ha podido validar el método de contacto con el código mágico provisto. Solicita un nuevo código y vuelve a intentarlo.',
+            deleteContactMethod: 'No se ha podido eliminar el método de contacto. Por favor contacta con Concierge para obtener ayuda.',
+        },
     },
     pronouns: {
         coCos: 'Co / Cos',

src/libs/ErrorUtils.js

@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import CONST from '../CONST';
 
 /**
@@ -54,8 +55,30 @@ function getLatestErrorMessage(onyxData) {
         .value();
 }
 
+/**
+ * @param {Object} onyxData
+ * @param {Object} onyxData.errorFields
+ * @param {String} fieldName
+ * @returns {Object}
+ */
+function getLatestErrorField(onyxData, fieldName) {
+    const errorsForField = lodashGet(onyxData, ['errorFields', fieldName], {});
+
+    if (_.isEmpty(errorsForField)) {
+        return {};
+    }
+    return _.chain(errorsForField)
+        .keys()
+        .sortBy()
+        .reverse()
+        .map(key => ({[key]: errorsForField[key]}))
+        .first()
+        .value();
+}
+
 export {
     // eslint-disable-next-line import/prefer-default-export
     getAuthenticateErrorMessage,
     getLatestErrorMessage,
+    getLatestErrorField,
 };

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -217,6 +217,20 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_Profile',
     },
+    {
+        getComponent: () => {
+            const SettingsContactMethodDetailsPage = require('../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default;
+            return SettingsContactMethodDetailsPage;
+        },
+        name: 'Settings_ContactMethodDetails',
+    },
+    {
+        getComponent: () => {
+            const SettingsContactMethodsPage = require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default;
+            return SettingsContactMethodsPage;
+        },
+        name: 'Settings_ContactMethods',
+    },
     {
         getComponent: () => {
             const SettingsPronounsPage = require('../../../pages/settings/Profile/PronounsPage').default;
@@ -273,13 +287,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_PersonalDetails_Address',
     },
-    {
-        getComponent: () => {
-            const SettingsContactMethodsPage = require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default;
-            return SettingsContactMethodsPage;
-        },
-        name: 'Settings_ContactMethods',
-    },
     {
         getComponent: () => {
             const SettingsAddSecondaryLoginPage = require('../../../pages/settings/Profile/Contacts/AddSecondaryLoginPage').default;

src/libs/Navigation/linkingConfig.js

@@ -124,6 +124,9 @@ export default {
                         path: ROUTES.SETTINGS_CONTACT_METHODS,
                         exact: true,
                     },
+                    Settings_ContactMethodDetails: {
+                        path: ROUTES.SETTINGS_CONTACT_METHOD_DETAILS,
+                    },
                     Settings_Add_Secondary_Login: {
                         path: ROUTES.SETTINGS_ADD_LOGIN,
                     },

src/libs/UserUtils.js

@@ -0,0 +1,68 @@
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import CONST from '../CONST';
+
+/**
+ * Searches through given loginList for any contact method / login with an error.
+ *
+ * Example that should return false:
+ * {{
+ *      test@test.com: {
+ *          errorFields: {
+ *              validateCodeSent: null
+ *          }
+ *      }
+ * }}
+ *
+ * Example that should return true:
+ * {{
+ *      test@test.com: {
+ *          errorFields: {
+ *              validateCodeSent: { 18092081290: 'An error' }
+ *          }
+ *      }
+ * }}
+ *
+ * @param {Object} loginList
+ * @param {Object} loginList.errorFields
+ * @returns {Boolean}
+ */
+function hasLoginListError(loginList) {
+    return _.some(loginList, login => _.some(lodashGet(login, 'errorFields', {}), field => !_.isEmpty(field)));
+}
+
+/**
+ * Searches through given loginList for any contact method / login that requires
+ * an Info brick road status indicator. Currently this only applies if the user
+ * has an unvalidated contact method.
+ *
+ * @param {Object} loginList
+ * @param {String} loginList.validatedDate
+ * @returns {Boolean}
+ */
+function hasLoginListInfo(loginList) {
+    return _.some(loginList, login => _.isEmpty(login.validatedDate));
+}
+
+/**
+ * Gets the appropriate brick road indicator status for a given loginList.
+ * Error status is higher priority, so we check for that first.
+ *
+ * @param {Object} loginList
+ * @returns {String}
+ */
+function getLoginListBrickRoadIndicator(loginList) {
+    if (hasLoginListError(loginList)) {
+        return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
+    }
+    if (hasLoginListInfo(loginList)) {
+        return CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
+    }
+    return '';
+}
+
+export {
+    hasLoginListError,
+    hasLoginListInfo,
+    getLoginListBrickRoadIndicator,
+};