Merge branch 'main' into jules-styleNotificationWithOnyxData

.github/workflows/platformDeploy.yml

@@ -264,11 +264,11 @@ jobs:
 
       - name: Deploy production to S3
         if: ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }}
-        run: aws s3 cp --recursive --acl public-read "$GITHUB_WORKSPACE"/dist s3://expensify-cash/ && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://expensify-cash/.well-known/apple-app-site-association s3://expensify-cash/.well-known/apple-app-site-association
+        run: aws s3 cp --recursive --acl public-read "$GITHUB_WORKSPACE"/dist s3://expensify-cash/ && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://expensify-cash/.well-known/apple-app-site-association s3://expensify-cash/.well-known/apple-app-site-association && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://expensify-cash/.well-known/apple-app-site-association s3://expensify-cash/apple-app-site-association
 
       - name: Deploy staging to S3
         if: ${{ !fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }}
-        run: aws s3 cp --recursive --acl public-read "$GITHUB_WORKSPACE"/dist s3://staging-expensify-cash/ && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://staging-expensify-cash/.well-known/apple-app-site-association s3://staging-expensify-cash/.well-known/apple-app-site-association
+        run: aws s3 cp --recursive --acl public-read "$GITHUB_WORKSPACE"/dist s3://staging-expensify-cash/ && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://staging-expensify-cash/.well-known/apple-app-site-association s3://staging-expensify-cash/.well-known/apple-app-site-association && aws s3 cp --acl public-read --content-type 'application/json' --metadata-directive REPLACE s3://staging-expensify-cash/.well-known/apple-app-site-association s3://staging-expensify-cash/apple-app-site-association
 
       - name: Purge production Cloudflare cache
         if: ${{ fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }}

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001028601
-        versionName "1.2.86-1"
+        versionCode 1001028700
+        versionName "1.2.87-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.86</string>
+	<string>1.2.87</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.86.1</string>
+	<string>1.2.87.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.86</string>
+	<string>1.2.87</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.86.1</string>
+	<string>1.2.87.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.86-1",
+  "version": "1.2.87-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -68,7 +68,7 @@
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#8451a7d7b9ebe1b7d127cc35793c95b37df2d0e7",
+    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#64a085ac69c6944c13dee89aa36f061e11d59aab",
     "fbjs": "^3.0.2",
     "html-entities": "^1.3.1",
     "htmlparser2": "^7.2.0",

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -54,7 +54,7 @@ const BaseAnchorForCommentsOnly = (props) => {
             onSecondaryInteraction={
                 (event) => {
                     ReportActionContextMenu.showContextMenu(
-                        Str.isValidEmail(props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
+                        Str.isValidEmailMarkdown(props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
                         event,
                         props.href,
                         lodashGet(linkRef, 'current'),
@@ -65,7 +65,7 @@ const BaseAnchorForCommentsOnly = (props) => {
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
         >
-            <Tooltip containerStyles={[styles.dInline]} text={Str.isValidEmail(props.displayName) ? '' : props.href}>
+            <Tooltip containerStyles={[styles.dInline]} text={Str.isValidEmailMarkdown(props.displayName) ? '' : props.href}>
                 <Text
                     ref={el => linkRef = el}
                     style={StyleSheet.flatten([props.style, defaultTextStyle])}

src/components/AvatarWithIndicator.js

@@ -15,6 +15,7 @@ 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 ReportUtils from '../libs/ReportUtils';
 
 const propTypes = {
     /** URL for the avatar */
@@ -89,7 +90,7 @@ const AvatarWithIndicator = (props) => {
             <Tooltip text={props.tooltipText}>
                 <Avatar
                     imageStyles={[isLarge ? styles.avatarLarge : null]}
-                    source={props.source}
+                    source={ReportUtils.getSmallSizeAvatar(props.source)}
                     size={props.size}
                 />
                 {shouldShowIndicator && (

src/components/LHNOptionsList/OptionRowLHN.js

@@ -6,6 +6,7 @@ import {
     View,
     StyleSheet,
 } from 'react-native';
+import * as optionRowStyles from '../../styles/optionRowStyles';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import Icon from '../Icon';
@@ -75,7 +76,7 @@ const OptionRowLHN = (props) => {
         ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
         : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
     const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT
-        ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
+        ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles]
         : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(props.viewMode === CONST.OPTION_MODE.COMPACT ? [
         styles.chatLinkRowPressable,

src/languages/en.js

@@ -228,7 +228,7 @@ export default {
         editComment: 'Edit comment',
         deleteComment: 'Delete comment',
         deleteConfirmation: 'Are you sure you want to delete this comment?',
-        addReactionTooltip: 'Add Reaction',
+        addReactionTooltip: 'Add reaction',
     },
     reportActionsView: {
         beginningOfArchivedRoomPartOne: 'You missed the party in ',

src/libs/GetStyledTextArray.js

@@ -8,10 +8,11 @@ import Str from 'expensify-common/lib/str';
  */
 const getStyledTextArray = (name, prefix) => {
     const texts = [];
-    const prefixLocation = name.search(Str.escapeForRegExp(prefix));
+    const prefixLowercase = prefix.toLowerCase();
+    const prefixLocation = name.search(Str.escapeForRegExp(prefixLowercase));
 
     if (prefixLocation === 0 && prefix.length === name.length) {
-        texts.push({text: prefix, isColored: true});
+        texts.push({text: prefixLowercase, isColored: true});
     } else if (prefixLocation === 0 && prefix.length !== name.length) {
         texts.push(
             {text: name.slice(0, prefix.length), isColored: true},

src/libs/LoginUtils.js

@@ -1,4 +1,13 @@
+import Str from 'expensify-common/lib/str';
+import Onyx from 'react-native-onyx';
 import CONST from '../CONST';
+import ONYXKEYS from '../ONYXKEYS';
+
+let countryCodeByIP;
+Onyx.connect({
+    key: ONYXKEYS.COUNTRY_CODE,
+    callback: val => countryCodeByIP = val || 1,
+});
 
 /**
  * Remove the special chars from the phone number
@@ -20,7 +29,20 @@ function getPhoneNumberWithoutUSCountryCodeAndSpecialChars(phone) {
     return getPhoneNumberWithoutSpecialChars(phone.replace(/^\+1/, ''));
 }
 
+/**
+ * Append user country code to the phone number
+ *
+ * @param {String} phone
+ * @return {String}
+ */
+function appendCountryCode(phone) {
+    return (Str.isValidPhone(phone) && !phone.includes('+'))
+        ? `+${countryCodeByIP}${phone}`
+        : phone;
+}
+
 export {
     getPhoneNumberWithoutSpecialChars,
     getPhoneNumberWithoutUSCountryCodeAndSpecialChars,
+    appendCountryCode,
 };

src/libs/Navigation/AppNavigator/PublicScreens.js

@@ -4,7 +4,6 @@ import SignInPage from '../../../pages/signin/SignInPage';
 import SetPasswordPage from '../../../pages/SetPasswordPage';
 import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import LogInWithShortLivedAuthTokenPage from '../../../pages/LogInWithShortLivedAuthTokenPage';
-import ConciergePage from '../../../pages/ConciergePage';
 import SCREENS from '../../../SCREENS';
 import defaultScreenOptions from './defaultScreenOptions';
 
@@ -32,11 +31,6 @@ const PublicScreens = () => (
             options={defaultScreenOptions}
             component={SetPasswordPage}
         />
-        <RootStack.Screen
-            name="Concierge"
-            options={defaultScreenOptions}
-            component={ConciergePage}
-        />
     </RootStack.Navigator>
 );
 

src/libs/Navigation/Navigation.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {Keyboard} from 'react-native';
-import {DrawerActions, getPathFromState, StackActions} from '@react-navigation/native';
+import {CommonActions, DrawerActions, getPathFromState} from '@react-navigation/native';
 import Onyx from 'react-native-onyx';
 import Log from '../Log';
 import DomUtils from '../DomUtils';
@@ -11,6 +11,7 @@ import DeprecatedCustomActions from './DeprecatedCustomActions';
 import ONYXKEYS from '../../ONYXKEYS';
 import linkingConfig from './linkingConfig';
 import navigationRef from './navigationRef';
+import SCREENS from '../../SCREENS';
 
 let resolveNavigationIsReadyPromise;
 const navigationIsReadyPromise = new Promise((resolve) => {
@@ -173,7 +174,7 @@ function navigate(route = ROUTES.HOME) {
         // If we're navigating to the signIn page while logged out, pop whatever screen is on top
         // since it's guaranteed that the sign in page will be underneath (since it's the initial route).
         // Also, if we're coming from a link to validate login (pendingRoute is not null), we want to pop the loading screen.
-        navigationRef.current.dispatch(StackActions.pop());
+        navigationRef.current.dispatch(CommonActions.reset({index: 0, routes: [{name: SCREENS.HOME}]}));
         return;
     }
 

src/libs/OptionsListUtils.js

@@ -10,6 +10,7 @@ import * as Localize from './Localize';
 import Permissions from './Permissions';
 import * as CollectionUtils from './CollectionUtils';
 import Navigation from './Navigation/Navigation';
+import * as LoginUtils from './LoginUtils';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -580,9 +581,8 @@ function getOptions(reports, personalDetails, {
 
     // If the phone number doesn't have an international code then let's prefix it with the
     // current user's international code based on their IP address.
-    const login = (Str.isValidPhone(searchValue) && !searchValue.includes('+'))
-        ? `+${countryCodeByIP}${searchValue}`
-        : searchValue;
+    const login = LoginUtils.appendCountryCode(searchValue);
+
     if (login && (noOptions || noOptionsMatchExactly)
         && !isCurrentUser({login})
         && _.every(selectedOptions, option => option.login !== login)
@@ -764,14 +764,16 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma
         return Localize.translate(preferredLocale, 'common.maxParticipantsReached', {count: CONST.REPORT.MAXIMUM_PARTICIPANTS});
     }
 
-    if (searchValue && CONST.REGEX.DIGITS_AND_PLUS.test(searchValue) && !Str.isValidPhone(searchValue)) {
+    const isValidPhone = Str.isValidPhone(LoginUtils.appendCountryCode(searchValue));
+
+    if (searchValue && CONST.REGEX.DIGITS_AND_PLUS.test(searchValue) && !isValidPhone) {
         return Localize.translate(preferredLocale, 'messages.errorMessageInvalidPhone');
     }
 
     // Without a search value, it would be very confusing to see a search validation message.
     // Therefore, this skips the validation when there is no search value.
     if (searchValue && !hasSelectableOptions && !hasUserToInvite) {
-        if (/^\d+$/.test(searchValue) && !Str.isValidPhone(searchValue)) {
+        if (/^\d+$/.test(searchValue) && !isValidPhone) {
             return Localize.translate(preferredLocale, 'messages.errorMessageInvalidPhone');
         }
 

src/libs/ReportUtils.js

@@ -558,6 +558,28 @@ function getFullSizeAvatar(avatarURL, login) {
     return source.replace('_128', '');
 }
 
+/**
+ * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the
+ * source URL (before the file type) if it doesn't exist there already.
+ *
+ * @param {String} avatarURL
+ * @param {String} login
+ * @returns {String|Function}
+ */
+function getSmallSizeAvatar(avatarURL, login) {
+    const source = getAvatar(avatarURL, login);
+    if (!_.isString(source)) {
+        return source;
+    }
+
+    // If image source already has _128 at the end, the given avatar URL is already what we want to use here.
+    const lastPeriodIndex = source.lastIndexOf('.');
+    if (source.substring(lastPeriodIndex - 4, lastPeriodIndex) === '_128') {
+        return source;
+    }
+    return `${source.substring(0, lastPeriodIndex)}_128${source.substring(lastPeriodIndex)}`;
+}
+
 /**
  * Returns the appropriate icons for the given chat report using the stored personalDetails.
  * The Avatar sources can be URLs or Icon components according to the chat type.
@@ -1690,5 +1712,6 @@ export {
     getCommentLength,
     openReportFromDeepLink,
     getFullSizeAvatar,
+    getSmallSizeAvatar,
     getIOUOptions,
 };

src/libs/actions/Report.js

@@ -449,6 +449,7 @@ function reconnect(reportID) {
                 value: {
                     isLoadingReportActions: true,
                     isLoadingMoreReportActions: false,
+                    reportName: lodashGet(allReports, [reportID, 'reportName'], CONST.REPORT.DEFAULT_REPORT_NAME),
                 },
             }],
             successData: [{
@@ -671,10 +672,10 @@ function handleReportChanged(report) {
         }
     }
 
-    // A report can be missing a name if a comment is received via pusher event
-    // and the report does not yet exist in Onyx (eg. a new DM created with the logged in person)
+    // A report can be missing a name if a comment is received via pusher event and the report does not yet exist in Onyx (eg. a new DM created with the logged in person)
+    // In this case, we call reconnect so that we can fetch the report data without marking it as read
     if (report.reportID && report.reportName === undefined) {
-        openReport(report.reportID);
+        reconnect(report.reportID);
     }
 }