Merge main

.github/workflows/README.md

@@ -85,7 +85,7 @@ The GitHub workflows require a large list of secrets to deploy, notify and test
 1. `LARGE_SECRET_PASSPHRASE` - decrypts secrets stored in various encrypted files stored in GitHub repository. To create updated versions of these encrypted files, refer to steps 1-4 of [this encrypted secrets help page](https://docs.github.com/en/actions/reference/encrypted-secrets#limits-for-secrets) using the `LARGE_SECRET_PASSPHRASE`.
    1. `android/app/my-upload-key.keystore.gpg`
    1. `android/app/android-fastlane-json-key.json.gpg`
-   1. `ios/chat_expensify_adhoc.mobileprovision.gpg`
+   1. `ios/expensify_chat_adhoc.mobileprovision.gpg`
    1. `ios/chat_expensify_appstore.mobileprovision.gpg`
    1. `ios/Certificates.p12.gpg`
 1. `SLACK_WEBHOOK` - Sends Slack notifications via Slack WebHook https://expensify.slack.com/services/B01AX48D7MM

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: Expensify/App/.github/actions/composite/setupNode@main
 
-      - name: Lint JavaScript with ESLint
+      - name: Lint JavaScript and Typescript with ESLint
         run: npm run lint
         env:
           CI: true

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001036501
-        versionName "1.3.65-1"
+        versionCode 1001036603
+        versionName "1.3.66-3"
     }
 
     flavorDimensions "default"

android/app/src/main/res/values-large/orientation.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <bool name="portrait_only">false</bool>
+    <bool name="portrait_only">true</bool>
 </resources>

android/app/src/main/res/values-sw600dp/orientation.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <bool name="portrait_only">false</bool>
+    <bool name="portrait_only">true</bool>
 </resources>

contributingGuides/FORMS.md

@@ -274,6 +274,7 @@ Form.js will automatically provide the following props to any input with the inp
 - onBlur: An onBlur handler that calls validate.
 - onTouched: An onTouched handler that marks the input as touched.
 - onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB).
+- onFocus: An onFocus handler that marks the input as focused.
 
 ## Dynamic Form Inputs
 

fastlane/Fastfile

@@ -224,11 +224,11 @@ platform :ios do
               contact_phone: ENV["APPLE_CONTACT_PHONE"],
               demo_account_name: ENV["APPLE_DEMO_EMAIL"],
               demo_account_password: ENV["APPLE_DEMO_PASSWORD"],
-              notes: "1. Log into the Expensify app using the provided email
-                      2. Now, you have to log in to this gmail account on https://mail.google.com/ so you can retrieve a One-Time-Password
-                      3. To log in to the gmail account, use the password above (That's NOT a password for the Expensify app but for the Gmail account)
-                      4. At the Gmail inbox, you should have received a one-time 6 digit magic code
-                      5. Use that to sign in"
+              notes: "1. In the Expensify app, enter the email '[email protected]'. This will trigger a sign-in link to be sent to '[email protected]'
+                      2. Navigate to https://account.proton.me/login, log into Proton Mail using '[email protected]' as email and the password associated with '[email protected]', provided above
+                      3. Once logged into Proton Mail, navigate to your inbox and locate the email triggered in step 1. The email subject should be 'Your magic sign-in link for Expensify'
+                      4. Open the email and copy the 6-digit sign-in code provided within
+                      5. Return to the Expensify app and enter the copied 6-digit code in the designated login field"
           }
       )
     rescue Exception => e

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.65</string>
+	<string>1.3.66</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.65.1</string>
+	<string>1.3.66.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
@@ -108,6 +108,8 @@
 	<array>
 		<string>armv7</string>
 	</array>
+	<key>UIRequiresFullScreen</key>
+	<true/>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
@@ -117,8 +119,6 @@
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
 	</array>
 	<key>UIUserInterfaceStyle</key>
 	<string>Dark</string>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.65</string>
+	<string>1.3.66</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.65.1</string>
+	<string>1.3.66.3</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.65-1",
+  "version": "1.3.66-3",
   "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.",
@@ -125,7 +125,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.70",
+    "react-native-onyx": "1.0.72",
     "react-native-pager-view": "^6.2.0",
     "react-native-pdf": "^6.7.1",
     "react-native-performance": "^4.0.0",

src/components/DragAndDrop/Provider/dragAndDropProviderPropTypes.js

@@ -6,4 +6,7 @@ export default {
 
     /** Should this dropZone be disabled? */
     isDisabled: PropTypes.bool,
+
+    /** Indicate that users are dragging file or not */
+    setIsDraggingOver: PropTypes.func,
 };

src/components/DragAndDrop/Provider/index.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useRef, useCallback} from 'react';
+import React, {useRef, useCallback, useEffect} from 'react';
 import {View} from 'react-native';
 import {PortalHost} from '@gorhom/portal';
 import Str from 'expensify-common/lib/str';
@@ -17,7 +17,7 @@ function shouldAcceptDrop(event) {
     return _.some(event.dataTransfer.types, (type) => type === 'Files');
 }
 
-function DragAndDropProvider({children, isDisabled = false}) {
+function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver = () => {}}) {
     const dropZone = useRef(null);
     const dropZoneID = useRef(Str.guid('drag-n-drop'));
 
@@ -33,6 +33,10 @@ function DragAndDropProvider({children, isDisabled = false}) {
         isDisabled,
     });
 
+    useEffect(() => {
+        setIsDraggingOver(isDraggingOver);
+    }, [isDraggingOver, setIsDraggingOver]);
+
     return (
         <DragAndDropContext.Provider value={{isDraggingOver, setOnDropHandler, dropZoneID: dropZoneID.current}}>
             <View

src/components/Form.js

@@ -108,6 +108,7 @@ function Form(props) {
     const formContentRef = useRef(null);
     const inputRefs = useRef({});
     const touchedInputs = useRef({});
+    const focusedInput = useRef(null);
     const isFirstRender = useRef(true);
 
     const {validate, onSubmit, children} = props;
@@ -305,6 +306,12 @@ function Form(props) {
                     // as this is already happening by the value prop.
                     defaultValue: undefined,
                     errorText: errors[inputID] || fieldErrorMessage,
+                    onFocus: (event) => {
+                        focusedInput.current = inputID;
+                        if (_.isFunction(child.props.onFocus)) {
+                            child.props.onFocus(event);
+                        }
+                    },
                     onBlur: (event) => {
                         // Only run validation when user proactively blurs the input.
                         if (Visibility.isVisible() && Visibility.hasFocus()) {
@@ -328,6 +335,11 @@ function Form(props) {
                     },
                     onInputChange: (value, key) => {
                         const inputKey = key || inputID;
+
+                        if (focusedInput.current && focusedInput.current !== inputKey) {
+                            setTouchedInput(focusedInput.current);
+                        }
+
                         setInputValues((prevState) => {
                             const newState = {
                                 ...prevState,

src/components/HeaderGap/index.desktop.js

@@ -1,9 +1,22 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 
-export default class HeaderGap extends PureComponent {
+const propTypes = {
+    /** Styles to apply to the HeaderGap */
+    // eslint-disable-next-line react/forbid-prop-types
+    styles: PropTypes.arrayOf(PropTypes.object),
+};
+
+class HeaderGap extends PureComponent {
     render() {
-        return <View style={styles.headerGap} />;
+        return <View style={[styles.headerGap, ...this.props.styles]} />;
     }
 }
+
+HeaderGap.propTypes = propTypes;
+HeaderGap.defaultProps = {
+    styles: [],
+};
+export default HeaderGap;

src/components/ReportActionItem/ReportActionItemImages.js

@@ -11,7 +11,7 @@ const propTypes = {
     images: PropTypes.arrayOf(
         PropTypes.shape({
             thumbnail: PropTypes.string,
-            image: PropTypes.string,
+            image: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         }),
     ).isRequired,
 

src/components/ScreenWrapper/index.js

@@ -124,7 +124,7 @@ class ScreenWrapper extends React.Component {
                                         style={styles.flex1}
                                         enabled={this.props.shouldEnablePickerAvoiding}
                                     >
-                                        <HeaderGap />
+                                        <HeaderGap styles={this.props.headerGapStyles} />
                                         {this.props.environment === CONST.ENVIRONMENT.DEV && <TestToolsModal />}
                                         {this.props.environment === CONST.ENVIRONMENT.DEV && <CustomDevMenu />}
                                         {

src/components/ScreenWrapper/propTypes.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** Whether to use the maxHeight (true) or use the 100% of the height (false) */
     shouldEnableMaxHeight: PropTypes.bool,
 
+    /** Array of additional styles for header gap */
+    headerGapStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...windowDimensionsPropTypes,
 
     ...environmentPropTypes,
@@ -59,6 +62,7 @@ const defaultProps = {
     shouldEnablePickerAvoiding: true,
     shouldShowOfflineIndicator: true,
     offlineIndicatorStyle: [],
+    headerGapStyles: [],
 };
 
 export {propTypes, defaultProps};

src/components/avatarPropTypes.js

@@ -5,5 +5,5 @@ export default PropTypes.shape({
     source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]),
     name: PropTypes.string,
-    id: PropTypes.number,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 });

src/components/transactionPropTypes.js

@@ -68,7 +68,7 @@ export default PropTypes.shape({
     /** The receipt object associated with the transaction */
     receipt: PropTypes.shape({
         receiptID: PropTypes.number,
-        source: PropTypes.string,
+        source: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         state: PropTypes.string,
     }),
 

src/components/withWindowDimensions.js → src/components/withWindowDimensions/index.js

@@ -2,9 +2,9 @@ import React, {forwardRef, createContext, useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {Dimensions} from 'react-native';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import variables from '../styles/variables';
-import getWindowHeightAdjustment from '../libs/getWindowHeightAdjustment';
+import getComponentDisplayName from '../../libs/getComponentDisplayName';
+import variables from '../../styles/variables';
+import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment';
 
 const WindowDimensionsContext = createContext(null);
 const windowDimensionsPropTypes = {