Merge branch 'main' into 17004-add-pressable-ESLint-rules

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,11 +5,11 @@
 
 ### Fixed Issues
 <!---
-1. Please replace GH_LINK with a URL link to the GitHub issue this Pull Request is fixing.
-2. Please replace PROPOSAL: GH_LINK_ISSUE(COMMENT) with a URL link to your GitHub comment, which contains the approved proposal (i.e. the proposal that was approved by Expensify).
+1. Please postfix `$` with a URL link to the GitHub issue this Pull Request is fixing. For example, `$ https://github.com/Expensify/App/issues/123`.
+2. Please postfix  `PROPOSAL:` with a URL link to your GitHub comment, which contains the approved proposal (i.e. the proposal that was approved by Expensify).  For example, `PROPOSAL: https://github.com/Expensify/App/issues/123#issuecomment-1369752925`
 
 Do NOT add the special GH keywords like `fixed` etc, we have our own process of managing the flow.
-It MUST be an entire link to the github issue and your comment proposal ; otherwise, the linking will not work as expected.
+It MUST be an entire link to the github issue and your comment proposal ; otherwise, the linking and its automation will not work as expected.
 
 Make sure this section looks similar to this (you can link multiple issues using the same formatting, just add a new line):
 
@@ -18,8 +18,8 @@ $ https://github.com/Expensify/App/issues/<number-of-the-issue(comment)>
 
 Do NOT only link the issue number like this: $ #<number-of-the-issue>
 --->
-$ GH_LINK
-PROPOSAL: GH_LINK_ISSUE(COMMENT)
+$ 
+PROPOSAL: 
 
 
 ### Tests

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001033702
-        versionName "1.3.37-2"
+        versionCode 1001033800
+        versionName "1.3.38-0"
     }
 
     splits {

config/webpack/webpack.common.js

@@ -82,6 +82,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 {from: 'web/favicon.png'},
                 {from: 'web/favicon-unread.png'},
                 {from: 'web/og-preview-image.png'},
+                {from: 'web/apple-touch-icon.png'},
                 {from: 'assets/css', to: 'css'},
                 {from: 'assets/fonts/web', to: 'fonts'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.37</string>
+	<string>1.3.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -32,7 +32,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.37.2</string>
+	<string>1.3.38.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.3.37</string>
+	<string>1.3.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.37.2</string>
+	<string>1.3.38.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.37-2",
+  "version": "1.3.38-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.",
@@ -77,7 +77,7 @@
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#06a5ff5b0e2f24fe535754eb6b85cec86d157ab2",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
     "fbjs": "^3.0.2",
     "htmlparser2": "^7.2.0",
     "jest-when": "^3.5.2",

src/CONST.js

@@ -1125,7 +1125,7 @@ const CONST = {
         POSITIVE_INTEGER: /^\d+$/,
         PO_BOX: /\b[P|p]?(OST|ost)?\.?\s*[O|o|0]?(ffice|FFICE)?\.?\s*[B|b][O|o|0]?[X|x]?\.?\s+[#]?(\d+)\b/,
         ANY_VALUE: /^.+$/,
-        ZIP_CODE: /[0-9]{5}(?:[- ][0-9]{4})?/,
+        ZIP_CODE: /^[0-9]{5}(?:[- ][0-9]{4})?$/,
         INDUSTRY_CODE: /^[0-9]{6}$/,
         SSN_LAST_FOUR: /^(?!0000)[0-9]{4}$/,
         SSN_FULL_NINE: /^(?!0000)[0-9]{9}$/,

src/Expensify.js

@@ -29,6 +29,8 @@ import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/Popo
 import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';
 import SplashScreenHider from './components/SplashScreenHider';
 import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
+import EmojiPicker from './components/EmojiPicker/EmojiPicker';
+import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
 
 // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
 // eslint-disable-next-line no-unused-vars
@@ -187,6 +189,7 @@ function Expensify(props) {
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
+                    <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
                     {props.updateAvailable ? <UpdateAppModal /> : null}
                     {props.screenShareRequest ? (

src/components/AttachmentModal.js

@@ -46,6 +46,9 @@ const propTypes = {
     /** Optional callback to fire when we want to do something after modal hide. */
     onModalHide: PropTypes.func,
 
+    /** Optional callback to fire when we want to do something after attachment carousel changes. */
+    onCarouselAttachmentChange: PropTypes.func,
+
     /** Optional original filename when uploading */
     originalFileName: PropTypes.string,
 
@@ -81,13 +84,14 @@ const defaultProps = {
     report: {},
     onModalShow: () => {},
     onModalHide: () => {},
+    onCarouselAttachmentChange: () => {},
 };
 
 function AttachmentModal(props) {
     const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen);
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
-    const [isAuthTokenRequired] = useState(props.isAuthTokenRequired);
+    const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(null);
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -102,14 +106,21 @@ function AttachmentModal(props) {
             : undefined,
     );
 
+    const onCarouselAttachmentChange = props.onCarouselAttachmentChange;
+
     /**
      * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
      * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string } }} attachment
      */
-    const onNavigate = useCallback((attachment) => {
-        setSource(attachment.source);
-        setFile(attachment.file);
-    }, []);
+    const onNavigate = useCallback(
+        (attachment) => {
+            setSource(attachment.source);
+            setFile(attachment.file);
+            setIsAuthTokenRequired(attachment.isAuthTokenRequired);
+            onCarouselAttachmentChange(attachment);
+        },
+        [onCarouselAttachmentChange],
+    );
 
     /**
      * If our attachment is a PDF, return the unswipeable Modal type.

src/components/MenuItem.js

@@ -67,6 +67,7 @@ const defaultProps = {
     hoverAndPressStyle: [],
     furtherDetails: '',
     furtherDetailsIcon: undefined,
+    numberOfLinesTitle: 1,
 };
 
 function MenuItem(props) {
@@ -79,8 +80,8 @@ function MenuItem(props) {
             props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
             props.shouldShowBasicTitle ? undefined : styles.textStrong,
             props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
+            props.numberOfLinesTitle > 1 ? styles.preWrap : styles.pre,
             props.interactive && props.disabled ? {...styles.userSelectNone} : undefined,
-            styles.pre,
             styles.ltr,
             isDeleted ? styles.offlineFeedback.deleted : undefined,
         ],
@@ -193,7 +194,7 @@ function MenuItem(props) {
                                     {Boolean(props.title) && (
                                         <Text
                                             style={titleTextStyle}
-                                            numberOfLines={1}
+                                            numberOfLines={props.numberOfLinesTitle}
                                         >
                                             {convertToLTR(props.title)}
                                         </Text>

src/components/MoneyRequestConfirmationList.js

@@ -132,6 +132,8 @@ function MoneyRequestConfirmationList(props) {
 
     const selectedParticipants = useMemo(() => _.filter(props.participants, (participant) => participant.selected), [props.participants]);
     const payeePersonalDetails = useMemo(() => props.payeePersonalDetails || props.currentUserPersonalDetails, [props.payeePersonalDetails, props.currentUserPersonalDetails]);
+    const canModifyParticipants = !props.isReadOnly && props.canModifyParticipants && props.hasMultipleParticipants;
+    const shouldDisableWhoPaidSection = canModifyParticipants;
 
     const optionSelectorSections = useMemo(() => {
         const sections = [];
@@ -152,6 +154,7 @@ function MoneyRequestConfirmationList(props) {
                     data: [formattedPayeeOption],
                     shouldShow: true,
                     indexOffset: 0,
+                    isDisabled: shouldDisableWhoPaidSection,
                 },
                 {
                     title: translate('moneyRequestConfirmationList.whoWasThere'),
@@ -169,7 +172,17 @@ function MoneyRequestConfirmationList(props) {
             });
         }
         return sections;
-    }, [selectedParticipants, getParticipantsWithAmount, props.hasMultipleParticipants, props.iouAmount, props.iouCurrencyCode, props.participants, translate, payeePersonalDetails]);
+    }, [
+        props.participants,
+        props.hasMultipleParticipants,
+        props.iouAmount,
+        props.iouCurrencyCode,
+        getParticipantsWithAmount,
+        selectedParticipants,
+        payeePersonalDetails,
+        translate,
+        shouldDisableWhoPaidSection,
+    ]);
 
     const selectedOptions = useMemo(() => {
         if (!props.hasMultipleParticipants) {
@@ -228,7 +241,6 @@ function MoneyRequestConfirmationList(props) {
         [selectedParticipants, onSendMoney, onConfirm, props.iouType],
     );
 
-    const canModifyParticipants = !props.isReadOnly && props.canModifyParticipants && props.hasMultipleParticipants;
     const formattedAmount = CurrencyUtils.convertToDisplayString(props.iouAmount, props.iouCurrencyCode);
 
     const footerContent = useMemo(() => {

src/components/ReportActionItem/TaskPreview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -19,8 +20,12 @@ import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes
 import * as TaskUtils from '../../libs/actions/Task';
 import RenderHTML from '../RenderHTML';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import personalDetailsPropType from '../../pages/personalDetailsPropType';
 
 const propTypes = {
+    /** All personal details asssociated with user */
+    personalDetailsList: personalDetailsPropType,
+
     /** The ID of the associated taskReport */
     taskReportID: PropTypes.string.isRequired,
 
@@ -47,6 +52,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    personalDetailsList: {},
     taskReport: {},
     isHovered: false,
 };
@@ -59,7 +65,8 @@ function TaskPreview(props) {
         ? props.taskReport.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.taskReport.statusNum === CONST.REPORT.STATUS.APPROVED
         : props.action.childStateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.action.childStatusNum === CONST.REPORT.STATUS.APPROVED;
     const taskTitle = props.taskReport.reportName || props.action.childReportName;
-    const taskAssignee = props.taskReport.managerEmail || props.action.childManagerEmail;
+    const taskAssigneeAccountID = TaskUtils.getTaskAssigneeAccountID(props.taskReport);
+    const taskAssignee = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], ''));
     const htmlForTaskPreview = taskAssignee ? `<comment><mention-user>@${taskAssignee}</mention-user> ${taskTitle}</comment>` : `<comment>${taskTitle}</comment>`;
 
     return (
@@ -106,5 +113,8 @@ export default compose(
         taskReport: {
             key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
         },
+        personalDetailsList: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
     }),
 )(TaskPreview);

src/components/TaskHeader.js

@@ -24,6 +24,7 @@ import * as TaskUtils from '../libs/actions/Task';
 import * as UserUtils from '../libs/UserUtils';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import ONYXKEYS from '../ONYXKEYS';
+import withNavigationFocus from './withNavigationFocus';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -37,6 +38,9 @@ const propTypes = {
         accountID: PropTypes.number,
     }),
 
+    /** Whether the screen is focused */
+    isFocused: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -55,8 +59,11 @@ function TaskHeader(props) {
     const isCompleted = ReportUtils.isTaskCompleted(props.report);
 
     useEffect(() => {
+        if (!props.isFocused) {
+            return;
+        }
         TaskUtils.setTaskReport(props.report);
-    }, [props.report]);
+    }, [props.report, props.isFocused]);
 
     return (
         <View style={styles.borderBottom}>
@@ -143,6 +150,7 @@ TaskHeader.displayName = 'TaskHeader';
 export default compose(
     withWindowDimensions,
     withLocalize,
+    withNavigationFocus,
     withOnyx({
         session: {
             key: ONYXKEYS.SESSION,

src/components/TextInput/BaseTextInput.js

@@ -218,7 +218,7 @@ function BaseTextInput(props) {
     };
 
     const togglePasswordVisibility = useCallback(() => {
-        setPasswordHidden((prevState) => !prevState.passwordHidden);
+        setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden);
     }, []);
 
     const storePrefixLayoutDimensions = useCallback((event) => {
@@ -347,7 +347,7 @@ function BaseTextInput(props) {
                             />
                             {Boolean(props.secureTextEntry) && (
                                 <Checkbox
-                                    style={styles.textInputIconContainer}
+                                    style={[styles.flex1, styles.textInputIconContainer]}
                                     onPress={togglePasswordVisibility}
                                     onMouseDown={(e) => e.preventDefault()}
                                     accessibilityLabel={props.translate('common.visible')}