Merge branch 'main' into arosiclair-update-with-policy

.github/workflows/contributorChecklists.yml

@@ -5,10 +5,10 @@ on: pull_request
 jobs:
   checklist:
     runs-on: ubuntu-latest
-    if: github.actor != 'OSBotify' && (github.event_name == 'pull_request' && contains(github.event.pull_request.body, '- ['))
+    if: github.actor != 'OSBotify'
     steps:
       - name: contributorChecklist.js
-        uses: Expensify/App/.github/actions/javascript/contributorChecklist@andrew-checklist-3
+        uses: Expensify/App/.github/actions/javascript/contributorChecklist@main
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CHECKLIST: 'contributor'

.github/workflows/contributorPlusChecklists.yml

@@ -1,14 +1,14 @@
 name: Contributor+ Checklist
 
-on: issue_comment
+on: pull_request_review
 
 jobs:
   checklist:
     runs-on: ubuntu-latest
-    if: github.actor != 'OSBotify' && (contains(github.event.issue.pull_request.url, 'http') && github.event_name == 'issue_comment' && contains(github.event.comment.body, '- ['))
+    if: github.actor != 'OSBotify'
     steps:
       - name: contributorChecklist.js
-        uses: Expensify/App/.github/actions/javascript/contributorChecklist@andrew-checklist-3
+        uses: Expensify/App/.github/actions/javascript/contributorChecklist@main
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CHECKLIST: 'contributorPlus'

README.md

@@ -221,9 +221,9 @@ created to house a collection of items in plural form and using camelCase (eg: p
 - components: React native components that are re-used in several places.
 - libs: Library classes/functions, these are not React native components (ie: they are not UI)
 - pages: These are components that define pages in the app. The component that defines the page itself should be named
-`<pageName>Page` if there are components used only inside one page, they should live in its own directory named after the `<pageName>`.
+`<pageName>Page` if there are components used only inside one page, they should live in its own directory named after the `<pageName>`
 - styles: These files define styles used among components/pages
-- contributingGuides: This is just a set of markdown files providing guides and insights to aid developers in learning how to contribute to this repo.
+- contributingGuides: This is just a set of markdown files providing guides and insights to aid developers in learning how to contribute to this repo
 
 **Note:** There is also a directory called `/docs`, which houses the Expensify Help site. It's a static site that's built with Jekyll and hosted on GitHub Pages.
 

android/app/build.gradle

@@ -155,8 +155,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001019707
-        versionName "1.1.97-7"
+        versionCode 1001019904
+        versionName "1.1.99-4"
         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.1.97</string>
+	<string>1.1.99</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.97.7</string>
+	<string>1.1.99.4</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.97</string>
+	<string>1.1.99</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.97.7</string>
+	<string>1.1.99.4</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.97-7",
+  "version": "1.1.99-4",
   "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/CONFIG.js

@@ -9,6 +9,8 @@ import CONST from './CONST';
 const ENVIRONMENT = lodashGet(Config, 'ENVIRONMENT', CONST.ENVIRONMENT.DEV);
 const newExpensifyURL = Url.addTrailingForwardSlash(lodashGet(Config, 'NEW_EXPENSIFY_URL', 'https://new.expensify.com/'));
 const expensifyURL = Url.addTrailingForwardSlash(lodashGet(Config, 'EXPENSIFY_URL', 'https://www.expensify.com/'));
+const stagingExpensifyURL = Url.addTrailingForwardSlash(lodashGet(Config, 'STAGING_EXPENSIFY_URL', 'https://staging.expensify.com/'));
+const stagingSecureExpensifyUrl = Url.addTrailingForwardSlash(lodashGet(Config, 'STAGING_SECURE_EXPENSIFY_URL', 'https://staging-secure.expensify.com/'));
 const ngrokURL = Url.addTrailingForwardSlash(lodashGet(Config, 'NGROK_URL', ''));
 const secureNgrokURL = Url.addTrailingForwardSlash(lodashGet(Config, 'SECURE_NGROK_URL', ''));
 const secureExpensifyUrl = Url.addTrailingForwardSlash(lodashGet(
@@ -46,12 +48,15 @@ export default {
         SECURE_EXPENSIFY_URL: secureURLRoot,
         NEW_EXPENSIFY_URL: newExpensifyURL,
         URL_API_ROOT: expensifyURLRoot,
+        STAGING_EXPENSIFY_URL: stagingExpensifyURL,
+        STAGING_SECURE_EXPENSIFY_URL: stagingSecureExpensifyUrl,
         PARTNER_NAME: lodashGet(Config, 'EXPENSIFY_PARTNER_NAME', 'chat-expensify-com'),
         PARTNER_PASSWORD: lodashGet(Config, 'EXPENSIFY_PARTNER_PASSWORD', 'e21965746fd75f82bb66'),
         EXPENSIFY_CASH_REFERER: 'ecash',
         CONCIERGE_URL: conciergeUrl,
     },
     IS_IN_PRODUCTION: Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__,
+    IS_IN_STAGING: ENVIRONMENT === CONST.ENVIRONMENT.STAGING,
     IS_USING_LOCAL_WEB: useNgrok || expensifyURLRoot.includes('dev'),
     PUSHER: {
         APP_KEY: lodashGet(Config, 'PUSHER_APP_KEY', '268df511a204fbb60884'),

src/CONST.js

@@ -232,7 +232,6 @@ const CONST = {
     MANAGE_CARDS_URL: 'domain_companycards',
     FEES_URL: `${USE_EXPENSIFY_URL}/fees`,
     CFPB_PREPAID_URL: 'https://cfpb.gov/prepaid',
-    STAGING_SECURE_URL: 'https://staging-secure.expensify.com/',
     STAGING_NEW_EXPENSIFY_URL: 'https://staging.new.expensify.com',
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
@@ -286,6 +285,9 @@ const CONST = {
             ANNOUNCE: '#announce',
             ADMINS: '#admins',
         },
+        STATE: {
+            SUBMITTED: 'SUBMITTED',
+        },
         STATE_NUM: {
             OPEN: 0,
             PROCESSING: 1,
@@ -512,6 +514,7 @@ const CONST = {
         SVFG: 'svfg@expensify.com',
         INTEGRATION_TESTING_CREDS: 'integrationtestingcreds@expensify.com',
         ADMIN: 'admin@expensify.com',
+        GUIDES_DOMAIN: 'team.expensify.com',
     },
 
     ENVIRONMENT: {
@@ -667,6 +670,7 @@ const CONST = {
             FREE: 'free',
             PERSONAL: 'personal',
             CORPORATE: 'corporate',
+            TEAM: 'team',
         },
         ROLE: {
             ADMIN: 'admin',

src/components/ArrowKeyFocusManager.js

@@ -10,6 +10,9 @@ const propTypes = {
         PropTypes.node,
     ]).isRequired,
 
+    /** Array of disabled indexes. */
+    disabledIndexes: PropTypes.arrayOf(PropTypes.number),
+
     /** The current focused index. */
     focusedIndex: PropTypes.number.isRequired,
 
@@ -20,6 +23,10 @@ const propTypes = {
     onFocusedIndexChanged: PropTypes.func.isRequired,
 };
 
+const defaultProps = {
+    disabledIndexes: [],
+};
+
 class ArrowKeyFocusManager extends Component {
     componentDidMount() {
         const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP;
@@ -30,11 +37,14 @@ class ArrowKeyFocusManager extends Component {
                 return;
             }
 
-            let newFocusedIndex = this.props.focusedIndex - 1;
+            const currentFocusedIndex = this.props.focusedIndex > 0 ? this.props.focusedIndex - 1 : this.props.maxIndex;
+            let newFocusedIndex = currentFocusedIndex;
 
-            // Wrap around to the bottom of the list
-            if (newFocusedIndex < 0) {
-                newFocusedIndex = this.props.maxIndex;
+            while (this.props.disabledIndexes.includes(newFocusedIndex)) {
+                newFocusedIndex = newFocusedIndex > 0 ? newFocusedIndex - 1 : this.props.maxIndex;
+                if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled
+                    return; // no-op
+                }
             }
 
             this.props.onFocusedIndexChanged(newFocusedIndex);
@@ -45,11 +55,14 @@ class ArrowKeyFocusManager extends Component {
                 return;
             }
 
-            let newFocusedIndex = this.props.focusedIndex + 1;
+            const currentFocusedIndex = this.props.focusedIndex < this.props.maxIndex ? this.props.focusedIndex + 1 : 0;
+            let newFocusedIndex = currentFocusedIndex;
 
-            // Wrap around to the top of the list
-            if (newFocusedIndex > this.props.maxIndex) {
-                newFocusedIndex = 0;
+            while (this.props.disabledIndexes.includes(newFocusedIndex)) {
+                newFocusedIndex = newFocusedIndex < this.props.maxIndex ? newFocusedIndex + 1 : 0;
+                if (newFocusedIndex === currentFocusedIndex) { // all indexes are disabled
+                    return; // no-op
+                }
             }
 
             this.props.onFocusedIndexChanged(newFocusedIndex);
@@ -72,5 +85,6 @@ class ArrowKeyFocusManager extends Component {
 }
 
 ArrowKeyFocusManager.propTypes = propTypes;
+ArrowKeyFocusManager.defaultProps = defaultProps;
 
 export default ArrowKeyFocusManager;

src/components/AvatarWithIndicator.js

@@ -12,6 +12,7 @@ import bankAccountPropTypes from './bankAccountPropTypes';
 import cardPropTypes from './cardPropTypes';
 import userWalletPropTypes from '../pages/EnablePayments/userWalletPropTypes';
 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';
 
@@ -39,6 +40,9 @@ const propTypes = {
 
     /** The user's wallet (coming from Onyx) */
     userWallet: userWalletPropTypes,
+
+    /** Information about the user accepting the terms for payments */
+    walletTerms: walletTermsPropTypes,
 };
 
 const defaultProps = {
@@ -49,6 +53,7 @@ const defaultProps = {
     bankAccountList: {},
     cardList: {},
     userWallet: {},
+    walletTerms: {},
 };
 
 const AvatarWithIndicator = (props) => {
@@ -73,6 +78,9 @@ const AvatarWithIndicator = (props) => {
         () => _.some(cleanPolicies, PolicyUtils.hasPolicyError),
         () => _.some(cleanPolicies, PolicyUtils.hasCustomUnitsError),
         () => _.some(cleanPolicyMembers, PolicyUtils.hasPolicyMemberError),
+
+        // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
+        () => !_.isEmpty(props.walletTerms.errors) && !props.walletTerms.chatReportID,
     ];
     const shouldShowIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
 
@@ -112,4 +120,7 @@ export default withOnyx({
     userWallet: {
         key: ONYXKEYS.USER_WALLET,
     },
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
 })(AvatarWithIndicator);

src/components/KYCWall/BaseKYCWall.js

@@ -11,6 +11,7 @@ import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import ONYXKEYS from '../../ONYXKEYS';
 import Log from '../../libs/Log';
 import {propTypes, defaultProps} from './kycWallPropTypes';
+import * as Wallet from '../../libs/actions/Wallet';
 
 // This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
 // before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
@@ -35,6 +36,7 @@ class KYCWall extends React.Component {
         if (this.props.shouldListenForResize) {
             this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition);
         }
+        Wallet.setKYCWallSourceChatReportID(this.props.chatReportID);
     }
 
     componentWillUnmount() {

src/components/KYCWall/kycWallPropTypes.js

@@ -21,14 +21,18 @@ const propTypes = {
     isDisabled: PropTypes.bool,
 
     /** The user's wallet */
-    userWallet: PropTypes.objectOf(userWalletPropTypes),
+    userWallet: userWalletPropTypes,
+
+    /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
+    chatReportID: PropTypes.number,
 };
 
 const defaultProps = {
     userWallet: {},
     popoverPlacement: 'top',
     shouldListenForResize: false,
     isDisabled: false,
+    chatReportID: 0,
 };
 
 export {propTypes, defaultProps};

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -11,7 +11,7 @@ import Text from '../Text';
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
-import withLocalize from '../withLocalize';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import TextInput from '../TextInput';
 import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
@@ -24,6 +24,7 @@ const propTypes = {
     shouldDelayFocus: PropTypes.bool,
 
     ...optionsSelectorPropTypes,
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -144,13 +145,19 @@ class BaseOptionsSelector extends Component {
      */
     flattenSections() {
         const allOptions = [];
+        this.disabledOptionsIndexes = [];
+        let index = 0;
         _.each(this.props.sections, (section, sectionIndex) => {
             _.each(section.data, (option, optionIndex) => {
                 allOptions.push({
                     ...option,
                     sectionIndex,
                     index: optionIndex,
                 });
+                if (section.isDisabled || option.isDisabled) {
+                    this.disabledOptionsIndexes.push(index);
+                }
+                index += 1;
             });
         });
         return allOptions;
@@ -265,8 +272,9 @@ class BaseOptionsSelector extends Component {
         ) : <FullScreenLoadingIndicator />;
         return (
             <ArrowKeyFocusManager
+                disabledIndexes={this.disabledOptionsIndexes}
                 focusedIndex={this.state.focusedIndex}
-                maxIndex={this.props.canSelectMultipleOptions ? this.state.allOptions.length : this.state.allOptions.length - 1}
+                maxIndex={this.state.allOptions.length - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
             >
                 <View style={[styles.flex1]}>

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '../optionPropTypes';
-import {withLocalizePropTypes} from '../withLocalize';
 import styles from '../../styles/styles';
 
 const propTypes = {
@@ -93,8 +92,6 @@ const propTypes = {
 
     /** Whether to show options list */
     shouldShowOptions: PropTypes.bool,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {