Merge pull request #9029 from Expensify/update-staging-from-main

Update version to 1.1.61-0 on staging

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001016003
-        versionName "1.1.60-3"
+        versionCode 1001016100
+        versionName "1.1.61-0"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.1.60</string>
+	<string>1.1.61</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.60.3</string>
+	<string>1.1.61.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.1.60</string>
+	<string>1.1.61</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.60.3</string>
+	<string>1.1.61.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.60-3",
+  "version": "1.1.61-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.",

src/CONST.js

@@ -387,6 +387,8 @@ const CONST = {
 
     EMOJI_FREQUENT_ROW_COUNT: 3,
 
+    EMOJI_INVISIBLE_CODEPOINT: 'fe0f',
+
     TOOLTIP_MAX_LINES: 3,
 
     LOGIN_TYPE: {

src/libs/EmojiUtils.js

@@ -9,7 +9,7 @@ import * as User from './actions/User';
  * @param {String} input
  * @returns {String}
  */
-function getEmojiUnicode(input) {
+const getEmojiUnicode = _.memoize((input) => {
     if (input.length === 0) {
         return '';
     }
@@ -40,7 +40,7 @@ function getEmojiUnicode(input) {
         }
     }
     return _.map(pairs, val => parseInt(val, 10).toString(16)).join(' ');
-}
+});
 
 /**
  * Function to remove Skin Tone and utf16 surrogates from Emoji
@@ -70,6 +70,34 @@ function isSingleEmoji(message) {
     return matchedUnicode === currentMessageUnicode;
 }
 
+/**
+ * Validates that this message contains only emojis
+ *
+ * @param {String} message
+ * @returns {Boolean}
+ */
+function containsOnlyEmojis(message) {
+    const trimmedMessage = message.replace(/ /g, '').replaceAll('\n', '');
+    const match = trimmedMessage.match(CONST.REGEX.EMOJIS);
+
+    if (!match) {
+        return false;
+    }
+
+    const codes = [];
+    _.map(match, emoji => _.map(getEmojiUnicode(emoji).split(' '), (code) => {
+        if (code !== CONST.EMOJI_INVISIBLE_CODEPOINT) {
+            codes.push(code);
+        }
+        return code;
+    }));
+
+    // Emojis are stored as multiple characters, so we're using spread operator
+    // to iterate over the actual emojis, not just characters that compose them
+    const messageCodes = _.filter(_.map([...trimmedMessage], char => getEmojiUnicode(char)), string => string.length > 0 && string !== CONST.EMOJI_INVISIBLE_CODEPOINT);
+    return codes.length === messageCodes.length;
+}
+
 /**
  * Get the header indices based on the max emojis per row
  * @param {Object[]} emojis
@@ -176,4 +204,5 @@ export {
     getDynamicHeaderIndices,
     mergeEmojisWithFrequentlyUsedEmojis,
     addToFrequentlyUsedEmojis,
+    containsOnlyEmojis,
 };

src/pages/home/report/ReportActionItemFragment.js

@@ -68,7 +68,7 @@ const defaultProps = {
 
 const ReportActionItemFragment = (props) => {
     switch (props.fragment.type) {
-        case 'COMMENT':
+        case 'COMMENT': {
             // If this is an attachment placeholder, return the placeholder component
             if (props.isAttachment && props.loading) {
                 return (
@@ -97,6 +97,16 @@ const ReportActionItemFragment = (props) => {
                 );
             }
 
+            // If the only difference between fragment.text and fragment.html is <br /> tags
+            // we replace them with line breaks and render it as text, not as html.
+            // This is done to render emojis with line breaks between them as text.
+            const differByLineBreaksOnly = props.fragment.html.replaceAll('<br />', ' ') === props.fragment.text;
+            if (differByLineBreaksOnly) {
+                const textWithLineBreaks = props.fragment.html.replaceAll('<br />', '\n');
+                // eslint-disable-next-line no-param-reassign
+                props.fragment = {...props.fragment, text: textWithLineBreaks, html: textWithLineBreaks};
+            }
+
             // Only render HTML if we have html in the fragment
             return props.fragment.html !== props.fragment.text
                 ? (
@@ -106,7 +116,7 @@ const ReportActionItemFragment = (props) => {
                 ) : (
                     <Text
                         selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
-                        style={EmojiUtils.isSingleEmoji(props.fragment.text) ? styles.singleEmojiText : undefined}
+                        style={EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined}
                     >
                         {Str.htmlDecode(props.fragment.text)}
                         {props.fragment.isEdited && (
@@ -119,6 +129,7 @@ const ReportActionItemFragment = (props) => {
                         )}
                     </Text>
                 );
+        }
         case 'TEXT':
             return (
                 <Tooltip text={props.tooltipText}>

src/pages/workspace/WorkspacePageWithSections.js

@@ -17,8 +17,13 @@ import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursement
 import userPropTypes from '../settings/userPropTypes';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import withFullPolicy from './withFullPolicy';
+import {withNetwork} from '../../components/OnyxProvider';
+import networkPropTypes from '../../components/networkPropTypes';
 
 const propTypes = {
+    /** Information about the network from Onyx */
+    network: networkPropTypes.isRequired,
+
     /** The text to display in the header */
     headerText: PropTypes.string.isRequired,
 
@@ -65,6 +70,18 @@ const defaultProps = {
 
 class WorkspacePageWithSections extends React.Component {
     componentDidMount() {
+        this.fetchData();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.network.isOffline || this.props.network.isOffline) {
+            return;
+        }
+
+        this.fetchData();
+    }
+
+    fetchData() {
         const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
         BankAccounts.fetchFreePlanVerifiedBankAccount('', achState);
     }
@@ -118,4 +135,5 @@ export default compose(
         },
     }),
     withFullPolicy,
+    withNetwork(),
 )(WorkspacePageWithSections);

src/styles/styles.js

@@ -1042,9 +1042,9 @@ const styles = {
         textDecorationLine: 'none',
     },
 
-    singleEmojiText: {
-        fontSize: variables.fontSizeSingleEmoji,
-        lineHeight: variables.fontSizeSingleEmojiHeight,
+    onlyEmojisText: {
+        fontSize: variables.fontSizeOnlyEmojis,
+        lineHeight: variables.fontSizeOnlyEmojisHeight,
     },
 
     createMenuPositionSidebar: {

src/styles/variables.js

@@ -14,8 +14,8 @@ export default {
     avatarSizeSmall: 28,
     avatarSizeSubscript: 20,
     avatarSizeSmallSubscript: 14,
-    fontSizeSingleEmoji: 30,
-    fontSizeSingleEmojiHeight: 35,
+    fontSizeOnlyEmojis: 30,
+    fontSizeOnlyEmojisHeight: 35,
     fontSizeSmall: 11,
     fontSizeExtraSmall: 9,
     fontSizeLabel: 13,