Merge branch 'main' into monil-fixNewMarkerLine

Expensify · May 19, 2023 · 52cf638 · 52cf638
2 parents 1d899ca + d17562e
commit 52cf638
Show file tree

Hide file tree

Showing 19 changed files with 142 additions and 191 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001031603
-        versionName "1.3.16-3"
+        versionCode 1001031605
+        versionName "1.3.16-5"
     }
 
     splits {

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.16.3</string>
+	<string>1.3.16.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.16.3</string>
+	<string>1.3.16.5</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.16-3",
+  "version": "1.3.16-5",
   "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.",
@@ -221,7 +221,15 @@
     "react-native": "$react-native"
   },
   "electronmon": {
-    "patterns": ["!node_modules", "!node_modules/**/*", "!**/*.map", "!ios/**", "!android/**", "*.test.*", "*.spec.*"]
+    "patterns": [
+      "!node_modules",
+      "!node_modules/**/*",
+      "!**/*.map",
+      "!ios/**",
+      "!android/**",
+      "*.test.*",
+      "*.spec.*"
+    ]
   },
   "engines": {
     "node": "16.15.1",

diff --git a/src/Expensify.js b/src/Expensify.js
@@ -90,7 +90,8 @@ function Expensify(props) {
     const [isSplashHidden, setIsSplashHidden] = useState(false);
 
     const isAuthenticated = useMemo(() => Boolean(lodashGet(props.session, 'authToken', null)), [props.session]);
-    const shouldHideSplash = isNavigationReady && !isSplashHidden && (!isAuthenticated || props.isSidebarLoaded);
+    const shouldInit = isNavigationReady && (!isAuthenticated || props.isSidebarLoaded);
+    const shouldHideSplash = shouldInit && !isSplashHidden;
 
     const initializeClient = () => {
         if (!Visibility.isVisible()) {
@@ -171,7 +172,7 @@ function Expensify(props) {
 
     return (
         <DeeplinkWrapper>
-            {shouldHideSplash && (
+            {shouldInit && (
                 <>
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />

diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
@@ -84,8 +84,8 @@ const MoneyRequestHeader = (props) => {
         ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
         : ReportUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail);
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
-    const shouldShowSettlementButton =
-        !isSettled && (Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(props.report) && lodashGet(props.session, 'email', null) === props.report.managerEmail));
+    const isPayer = Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(props.report) && lodashGet(props.session, 'email', null) === props.report.managerEmail);
+    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithCloseButton
@@ -149,7 +149,7 @@ const MoneyRequestHeader = (props) => {
                                     currency={props.report.currency}
                                     policyID={props.report.policyID}
                                     shouldShowPaypal={Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'payPalMeAddress']))}
-                                    chatReportID={props.report.chatReportID}
+                                    chatReportID={props.chatReport.reportID}
                                     iouReport={props.report}
                                     onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
                                     enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}

diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
@@ -43,6 +43,9 @@ const propTypes = {
 
     /** Whether avatars are displayed within a reportAction */
     isInReportAction: PropTypes.bool,
+
+    /** Whether avatars are displayed within an IOUAction */
+    shouldUseCardBackground: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -56,6 +59,7 @@ const defaultProps = {
     isPressed: false,
     isFocusMode: false,
     isInReportAction: false,
+    shouldUseCardBackground: false,
 };
 
 const MultipleAvatars = (props) => {
@@ -107,42 +111,64 @@ const MultipleAvatars = (props) => {
             {props.shouldStackHorizontally ? (
                 <>
                     {_.map([...props.icons].splice(0, 4), (icon, index) => (
-                        <View
+                        <Tooltip
                             key={`stackedAvatars-${index}`}
-                            style={[
-                                styles.justifyContentCenter,
-                                styles.alignItemsCenter,
-                                StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed, props.isInReportAction),
-                                StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width),
-                                icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {},
-                            ]}
+                            text={props.avatarTooltips[index]}
+                            absolute
                         >
-                            <Avatar
-                                source={icon.source || props.fallbackIcon}
-                                fill={themeColors.iconSuccessFill}
-                                size={props.size}
-                                name={icon.name}
-                                type={icon.type}
-                            />
-                        </View>
+                            <View
+                                style={[
+                                    styles.justifyContentCenter,
+                                    styles.alignItemsCenter,
+                                    StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                        isHovered: props.isHovered,
+                                        isPressed: props.isPressed,
+                                        isInReportAction: props.isInReportAction,
+                                        shouldUseCardBackground: props.shouldUseCardBackground,
+                                    }),
+                                    StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width),
+                                    icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {},
+                                ]}
+                            >
+                                <Avatar
+                                    source={icon.source || props.fallbackIcon}
+                                    fill={themeColors.iconSuccessFill}
+                                    size={props.size}
+                                    name={icon.name}
+                                    type={icon.type}
+                                />
+                            </View>
+                        </Tooltip>
                     ))}
                     {props.icons.length > 4 && (
-                        <View
-                            style={[
-                                styles.alignItemsCenter,
-                                styles.justifyContentCenter,
-                                StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed, props.isInReportAction),
-
-                                // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
-                                StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
-                                props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {},
-                            ]}
+                        <Tooltip
+                            text={props.avatarTooltips.slice(3).join(', ')}
+                            absolute
                         >
-                            <View style={[styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getHeight(oneAvatarSize.height), StyleUtils.getWidthStyle(oneAvatarSize.width)]}>
-                                <Text style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(props.size)]}>{`+${props.icons.length - 4}`}</Text>
+                            <View
+                                style={[
+                                    styles.alignItemsCenter,
+                                    styles.justifyContentCenter,
+                                    StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                        isHovered: props.isHovered,
+                                        isPressed: props.isPressed,
+                                        isInReportAction: props.isInReportAction,
+                                        shouldUseCardBackground: props.shouldUseCardBackground,
+                                    }),
+
+                                    // Set overlay background color with RGBA value so that the text will not inherit opacity
+                                    StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                    StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                                    props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {},
+                                ]}
+                            >
+                                <View
+                                    style={[styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getHeight(oneAvatarSize.height), StyleUtils.getWidthStyle(oneAvatarSize.width)]}
+                                >
+                                    <Text style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(props.size)]}>{`+${props.icons.length - 4}`}</Text>
+                                </View>
                             </View>
-                        </View>
+                        </Tooltip>
                     )}
                 </>
             ) : (

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
@@ -218,7 +218,10 @@ const IOUPreview = (props) => {
                             <View style={styles.iouPreviewBoxAvatar}>
                                 <MultipleAvatars
                                     icons={participantAvatars}
-                                    secondAvatarStyle={[styles.secondAvatarInline, props.isHovered ? styles.iouPreviewBoxAvatarHover : undefined]}
+                                    shouldStackHorizontally
+                                    size="small"
+                                    isHovered={props.isHovered}
+                                    shouldUseCardBackground
                                     avatarTooltips={participantEmails}
                                 />
                             </View>

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
@@ -100,7 +100,7 @@ const ReportPreview = (props) => {
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     return (
         <View style={[styles.chatItemMessage, styles.mt4]}>
-            {_.map(props.action.message, (index) => (
+            {_.map(props.action.message, (message, index) => (
                 <Pressable
                     key={`ReportPreview-${props.action.reportActionID}-${index}`}
                     onPress={() => {
@@ -114,10 +114,12 @@ const ReportPreview = (props) => {
                 >
                     <View style={[styles.flexShrink1]}>
                         {props.iouReport.hasOutstandingIOU ? (
-                            <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount})}</Text>
+                            <Text style={[styles.chatItemMessage, styles.cursorPointer]}>
+                                {lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
+                            </Text>
                         ) : (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{props.translate('iou.payerSettled', {amount: reportAmount})}</Text>
+                                <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}</Text>
                                 {!props.iouReport.hasOutstandingIOU && (
                                     <Icon
                                         style={[styles.ml10]}

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
@@ -1383,9 +1383,10 @@ function getIOUReportActionMessage(type, total, comment, currency, paymentType =
  * @param {String} [paymentType] - Only required if the IOUReportAction type is 'pay'. Can be oneOf(elsewhere, payPal, Expensify).
  * @param {String} [iouReportID] - Only required if the IOUReportActions type is oneOf(decline, cancel, pay). Generates a randomID as default.
  * @param {Boolean} [isSettlingUp] - Whether we are settling up an IOU.
+ * @param {Boolean} [isSendMoneyFlow] - Whether this is send money flow
  * @returns {Object}
  */
-function buildOptimisticIOUReportAction(type, amount, currency, comment, participants, transactionID, paymentType = '', iouReportID = '', isSettlingUp = false) {
+function buildOptimisticIOUReportAction(type, amount, currency, comment, participants, transactionID, paymentType = '', iouReportID = '', isSettlingUp = false, isSendMoneyFlow = false) {
     const IOUReportID = iouReportID || generateReportID();
     const parser = new ExpensiMark();
     const commentText = getParsedComment(comment);
@@ -1401,7 +1402,7 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
     };
 
     // We store amount, comment, currency in IOUDetails when type = pay
-    if (type === CONST.IOU.REPORT_ACTION_TYPE.PAY) {
+    if (type === CONST.IOU.REPORT_ACTION_TYPE.PAY && isSendMoneyFlow) {
         _.each(['amount', 'comment', 'currency'], (key) => {
             delete originalMessage[key];
         });
@@ -2009,7 +2010,7 @@ function getNewMarkerReportActionID(report, sortedAndFilteredReportActions) {
         return '';
     }
 
-    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.actorAccountID !== currentUserAccountID) && (reportAction.created || '') > report.lastReadTime );
+    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.created || '') > report.lastReadTime);
 
     return _.has(sortedAndFilteredReportActions[newMarkerIndex], 'reportActionID') ? sortedAndFilteredReportActions[newMarkerIndex].reportActionID : '';
 }