Merge branch 'feat/InitialSettingsPageLayout-change' of https://githu…

…b.com/ishpaul777/App into feat/InitialSettingsPageLayout-change

.github/workflows/testBuild.yml

@@ -354,6 +354,6 @@ jobs:
           IOS: ${{ needs.iOS.result }}
           WEB: ${{ needs.web.result }}
           ANDROID_LINK: ${{steps.get_android_path.outputs.android_path}}
-          DESKTOP_LINK: https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/${{ env.PULL_REQUEST_NUMBER }}/NewExpensifyAdHoc.dmg
+          DESKTOP_LINK: https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/${{ env.PULL_REQUEST_NUMBER }}/NewExpensify.dmg
           IOS_LINK: ${{steps.get_ios_path.outputs.ios_path}}
           WEB_LINK: https://${{ env.PULL_REQUEST_NUMBER }}.pr-testing.expensify.com

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001037002
-        versionName "1.3.70-2"
+        versionCode 1001037005
+        versionName "1.3.70-5"
     }
 
     flavorDimensions "default"

config/electronBuilder.config.js

@@ -21,24 +21,6 @@ const macIcon = {
     adhoc: './desktop/icon-adhoc.png',
 };
 
-const appIds = {
-    production: 'com.expensifyreactnative.chat',
-    staging: 'com.expensifyreactnative.dev.chat',
-    adhoc: 'com.expensifyreactnative.adhoc.chat',
-};
-
-const productNames = {
-    production: 'New Expensify',
-    staging: 'New Expensify Dev',
-    adhoc: 'New Expensify AdHoc',
-};
-
-const artifactNames = {
-    production: 'NewExpensify.dmg',
-    staging: 'NewExpensifyDev.dmg',
-    adhoc: 'NewExpensifyAdHoc.dmg',
-};
-
 const isCorrectElectronEnv = ['production', 'staging', 'adhoc'].includes(process.env.ELECTRON_ENV);
 
 if (!isCorrectElectronEnv) {
@@ -50,8 +32,8 @@ if (!isCorrectElectronEnv) {
  * It can be used to create local builds of the same, by omitting the `--publish` flag
  */
 module.exports = {
-    appId: appIds[process.env.ELECTRON_ENV],
-    productName: productNames[process.env.ELECTRON_ENV],
+    appId: 'com.expensifyreactnative.chat',
+    productName: 'New Expensify',
     extraMetadata: {
         version,
     },
@@ -64,8 +46,8 @@ module.exports = {
         type: 'distribution',
     },
     dmg: {
-        title: productNames[process.env.ELECTRON_ENV],
-        artifactName: artifactNames[process.env.ELECTRON_ENV],
+        title: 'New Expensify',
+        artifactName: 'NewExpensify.dmg',
         internetEnabled: true,
     },
     publish: [
@@ -83,7 +65,7 @@ module.exports = {
         output: 'desktop-build',
     },
     protocols: {
-        name: productNames[process.env.ELECTRON_ENV],
+        name: 'New Expensify',
         schemes: ['new-expensify'],
     },
 };

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.70.2</string>
+	<string>1.3.70.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.70.2</string>
+	<string>1.3.70.5</string>
 </dict>
 </plist>

package.json

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

src/CONST.ts

@@ -293,8 +293,8 @@ const CONST = {
             },
             type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
-        NEW_GROUP: {
-            descriptionKey: 'newGroup',
+        NEW_CHAT: {
+            descriptionKey: 'newChat',
             shortcutKey: 'K',
             modifiers: ['CTRL', 'SHIFT'],
             trigger: {
@@ -1342,6 +1342,7 @@ const CONST = {
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
         WELCOME_MESSAGE: 'welcomeMessage',
+        PRIVATE_NOTES: 'privateNotes',
     },
     EDIT_REQUEST_FIELD: {
         AMOUNT: 'amount',
@@ -2624,6 +2625,9 @@ const CONST = {
         DISABLED: 'DISABLED',
     },
     TAB: {
+        NEW_CHAT_TAB_ID: 'NewChatTab',
+        NEW_CHAT: 'chat',
+        NEW_ROOM: 'room',
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',
         SCAN: 'scan',

src/ONYXKEYS.ts

@@ -290,6 +290,7 @@ const ONYXKEYS = {
         SETTINGS_STATUS_SET_FORM: 'settingsStatusSetForm',
         SETTINGS_STATUS_CLEAR_AFTER_FORM: 'settingsStatusClearAfterForm',
         SETTINGS_STATUS_SET_CLEAR_AFTER_FORM: 'settingsStatusSetClearAfterForm',
+        PRIVATE_NOTES_FORM: 'privateNotesForm',
         I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm',
         INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm',
     },

src/ROUTES.ts

@@ -13,7 +13,6 @@ type ParseReportRouteParams = {
 
 const REPORT = 'r';
 const IOU_REQUEST = 'request/new';
-const IOU_BILL = 'split/new';
 const IOU_SEND = 'send/new';
 const NEW_TASK = 'new/task';
 const SETTINGS_PERSONAL_DETAILS = 'settings/profile/personal-details';
@@ -67,8 +66,9 @@ export default {
     SETTINGS_2FA: 'settings/security/two-factor-auth',
     SETTINGS_STATUS,
     SETTINGS_STATUS_SET,
-    NEW_GROUP: 'new/group',
+    NEW: 'new',
     NEW_CHAT: 'new/chat',
+    NEW_ROOM: 'new/room',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID?/:reportActionID?',
@@ -86,7 +86,6 @@ export default {
     CONCIERGE: 'concierge',
 
     IOU_REQUEST,
-    IOU_BILL,
     IOU_SEND,
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
@@ -174,6 +173,14 @@ export default {
     GOOGLE_SIGN_IN: 'sign-in-with-google',
     DESKTOP_SIGN_IN_REDIRECT: 'desktop-signin-redirect',
 
+    // Routes related to private notes added to the report
+    PRIVATE_NOTES_VIEW: 'r/:reportID/notes/:accountID',
+    getPrivateNotesViewRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}`,
+    PRIVATE_NOTES_LIST: 'r/:reportID/notes',
+    getPrivateNotesListRoute: (reportID: string) => `r/${reportID}/notes`,
+    PRIVATE_NOTES_EDIT: 'r/:reportID/notes/:accountID/edit',
+    getPrivateNotesEditRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`,
+
     // This is a special validation URL that will take the user to /workspace/new after validation. This is used
     // when linking users from e.com in order to share a session in this app.
     ENABLE_PAYMENTS: 'enable-payments',

src/components/MenuItem.js

@@ -23,6 +23,7 @@ import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
+import RenderHTML from './RenderHTML';
 
 const propTypes = menuItemPropTypes;
 
@@ -73,6 +74,7 @@ const defaultProps = {
     title: '',
     numberOfLinesTitle: 1,
     shouldGreyOutWhenDisabled: true,
+    shouldRenderAsHTML: false,
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
@@ -220,7 +222,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) && (
+                                            {Boolean(props.title) && Boolean(props.shouldRenderAsHTML) && <RenderHTML html={convertToLTR(props.title)} />}
+
+                                            {Boolean(props.title) && !props.shouldRenderAsHTML && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}

src/components/OptionRow.js

@@ -8,6 +8,7 @@ import * as StyleUtils from '../styles/StyleUtils';
 import optionPropTypes from './optionPropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import Button from './Button';
 import MultipleAvatars from './MultipleAvatars';
 import Hoverable from './Hoverable';
 import DisplayNames from './DisplayNames';
@@ -39,6 +40,15 @@ const propTypes = {
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a tickbox */
+    shouldShowSelectedStateAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    selectedStateButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onSelectedStatePressed: PropTypes.func,
+
     /** Whether we highlight selected option */
     highlightSelected: PropTypes.bool,
 
@@ -71,6 +81,9 @@ const propTypes = {
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     showSelectedState: false,
+    shouldShowSelectedStateAsButton: false,
+    selectedStateButtonText: 'Select',
+    onSelectedStatePressed: () => {},
     highlightSelected: false,
     isSelected: false,
     boldStyle: false,
@@ -100,6 +113,7 @@ class OptionRow extends Component {
             this.props.isMultilineSupported !== nextProps.isMultilineSupported ||
             this.props.isSelected !== nextProps.isSelected ||
             this.props.shouldHaveOptionSeparator !== nextProps.shouldHaveOptionSeparator ||
+            this.props.selectedStateButtonText !== nextProps.selectedStateButtonText ||
             this.props.showSelectedState !== nextProps.showSelectedState ||
             this.props.highlightSelected !== nextProps.highlightSelected ||
             this.props.showTitleTooltip !== nextProps.showTitleTooltip ||
@@ -259,7 +273,26 @@ class OptionRow extends Component {
                                             />
                                         </View>
                                     )}
-                                    {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
+                                    {this.props.showSelectedState && (
+                                        <>
+                                            {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
+                                                <Button
+                                                    style={[styles.pl2]}
+                                                    text={this.props.selectedStateButtonText}
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    small
+                                                />
+                                            ) : (
+                                                <PressableWithFeedback
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                    accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                >
+                                                    <SelectCircle isChecked={this.props.isSelected} />
+                                                </PressableWithFeedback>
+                                            )}
+                                        </>
+                                    )}
                                     {this.props.isSelected && this.props.highlightSelected && (
                                         <View style={styles.defaultCheckmarkWrapper}>
                                             <Icon

src/components/OptionsList/BaseOptionsList.js

@@ -56,6 +56,9 @@ function BaseOptionsList({
     shouldDisableRowInnerPadding,
     disableFocusOptions,
     canSelectMultipleOptions,
+    shouldShowMultipleOptionSelectorAsButton,
+    multipleOptionSelectorButtonText,
+    onAddToSelection,
     highlightSelectedOptions,
     onSelectRow,
     boldStyle,
@@ -191,6 +194,9 @@ function BaseOptionsList({
                 onSelectRow={onSelectRow}
                 isSelected={isSelected}
                 showSelectedState={canSelectMultipleOptions}
+                shouldShowSelectedStateAsButton={shouldShowMultipleOptionSelectorAsButton}
+                selectedStateButtonText={multipleOptionSelectorButtonText}
+                onSelectedStatePressed={onAddToSelection}
                 highlightSelected={highlightSelectedOptions}
                 boldStyle={boldStyle}
                 isDisabled={isItemDisabled}

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, InteractionManager} from 'react-native';
+import {View} from 'react-native';
 import Button from '../Button';
 import FixedFooter from '../FixedFooter';
 import OptionsList from '../OptionsList';
@@ -16,11 +16,9 @@ import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDefaultProps} from './optionsSelectorPropTypes';
 import setSelection from '../../libs/setSelection';
 import compose from '../../libs/compose';
+import getPlatform from '../../libs/getPlatform';
 
 const propTypes = {
-    /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
-    shouldDelayFocus: PropTypes.bool,
-
     /** padding bottom style of safe area */
     safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
@@ -70,6 +68,12 @@ class BaseOptionsSelector extends Component {
     componentDidMount() {
         this.subscribeToKeyboardShortcut();
 
+        if (this.props.isFocused && this.props.autoFocus && this.textInput) {
+            setTimeout(() => {
+                this.textInput.focus();
+            }, CONST.ANIMATED_TRANSITION);
+        }
+
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
@@ -82,12 +86,13 @@ class BaseOptionsSelector extends Component {
             }
         }
 
-        if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) {
-            InteractionManager.runAfterInteractions(() => {
-                // If we automatically focus on a text input when mounting a component,
-                // let's automatically focus on it when the component updates as well (eg, when navigating back from a page)
+        // Screen coming back into focus, for example
+        // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K.
+        // Only applies to platforms that support keyboard shortcuts
+        if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus && this.textInput) {
+            setTimeout(() => {
                 this.textInput.focus();
-            });
+            }, CONST.ANIMATED_TRANSITION);
         }
 
         if (_.isEqual(this.props.sections, prevProps.sections)) {
@@ -359,8 +364,6 @@ class BaseOptionsSelector extends Component {
                 selectTextOnFocus
                 blurOnSubmit={Boolean(this.state.allOptions.length)}
                 spellCheck={false}
-                autoFocus={this.props.autoFocus}
-                shouldDelayFocus={this.props.shouldDelayFocus}
             />
         );
         const optionsList = (
@@ -372,6 +375,9 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
+                onAddToSelection={this.props.onAddToSelection}
                 hideSectionHeaders={this.props.hideSectionHeaders}
                 headerMessage={this.props.headerMessage}
                 boldStyle={this.props.boldStyle}