- {% include hub-card.html href="send-money" %}
+ {% include hub-card.html href="split-bills" %}
{% include hub-card.html href="request-money" %}
{% include hub-card.html href="playbooks" %}
{% include hub-card.html href="other" %}
diff --git a/fastlane/Fastfile b/fastlane/Fastfile
index aba3430d9f72..60d60934c2ba 100644
--- a/fastlane/Fastfile
+++ b/fastlane/Fastfile
@@ -243,26 +243,6 @@ platform :ios do
desc "Move app to App Store Review"
lane :production do
- # Login to Spaceship
- fastlane_require 'spaceship'
- teamID = CredentialsManager::AppfileConfig.try_fetch_value(:team_id)
- Spaceship::ConnectAPI.login(
- use_portal: false,
- tunes_team_id: teamID,
- )
-
- # Find our app
- bundleID = CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier)
- app = Spaceship::ConnectAPI::App.find(bundleID)
- if app.nil?
- UI.important "not found in team #{teamID} on ASC!"
- next
- else
- # If there's an app that's Pending Developer Release, release it before continuing with the new version
- pendingReviewVersion = app.get_pending_release_app_store_version
- version.create_app_store_version_release_request unless version.nil?
- end
-
deliver(
api_key_path: "./ios/ios-fastlane-json-key.json",
diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj
index f34f8959aab0..675569aa7d27 100644
--- a/ios/NewExpensify.xcodeproj/project.pbxproj
+++ b/ios/NewExpensify.xcodeproj/project.pbxproj
@@ -652,7 +652,6 @@
CURRENT_PROJECT_VERSION = 3;
DEVELOPMENT_TEAM = 368M544MTT;
ENABLE_BITCODE = NO;
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
INFOPLIST_FILE = "$(SRCROOT)/NewExpensify/Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 13.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -683,7 +682,6 @@
CODE_SIGN_STYLE = Manual;
CURRENT_PROJECT_VERSION = 3;
DEVELOPMENT_TEAM = 368M544MTT;
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
INFOPLIST_FILE = NewExpensify/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 13.0;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 867e9778ddba..878c6c5bc23f 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
CFBundlePackageType
APPL
CFBundleShortVersionString
-
1.3.36
+
1.3.38
CFBundleSignature
????
CFBundleURLTypes
@@ -32,7 +32,7 @@
CFBundleVersion
-
1.3.36.2
+
1.3.38.4
ITSAppUsesNonExemptEncryption
LSApplicationQueriesSchemes
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index e9f95bc6a1dc..87d8bef7fa79 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
CFBundlePackageType
BNDL
CFBundleShortVersionString
-
1.3.36
+
1.3.38
CFBundleSignature
????
CFBundleVersion
-
1.3.36.2
+
1.3.38.4
diff --git a/ios/Podfile b/ios/Podfile
index 6eb84320a77c..3af9366d3ef5 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -82,10 +82,6 @@ target 'NewExpensify' do
__apply_Xcode_12_5_M1_post_install_workaround(installer)
__apply_Xcode_14_3_RC_post_install_workaround(installer)
- installer.pods_project.build_configurations.each do |config|
- config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
- end
-
installer.pods_project.targets.each do |target|
if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
target.build_configurations.each do |config|
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 41f6eadb9bd3..a5d043331453 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1139,6 +1139,6 @@ SPEC CHECKSUMS:
Yoga: f87bd008d34c18bf990d4371200802f2866ce18c
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
-PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76
+PODFILE CHECKSUM: 69f576e475be6d130ee96103b131f71bfdbf8a6e
COCOAPODS: 1.12.1
diff --git a/package-lock.json b/package-lock.json
index d3a7a9d564c4..a06fc2a2f481 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "new.expensify",
- "version": "1.3.36-2",
+ "version": "1.3.38-4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "new.expensify",
- "version": "1.3.36-2",
+ "version": "1.3.38-4",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -40,7 +40,7 @@
"babel-polyfill": "^6.26.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
- "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#f9985d572c772757885ff59ea5c82b1050c6b3f7",
+ "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
"fbjs": "^3.0.2",
"htmlparser2": "^7.2.0",
"jest-when": "^3.5.2",
@@ -24362,8 +24362,8 @@
},
"node_modules/expensify-common": {
"version": "1.0.0",
- "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#f9985d572c772757885ff59ea5c82b1050c6b3f7",
- "integrity": "sha512-J9hj5LErLxQ2NxiMH/lIIumzk9y6rto5il5FK+kAsJ4pV7VZw1aMcHyiU7yrVRSWdZyCOjIXqGy/cVFb+pCm8g==",
+ "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
+ "integrity": "sha512-eQIhPJ/6KJX9n2C8HaMsOcAHBClshshDbGyUD0ii7NsjotVNiTeUXtCdOrPlpFDOknCGrF0DrF2D3EPSkbs9jg==",
"license": "MIT",
"dependencies": {
"classnames": "2.3.1",
@@ -60140,9 +60140,9 @@
}
},
"expensify-common": {
- "version": "git+ssh://git@github.com/Expensify/expensify-common.git#f9985d572c772757885ff59ea5c82b1050c6b3f7",
- "integrity": "sha512-J9hj5LErLxQ2NxiMH/lIIumzk9y6rto5il5FK+kAsJ4pV7VZw1aMcHyiU7yrVRSWdZyCOjIXqGy/cVFb+pCm8g==",
- "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#f9985d572c772757885ff59ea5c82b1050c6b3f7",
+ "version": "git+ssh://git@github.com/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
+ "integrity": "sha512-eQIhPJ/6KJX9n2C8HaMsOcAHBClshshDbGyUD0ii7NsjotVNiTeUXtCdOrPlpFDOknCGrF0DrF2D3EPSkbs9jg==",
+ "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
"requires": {
"classnames": "2.3.1",
"clipboard": "2.0.4",
diff --git a/package.json b/package.json
index ab813d584899..12fc0886c362 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "new.expensify",
- "version": "1.3.36-2",
+ "version": "1.3.38-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.",
@@ -77,7 +77,7 @@
"babel-polyfill": "^6.26.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
- "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#f9985d572c772757885ff59ea5c82b1050c6b3f7",
+ "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#d636fef3f22b4e5fcf61333ddc89a5d2e08cacc9",
"fbjs": "^3.0.2",
"htmlparser2": "^7.2.0",
"jest-when": "^3.5.2",
diff --git a/src/CONST.js b/src/CONST.js
index b5e3d30516bd..76910d5d8737 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -269,6 +269,7 @@ const CONST = {
PASSWORDLESS: 'passwordless',
TASKS: 'tasks',
THREADS: 'threads',
+ SCAN_RECEIPTS: 'scanReceipts',
},
BUTTON_STATES: {
DEFAULT: 'default',
@@ -652,6 +653,7 @@ const CONST = {
},
},
TIMING: {
+ CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
SEARCH_RENDER: 'search_render',
HOMEPAGE_INITIAL_RENDER: 'homepage_initial_render',
REPORT_INITIAL_RENDER: 'report_initial_render',
@@ -724,9 +726,6 @@ const CONST = {
MAX_RETRY_WAIT_TIME_MS: 10 * 1000,
PROCESS_REQUEST_DELAY_MS: 1000,
MAX_PENDING_TIME_MS: 10 * 1000,
- COMMAND: {
- RECONNECT_APP: 'ReconnectApp',
- },
},
DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
DEFAULT_ACCOUNT_DATA: {errors: null, success: '', isLoading: false},
@@ -1110,6 +1109,11 @@ const CONST = {
LARGE_BORDERED: 'large-bordered',
HEADER: 'header',
MENTION_ICON: 'mention-icon',
+ SMALL_NORMAL: 'small-normal',
+ },
+ AVATAR_ROW_SIZE: {
+ DEFAULT: 4,
+ LARGE_SCREEN: 8,
},
OPTION_MODE: {
COMPACT: 'compact',
@@ -1122,7 +1126,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}$/,
@@ -2512,6 +2516,11 @@ const CONST = {
MENUITEM: 'menuitem',
TEXT: 'text',
RADIO: 'radio',
+ IMAGEBUTTON: 'imagebutton',
+ CHECKBOX: 'checkbox',
+ SWITCH: 'switch',
+ ADJUSTABLE: 'adjustable',
+ IMAGE: 'image',
},
SETTINGS_LOUNGE_ACCESS: {
HEADER_IMAGE_ASPECT_RATIO: 0.64,
diff --git a/src/Expensify.js b/src/Expensify.js
index e7c830ff2029..c85c2862e96e 100644
--- a/src/Expensify.js
+++ b/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) {
+
{/* We include the modal for showing a new update at the top level so the option is always present. */}
{props.updateAvailable ?
: null}
{props.screenShareRequest ? (
diff --git a/src/ROUTES.js b/src/ROUTES.js
index a95a68964998..bf06b74a2bcd 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -120,8 +120,6 @@ export default {
getProfileRoute: (accountID) => `a/${accountID}`,
REPORT_PARTICIPANTS: 'r/:reportID/participants',
getReportParticipantsRoute: (reportID) => `r/${reportID}/participants`,
- REPORT_PARTICIPANT: 'r/:reportID/participants/a/:accountID',
- getReportParticipantRoute: (reportID, accountID) => `r/${reportID}/participants/a/${accountID}`,
REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
getReportDetailsRoute: (reportID) => `r/${reportID}/details`,
REPORT_SETTINGS: 'r/:reportID/settings',
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
index f20f798768c2..8507713c887e 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -58,7 +58,7 @@ function BaseAnchorForAttachmentsOnly(props) {
onPressOut={props.onPressOut}
onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
accessibilityLabel={fileName}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
(linkRef = el)}
style={StyleSheet.flatten([props.style, defaultTextStyle])}
- accessibilityRole="link"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
hrefAttrs={{
rel: props.rel,
target: isEmail ? '_self' : props.target,
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js
index 08a4a04e64dd..ccd51391a50f 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.js
@@ -1,10 +1,9 @@
import React from 'react';
import {View, Text} from 'react-native';
+import PropTypes from 'prop-types';
import Button from './Button';
import AvatarWithDisplayName from './AvatarWithDisplayName';
import ExpensifyWordmark from './ExpensifyWordmark';
-import compose from '../libs/compose';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import reportPropTypes from '../pages/reportPropTypes';
import CONST from '../CONST';
@@ -15,17 +14,19 @@ const propTypes = {
/** The report currently being looked at */
report: reportPropTypes,
- ...windowDimensionsPropTypes,
+ isSmallSizeLayout: PropTypes.bool,
+
...withLocalizePropTypes,
};
const defaultProps = {
report: {},
+ isSmallSizeLayout: false,
};
function AnonymousReportFooter(props) {
return (
-
+
-
-
-
+
+
+
- {props.translate('anonymousReportFooter.logoTagline')}
+ {props.translate('anonymousReportFooter.logoTagline')}
-
+
);
}
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem.js b/src/components/EmojiPicker/EmojiPickerMenuItem.js
index 597046904991..bf837c226303 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem.js
@@ -5,6 +5,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
import getButtonState from '../../libs/getButtonState';
import Text from '../Text';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import CONST from '../../CONST';
const propTypes = {
/** The unicode that is used to display the emoji */
@@ -75,7 +76,7 @@ class EmojiPickerMenuItem extends PureComponent {
styles.emojiItem,
]}
accessibilityLabel={this.props.emoji}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{this.props.emoji}
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index c8678a295249..a239f197cdd0 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -9,6 +9,7 @@ import Text from '../Text';
import EmojiPickerMenuItem from './EmojiPickerMenuItem';
import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import CONST from '../../CONST';
const propTypes = {
/** Stores user's preferred skin tone */
@@ -47,7 +48,7 @@ function EmojiSkinToneList(props) {
onPress={toggleIsSkinToneListVisible}
style={[styles.flex1, styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{currentSkinTone.code}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index ea6cd211243e..103e653d7d88 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -61,7 +61,7 @@ function ImageRenderer(props) {
Navigation.navigate(route);
}}
onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
- accessibilityRole="imagebutton"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
>
{
onPressIn={props.onPressIn}
onPressOut={props.onPressOut}
onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
- accessibilityRole="text"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
accessibilityLabel={props.translate('accessibilityHints.prestyledText')}
>
diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js
index bb707b8f8873..267634c1cbbb 100755
--- a/src/components/HeaderWithBackButton.js
+++ b/src/components/HeaderWithBackButton.js
@@ -179,7 +179,7 @@ class HeaderWithBackButton extends Component {
this.props.onBackButtonPress();
}}
style={[styles.touchableButtonImage]}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('common.back')}
>
@@ -210,7 +210,7 @@ class HeaderWithBackButton extends Component {
this.triggerButtonCompleteAndDownload();
}}
style={[styles.touchableButtonImage]}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('common.download')}
>
Navigation.navigate(ROUTES.getGetAssistanceRoute(this.props.guidesCallTaskID))}
style={[styles.touchableButtonImage]}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('getAssistancePage.questionMarkButtonTooltip')}
>
@@ -250,7 +250,7 @@ class HeaderWithBackButton extends Component {
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 2bffa7787088..538ca792b233 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -8,6 +8,7 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import CONST from '../../CONST';
const propTypes = {
/** Whether source url requires authentication */
@@ -288,7 +289,7 @@ class ImageView extends PureComponent {
}}
onPressIn={this.onContainerPressIn}
onPress={this.onContainerPress}
- accessibilityRole="image"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGE}
accessibilityLabel={this.props.fileName}
>
) : (
- {optionItem.isChatRoom && !optionItem.isThread && (
-
- )}
{optionItem.alternateText ? (
inputRefs.current[0].focus(), CONST.ANIMATED_TRANSITION);
+ } else {
+ inputRefs.current[0].focus();
}
- inputRefs.current[0].focus();
-
return () => {
if (!focusTimeout) {
return;
}
clearTimeout(focusTimeout);
};
- }, [props.autoFocus, props.shouldDelayFocus]);
+ // We only want this to run on mount
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
/**
* Focuses on the input when it is pressed.
@@ -322,7 +324,7 @@ function MagicCodeInput(props) {
(inputRefs.current[index] = ref)}
- autoFocus={index === 0 && props.autoFocus}
+ autoFocus={index === 0 && props.autoFocus && !props.shouldDelayFocus}
inputMode="numeric"
textContentType="oneTimeCode"
name={props.name}
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index a59dd6d7b971..ff26c0f6e7e4 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -63,10 +63,15 @@ const defaultProps = {
floatRightAvatars: [],
shouldStackHorizontally: false,
avatarSize: undefined,
+ floatRightAvatarSize: undefined,
shouldBlockSelection: false,
hoverAndPressStyle: [],
furtherDetails: '',
furtherDetailsIcon: undefined,
+ isSmallAvatarSubscriptMenu: false,
+ title: '',
+ numberOfLinesTitle: 1,
+ shouldGreyOutWhenDisabled: true,
};
function MenuItem(props) {
@@ -76,11 +81,11 @@ function MenuItem(props) {
[
styles.flexShrink1,
styles.popoverMenuText,
- props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
+ props.icon && !_.isArray(props.icon) && (props.avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
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,
],
@@ -119,7 +124,7 @@ function MenuItem(props) {
StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive), true),
(hovered || pressed) && props.hoverAndPressStyle,
...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
- props.disabled && styles.buttonOpacityDisabled,
+ props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
]}
disabled={props.disabled}
ref={props.forwardedRef}
@@ -149,7 +154,7 @@ function MenuItem(props) {
/>
)}
{Boolean(props.icon) && !_.isArray(props.icon) && (
-
+
{props.iconType === CONST.ICON_TYPE_ICON && (
)}
)}
-
+
{Boolean(props.description) && props.shouldShowDescriptionOnTop && (
{convertToLTR(props.title)}
@@ -253,7 +259,7 @@ function MenuItem(props) {
isHovered={hovered}
isPressed={pressed}
icons={props.floatRightAvatars}
- size={props.avatarSize || fallbackAvatarSize}
+ size={props.floatRightAvatarSize || fallbackAvatarSize}
fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
shouldStackHorizontally={props.shouldStackHorizontally}
/>
diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js
index 6e304f0420c2..065b3a9f210f 100644
--- a/src/components/Modal/index.web.js
+++ b/src/components/Modal/index.web.js
@@ -1,5 +1,4 @@
import React, {useState} from 'react';
-import {InteractionManager} from 'react-native';
import withWindowDimensions from '../withWindowDimensions';
import BaseModal from './BaseModal';
import {propTypes, defaultProps} from './modalPropTypes';
@@ -16,7 +15,7 @@ function Modal(props) {
return;
}
- InteractionManager.runAfterInteractions(() => StatusBar.setBackgroundColor(color));
+ StatusBar.setBackgroundColor(color);
};
const hideModal = () => {
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 7b4f31e57d25..895dfe756489 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -46,7 +46,7 @@ const propTypes = {
/** IOU type */
iouType: PropTypes.string,
- /** Selected participants from MoneyRequestModal with login */
+ /** Selected participants from MoneyRequestModal with login / accountID */
participants: PropTypes.arrayOf(optionPropTypes).isRequired,
/** Payee of the money request with login */
@@ -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(() => {
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 3ecc854951e0..23e61490d9a5 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -96,7 +96,7 @@ function MoneyRequestHeader(props) {
report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], '');
}
return (
-
+
Navigation.goBack(ROUTES.HOME)}
+ onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)}
/>
{props.translate('common.to')}
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index c62fc387b815..f0dddfafc583 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -1,8 +1,7 @@
-import React, {memo} from 'react';
+import React, {memo, useEffect, useState} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import _ from 'underscore';
-import lodashGet from 'lodash/get';
import styles from '../styles/styles';
import Avatar from './Avatar';
import Tooltip from './Tooltip';
@@ -13,7 +12,6 @@ import CONST from '../CONST';
import variables from '../styles/variables';
import avatarPropTypes from './avatarPropTypes';
import UserDetailsTooltip from './UserDetailsTooltip';
-import * as ReportUtils from '../libs/ReportUtils';
const propTypes = {
/** Array of avatar URLs or icons */
@@ -32,6 +30,9 @@ const propTypes = {
/** Prop to identify if we should load avatars vertically instead of diagonally */
shouldStackHorizontally: PropTypes.bool,
+ /** Prop to identify if we should display avatars in rows */
+ shouldDisplayAvatarsInRows: PropTypes.bool,
+
/** Whether the avatars are hovered */
isHovered: PropTypes.bool,
@@ -49,6 +50,9 @@ const propTypes = {
/** Whether avatars are displayed with the highlighted background color instead of the app background color. This is primarily the case for IOU previews. */
shouldUseCardBackground: PropTypes.bool,
+
+ /** Prop to limit the amount of avatars displayed horizontally */
+ maxAvatarsInRow: PropTypes.number,
};
const defaultProps = {
@@ -57,20 +61,48 @@ const defaultProps = {
secondAvatarStyle: [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
fallbackIcon: undefined,
shouldStackHorizontally: false,
+ shouldDisplayAvatarsInRows: false,
isHovered: false,
isPressed: false,
isFocusMode: false,
isInReportAction: false,
shouldShowTooltip: true,
shouldUseCardBackground: false,
+ maxAvatarsInRow: CONST.AVATAR_ROW_SIZE.DEFAULT,
};
function MultipleAvatars(props) {
+ const [avatarRows, setAvatarRows] = useState([props.icons]);
let avatarContainerStyles = props.size === CONST.AVATAR_SIZE.SMALL ? [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall] : [styles.emptyAvatar, styles.emptyAvatarMargin];
- const singleAvatarStyles = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
+ const singleAvatarStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.singleAvatarSmall : styles.singleAvatar;
const secondAvatarStyles = [props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSmall : styles.secondAvatar, ...props.secondAvatarStyle];
const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : [''];
+ const calculateAvatarRows = () => {
+ // If we're not displaying avatars in rows or the number of icons is less than or equal to the max avatars in a row, return a single row
+ if (!props.shouldDisplayAvatarsInRows || props.icons.length <= props.maxAvatarsInRow) {
+ setAvatarRows([props.icons]);
+ return;
+ }
+
+ // Calculate the size of each row
+ const rowSize = Math.min(Math.ceil(props.icons.length / 2), props.maxAvatarsInRow);
+
+ // Slice the icons array into two rows
+ const firstRow = props.icons.slice(rowSize);
+ const secondRow = props.icons.slice(0, rowSize);
+
+ // Update the state with the two rows as an array
+ setAvatarRows([firstRow, secondRow]);
+ };
+
+ useEffect(() => {
+ calculateAvatarRows();
+
+ // The only dependencies of the effect are based on props, so we can safely disable the exhaustive-deps rule
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.icons, props.maxAvatarsInRow, props.shouldDisplayAvatarsInRows]);
+
if (!props.icons.length) {
return null;
}
@@ -79,11 +111,7 @@ function MultipleAvatars(props) {
return (
+ <>
{props.shouldStackHorizontally ? (
- <>
- {_.map([...props.icons].splice(0, 4), (icon, index) => (
-
-
-
-
-
- ))}
- {props.icons.length > 4 && (
-
- (
+
+ {_.map([...avatars].splice(0, props.maxAvatarsInRow), (icon, index) => (
+
- {`+${props.icons.length - 4}`}
-
-
-
- )}
-
- ) : (
-
-
- {/* View is necessary for tooltip to show for multiple avatars in LHN */}
-
-
-
-
-
- {props.icons.length === 2 ? (
-
-
- ) : (
-
-
- props.maxAvatarsInRow && (
+
+
+
- {`+${props.icons.length - 1}`}
-
+ {`+${avatars.length - props.maxAvatarsInRow}`}
+
)}
+ ))
+ ) : (
+
+
+
+ {/* View is necessary for tooltip to show for multiple avatars in LHN */}
+
+
+
+
+
+ {props.icons.length === 2 ? (
+
+
+
+
+
+ ) : (
+
+
+
+ {`+${props.icons.length - 1}`}
+
+
+
+ )}
+
+
)}
-
+
);
}
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 5cb5fc57dc24..820cce252205 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -126,7 +126,7 @@ function OfflineWithFeedback(props) {
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 14b16949de70..01baa55cdd19 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -100,7 +100,7 @@ class OptionRow extends Component {
this.props.option.descriptiveText !== nextProps.option.descriptiveText ||
this.props.option.brickRoadIndicator !== nextProps.option.brickRoadIndicator ||
this.props.option.shouldShowSubscript !== nextProps.option.shouldShowSubscript ||
- this.props.option.ownerEmail !== nextProps.option.ownerEmail ||
+ this.props.option.ownerAccountID !== nextProps.option.ownerAccountID ||
this.props.option.subtitle !== nextProps.option.subtitle ||
this.props.option.pendingAction !== nextProps.option.pendingAction ||
this.props.option.customIcon !== nextProps.option.customIcon
@@ -132,6 +132,7 @@ class OptionRow extends Component {
const hoveredBackgroundColor = this.props.hoverStyle && this.props.hoverStyle.backgroundColor ? this.props.hoverStyle.backgroundColor : this.props.backgroundColor;
const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
const isMultipleParticipant = lodashGet(this.props.option, 'participantsList.length', 0) > 1;
+ const defaultSubscriptSize = this.props.option.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
// We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
@@ -182,7 +183,7 @@ class OptionRow extends Component {
!this.props.onSelectRow && !this.props.isDisabled ? styles.cursorDefault : null,
]}
accessibilityLabel={this.props.option.text}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
hoverDimmingValue={1}
hoverStyle={this.props.hoverStyle}
>
@@ -193,9 +194,8 @@ class OptionRow extends Component {
) : (
{
return (
e.preventDefault()}
accessibilityLabel={props.translate('emojiReactions.addReactionTooltip')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
// disable dimming
pressDimmingValue={1}
>
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index c76443a82d38..30520cb633ef 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -58,8 +58,15 @@ function EmojiReactionBubble(props) {
onSecondaryInteraction={props.onReactionListOpen}
ref={props.forwardedRef}
enableLongPressWithHover={props.isSmallScreenWidth}
- // Prevent text input blur when emoji reaction is clicked
- onMouseDown={(e) => e.preventDefault()}
+ onMouseDown={(e) => {
+ // Allow text input blur when emoji reaction is right clicked
+ if (e && e.button === 2) {
+ return;
+ }
+
+ // Prevent text input blur when emoji reaction is left clicked
+ e.preventDefault();
+ }}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={props.emojiCodes.join('')}
>
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 5c77726d8070..9973c5fae083 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -76,7 +76,7 @@ function MiniQuickEmojiReactions(props) {
props.onEmojiSelected(emoji))}
>
{EmojiUtils.getPreferredEmojiCode(emoji, props.preferredSkinTone)}
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index e237083232d4..7040f579863e 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -34,12 +34,15 @@ const baseQuickEmojiReactionsPropTypes = {
* ReportAction for EmojiPicker.
*/
reportAction: PropTypes.object,
+
+ preferredLocale: PropTypes.string,
};
const baseQuickEmojiReactionsDefaultProps = {
onWillShowPicker: () => {},
onPressOpenPicker: () => {},
reportAction: {},
+ preferredLocale: CONST.LOCALES.DEFAULT,
};
const propTypes = {
@@ -57,7 +60,7 @@ function BaseQuickEmojiReactions(props) {
{_.map(CONST.QUICK_REACTIONS, (emoji) => (
@@ -87,6 +90,9 @@ export default withOnyx({
preferredSkinTone: {
key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
},
+ preferredLocale: {
+ key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+ },
})(BaseQuickEmojiReactions);
export {baseQuickEmojiReactionsPropTypes};
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
index d5da41c9f648..823fa065b0c6 100644
--- a/src/components/Reactions/ReportActionItemReactions.js
+++ b/src/components/Reactions/ReportActionItemReactions.js
@@ -4,9 +4,10 @@ import {View} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
import EmojiReactionBubble from './EmojiReactionBubble';
-import emojis from '../../../assets/emojis';
import AddReactionBubble from './AddReactionBubble';
import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import withLocalize from '../withLocalize';
+import compose from '../../libs/compose';
import * as Report from '../../libs/actions/Report';
import Tooltip from '../Tooltip';
import ReactionTooltipContent from './ReactionTooltipContent';
@@ -59,7 +60,7 @@ function ReportActionItemReactions(props) {
{_.map(reactionsWithCount, (reaction) => {
const reactionCount = reaction.users.length;
const reactionUsers = _.map(reaction.users, (sender) => sender.accountID);
- const emoji = _.find(emojis, (e) => e.name === reaction.emoji);
+ const emoji = EmojiUtils.findEmojiByName(reaction.emoji);
const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, reaction.users);
const hasUserReacted = Report.hasAccountIDReacted(props.currentUserPersonalDetails.accountID, reactionUsers);
@@ -75,7 +76,7 @@ function ReportActionItemReactions(props) {
(
- {getPreviewHeaderText()}
+ {getPreviewHeaderText()}
{Boolean(getSettledMessage()) && (
<>
{!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
- {props.translate('iou.pendingConversionMessage')}
+ {props.translate('iou.pendingConversionMessage')}
)}
- {!_.isEmpty(requestComment) && {requestComment}}
+ {!_.isEmpty(requestComment) && {requestComment}}
{props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 8bef184bab08..513e3a84cda9 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -44,9 +44,6 @@ const propTypes = {
/* Onyx Props */
/** chatReport associated with iouReport */
chatReport: PropTypes.shape({
- /** The participants of this report */
- participants: PropTypes.arrayOf(PropTypes.string),
-
/** Whether the chat report has an outstanding IOU */
hasOutstandingIOU: PropTypes.bool.isRequired,
}),
@@ -78,9 +75,7 @@ const propTypes = {
const defaultProps = {
contextMenuAnchor: undefined,
checkIfContextMenuActive: () => {},
- chatReport: {
- participants: [],
- },
+ chatReport: {},
iouReport: {},
reportActions: {},
isHovered: false,
@@ -144,20 +139,18 @@ function MoneyRequestAction(props) {
}
return (
- <>
-
-
+
);
}
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 8321fcde825a..41ee8098f755 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -14,15 +14,15 @@ import ONYXKEYS from '../../ONYXKEYS';
import ControlSelection from '../../libs/ControlSelection';
import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
import {showContextMenuForReport} from '../ShowContextMenuContext';
-import * as StyleUtils from '../../styles/StyleUtils';
+import * as CurrencyUtils from '../../libs/CurrencyUtils';
import * as ReportUtils from '../../libs/ReportUtils';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import SettlementButton from '../SettlementButton';
-import getButtonState from '../../libs/getButtonState';
import * as IOU from '../../libs/actions/IOU';
import refPropTypes from '../refPropTypes';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import themeColors from '../../styles/themes/default';
const propTypes = {
/** All the data of the action */
@@ -38,9 +38,6 @@ const propTypes = {
/* Onyx Props */
/** chatReport associated with iouReport */
chatReport: PropTypes.shape({
- /** The participants of this report */
- participants: PropTypes.arrayOf(PropTypes.string),
-
/** Whether the chat report has an outstanding IOU */
hasOutstandingIOU: PropTypes.bool.isRequired,
}),
@@ -50,8 +47,8 @@ const propTypes = {
/** Email address of the manager in this iou report */
managerEmail: PropTypes.string,
- /** Email address of the creator of this iou report */
- ownerEmail: PropTypes.string,
+ /** AccountID of the creator of this iou report */
+ ownerAccountID: PropTypes.number,
/** Outstanding amount in cents of this transaction */
total: PropTypes.number,
@@ -75,15 +72,11 @@ const propTypes = {
/** Callback for updating context menu active state, used for showing context menu */
checkIfContextMenuActive: PropTypes.func,
- /** Whether the IOU is hovered so we can modify its style */
- isHovered: PropTypes.bool,
-
...withLocalizePropTypes,
};
const defaultProps = {
contextMenuAnchor: null,
- isHovered: false,
chatReport: {},
iouReport: {},
checkIfContextMenuActive: () => {},
@@ -93,12 +86,15 @@ const defaultProps = {
};
function ReportPreview(props) {
+ const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
const managerEmail = props.iouReport.managerEmail || '';
+ const managerAccountID = props.iouReport.managerID || 0;
+ const managerName =
+ (ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerAccountID, true)) || managerEmail;
const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
- const displayingMessage = ReportUtils.getReportPreviewMessage(props.iouReport, props.action);
return (
-
+
{
Navigation.navigate(ROUTES.getReportRoute(props.iouReportID));
@@ -110,26 +106,41 @@ function ReportPreview(props) {
accessibilityRole="button"
accessibilityLabel={props.translate('iou.viewDetails')}
>
-
- {displayingMessage}
+
+
+
+
+ {props.translate(ReportUtils.isSettled(props.iouReportID) ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName})}
+
+
+
+
+
+ {reportAmount}
+ {ReportUtils.isSettled(props.iouReportID) && (
+
+
+
+ )}
+
+
+ {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
+ IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
+ enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
+ addBankAccountRoute={bankAccountRoute}
+ style={[styles.requestPreviewBox]}
+ />
+ )}
-
- {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
- IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
- enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
- addBankAccountRoute={bankAccountRoute}
- style={[styles.requestPreviewBox]}
- />
- )}
);
}
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index bdf8f374dde3..68d9afe4bb53 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -25,8 +25,8 @@ const propTypes = {
/** Email address of the manager in this iou report */
managerEmail: PropTypes.string,
- /** Email address of the creator of this iou report */
- ownerEmail: PropTypes.string,
+ /** AccountID of the creator of this iou report */
+ ownerAccountID: PropTypes.number,
}),
...withLocalizePropTypes,
@@ -50,14 +50,16 @@ function TaskAction(props) {
messageLinkText = props.translate('task.messages.reopened');
break;
default:
- messageLinkText = props.translate('newTaskPage.task');
+ messageLinkText = props.translate('task.task');
}
return (
<>
- {messageLinkText}
- {` ${taskReportName}`}
+
+ {messageLinkText}
+ {` ${taskReportName}`}
+
);
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 4f29f6d39984..5288a57fa226 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -2,6 +2,8 @@ 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';
import ONYXKEYS from '../../ONYXKEYS';
@@ -15,11 +17,16 @@ import getButtonState from '../../libs/getButtonState';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
+import * as ReportUtils from '../../libs/ReportUtils';
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,
@@ -38,14 +45,15 @@ const propTypes = {
/** Email address of the manager in this iou report */
managerEmail: PropTypes.string,
- /** Email address of the creator of this iou report */
- ownerEmail: PropTypes.string,
+ /** AccountID of the creator of this iou report */
+ ownerAccountID: PropTypes.number,
}),
...withLocalizePropTypes,
};
const defaultProps = {
+ personalDetailsList: {},
taskReport: {},
isHovered: false,
};
@@ -54,42 +62,45 @@ function TaskPreview(props) {
// The reportAction might not contain details regarding the taskReport
// Only the direct parent reportAction will contain details about the taskReport
// Other linked reportActions will only contain the taskReportID and we will grab the details from there
- const isTaskCompleted = props.taskReport
+ const isTaskCompleted = !_.isEmpty(props.taskReport)
? 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 = Task.getTaskAssigneeAccountID(props.taskReport);
+ const taskAssignee = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'login'], lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], ''));
const htmlForTaskPreview = taskAssignee ? `@${taskAssignee} ${taskTitle}` : `${taskTitle}`;
return (
- Navigation.navigate(ROUTES.getReportRoute(props.taskReportID))}
- style={[styles.flexRow, styles.justifyContentBetween, styles.chatItemMessage]}
- accessibilityRole="button"
- accessibilityLabel={props.translate('newTaskPage.task')}
- >
-
- {
- if (isTaskCompleted) {
- TaskUtils.reopenTask(props.taskReportID, taskTitle);
- } else {
- TaskUtils.completeTask(props.taskReportID, taskTitle);
- }
- }}
- accessibilityLabel={props.translate('newTaskPage.task')}
+
+ Navigation.navigate(ROUTES.getReportRoute(props.taskReportID))}
+ style={[styles.flexRow, styles.justifyContentBetween]}
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+ accessibilityLabel={props.translate('task.task')}
+ >
+
+ {
+ if (isTaskCompleted) {
+ Task.reopenTask(props.taskReportID, taskTitle);
+ } else {
+ Task.completeTask(props.taskReportID, taskTitle);
+ }
+ }}
+ accessibilityLabel={props.translate('task.task')}
+ />
+
+
+
-
-
-
-
+
+
);
}
@@ -103,5 +114,8 @@ export default compose(
taskReport: {
key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`,
},
+ personalDetailsList: {
+ key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+ },
}),
)(TaskPreview);
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
new file mode 100644
index 000000000000..6e6afe1591e7
--- /dev/null
+++ b/src/components/ReportActionItem/TaskView.js
@@ -0,0 +1,148 @@
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import reportPropTypes from '../../pages/reportPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions from '../withWindowDimensions';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import compose from '../../libs/compose';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import MenuItem from '../MenuItem';
+import styles from '../../styles/styles';
+import * as ReportUtils from '../../libs/ReportUtils';
+import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
+import * as UserUtils from '../../libs/UserUtils';
+import * as StyleUtils from '../../styles/StyleUtils';
+import * as Task from '../../libs/actions/Task';
+import CONST from '../../CONST';
+import Checkbox from '../Checkbox';
+import convertToLTR from '../../libs/convertToLTR';
+import Text from '../Text';
+import Icon from '../Icon';
+import getButtonState from '../../libs/getButtonState';
+import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
+import * as Session from '../../libs/actions/Session';
+import * as Expensicons from '../Icon/Expensicons';
+
+const propTypes = {
+ /** The report currently being looked at */
+ report: reportPropTypes.isRequired,
+
+ /** Whether we should display the horizontal rule below the component */
+ shouldShowHorizontalRule: PropTypes.bool.isRequired,
+
+ ...withLocalizePropTypes,
+
+ ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+function TaskView(props) {
+ useEffect(() => {
+ Task.setTaskReport({...props.report, isExistingTaskReport: true});
+ }, [props.report]);
+
+ const taskTitle = convertToLTR(props.report.reportName || '');
+ const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
+ const isOpen = ReportUtils.isOpenTaskReport(props.report);
+ const isCanceled = ReportUtils.isCanceledTaskReport(props.report);
+
+ return (
+
+ {
+ if (e && e.type === 'click') {
+ e.currentTarget.blur();
+ }
+
+ Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID));
+ })}
+ style={({hovered, pressed}) => [styles.ph5, styles.pv2, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, !isOpen), true)]}
+ ref={props.forwardedRef}
+ disabled={!isOpen}
+ accessibilityLabel={taskTitle || props.translate('task.task')}
+ >
+ {({hovered, pressed}) => (
+ <>
+ Title
+
+ (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+ isChecked={isCompleted}
+ style={styles.taskMenuItemCheckbox}
+ containerSize={24}
+ containerBorderRadius={8}
+ caretSize={16}
+ accessibilityLabel={taskTitle || props.translate('task.task')}
+ disabled={isCanceled}
+ />
+
+
+ {taskTitle}
+
+
+ {isOpen && (
+
+
+
+ )}
+
+
+ )}
+
+ Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
+ shouldShowRightIcon={isOpen}
+ disabled={!isOpen}
+ wrapperStyle={[styles.pv2]}
+ numberOfLinesTitle={3}
+ shouldGreyOutWhenDisabled={false}
+ />
+ {props.report.managerID ? (
+
+ );
+}
+
+TaskView.propTypes = propTypes;
+TaskView.displayName = 'TaskView';
+
+export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index a5d0b285ee32..5f2d5379419d 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import CONST from '../CONST';
const propTypes = {
...windowDimensionsPropTypes,
@@ -31,7 +32,7 @@ function ReportHeaderSkeletonView(props) {
{}}
style={[styles.LHNToggle]}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={props.translate('common.back')}
>
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 7c1b0252bee4..84ee3d73c874 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -72,8 +72,9 @@ function ReportWelcomeText(props) {
<>
{props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')}
- {/* Use the policyExpenseChat owner's first name or their email if it's undefined or an empty string */}
- {lodashGet(props.personalDetails, [props.report.ownerAccountID, 'firstName']) || props.report.ownerEmail}
+ {/* Use the policyExpenseChat owner's first name or their display name if it's undefined or an empty string */}
+ {lodashGet(props.personalDetails, [props.report.ownerAccountID, 'firstName']) ||
+ lodashGet(props.personalDetails, [props.report.ownerAccountID, 'displayName'], '')}
{props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}
{ReportUtils.getPolicyName(props.report)}
diff --git a/src/components/SelectionListRadio/BaseSelectionListRadio.js b/src/components/SelectionListRadio/BaseSelectionListRadio.js
new file mode 100644
index 000000000000..2b8f373b987a
--- /dev/null
+++ b/src/components/SelectionListRadio/BaseSelectionListRadio.js
@@ -0,0 +1,268 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import SectionList from '../SectionList';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import TextInput from '../TextInput';
+import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
+import CONST from '../../CONST';
+import variables from '../../styles/variables';
+import {propTypes as selectionListRadioPropTypes, defaultProps as selectionListRadioDefaultProps} from './selectionListRadioPropTypes';
+import RadioListItem from './RadioListItem';
+import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
+import SafeAreaConsumer from '../SafeAreaConsumer';
+import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState';
+
+const propTypes = {
+ ...keyboardStatePropTypes,
+ ...selectionListRadioPropTypes,
+};
+
+function BaseSelectionListRadio(props) {
+ const listRef = useRef(null);
+ const textInputRef = useRef(null);
+ const focusTimeoutRef = useRef(null);
+ const shouldShowTextInput = Boolean(props.textInputLabel);
+
+ /**
+ * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
+ * - `allOptions`: Contains all the items in the list, flattened, regardless of section
+ * - `disabledOptionsIndexes`: Contains the indexes of all the disabled items in the list, to be used by the ArrowKeyFocusManager
+ * - `itemLayouts`: Contains the layout information for each item, header and footer in the list,
+ * so we can calculate the position of any given item when scrolling programmatically
+ *
+ * @return {{itemLayouts: [{offset: number, length: number}], disabledOptionsIndexes: *[], allOptions: *[]}}
+ */
+ const getFlattenedSections = () => {
+ const allOptions = [];
+
+ const disabledOptionsIndexes = [];
+ let disabledIndex = 0;
+
+ let offset = 0;
+ const itemLayouts = [{length: 0, offset}];
+
+ _.each(props.sections, (section, sectionIndex) => {
+ // We're not rendering any section header, but we need to push to the array
+ // because React Native accounts for it in getItemLayout
+ const sectionHeaderHeight = 0;
+ itemLayouts.push({length: sectionHeaderHeight, offset});
+ offset += sectionHeaderHeight;
+
+ _.each(section.data, (option, optionIndex) => {
+ // Add item to the general flattened array
+ allOptions.push({
+ ...option,
+ sectionIndex,
+ index: optionIndex,
+ });
+
+ // If disabled, add to the disabled indexes array
+ if (section.isDisabled || option.isDisabled) {
+ disabledOptionsIndexes.push(disabledIndex);
+ }
+ disabledIndex += 1;
+
+ // Account for the height of the item in getItemLayout
+ const fullItemHeight = variables.optionRowHeight;
+ itemLayouts.push({length: fullItemHeight, offset});
+ offset += fullItemHeight;
+ });
+
+ // We're not rendering any section footer, but we need to push to the array
+ // because React Native accounts for it in getItemLayout
+ itemLayouts.push({length: 0, offset});
+ });
+
+ // We're not rendering the list footer, but we need to push to the array
+ // because React Native accounts for it in getItemLayout
+ itemLayouts.push({length: 0, offset});
+
+ return {
+ allOptions,
+ disabledOptionsIndexes,
+ itemLayouts,
+ };
+ };
+
+ const flattenedSections = getFlattenedSections();
+
+ const [focusedIndex, setFocusedIndex] = useState(() => {
+ const defaultIndex = 0;
+
+ const indexOfInitiallyFocusedOption = _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === props.initiallyFocusedOptionKey);
+
+ if (indexOfInitiallyFocusedOption >= 0) {
+ return indexOfInitiallyFocusedOption;
+ }
+
+ return defaultIndex;
+ });
+
+ /**
+ * Scrolls to the desired item index in the section list
+ *
+ * @param {Number} index - the index of the item to scroll to
+ * @param {Boolean} animated - whether to animate the scroll
+ */
+ const scrollToIndex = (index, animated) => {
+ const item = flattenedSections.allOptions[index];
+
+ if (!listRef.current || !item) {
+ return;
+ }
+
+ const itemIndex = item.index;
+ const sectionIndex = item.sectionIndex;
+
+ // Note: react-native's SectionList automatically strips out any empty sections.
+ // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
+ // Otherwise, it will cause an index-out-of-bounds error and crash the app.
+ let adjustedSectionIndex = sectionIndex;
+ for (let i = 0; i < sectionIndex; i++) {
+ if (_.isEmpty(lodashGet(props.sections, `[${i}].data`))) {
+ adjustedSectionIndex--;
+ }
+ }
+
+ listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated});
+ };
+
+ /**
+ * This function is used to compute the layout of any given item in our list.
+ * We need to implement it so that we can programmatically scroll to items outside the virtual render window of the SectionList.
+ *
+ * @param {Array} data - This is the same as the data we pass into the component
+ * @param {Number} flatDataArrayIndex - This index is provided by React Native, and refers to a flat array with data from all the sections. This flat array has some quirks:
+ *
+ * 1. It ALWAYS includes a list header and a list footer, even if we don't provide/render those.
+ * 2. Each section includes a header, even if we don't provide/render one.
+ *
+ * For example, given a list with two sections, two items in each section, no header, no footer, and no section headers, the flat array might look something like this:
+ *
+ * [{header}, {sectionHeader}, {item}, {item}, {sectionHeader}, {item}, {item}, {footer}]
+ *
+ * @returns {Object}
+ */
+ const getItemLayout = (data, flatDataArrayIndex) => {
+ const targetItem = flattenedSections.itemLayouts[flatDataArrayIndex];
+
+ return {
+ length: targetItem.length,
+ offset: targetItem.offset,
+ index: flatDataArrayIndex,
+ };
+ };
+
+ const renderItem = ({item, index, section}) => {
+ const isFocused = focusedIndex === index + lodashGet(section, 'indexOffset', 0);
+
+ return (
+
+ );
+ };
+
+ /** Focuses the text input when the component mounts. If `props.shouldDelayFocus` is true, we wait for the animation to finish */
+ useEffect(() => {
+ if (shouldShowTextInput) {
+ if (props.shouldDelayFocus) {
+ focusTimeoutRef.current = setTimeout(() => textInputRef.current.focus(), CONST.ANIMATED_TRANSITION);
+ } else {
+ textInputRef.current.focus();
+ }
+ }
+
+ return () => {
+ if (!focusTimeoutRef.current) {
+ return;
+ }
+ clearTimeout(focusTimeoutRef.current);
+ };
+ }, [props.shouldDelayFocus, shouldShowTextInput]);
+
+ useKeyboardShortcut(
+ CONST.KEYBOARD_SHORTCUTS.ENTER,
+ () => {
+ const focusedOption = flattenedSections.allOptions[focusedIndex];
+
+ if (!focusedOption) {
+ return;
+ }
+
+ props.onSelectRow(focusedOption);
+ },
+ {
+ captureOnInputs: true,
+ shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
+ },
+ );
+
+ return (
+ {
+ setFocusedIndex(newFocusedIndex);
+ scrollToIndex(newFocusedIndex, true);
+ }}
+ >
+
+ {({safeAreaPaddingBottomStyle}) => (
+
+ {shouldShowTextInput && (
+
+
+
+ )}
+ {Boolean(props.headerMessage) && (
+
+ {props.headerMessage}
+
+ )}
+ item.keyForList}
+ extraData={focusedIndex}
+ indicatorStyle="white"
+ keyboardShouldPersistTaps="always"
+ showsVerticalScrollIndicator={false}
+ OP
+ initialNumToRender={12}
+ maxToRenderPerBatch={5}
+ windowSize={5}
+ viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
+ onLayout={() => scrollToIndex(focusedIndex, false)}
+ />
+
+ )}
+
+
+ );
+}
+
+BaseSelectionListRadio.displayName = 'BaseSelectionListRadio';
+BaseSelectionListRadio.propTypes = propTypes;
+BaseSelectionListRadio.defaultProps = selectionListRadioDefaultProps;
+
+export default withKeyboardState(BaseSelectionListRadio);
diff --git a/src/components/SelectionListRadio/RadioListItem.js b/src/components/SelectionListRadio/RadioListItem.js
new file mode 100644
index 000000000000..c5c4b3aeaf2c
--- /dev/null
+++ b/src/components/SelectionListRadio/RadioListItem.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import styles from '../../styles/styles';
+import Text from '../Text';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import themeColors from '../../styles/themes/default';
+import {radioListItemPropTypes} from './selectionListRadioPropTypes';
+
+const propTypes = {
+ /** The section list item */
+ item: PropTypes.shape(radioListItemPropTypes),
+
+ /** Whether this item is focused (for arrow key controls) */
+ isFocused: PropTypes.bool,
+
+ /** Callback to fire when the item is pressed */
+ onSelectRow: PropTypes.func,
+};
+
+const defaultProps = {
+ item: {},
+ isFocused: false,
+ onSelectRow: () => {},
+};
+
+function RadioListItem(props) {
+ return (
+ props.onSelectRow(props.item)}
+ accessibilityLabel={props.item.text}
+ accessibilityRole="button"
+ hoverDimmingValue={1}
+ hoverStyle={styles.hoveredComponentBG}
+ focusStyle={styles.hoveredComponentBG}
+ >
+
+
+
+ {props.item.text}
+
+
+ {Boolean(props.item.alternateText) && (
+
+ {props.item.alternateText}
+
+ )}
+
+
+ {props.item.isSelected && (
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+RadioListItem.displayName = 'RadioListItem';
+RadioListItem.propTypes = propTypes;
+RadioListItem.defaultProps = defaultProps;
+
+export default RadioListItem;
diff --git a/src/components/SelectionListRadio/index.android.js b/src/components/SelectionListRadio/index.android.js
new file mode 100644
index 000000000000..53fc12b23d31
--- /dev/null
+++ b/src/components/SelectionListRadio/index.android.js
@@ -0,0 +1,17 @@
+import React, {forwardRef} from 'react';
+import {Keyboard} from 'react-native';
+import BaseSelectionListRadio from './BaseSelectionListRadio';
+
+const SelectionListRadio = forwardRef((props, ref) => (
+ Keyboard.dismiss()}
+ />
+));
+
+SelectionListRadio.displayName = 'SelectionListRadio';
+
+export default SelectionListRadio;
diff --git a/src/components/SelectionListRadio/index.ios.js b/src/components/SelectionListRadio/index.ios.js
new file mode 100644
index 000000000000..b8faad18420b
--- /dev/null
+++ b/src/components/SelectionListRadio/index.ios.js
@@ -0,0 +1,16 @@
+import React, {forwardRef} from 'react';
+import {Keyboard} from 'react-native';
+import BaseSelectionListRadio from './BaseSelectionListRadio';
+
+const SelectionListRadio = forwardRef((props, ref) => (
+ Keyboard.dismiss()}
+ />
+));
+
+SelectionListRadio.displayName = 'SelectionListRadio';
+
+export default SelectionListRadio;
diff --git a/src/components/SelectionListRadio/index.js b/src/components/SelectionListRadio/index.js
new file mode 100644
index 000000000000..a4d019476168
--- /dev/null
+++ b/src/components/SelectionListRadio/index.js
@@ -0,0 +1,46 @@
+import React, {forwardRef, useEffect, useState} from 'react';
+import {Keyboard} from 'react-native';
+import BaseSelectionListRadio from './BaseSelectionListRadio';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+
+const SelectionListRadio = forwardRef((props, ref) => {
+ const [isScreenTouched, setIsScreenTouched] = useState(false);
+
+ const touchStart = () => setIsScreenTouched(true);
+ const touchEnd = () => setIsScreenTouched(false);
+
+ useEffect(() => {
+ if (!DeviceCapabilities.canUseTouchScreen()) {
+ return;
+ }
+
+ // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where
+ // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically.
+ document.addEventListener('touchstart', touchStart);
+ document.addEventListener('touchend', touchEnd);
+
+ return () => {
+ document.removeEventListener('touchstart', touchStart);
+ document.removeEventListener('touchend', touchEnd);
+ };
+ }, []);
+
+ return (
+ {
+ // Only dismiss the keyboard whenever the user scrolls the screen
+ if (!isScreenTouched) {
+ return;
+ }
+ Keyboard.dismiss();
+ }}
+ />
+ );
+});
+
+SelectionListRadio.displayName = 'SelectionListRadio';
+
+export default SelectionListRadio;
diff --git a/src/components/SelectionListRadio/selectionListRadioPropTypes.js b/src/components/SelectionListRadio/selectionListRadioPropTypes.js
new file mode 100644
index 000000000000..14e41b195d7b
--- /dev/null
+++ b/src/components/SelectionListRadio/selectionListRadioPropTypes.js
@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import CONST from '../../CONST';
+
+const radioListItemPropTypes = {
+ /** Text to display */
+ text: PropTypes.string,
+
+ /** Alternate text to display */
+ alternateText: PropTypes.string,
+
+ /** Key used internally by React */
+ keyForList: PropTypes.string,
+
+ /** Whether this option is selected */
+ isSelected: PropTypes.bool,
+};
+
+const propTypes = {
+ /** Sections for the section list */
+ sections: PropTypes.arrayOf(
+ PropTypes.shape({
+ /** Title of the section */
+ title: PropTypes.string,
+
+ /** The initial index of this section given the total number of options in each section's data array */
+ indexOffset: PropTypes.number,
+
+ /** Array of options */
+ data: PropTypes.arrayOf(PropTypes.shape(radioListItemPropTypes)),
+
+ /** Whether this section items disabled for selection */
+ isDisabled: PropTypes.bool,
+ }),
+ ).isRequired,
+
+ /** Callback to fire when a row is tapped */
+ onSelectRow: PropTypes.func,
+
+ /** Label for the text input */
+ textInputLabel: PropTypes.string,
+
+ /** Placeholder for the text input */
+ textInputPlaceholder: PropTypes.string,
+
+ /** Value for the text input */
+ textInputValue: PropTypes.string,
+
+ /** Max length for the text input */
+ textInputMaxLength: PropTypes.number,
+
+ /** Callback to fire when the text input changes */
+ onChangeText: PropTypes.func,
+
+ /** Keyboard type for the text input */
+ keyboardType: PropTypes.string,
+
+ /** Item `keyForList` to focus initially */
+ initiallyFocusedOptionKey: PropTypes.string,
+
+ /** Whether to delay focus on the text input when mounting. Used for a smoother animation on Android */
+ shouldDelayFocus: PropTypes.bool,
+
+ /** Callback to fire when the list is scrolled */
+ onScroll: PropTypes.func,
+
+ /** Callback to fire when the list is scrolled and the user begins dragging */
+ onScrollBeginDrag: PropTypes.func,
+
+ /** Message to display at the top of the list */
+ headerMessage: PropTypes.string,
+};
+
+const defaultProps = {
+ onSelectRow: () => {},
+ textInputLabel: '',
+ textInputPlaceholder: '',
+ textInputValue: '',
+ textInputMaxLength: undefined,
+ keyboardType: CONST.KEYBOARD_TYPE.DEFAULT,
+ onChangeText: () => {},
+ initiallyFocusedOptionKey: '',
+ shouldDelayFocus: false,
+ onScroll: () => {},
+ onScrollBeginDrag: () => {},
+ headerMessage: '',
+};
+
+export {propTypes, radioListItemPropTypes, defaultProps};
diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
index 454d5204d3a4..64faafc0ba3e 100644
--- a/src/components/SubscriptAvatar.js
+++ b/src/components/SubscriptAvatar.js
@@ -2,13 +2,14 @@ import React, {memo} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import _ from 'underscore';
+import lodashGet from 'lodash/get';
import styles from '../styles/styles';
-import Tooltip from './Tooltip';
import themeColors from '../styles/themes/default';
import Avatar from './Avatar';
import CONST from '../CONST';
import * as StyleUtils from '../styles/StyleUtils';
import avatarPropTypes from './avatarPropTypes';
+import UserDetailsTooltip from './UserDetailsTooltip';
const propTypes = {
/** Avatar URL or icon */
@@ -17,12 +18,6 @@ const propTypes = {
/** Subscript avatar URL or icon */
secondaryAvatar: avatarPropTypes,
- /** Tooltip for the main avatar */
- mainTooltip: PropTypes.string,
-
- /** Tooltip for the subscript avatar */
- secondaryTooltip: PropTypes.string,
-
/** Set the size of avatars */
size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
@@ -34,8 +29,6 @@ const propTypes = {
};
const defaultProps = {
- mainTooltip: '',
- secondaryTooltip: '',
size: CONST.AVATAR_SIZE.DEFAULT,
backgroundColor: themeColors.componentBG,
mainAvatar: {},
@@ -44,10 +37,11 @@ const defaultProps = {
};
function SubscriptAvatar(props) {
- const containerStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar;
-
+ const isSmall = props.size === CONST.AVATAR_SIZE.SMALL;
+ const subscriptSyle = props.size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
+ const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar;
// Default the margin style to what is normal for small or normal sized avatars
- let marginStyle = props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
+ let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin;
// Some views like the chat view require that there be no margins
if (props.noMargin) {
@@ -55,32 +49,38 @@ function SubscriptAvatar(props) {
}
return (
-
+
-
-
-
+
+
+
-
+
);
}
diff --git a/src/components/Switch.js b/src/components/Switch.js
index f0fd20f7af48..608471763e29 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -3,6 +3,7 @@ import {Animated} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../styles/styles';
import * as Pressables from './Pressable';
+import CONST from '../CONST';
const propTypes = {
/** Whether the switch is toggled to the on position */
@@ -56,7 +57,7 @@ class Switch extends Component {
style={[styles.switchTrack, !this.props.isOn && styles.switchInactive]}
onPress={this.toggleAction}
onLongPress={this.toggleAction}
- accessibilityRole="switch"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.SWITCH}
accessibilityState={{checked: this.props.isOn}}
aria-checked={this.props.isOn}
accessibilityLabel={this.props.accessibilityLabel}
diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js
deleted file mode 100644
index 5ed4a4d0cba4..000000000000
--- a/src/components/TaskHeader.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, {useEffect} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
-import reportPropTypes from '../pages/reportPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import * as ReportUtils from '../libs/ReportUtils';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import participantPropTypes from './participantPropTypes';
-import Avatar from './Avatar';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import CONST from '../CONST';
-import withWindowDimensions from './withWindowDimensions';
-import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
-import Icon from './Icon';
-import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import Button from './Button';
-import * as TaskUtils from '../libs/actions/Task';
-import * as UserUtils from '../libs/UserUtils';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import ONYXKEYS from '../ONYXKEYS';
-
-const propTypes = {
- /** The report currently being looked at */
- report: reportPropTypes.isRequired,
-
- /** Personal details so we can get the ones for the report participants */
- personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
-
- /** Current user session */
- session: PropTypes.shape({
- accountID: PropTypes.number,
- }),
-
- ...withLocalizePropTypes,
-};
-
-const defaultProps = {
- session: {
- accountID: 0,
- },
-};
-
-function TaskHeader(props) {
- const title = ReportUtils.getReportName(props.report);
- const assigneeAccountID = TaskUtils.getTaskAssigneeAccountID(props.report);
- const assigneeName = ReportUtils.getDisplayNameForParticipant(assigneeAccountID);
- const assigneeAvatar = UserUtils.getAvatar(lodashGet(props.personalDetails, [assigneeAccountID, 'avatar']), assigneeAccountID);
- const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN;
- const isCompleted = ReportUtils.isTaskCompleted(props.report);
-
- useEffect(() => {
- TaskUtils.setTaskReport(props.report);
- }, [props.report]);
-
- return (
-
-
-
- {props.translate('common.to')}
- Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
- disabled={!isOpen}
- accessibilityRole="button"
- accessibilityLabel={props.translate('newTaskPage.assignee')}
- hoverDimmingValue={1}
- pressDimmingValue={0.2}
- >
-
-
- {assigneeAccountID && assigneeAccountID > 0 && (
- <>
-
-
-
- {assigneeName}
-
-
-
- )}
-
-
- {isCompleted ? (
- <>
- {props.translate('task.completed')}
-
-
-
-
- ) : (
-
-
-
-
-
- Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
- disabled={!isOpen}
- interactive={isOpen}
- />
- Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
- disabled={!isOpen}
- interactive={isOpen}
- />
-
- );
-}
-
-TaskHeader.propTypes = propTypes;
-TaskHeader.defaultProps = defaultProps;
-TaskHeader.displayName = 'TaskHeader';
-
-export default compose(
- withWindowDimensions,
- withLocalize,
- withOnyx({
- session: {
- key: ONYXKEYS.SESSION,
- },
- }),
-)(TaskHeader);
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
new file mode 100644
index 000000000000..0ecc93ee24ab
--- /dev/null
+++ b/src/components/TaskHeaderActionButton.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import reportPropTypes from '../pages/reportPropTypes';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import styles from '../styles/styles';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Button from './Button';
+import * as Task from '../libs/actions/Task';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import * as ReportUtils from '../libs/ReportUtils';
+import CONST from '../CONST';
+import compose from '../libs/compose';
+import ONYXKEYS from '../ONYXKEYS';
+
+const propTypes = {
+ /** The report currently being looked at */
+ report: reportPropTypes.isRequired,
+
+ /** Current user session */
+ session: PropTypes.shape({
+ accountID: PropTypes.number,
+ }),
+
+ ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+ session: {
+ accountID: 0,
+ },
+};
+
+function TaskHeaderActionButton(props) {
+ return (
+ Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
+ disabled={!ReportUtils.isOpenTaskReport(props.report)}
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+ accessibilityLabel={props.translate('task.assignee')}
+ hoverDimmingValue={1}
+ pressDimmingValue={0.2}
+ >
+
+
+
+ );
+}
+
+TaskHeaderActionButton.propTypes = propTypes;
+TaskHeaderActionButton.defaultProps = defaultProps;
+TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
+
+export default compose(
+ withLocalize,
+ withOnyx({
+ session: {
+ key: ONYXKEYS.SESSION,
+ },
+ }),
+)(TaskHeaderActionButton);
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index c9c61207f81e..ef7654611ccc 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/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) && (
e.preventDefault()}
accessibilityLabel={props.translate('common.visible')}
diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
index 7411194520d3..dd264625744e 100644
--- a/src/components/TextInput/TextInputLabel/index.js
+++ b/src/components/TextInput/TextInputLabel/index.js
@@ -15,7 +15,6 @@ class TextInputLabel extends PureComponent {
return (
(this.label = el)}
style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]}
>
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index f498fbe16bbd..a1b1cb4d1e8a 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -5,6 +5,7 @@ import {Linking} from 'react-native';
import Text from './Text';
import styles from '../styles/styles';
import stylePropTypes from '../styles/stylePropTypes';
+import CONST from '../CONST';
const propTypes = {
/** Link to open in new tab */
@@ -21,9 +22,13 @@ const propTypes = {
/** Callback that is called when mousedown is triggered */
onMouseDown: PropTypes.func,
+
+ /** A ref to forward to text */
+ forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
};
const defaultProps = {
+ forwardedRef: undefined,
href: undefined,
style: [],
onPress: undefined,
@@ -60,11 +65,12 @@ function TextLink(props) {
return (
@@ -76,4 +82,10 @@ function TextLink(props) {
TextLink.defaultProps = defaultProps;
TextLink.propTypes = propTypes;
TextLink.displayName = 'TextLink';
-export default TextLink;
+export default React.forwardRef((props, ref) => (
+
+));
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 5217ca8441a1..e54481bcab99 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -95,7 +95,7 @@ class ThreeDotsMenu extends Component {
}}
ref={(el) => (this.button = el)}
style={[styles.touchableButtonImage, ...this.props.iconStyles]}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate(this.props.iconTooltip)}
>
{
+ this.isAnimationCanceled.current = !finished;
+ });
}
TooltipSense.activate();
}
diff --git a/src/components/UserDetailsTooltip/index.js b/src/components/UserDetailsTooltip/index.js
index 18069bc8fde8..116e5f34abfe 100644
--- a/src/components/UserDetailsTooltip/index.js
+++ b/src/components/UserDetailsTooltip/index.js
@@ -12,6 +12,7 @@ import ONYXKEYS from '../../ONYXKEYS';
import withLocalize from '../withLocalize';
import compose from '../../libs/compose';
import * as UserUtils from '../../libs/UserUtils';
+import CONST from '../../CONST';
import * as LocalePhoneNumber from '../../libs/LocalePhoneNumber';
function UserDetailsTooltip(props) {
@@ -32,31 +33,41 @@ function UserDetailsTooltip(props) {
userAccountID = props.delegateAccountID;
}
+ let title = String(userDisplayName).trim() ? userDisplayName : '';
+ const subtitle = (userLogin || '').trim() && !_.isEqual(LocalePhoneNumber.formatPhoneNumber(userLogin || ''), userDisplayName) ? Str.removeSMSDomain(userLogin) : '';
+ if (props.icon && props.icon.type === CONST.ICON_TYPE_WORKSPACE) {
+ title = props.icon.name;
+ }
const renderTooltipContent = useCallback(
() => (
-
- {userDisplayName}
-
-
- {(userLogin || '').trim() && !_.isEqual(LocalePhoneNumber.formatPhoneNumber(userLogin || ''), userDisplayName) ? Str.removeSMSDomain(userLogin) : ''}
-
+ {title}
+ {subtitle}
),
- [userAvatar, userDisplayName, userLogin, userAccountID],
+ [props.icon, userAvatar, userAccountID, userLogin, title, subtitle],
);
- if (!userDisplayName && !userLogin) {
+ if (!props.icon && !userDisplayName && !userLogin) {
return props.children;
}
- return {props.children};
+ return (
+
+ {props.children}
+
+ );
}
UserDetailsTooltip.propTypes = propTypes;
diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
index 0bf0f5f9b7cb..271e74aaf06c 100644
--- a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
+++ b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import personalDetailsPropType from '../../pages/personalDetailsPropType';
+import avatarPropTypes from '../avatarPropTypes';
import {withLocalizePropTypes} from '../withLocalize';
const propTypes = {
@@ -13,7 +14,11 @@ const propTypes = {
displayName: PropTypes.string,
/** Login */
login: PropTypes.string,
+ /** Whether this is a Workspace Avatar or User Avatar */
+ type: PropTypes.string,
}),
+ /** Optionally, pass in the icon instead of calculating it. If defined, will take precedence. */
+ icon: avatarPropTypes,
/** Component that displays the tooltip */
children: PropTypes.node.isRequired,
/** List of personalDetails (keyed by accountID) */
@@ -28,9 +33,10 @@ const propTypes = {
const defaultProps = {
accountID: '',
- fallbackUserDetails: {displayName: '', login: '', avatar: ''},
+ fallbackUserDetails: {displayName: '', login: '', avatar: '', type: ''},
personalDetailsList: {},
delegateAccountID: 0,
+ icon: undefined,
};
export {propTypes, defaultProps};
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index f705b132593d..4c0e2b551382 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -1,5 +1,5 @@
import _ from 'underscore';
-import React, {Component} from 'react';
+import React, {useState, useRef, useEffect, useCallback} from 'react';
import {View, Dimensions, Linking} from 'react-native';
import PropTypes from 'prop-types';
import Icon from '../Icon';
@@ -28,131 +28,114 @@ const propTypes = {
...windowDimensionsPropTypes,
};
-class BaseVideoChatButtonAndMenu extends Component {
- constructor(props) {
- super(props);
+function BaseVideoChatButtonAndMenu(props) {
+ const [isVideoChatMenuActive, setIsVideoChatMenuActive] = useState(false);
+ const [videoChatIconPosition, setVideoChatIconPosition] = useState({x: 0, y: 0});
+ const videoChatIconWrapperRef = useRef(null);
+ const videoChatButtonRef = useRef(null);
- this.dimensionsEventListener = null;
-
- this.measureVideoChatIconPosition = this.measureVideoChatIconPosition.bind(this);
- this.videoChatIconWrapper = null;
- this.menuItemData = [
- {
- icon: ZoomIcon,
- text: props.translate('videoChatButtonAndMenu.zoom'),
- onPress: () => {
- this.setMenuVisibility(false);
- Linking.openURL(CONST.NEW_ZOOM_MEETING_URL);
- },
+ const menuItemData = [
+ {
+ icon: ZoomIcon,
+ text: props.translate('videoChatButtonAndMenu.zoom'),
+ onPress: () => {
+ setIsVideoChatMenuActive(false);
+ Linking.openURL(CONST.NEW_ZOOM_MEETING_URL);
},
- {
- icon: GoogleMeetIcon,
- text: props.translate('videoChatButtonAndMenu.googleMeet'),
- onPress: () => {
- this.setMenuVisibility(false);
- Linking.openURL(this.props.googleMeetURL);
- },
+ },
+ {
+ icon: GoogleMeetIcon,
+ text: props.translate('videoChatButtonAndMenu.googleMeet'),
+ onPress: () => {
+ setIsVideoChatMenuActive(false);
+ Linking.openURL(props.googleMeetURL);
},
- ];
-
- this.state = {
- isVideoChatMenuActive: false,
- videoChatIconPosition: {x: 0, y: 0},
- };
- }
-
- componentDidMount() {
- this.dimensionsEventListener = Dimensions.addEventListener('change', this.measureVideoChatIconPosition);
- }
-
- componentWillUnmount() {
- if (!this.dimensionsEventListener) {
- return;
- }
- this.dimensionsEventListener.remove();
- }
+ },
+ ];
/**
- * Set the state variable isVideoChatMenuActive
- * @param {Boolean} isVideoChatMenuActive
+ * This gets called onLayout to find the coordinates of the wrapper for the video chat button.
*/
- setMenuVisibility(isVideoChatMenuActive) {
- this.setState({isVideoChatMenuActive});
- }
-
- /**
- * This gets called onLayout to find the cooridnates of the wrapper for the video chat button.
- */
- measureVideoChatIconPosition() {
- if (!this.videoChatIconWrapper) {
+ const measureVideoChatIconPosition = useCallback(() => {
+ if (!videoChatIconWrapperRef.current) {
return;
}
- this.videoChatIconWrapper.measureInWindow((x, y) =>
- this.setState({
- videoChatIconPosition: {x, y},
- }),
- );
- }
+ videoChatIconWrapperRef.current.measureInWindow((x, y) => {
+ setVideoChatIconPosition({x, y});
+ });
+ }, []);
+
+ useEffect(() => {
+ const dimensionsEventListener = Dimensions.addEventListener('change', measureVideoChatIconPosition);
+
+ return () => {
+ if (!dimensionsEventListener) {
+ return;
+ }
+
+ dimensionsEventListener.remove();
+ };
+ }, [measureVideoChatIconPosition]);
+
+ return (
+ <>
+
+
+ {
+ // Drop focus to avoid blue focus ring.
+ videoChatButtonRef.current.blur();
- render() {
- return (
- <>
- (this.videoChatIconWrapper = el)}
- onLayout={this.measureVideoChatIconPosition}
- >
-
- (this.videoChatButton = el)}
- onPress={Session.checkIfActionIsAllowed(() => {
- // Drop focus to avoid blue focus ring.
- this.videoChatButton.blur();
+ // If this is the Concierge chat, we'll open the modal for requesting a setup call instead
+ if (props.isConcierge && props.guideCalendarLink) {
+ Linking.openURL(props.guideCalendarLink);
+ return;
+ }
+ setIsVideoChatMenuActive(true);
+ })}
+ style={styles.touchableButtonImage}
+ accessibilityLabel={props.translate('videoChatButtonAndMenu.tooltip')}
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+ >
+
+
+
+
- // If this is the Concierge chat, we'll open the modal for requesting a setup call instead
- if (this.props.isConcierge && this.props.guideCalendarLink) {
- Linking.openURL(this.props.guideCalendarLink);
- return;
- }
- this.setMenuVisibility(true);
- })}
- style={styles.touchableButtonImage}
- accessibilityLabel={this.props.translate('videoChatButtonAndMenu.tooltip')}
- accessibilityRole="button"
- >
-
-
-
+ setIsVideoChatMenuActive(false)}
+ isVisible={isVideoChatMenuActive}
+ anchorPosition={{
+ left: videoChatIconPosition.x - 150,
+ top: videoChatIconPosition.y + 40,
+ }}
+ >
+
+ {_.map(menuItemData, ({icon, text, onPress}) => (
+
+ ))}
- this.setMenuVisibility(false)}
- isVisible={this.state.isVideoChatMenuActive}
- anchorPosition={{
- left: this.state.videoChatIconPosition.x - 150,
- top: this.state.videoChatIconPosition.y + 40,
- }}
- >
-
- {_.map(this.menuItemData, ({icon, text, onPress}) => (
-
- ))}
-
-
-
- );
- }
+
+
+ );
}
BaseVideoChatButtonAndMenu.propTypes = propTypes;
BaseVideoChatButtonAndMenu.defaultProps = defaultProps;
+BaseVideoChatButtonAndMenu.displayName = 'BaseVideoChatButtonAndMenu';
export default compose(withWindowDimensions, withLocalize)(BaseVideoChatButtonAndMenu);
diff --git a/src/components/avatarPropTypes.js b/src/components/avatarPropTypes.js
index c068b481c596..7e978fc74963 100644
--- a/src/components/avatarPropTypes.js
+++ b/src/components/avatarPropTypes.js
@@ -5,4 +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,
});
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 3909f446c907..b8b28d15ddc6 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -31,7 +31,7 @@ const propTypes = {
iconHeight: PropTypes.number,
/** Text to display for the item */
- title: PropTypes.string.isRequired,
+ title: PropTypes.string,
/** Text that appears above the title */
label: PropTypes.string,
@@ -99,6 +99,9 @@ const propTypes = {
/** Prop to identify if we should load avatars vertically instead of diagonally */
shouldStackHorizontally: PropTypes.bool,
+ /** Prop to represent the size of the float right avatar images to be shown */
+ floatRightAvatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
/** Prop to represent the size of the avatar images to be shown */
avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
@@ -119,6 +122,15 @@ const propTypes = {
/** An icon to display under the main item */
furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+
+ /** Whether we should use small avatar subscript sizing the for menu item */
+ isSmallAvatarSubscriptMenu: PropTypes.bool,
+
+ /** The max number of lines the title text should occupy before ellipses are added */
+ numberOfLines: PropTypes.number,
+
+ /** Should we grey out the menu item when it is disabled? */
+ shouldGreyOutWhenDisabled: PropTypes.bool,
};
export default propTypes;
diff --git a/src/languages/en.js b/src/languages/en.js
index f6989d32f35a..60235a0e150a 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -360,7 +360,10 @@ export default {
splitAmount: ({amount}) => `split ${amount}`,
amountEach: ({amount}) => `${amount} each`,
payerOwesAmount: ({payer, amount}) => `${payer} owes ${amount}`,
+ payerOwes: ({payer}) => `${payer} owes: `,
payerPaidAmount: ({payer, amount}) => `${payer} paid ${amount}`,
+ payerPaid: ({payer}) => `${payer} paid: `,
+ payerSettled: ({amount}) => `paid ${amount}`,
settledElsewhereWithAmount: ({amount}) => `paid ${amount} elsewhere`,
settledPaypalMeWithAmount: ({amount}) => `paid ${amount} using Paypal.me`,
noReimbursableExpenses: 'This report has an invalid amount',
@@ -1273,29 +1276,29 @@ export default {
},
},
newTaskPage: {
- task: 'Task',
assignTask: 'Assign task',
- assignee: 'Assignee',
- assigneeError: 'There was an error assigning this task, please try another assignee.',
assignMe: 'Assign to me',
confirmTask: 'Confirm task',
confirmError: 'Please enter a title and select a share destination.',
- title: 'Title',
- description: 'Description',
descriptionOptional: 'Description (optional)',
shareSomewhere: 'Share somewhere',
pleaseEnterTaskName: 'Please enter a title',
- markAsDone: 'Mark as done',
- markAsIncomplete: 'Mark as incomplete',
pleaseEnterTaskDestination: 'Please select with whom you want to share.',
},
task: {
+ task: 'Task',
+ title: 'Title',
+ description: 'Description',
+ assignee: 'Assignee',
completed: 'Completed',
messages: {
completed: 'completed task',
canceled: 'canceled task',
reopened: 'reopened task',
},
+ markAsDone: 'Mark as done',
+ markAsIncomplete: 'Mark as incomplete',
+ assigneeError: 'There was an error assigning this task, please try another assignee.',
},
statementPage: {
generatingPDF: "We're generating your PDF right now. Please come back later!",
@@ -1421,7 +1424,6 @@ export default {
deletedMessage: '[Deleted message]',
},
threads: {
- lastReply: 'Last reply',
replies: 'Replies',
reply: 'Reply',
parentNavigationSummary: ({rootReportName, workspaceName}) => `From ${rootReportName}${workspaceName ? ` in ${workspaceName}` : ''}`,
diff --git a/src/languages/es.js b/src/languages/es.js
index f765ce0270df..08ca8fb88710 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -359,7 +359,10 @@ export default {
splitAmount: ({amount}) => `dividir ${amount}`,
amountEach: ({amount}) => `${amount} cada uno`,
payerOwesAmount: ({payer, amount}) => `${payer} debe ${amount}`,
+ payerOwes: ({payer}) => `${payer} debe: `,
payerPaidAmount: ({payer, amount}) => `${payer} pagรณ ${amount}`,
+ payerPaid: ({payer}) => `${payer} pagรณ: `,
+ payerSettled: ({amount}) => `pagรณ ${amount}`,
settledElsewhereWithAmount: ({amount}) => `pagรณ ${amount} de otra forma`,
settledPaypalMeWithAmount: ({amount}) => `pagรณ ${amount} con PayPal.me`,
noReimbursableExpenses: 'El monto de este informe es invรกlido',
@@ -1282,29 +1285,29 @@ export default {
},
},
newTaskPage: {
- task: 'Tarea',
assignTask: 'Asignar tarea',
- assignee: 'Cesionario',
- assigneeError: 'Hubo un error al asignar esta tarea, intente con otro cesionario.',
assignMe: 'Asignar a mรญ mismo',
confirmTask: 'Confirmar tarea',
confirmError: 'Por favor introduce un tรญtulo y selecciona un destino de tarea.',
- title: 'Tรญtulo',
- description: 'Descripciรณn',
descriptionOptional: 'Descripciรณn (opcional)',
shareSomewhere: 'Compartir en algรบn lugar',
pleaseEnterTaskName: 'Por favor introduce un tรญtulo',
- markAsDone: 'Marcar como hecho',
- markAsIncomplete: 'Marcar como incompleta',
pleaseEnterTaskDestination: 'Por favor selecciona con quien deseas compartir.',
},
task: {
+ task: 'Tarea',
+ title: 'Tรญtulo',
+ description: 'Descripciรณn',
+ assignee: 'Cesionario',
completed: 'Completada',
messages: {
completed: 'tarea completada',
canceled: 'tarea cancelada',
reopened: 'tarea reabrir',
},
+ markAsDone: 'Marcar como hecho',
+ markAsIncomplete: 'Marcar como incompleta',
+ assigneeError: 'Hubo un error al asignar esta tarea, intente con otro cesionario.',
},
statementPage: {
generatingPDF: 'Estamos generando tu PDF ahora mismo. ยกPor favor, vuelve mรกs tarde!',
@@ -1890,7 +1893,6 @@ export default {
deletedMessage: '[Mensaje eliminado]',
},
threads: {
- lastReply: 'รltima respuesta',
replies: 'Respuestas',
reply: 'Respuesta',
parentNavigationSummary: ({rootReportName, workspaceName}) => `De ${rootReportName}${workspaceName ? ` en ${workspaceName}` : ''}`,
diff --git a/src/libs/Accessibility/index.js b/src/libs/Accessibility/index.js
index 890b8668291c..59a6738dfb14 100644
--- a/src/libs/Accessibility/index.js
+++ b/src/libs/Accessibility/index.js
@@ -18,8 +18,8 @@ const getHitSlopForSize = ({x, y}) => {
/* according to https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
the minimum tappable area is 44x44 points */
const minimumSize = 44;
- const hitSlopVertical = _.max([minimumSize - x, 0]);
- const hitSlopHorizontal = _.max([minimumSize - y, 0]);
+ const hitSlopVertical = _.max([minimumSize - x, 0]) / 2;
+ const hitSlopHorizontal = _.max([minimumSize - y, 0]) / 2;
return {
top: hitSlopVertical,
bottom: hitSlopVertical,
diff --git a/src/libs/E2E/apiMocks/openApp.js b/src/libs/E2E/apiMocks/openApp.js
index 005bd005c5d4..8f8e6567e6d1 100644
--- a/src/libs/E2E/apiMocks/openApp.js
+++ b/src/libs/E2E/apiMocks/openApp.js
@@ -1573,7 +1573,7 @@ export default () => ({
reportID: '98258097',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['concierge@expensify.com'],
isPinned: true,
@@ -1599,7 +1599,7 @@ export default () => ({
reportID: '98258458',
reportName: '',
chatType: 'policyExpenseChat',
- ownerEmail: 'applausetester+perf2@applause.expensifail.com',
+ ownerAccountID: 17,
policyID: 'C28C2634DD7226B8',
participants: ['applausetester@applause.expensifail.com', 'applausetester+perf2@applause.expensifail.com'],
isPinned: false,
@@ -1621,7 +1621,7 @@ export default () => ({
reportID: '98344717',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['applausetester+ihchat4@applause.expensifail.com'],
isPinned: false,
@@ -1643,7 +1643,7 @@ export default () => ({
reportID: '98345050',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake3@gmail.com'],
isPinned: false,
@@ -1665,7 +1665,7 @@ export default () => ({
reportID: '98345315',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake3@gmail.com', 'fake6@gmail.com', 'fake7@gmail.com', 'fake8@gmail.com'],
isPinned: false,
@@ -1687,7 +1687,7 @@ export default () => ({
reportID: '98345625',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake1@gmail.com', 'fake2@gmail.com', 'fake3@gmail.com', 'fake4@gmail.com', 'fake5@gmail.com', 'fake6@gmail.com', 'fake7@gmail.com', 'fake8@gmail.com'],
isPinned: false,
@@ -1709,7 +1709,7 @@ export default () => ({
reportID: '98345679',
reportName: '',
chatType: 'policyExpenseChat',
- ownerEmail: 'applausetester+perf2@applause.expensifail.com',
+ ownerAccountID: 17,
policyID: '1CE001C4B9F3CA54',
participants: ['fake3@gmail.com', 'applausetester+perf2@applause.expensifail.com'],
isPinned: false,
@@ -1731,7 +1731,7 @@ export default () => ({
reportID: '98414813',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['applausetester+ihchat4@applause.expensifail.com', 'fake6@gmail.com'],
isPinned: false,
@@ -1753,7 +1753,7 @@ export default () => ({
reportID: '98817646',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake6@gmail.com'],
isPinned: false,
@@ -1776,7 +1776,7 @@ export default () => ({
reportID: '358751490033727',
reportName: '#digimobileroom',
chatType: 'policyRoom',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'C28C2634DD7226B8',
participants: ['applausetester+pd1005@applause.expensifail.com'],
isPinned: false,
@@ -1798,7 +1798,7 @@ export default () => ({
reportID: '663424408122117',
reportName: '#announce',
chatType: 'policyAnnounce',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'A6511FF8D2EE7661',
participants: ['applausetester+perf2@applause.expensifail.com'],
isPinned: false,
@@ -1820,7 +1820,7 @@ export default () => ({
reportID: '944123936554214',
reportName: '',
chatType: 'policyExpenseChat',
- ownerEmail: 'applausetester+perf2@applause.expensifail.com',
+ ownerAccountID: 17,
policyID: 'A6511FF8D2EE7661',
participants: ['applausetester+perf2@applause.expensifail.com'],
isPinned: false,
@@ -1842,7 +1842,7 @@ export default () => ({
reportID: '2242399088152511',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: [
'concierge@expensify.com',
@@ -1870,7 +1870,7 @@ export default () => ({
reportID: '2576922422943214',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['applausetester+42222abb@applause.expensifail.com'],
isPinned: false,
@@ -1892,7 +1892,7 @@ export default () => ({
reportID: '2752461403207161',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake1@gmail.com'],
isPinned: false,
@@ -1914,7 +1914,7 @@ export default () => ({
reportID: '3785654888638968',
reportName: '#jack',
chatType: 'policyRoom',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'C28C2634DD7226B8',
participants: ['applausetester+pd1005@applause.expensifail.com'],
isPinned: false,
@@ -1936,7 +1936,7 @@ export default () => ({
reportID: '4867098979334014',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['christoph+hightraffic@margelo.io'],
isPinned: false,
@@ -1959,7 +1959,7 @@ export default () => ({
reportID: '5277760851229035',
reportName: '#kasper_tha_cat',
chatType: 'policyRoom',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'C28C2634DD7226B8',
participants: ['applausetester+pd1005@applause.expensifail.com'],
isPinned: false,
@@ -1983,7 +1983,7 @@ export default () => ({
reportID: '5324367938904284',
reportName: '#applause.expensifail.com',
chatType: 'domainAll',
- ownerEmail: '+@applause.expensifail.com',
+ ownerAccountID: 99,
policyID: '_FAKE_',
participants: ['applausetester+bernardo@applause.expensifail.com'],
isPinned: false,
@@ -2005,7 +2005,7 @@ export default () => ({
reportID: '5654270288238256',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: [
'andreylazutkinutest@gmail.com',
@@ -2036,7 +2036,7 @@ export default () => ({
reportID: '6194900075541844',
reportName: '#admins',
chatType: 'policyAdmins',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'A6511FF8D2EE7661',
participants: ['applausetester+perf2@applause.expensifail.com'],
isPinned: false,
@@ -2058,7 +2058,7 @@ export default () => ({
reportID: '6801643744224146',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: [
'concierge@expensify.com',
@@ -2090,7 +2090,7 @@ export default () => ({
reportID: '7658708888047100',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: [
'concierge@expensify.com',
@@ -2119,7 +2119,7 @@ export default () => ({
reportID: '7756405299640824',
reportName: '#jackd23',
chatType: 'policyRoom',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: 'C28C2634DD7226B8',
participants: ['applausetester+pd1005@applause.expensifail.com'],
isPinned: false,
@@ -2141,7 +2141,7 @@ export default () => ({
reportID: '7819732651025410',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake5@gmail.com'],
isPinned: false,
@@ -2161,7 +2161,7 @@ export default () => ({
},
report_2543745284790730: {
reportID: '2543745284790730',
- ownerEmail: 'applausetester+perf2@applause.expensifail.com',
+ ownerAccountID: 17,
managerEmail: 'fake6@gmail.com',
currency: 'USD',
chatReportID: '98817646',
@@ -2174,7 +2174,7 @@ export default () => ({
},
report_4249286573496381: {
reportID: '4249286573496381',
- ownerEmail: 'applausetester+perf2@applause.expensifail.com',
+ ownerAccountID: 17,
managerEmail: 'christoph+hightraffic@margelo.io',
currency: 'USD',
chatReportID: '4867098979334014',
diff --git a/src/libs/E2E/apiMocks/openReport.js b/src/libs/E2E/apiMocks/openReport.js
index 3eb9c7890299..d4c5acc976fe 100644
--- a/src/libs/E2E/apiMocks/openReport.js
+++ b/src/libs/E2E/apiMocks/openReport.js
@@ -7,7 +7,7 @@ export default () => ({
reportID: '98345625',
reportName: 'Chat Report',
chatType: '',
- ownerEmail: '__fake__',
+ ownerAccountID: 0,
policyID: '_FAKE_',
participants: ['fake1@gmail.com', 'fake2@gmail.com', 'fake3@gmail.com', 'fake4@gmail.com', 'fake5@gmail.com', 'fake6@gmail.com', 'fake7@gmail.com', 'fake8@gmail.com'],
isPinned: false,
@@ -67,7 +67,6 @@ export default () => ({
text: '123 Ios',
},
],
- actorEmail: 'fake3@gmail.com',
actorAccountID: 10773236,
message: [
{
diff --git a/src/libs/EmojiTrie.js b/src/libs/EmojiTrie.js
index 5f6b70418b22..c5448c340d81 100644
--- a/src/libs/EmojiTrie.js
+++ b/src/libs/EmojiTrie.js
@@ -1,37 +1,53 @@
-import emojis from '../../assets/emojis';
+import _ from 'underscore';
+import emojis, {localeEmojis} from '../../assets/emojis';
import Trie from './Trie';
import Timing from './actions/Timing';
import CONST from '../CONST';
Timing.start(CONST.TIMING.TRIE_INITIALIZATION);
-const emojisTrie = new Trie();
+const supportedLanguages = [CONST.LOCALES.DEFAULT, CONST.LOCALES.ES];
-// Inserting all emojis into the Trie object
-for (let i = 0; i < emojis.length; i++) {
- if (emojis[i].name) {
- const node = emojisTrie.search(emojis[i].name);
- if (!node) {
- emojisTrie.add(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: []});
- } else {
- emojisTrie.update(emojis[i].name, {code: emojis[i].code, types: emojis[i].types, suggestions: node.metaData.suggestions});
+function createTrie(lang = CONST.LOCALES.DEFAULT) {
+ const trie = new Trie();
+ const langEmojis = localeEmojis[lang];
+ const isDefaultLocale = lang === CONST.LOCALES.DEFAULT;
+
+ _.forEach(emojis, (item) => {
+ if (item.header) {
+ return;
}
- if (emojis[i].keywords) {
- for (let j = 0; j < emojis[i].keywords.length; j++) {
- const keywordNode = emojisTrie.search(emojis[i].keywords[j]);
- if (!keywordNode) {
- emojisTrie.add(emojis[i].keywords[j], {suggestions: [{code: emojis[i].code, types: emojis[i].types, name: emojis[i].name}]});
- } else {
- emojisTrie.update(emojis[i].keywords[j], {
- ...keywordNode.metaData,
- suggestions: [...keywordNode.metaData.suggestions, {code: emojis[i].code, types: emojis[i].types, name: emojis[i].name}],
- });
- }
+ const name = isDefaultLocale ? item.name : _.get(langEmojis, [item.code, 'name']);
+ const names = isDefaultLocale ? [name] : [...new Set([name, item.name])];
+ _.forEach(names, (nm) => {
+ const node = trie.search(nm);
+ if (!node) {
+ trie.add(nm, {code: item.code, types: item.types, name: nm, suggestions: []});
+ } else {
+ trie.update(nm, {code: item.code, types: item.types, name: nm, suggestions: node.metaData.suggestions});
+ }
+ });
+
+ const keywords = _.get(langEmojis, [item.code, 'keywords'], []).concat(isDefaultLocale ? [] : _.get(localeEmojis, [CONST.LOCALES.DEFAULT, item.code, 'keywords'], []));
+ for (let j = 0; j < keywords.length; j++) {
+ const keywordNode = trie.search(keywords[j]);
+ if (!keywordNode) {
+ trie.add(keywords[j], {suggestions: [{code: item.code, types: item.types, name}]});
+ } else {
+ trie.update(keywords[j], {
+ ...keywordNode.metaData,
+ suggestions: [...keywordNode.metaData.suggestions, {code: item.code, types: item.types, name}],
+ });
}
}
- }
+ });
+
+ return trie;
}
+
+const emojiTrie = _.reduce(supportedLanguages, (prev, cur) => ({...prev, [cur]: createTrie(cur)}), {});
+
Timing.end(CONST.TIMING.TRIE_INITIALIZATION);
-export default emojisTrie;
+export default emojiTrie;
diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index aaa6b7c82e93..25a9ef630acc 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -5,14 +5,64 @@ import Onyx from 'react-native-onyx';
import ONYXKEYS from '../ONYXKEYS';
import CONST from '../CONST';
import emojisTrie from './EmojiTrie';
-import FrequentlyUsed from '../../assets/images/history.svg';
+import * as Emojis from '../../assets/emojis';
let frequentlyUsedEmojis = [];
Onyx.connect({
key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
- callback: (val) => (frequentlyUsedEmojis = val),
+ callback: (val) => {
+ frequentlyUsedEmojis = _.map(val, (item) => {
+ const emoji = Emojis.emojiCodeTable[item.code];
+ if (emoji) {
+ return {name: emoji.name, code: emoji.code, count: item.count, lastUpdatedAt: item.lastUpdatedAt};
+ }
+ });
+ },
});
+/**
+ *
+ * @param {String} name
+ * @returns {Object}
+ */
+const findEmojiByName = (name) => Emojis.emojiNameTable[name];
+
+/**
+ *
+ * @param {String} code
+ * @returns {Object}
+ */
+const findEmojiByCode = (code) => Emojis.emojiCodeTable[code];
+
+/**
+ *
+ * @param {Object} emoji
+ * @param {String} lang
+ * @returns {String}
+ */
+const getEmojiName = (emoji, lang = CONST.LOCALES.DEFAULT) => {
+ if (lang === CONST.LOCALES.DEFAULT) {
+ return emoji.name;
+ }
+
+ return _.get(Emojis.localeEmojis, [lang, emoji.code, 'name'], '');
+};
+
+/**
+ * Given an English emoji name, get its localized version
+ *
+ * @param {String} name
+ * @param {String} lang
+ * @returns {String}
+ */
+const getLocalizedEmojiName = (name, lang) => {
+ if (lang === CONST.LOCALES.DEFAULT) {
+ return name;
+ }
+
+ return _.get(Emojis.localeEmojis, [lang, _.get(Emojis.emojiNameTable, [name, 'code'], ''), 'name'], '');
+};
+
/**
* Get the unicode code of an emoji in base 16.
* @param {String} input
@@ -156,16 +206,8 @@ function mergeEmojisWithFrequentlyUsedEmojis(emojis) {
return addSpacesToEmojiCategories(emojis);
}
- let allEmojis = [
- {
- header: true,
- code: 'frequentlyUsed',
- icon: FrequentlyUsed,
- },
- ];
-
- allEmojis = allEmojis.concat(frequentlyUsedEmojis, emojis);
- return addSpacesToEmojiCategories(allEmojis);
+ const mergedEmojis = [Emojis.categoryFrequentlyUsed].concat(frequentlyUsedEmojis, emojis);
+ return addSpacesToEmojiCategories(mergedEmojis);
}
/**
@@ -185,7 +227,9 @@ function getFrequentlyUsedEmojis(newEmoji) {
currentEmojiCount = frequentEmojiList[emojiIndex].count + 1;
frequentEmojiList.splice(emojiIndex, 1);
}
- const updatedEmoji = {...emoji, ...{count: currentEmojiCount, lastUpdatedAt: currentTimestamp}};
+
+ const {name, code} = Emojis.emojiCodeTable[emoji.code];
+ const updatedEmoji = {name, code, count: currentEmojiCount, lastUpdatedAt: currentTimestamp};
// We want to make sure the current emoji is added to the list
// Hence, we take one less than the current frequent used emojis
@@ -221,9 +265,15 @@ const getEmojiCodeWithSkinColor = (item, preferredSkinToneIndex) => {
*
* @param {String} text
* @param {Number} preferredSkinTone
+ * @param {String} lang
* @returns {Object}
*/
-function replaceEmojis(text, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE) {
+function replaceEmojis(text, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang = CONST.LOCALES.DEFAULT) {
+ const trie = emojisTrie[lang];
+ if (!trie) {
+ return {text, emojis: []};
+ }
+
let newText = text;
const emojis = [];
const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
@@ -232,7 +282,7 @@ function replaceEmojis(text, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE)
}
for (let i = 0; i < emojiData.length; i++) {
const name = emojiData[i].slice(1, -1);
- const checkEmoji = emojisTrie.search(name);
+ const checkEmoji = trie.search(name);
if (checkEmoji && checkEmoji.metaData.code) {
let emojiReplacement = getEmojiCodeWithSkinColor(checkEmoji.metaData, preferredSkinTone);
emojis.push({
@@ -257,34 +307,43 @@ function replaceEmojis(text, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE)
/**
* Suggest emojis when typing emojis prefix after colon
* @param {String} text
+ * @param {String} lang
* @param {Number} [limit] - matching emojis limit
* @returns {Array}
*/
-function suggestEmojis(text, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS) {
+function suggestEmojis(text, lang, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS) {
+ const trie = emojisTrie[lang];
+ if (!trie) {
+ return [];
+ }
+
const emojiData = text.match(CONST.REGEX.EMOJI_SUGGESTIONS);
- if (emojiData) {
- const matching = [];
- const nodes = emojisTrie.getAllMatchingWords(emojiData[0].toLowerCase().slice(1), limit);
- for (let j = 0; j < nodes.length; j++) {
- if (nodes[j].metaData.code && !_.find(matching, (obj) => obj.name === nodes[j].name)) {
- if (matching.length === limit) {
- return matching;
- }
- matching.push({code: nodes[j].metaData.code, name: nodes[j].name, types: nodes[j].metaData.types});
+ if (!emojiData) {
+ return [];
+ }
+
+ const matching = [];
+ const nodes = trie.getAllMatchingWords(emojiData[0].toLowerCase().slice(1), limit);
+ for (let j = 0; j < nodes.length; j++) {
+ if (nodes[j].metaData.code && !_.find(matching, (obj) => obj.name === nodes[j].name)) {
+ if (matching.length === limit) {
+ return matching;
}
- const suggestions = nodes[j].metaData.suggestions;
- for (let i = 0; i < suggestions.length; i++) {
- if (matching.length === limit) {
- return matching;
- }
- if (!_.find(matching, (obj) => obj.name === suggestions[i].name)) {
- matching.push(suggestions[i]);
- }
+ matching.push({code: nodes[j].metaData.code, name: nodes[j].name, types: nodes[j].metaData.types});
+ }
+ const suggestions = nodes[j].metaData.suggestions;
+ for (let i = 0; i < suggestions.length; i++) {
+ if (matching.length === limit) {
+ return matching;
+ }
+
+ const suggestion = suggestions[i];
+ if (!_.find(matching, (obj) => obj.name === suggestion.name)) {
+ matching.push({...suggestion});
}
}
- return matching;
}
- return [];
+ return matching;
}
/**
@@ -343,6 +402,10 @@ const getUniqueEmojiCodes = (emoji, users) => {
};
export {
+ findEmojiByName,
+ findEmojiByCode,
+ getEmojiName,
+ getLocalizedEmojiName,
getHeaderEmojis,
mergeEmojisWithFrequentlyUsedEmojis,
getFrequentlyUsedEmojis,
diff --git a/src/libs/ErrorUtils.js b/src/libs/ErrorUtils.js
index fdeae7809f58..95bbad5f5409 100644
--- a/src/libs/ErrorUtils.js
+++ b/src/libs/ErrorUtils.js
@@ -88,6 +88,26 @@ function getLatestErrorField(onyxData, fieldName) {
.value();
}
+/**
+ * @param {Object} onyxData
+ * @param {Object} onyxData.errorFields
+ * @param {String} fieldName
+ * @returns {Object}
+ */
+function getEarliestErrorField(onyxData, fieldName) {
+ const errorsForField = lodashGet(onyxData, ['errorFields', fieldName], {});
+
+ if (_.isEmpty(errorsForField)) {
+ return {};
+ }
+ return _.chain(errorsForField)
+ .keys()
+ .sortBy()
+ .map((key) => ({[key]: errorsForField[key]}))
+ .first()
+ .value();
+}
+
/**
* Method used to generate error message for given inputID
* @param {Object} errors - An object containing current errors in the form
@@ -112,4 +132,4 @@ function addErrorMessage(errors, inputID, message) {
}
}
-export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getLatestErrorMessage, getLatestErrorField, addErrorMessage};
+export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage};
diff --git a/src/libs/HttpUtils.js b/src/libs/HttpUtils.js
index e76517e2059f..5a8185a03038 100644
--- a/src/libs/HttpUtils.js
+++ b/src/libs/HttpUtils.js
@@ -22,9 +22,6 @@ Onyx.connect({
// We use the AbortController API to terminate pending request in `cancelPendingRequests`
let cancellationController = new AbortController();
-// To terminate pending ReconnectApp requests https://github.com/Expensify/App/issues/15627
-let reconnectAppCancellationController = new AbortController();
-
/**
* Send an HTTP request, and attempt to resolve the json response.
* If there is a network error, we'll set the application offline.
@@ -33,18 +30,12 @@ let reconnectAppCancellationController = new AbortController();
* @param {String} [method]
* @param {Object} [body]
* @param {Boolean} [canCancel]
- * @param {String} [command]
* @returns {Promise}
*/
-function processHTTPRequest(url, method = 'get', body = null, canCancel = true, command = '') {
- let signal;
- if (canCancel) {
- signal = command === CONST.NETWORK.COMMAND.RECONNECT_APP ? reconnectAppCancellationController.signal : cancellationController.signal;
- }
-
+function processHTTPRequest(url, method = 'get', body = null, canCancel = true) {
return fetch(url, {
// We hook requests to the same Controller signal, so we can cancel them all at once
- signal,
+ signal: canCancel ? cancellationController.signal : undefined,
method,
body,
})
@@ -136,12 +127,7 @@ function xhr(command, data, type = CONST.NETWORK.METHOD.POST, shouldUseSecure =
});
const url = ApiUtils.getCommandURL({shouldUseSecure, command});
- return processHTTPRequest(url, type, formData, data.canCancel, command);
-}
-
-function cancelPendingReconnectAppRequest() {
- reconnectAppCancellationController.abort();
- reconnectAppCancellationController = new AbortController();
+ return processHTTPRequest(url, type, formData, data.canCancel);
}
function cancelPendingRequests() {
@@ -150,11 +136,9 @@ function cancelPendingRequests() {
// We create a new instance because once `abort()` is called any future requests using the same controller would
// automatically get rejected: https://dom.spec.whatwg.org/#abortcontroller-api-integration
cancellationController = new AbortController();
- cancelPendingReconnectAppRequest();
}
export default {
xhr,
cancelPendingRequests,
- cancelPendingReconnectAppRequest,
};
diff --git a/src/libs/IOUUtils.js b/src/libs/IOUUtils.js
index 371243345eb6..093ed61061ea 100644
--- a/src/libs/IOUUtils.js
+++ b/src/libs/IOUUtils.js
@@ -25,8 +25,8 @@ function calculateAmount(numberOfParticipants, total, isDefaultUser = false) {
/**
* The owner of the IOU report is the account who is owed money and the manager is the one who owes money!
* In case the owner/manager swap, we need to update the owner of the IOU report and the report total, since it is always positive.
- * For example: if user1 owes user2 $10, then we have: {ownerEmail: user2, managerEmail: user1, total: $10 (a positive amount, owed to user2)}
- * If user1 requests $17 from user2, then we have: {ownerEmail: user1, managerEmail: user2, total: $7 (still a positive amount, but now owed to user1)}
+ * For example: if user1 owes user2 $10, then we have: {ownerAccountID: user2, managerEmail: user1, total: $10 (a positive amount, owed to user2)}
+ * If user1 requests $17 from user2, then we have: {ownerAccountID: user1, managerEmail: user2, total: $7 (still a positive amount, but now owed to user1)}
*
* @param {Object} iouReport
* @param {Number} actorAccountID
@@ -53,8 +53,6 @@ function updateIOUOwnerAndTotal(iouReport, actorAccountID, amount, currency, typ
// The total sign has changed and hence we need to flip the manager and owner of the report.
iouReportUpdate.ownerAccountID = iouReport.managerID;
iouReportUpdate.managerID = iouReport.ownerAccountID;
- iouReportUpdate.ownerEmail = iouReport.managerEmail;
- iouReportUpdate.managerEmail = iouReport.ownerEmail;
iouReportUpdate.total = -iouReportUpdate.total;
}
@@ -127,7 +125,7 @@ function isIOUReportPendingCurrencyConversion(reportActions, iouReport) {
* @returns {Boolean}
*/
function isValidMoneyRequestType(iouType) {
- return [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, CONST.IOU.MONEY_REQUEST_TYPE.SEND, CONST.IOU.MONEY_REQUEST_TYPE.SPLIT].includes(iouType);
+ return [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, CONST.IOU.MONEY_REQUEST_TYPE.SPLIT].includes(iouType);
}
export {calculateAmount, updateIOUOwnerAndTotal, getIOUReportActions, isIOUReportPendingCurrencyConversion, isValidMoneyRequestType};
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index e943d529d86b..c2fe7d3475e0 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -32,6 +32,7 @@ import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
import NAVIGATORS from '../../../NAVIGATORS';
import FullScreenNavigator from './Navigators/FullScreenNavigator';
import styles from '../../../styles/styles';
+import * as SessionUtils from '../../SessionUtils';
let currentUserEmail;
Onyx.connect({
@@ -119,7 +120,14 @@ class AuthScreens extends React.Component {
User.subscribeToUserEvents();
});
- App.openApp();
+ // If we are on this screen then we are "logged in", but the user might not have "just logged in". They could be reopening the app
+ // or returning from background. If so, we'll assume they have some app data already and we can call reconnectApp() instead of openApp().
+ if (SessionUtils.didUserLogInDuringSession()) {
+ App.openApp();
+ } else {
+ App.reconnectApp();
+ }
+
App.setUpPoliciesAndNavigate(this.props.session);
if (this.props.lastOpenedPublicRoomID) {
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 518ff33b0ad4..5b06e0c93c37 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -218,13 +218,6 @@ const ReportParticipantsModalStackNavigator = createModalStackNavigator([
},
name: 'ReportParticipants_Root',
},
- {
- getComponent: () => {
- const ProfilePage = require('../../../pages/ProfilePage').default;
- return ProfilePage;
- },
- name: 'ReportParticipants_Details',
- },
]);
const SearchModalStackNavigator = createModalStackNavigator([
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 088d1973570c..a04e9bfc10ec 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -2,111 +2,99 @@ import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import * as ModalStackNavigators from '../ModalStackNavigators';
-import defaultModalScreenOptions from '../defaultModalScreenOptions';
+import RHPScreenOptions from '../RHPScreenOptions';
const Stack = createStackNavigator();
function RigthModalNavigator() {
return (
-
+
diff --git a/src/libs/Navigation/AppNavigator/defaultModalScreenOptions.js b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
similarity index 80%
rename from src/libs/Navigation/AppNavigator/defaultModalScreenOptions.js
rename to src/libs/Navigation/AppNavigator/RHPScreenOptions.js
index 03f5b1ba75e3..d7448dcf2314 100644
--- a/src/libs/Navigation/AppNavigator/defaultModalScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
@@ -1,7 +1,7 @@
import {CardStyleInterpolators} from '@react-navigation/stack';
import styles from '../../../styles/styles';
-const defaultModalScreenOptions = {
+const RHPScreenOptions = {
headerShown: false,
animationEnabled: true,
gestureDirection: 'horizontal',
@@ -9,4 +9,4 @@ const defaultModalScreenOptions = {
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
};
-export default defaultModalScreenOptions;
+export default RHPScreenOptions;
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 42c7bcdf2065..4e7e874967ef 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -20,6 +20,15 @@ const navigationIsReadyPromise = new Promise((resolve) => {
let pendingRoute = null;
+let shouldPopAllStateOnUP = false;
+
+/**
+ * Inform the navigation that next time user presses UP we should pop all the state back to LHN.
+ */
+function setShouldPopAllStateOnUP() {
+ shouldPopAllStateOnUP = true;
+}
+
/**
* @param {String} methodName
* @param {Object} params
@@ -85,12 +94,21 @@ function navigate(route = ROUTES.HOME, type) {
/**
* @param {String} fallbackRoute - Fallback route if pop/goBack action should, but is not possible within RHP
* @param {Bool} shouldEnforceFallback - Enforces navigation to fallback route
+ * @param {Bool} shouldPopToTop - Should we navigate to LHN on back press
*/
-function goBack(fallbackRoute = ROUTES.HOME, shouldEnforceFallback = false) {
+function goBack(fallbackRoute = ROUTES.HOME, shouldEnforceFallback = false, shouldPopToTop = false) {
if (!canNavigate('goBack')) {
return;
}
+ if (shouldPopToTop) {
+ if (shouldPopAllStateOnUP) {
+ shouldPopAllStateOnUP = false;
+ navigationRef.current.dispatch(StackActions.popToTop());
+ return;
+ }
+ }
+
if (!navigationRef.current.canGoBack()) {
Log.hmmm('[Navigation] Unable to go back');
return;
@@ -169,19 +187,6 @@ function getActiveRoute() {
return '';
}
-/**
- * @returns {String}
- */
-function getReportIDFromRoute() {
- if (!navigationRef.current) {
- return '';
- }
-
- const drawerState = lodashGet(navigationRef.current.getState(), ['routes', 0, 'state']);
- const reportRoute = lodashGet(drawerState, ['routes', 0]);
- return lodashGet(reportRoute, ['params', 'reportID'], '');
-}
-
/**
* Check whether the passed route is currently Active or not.
*
@@ -222,6 +227,7 @@ function setIsNavigationReady() {
}
export default {
+ setShouldPopAllStateOnUP,
canNavigate,
navigate,
setParams,
@@ -231,7 +237,6 @@ export default {
goBack,
isNavigationReady,
setIsNavigationReady,
- getReportIDFromRoute,
getTopmostReportId,
};
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 968e6ecc1603..23c320eb991c 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useEffect} from 'react';
import PropTypes from 'prop-types';
import {NavigationContainer, DefaultTheme, getPathFromState} from '@react-navigation/native';
import {useFlipper} from '@react-navigation/devtools';
@@ -53,10 +53,25 @@ function parseAndLogRoute(state) {
function NavigationRoot(props) {
useFlipper(navigationRef);
const navigationStateRef = useRef(undefined);
+ const firstRenderRef = useRef(true);
const {updateCurrentReportID} = useCurrentReportID();
const {isSmallScreenWidth} = useWindowDimensions();
+ useEffect(() => {
+ if (firstRenderRef.current) {
+ // we don't want to make the report back button go back to LHN if the user
+ // started on the small screen so we don't set it on the first render
+ // making it only work on consecutive changes of the screen size
+ firstRenderRef.current = false;
+ return;
+ }
+ if (!isSmallScreenWidth) {
+ return;
+ }
+ Navigation.setShouldPopAllStateOnUP();
+ }, [isSmallScreenWidth]);
+
const prevStatusBarBackgroundColor = useRef(themeColors.appBG);
const statusBarBackgroundColor = useRef(themeColors.appBG);
const statusBarAnimation = useSharedValue(0);
diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.js
index 1d219c450ecc..c610ae710992 100644
--- a/src/libs/Navigation/linkTo.js
+++ b/src/libs/Navigation/linkTo.js
@@ -5,6 +5,41 @@ import linkingConfig from './linkingConfig';
import getTopmostReportId from './getTopmostReportId';
import getStateFromPath from './getStateFromPath';
+/**
+ * Motivation for this function is described in NAVIGATION.md
+ *
+ * @param {Object} action action generated by getActionFromState
+ * @param {Object} state The root state
+ * @returns {Object} minimalAction minimal action is the action that we should dispatch
+ */
+function getMinimalAction(action, state) {
+ let currentAction = action;
+ let currentState = state;
+ let currentTargetKey = null;
+
+ while (currentState.routes[currentState.index].name === currentAction.payload.name) {
+ if (!currentState.routes[currentState.index].state) {
+ break;
+ }
+
+ currentState = currentState.routes[currentState.index].state;
+
+ currentTargetKey = currentState.key;
+
+ // Creating new smaller action
+ currentAction = {
+ type: currentAction.type,
+ payload: {
+ name: currentAction.payload.params.screen,
+ params: currentAction.payload.params.params,
+ path: currentAction.payload.params.path,
+ },
+ target: currentTargetKey,
+ };
+ }
+ return currentAction;
+}
+
export default function linkTo(navigation, path, type) {
if (navigation === undefined) {
throw new Error("Couldn't find a navigation object. Is your component inside a screen in a navigator?");
@@ -29,8 +64,8 @@ export default function linkTo(navigation, path, type) {
if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) {
action.type = 'PUSH';
- // If this action is navigating to the RightModalNavigator and the last route on the root navigator is also RightModalNavigator
- // then we want to replace the current RHP state with new one
+ // If the type is UP, we deeplinked into one of the RHP flows and we want to replace the current screen with the previous one in the flow
+ // and at the same time we want the back button to go to the page we were before the deeplink
} else if (type === 'UP') {
action.type = 'REPLACE';
@@ -40,6 +75,14 @@ export default function linkTo(navigation, path, type) {
}
}
+ if (action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+ const minimalAction = getMinimalAction(action, navigation.getRootState());
+ if (minimalAction) {
+ root.dispatch(minimalAction);
+ return;
+ }
+ }
+
if (action !== undefined) {
root.dispatch(action);
} else {
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 204e81dfec29..551d5cf7094e 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -289,7 +289,6 @@ export default {
Participants: {
screens: {
ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS,
- ReportParticipants_Details: ROUTES.REPORT_PARTICIPANT,
},
},
MoneyRequest: {
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index aa3f600cb9d7..01a3b93d4b8e 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -62,7 +62,7 @@ const iouReports = {};
Onyx.connect({
key: ONYXKEYS.COLLECTION.REPORT,
callback: (report, key) => {
- if (!report || !key || !report.ownerEmail) {
+ if (!report || !key || !_.isNumber(report.ownerAccountID)) {
return;
}
@@ -423,7 +423,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
brickRoadIndicator: null,
icons: null,
tooltipText: null,
- ownerEmail: null,
+ ownerAccountID: null,
subtitle: null,
participantsList: null,
accountID: 0,
@@ -444,6 +444,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
isArchivedRoom: false,
shouldShowSubscript: false,
isPolicyExpenseChat: false,
+ isExpenseReport: false,
};
const personalDetailMap = getPersonalDetailsForAccountIDs(accountIDs, personalDetails);
@@ -460,6 +461,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
result.isDefaultRoom = ReportUtils.isDefaultRoom(report);
result.isArchivedRoom = ReportUtils.isArchivedRoom(report);
result.isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+ result.isExpenseReport = ReportUtils.isExpenseReport(report);
result.isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report);
result.isThread = ReportUtils.isChatThread(report);
result.isTaskReport = ReportUtils.isTaskReport(report);
@@ -467,7 +469,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
result.allReportErrors = getAllReportErrors(report, reportActions);
result.brickRoadIndicator = !_.isEmpty(result.allReportErrors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
result.pendingAction = report.pendingFields ? report.pendingFields.addWorkspaceRoom || report.pendingFields.createChat : null;
- result.ownerEmail = report.ownerEmail;
+ result.ownerAccountID = report.ownerAccountID;
result.reportID = report.reportID;
result.isUnread = ReportUtils.isUnread(report);
result.hasDraftComment = report.hasDraft;
@@ -620,11 +622,11 @@ function getOptions(
let recentReportOptions = [];
let personalDetailsOptions = [];
const reportMapForAccountIDs = {};
- const parsedPhoneNumber = parsePhoneNumber(LoginUtils.appendCountryCode(searchInputValue));
- const searchValue = parsedPhoneNumber.possible ? parsedPhoneNumber.number.e164 : searchInputValue;
+ const parsedPhoneNumber = parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(searchInputValue)));
+ const searchValue = parsedPhoneNumber.possible ? parsedPhoneNumber.number.e164 : searchInputValue.toLowerCase();
// Filter out all the reports that shouldn't be displayed
- const filteredReports = _.filter(reports, (report) => ReportUtils.shouldReportBeInOptionList(report, Navigation.getReportIDFromRoute(), false, iouReports, betas, policies));
+ const filteredReports = _.filter(reports, (report) => ReportUtils.shouldReportBeInOptionList(report, Navigation.getTopmostReportId(), false, iouReports, betas, policies));
// Sorting the reports works like this:
// - Order everything by the last message timestamp (descending)
@@ -716,7 +718,7 @@ function getOptions(
}
const isCurrentUserOwnedPolicyExpenseChatThatCouldShow =
- reportOption.isPolicyExpenseChat && reportOption.ownerEmail === currentUserLogin && includeOwnedWorkspaceChats && !reportOption.isArchivedRoom;
+ reportOption.isPolicyExpenseChat && reportOption.ownerAccountID === currentUserAccountID && includeOwnedWorkspaceChats && !reportOption.isArchivedRoom;
// Skip if we aren't including multiple participant reports and this report has multiple participants
if (!isCurrentUserOwnedPolicyExpenseChatThatCouldShow && !includeMultipleParticipantReports && !reportOption.login) {
@@ -773,7 +775,7 @@ function getOptions(
(noOptions || noOptionsMatchExactly) &&
!isCurrentUser({login: searchValue}) &&
_.every(selectedOptions, (option) => option.login !== searchValue) &&
- ((Str.isValidEmail(searchValue) && !Str.isDomainEmail(searchValue)) || parsedPhoneNumber.possible) &&
+ ((Str.isValidEmail(searchValue) && !Str.isDomainEmail(searchValue) && !Str.endsWith(searchValue, CONST.SMS.DOMAIN)) || parsedPhoneNumber.possible) &&
!_.find(loginOptionsToExclude, (loginOptionToExclude) => loginOptionToExclude.login === addSMSDomainIfPhoneNumber(searchValue).toLowerCase()) &&
(searchValue !== CONST.EMAIL.CHRONOS || Permissions.canUseChronos(betas))
) {
diff --git a/src/libs/Permissions.js b/src/libs/Permissions.js
index cce0fc984dab..3617900109f2 100644
--- a/src/libs/Permissions.js
+++ b/src/libs/Permissions.js
@@ -43,11 +43,12 @@ function canUseDefaultRooms(betas) {
}
/**
- * @param {Array} betas
+ * IOU Send feature is temporarily disabled.
+ *
* @returns {Boolean}
*/
-function canUseIOUSend(betas) {
- return _.contains(betas, CONST.BETAS.IOU_SEND) || canUseAllBetas(betas);
+function canUseIOUSend() {
+ return false;
}
/**
@@ -101,6 +102,14 @@ function canUseTasks(betas) {
return _.contains(betas, CONST.BETAS.TASKS) || canUseAllBetas(betas);
}
+/**
+ * @param {Array} betas
+ * @returns {Boolean}
+ */
+function canUseScanReceipts(betas) {
+ return _.contains(betas, CONST.BETAS.SCAN_RECEIPTS) || canUseAllBetas(betas);
+}
+
export default {
canUseChronos,
canUseIOU,
@@ -113,4 +122,5 @@ export default {
canUsePolicyExpenseChat,
canUsePasswordlessLogins,
canUseTasks,
+ canUseScanReceipts,
};
diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js
index bead882e2e15..9a280711e947 100644
--- a/src/libs/ReportActionsUtils.js
+++ b/src/libs/ReportActionsUtils.js
@@ -11,6 +11,19 @@ import Log from './Log';
import * as CurrencyUtils from './CurrencyUtils';
import isReportMessageAttachment from './isReportMessageAttachment';
+const allReports = {};
+Onyx.connect({
+ key: ONYXKEYS.COLLECTION.REPORT,
+ callback: (report, key) => {
+ if (!key || !report) {
+ return;
+ }
+
+ const reportID = CollectionUtils.extractCollectionItemID(key);
+ allReports[reportID] = report;
+ },
+});
+
const allReportActions = {};
Onyx.connect({
key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
@@ -253,7 +266,7 @@ function isConsecutiveActionMadeByPreviousActor(reportActions, actionIndex) {
return false;
}
- return currentAction.actorEmail === previousAction.actorEmail;
+ return currentAction.actorAccountID === previousAction.actorAccountID;
}
/**
@@ -440,6 +453,45 @@ function getReportAction(reportID, reportActionID) {
return lodashGet(allReportActions, [reportID, reportActionID], {});
}
+/**
+ * @returns {string}
+ */
+function getMostRecentReportActionLastModified() {
+ // Start with the oldest date possible
+ let mostRecentReportActionLastModified = new Date(0).toISOString();
+
+ // Flatten all the actions
+ // Loop over them all to find the one that is the most recent
+ const flatReportActions = _.flatten(_.map(allReportActions, (actions) => _.values(actions)));
+ _.each(flatReportActions, (action) => {
+ // Pending actions should not be counted here as a user could create a comment or some other action while offline and the server might know about
+ // messages they have not seen yet.
+ if (!_.isEmpty(action.pendingAction)) {
+ return;
+ }
+
+ const lastModified = action.lastModified || action.created;
+ if (lastModified < mostRecentReportActionLastModified) {
+ return;
+ }
+
+ mostRecentReportActionLastModified = lastModified;
+ });
+
+ // We might not have actions so we also look at the report objects to see if any have a lastVisibleActionLastModified that is more recent. We don't need to get
+ // any reports that have been updated before either a recently updated report or reportAction as we should be up to date on these
+ _.each(allReports, (report) => {
+ const reportLastVisibleActionLastModified = report.lastVisibleActionLastModified || report.lastVisibleActionCreated;
+ if (!reportLastVisibleActionLastModified || reportLastVisibleActionLastModified < mostRecentReportActionLastModified) {
+ return;
+ }
+
+ mostRecentReportActionLastModified = reportLastVisibleActionLastModified;
+ });
+
+ return mostRecentReportActionLastModified;
+}
+
/**
* @param {*} chatReportID
* @param {*} iouReportID
@@ -496,6 +548,7 @@ export {
isMoneyRequestAction,
hasCommentThread,
getLinkedTransactionID,
+ getMostRecentReportActionLastModified,
getReportPreviewAction,
isCreatedTaskReportAction,
getParentReportAction,
diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js
deleted file mode 100644
index 1dd9922b33b8..000000000000
--- a/src/libs/ReportScrollManager/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
- * we are editing a comment.
- *
- * @param {Object} ref
- * @param {Object} index
- * @param {Boolean} isEditing
- */
-function scrollToIndex(ref, index, isEditing) {
- if (!ref.current || isEditing) {
- return;
- }
-
- ref.current.scrollToIndex(index);
-}
-
-/**
- * Scroll to the bottom of the flatlist.
- *
- * @param {Object} ref
- */
-function scrollToBottom(ref) {
- if (!ref.current) {
- return;
- }
-
- ref.current.scrollToOffset({animated: false, offset: 0});
-}
-
-export {scrollToIndex, scrollToBottom};
diff --git a/src/libs/ReportScrollManager/index.native.js b/src/libs/ReportScrollManager/index.native.js
deleted file mode 100644
index 570d3a72acac..000000000000
--- a/src/libs/ReportScrollManager/index.native.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Scroll to the provided index.
- *
- * @param {Object} ref
- * @param {Object} index
- */
-function scrollToIndex(ref, index) {
- if (!ref.current) {
- return;
- }
-
- ref.current.scrollToIndex(index);
-}
-
-/**
- * Scroll to the bottom of the flatlist.
- *
- * @param {Object} ref
- */
-function scrollToBottom(ref) {
- if (!ref.current) {
- return;
- }
-
- ref.current.scrollToOffset({animated: false, offset: 0});
-}
-
-export {scrollToIndex, scrollToBottom};
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 5de8abb15ed6..f7671cdef177 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -23,6 +23,8 @@ import * as UserUtils from './UserUtils';
let currentUserEmail;
let currentUserAccountID;
+let isAnonymousUser;
+
Onyx.connect({
key: ONYXKEYS.SESSION,
callback: (val) => {
@@ -33,15 +35,10 @@ Onyx.connect({
currentUserEmail = val.email;
currentUserAccountID = val.accountID;
+ isAnonymousUser = val.authTokenType === 'anonymousAccount';
},
});
-let loginList;
-Onyx.connect({
- key: ONYXKEYS.LOGIN_LIST,
- callback: (val) => (loginList = _.isEmpty(val) ? [] : _.keys(val)),
-});
-
let preferredLocale = CONST.LOCALES.DEFAULT;
Onyx.connect({
key: ONYXKEYS.NVP_PREFERRED_LOCALE,
@@ -146,13 +143,13 @@ function isTaskReport(report) {
}
/**
- * Checks if a task is completed
+ * Checks if a report is an open task report.
*
* @param {Object} report
* @returns {Boolean}
*/
-function isTaskCompleted(report) {
- return lodashGet(report, 'stateNum') === CONST.REPORT.STATE_NUM.SUBMITTED && lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.APPROVED;
+function isOpenTaskReport(report) {
+ return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS.OPEN;
}
/**
@@ -161,6 +158,20 @@ function isTaskCompleted(report) {
* @param {Object} report
* @returns {Boolean}
*/
+function isCanceledTaskReport(report) {
+ return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.CLOSED;
+}
+
+/**
+ * Checks if a report is a completed task report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isCompletedTaskReport(report) {
+ return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.APPROVED;
+}
+
function isTaskAssignee(report) {
return lodashGet(report, 'managerEmail') === currentUserEmail;
}
@@ -202,7 +213,7 @@ function sortReportsByLastRead(reports) {
*/
function canEditReportAction(reportAction) {
return (
- reportAction.actorEmail === currentUserEmail &&
+ reportAction.actorAccountID === currentUserAccountID &&
reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
!isReportMessageAttachment(lodashGet(reportAction, ['message', 0], {})) &&
!ReportActionsUtils.isDeletedAction(reportAction) &&
@@ -211,24 +222,6 @@ function canEditReportAction(reportAction) {
);
}
-/**
- * Can only flag if:
- *
- * - It was written by someone else
- * - It's an ADDCOMMENT that is not an attachment
- *
- * @param {Object} reportAction
- * @returns {Boolean}
- */
-function canFlagReportAction(reportAction) {
- return (
- !loginList.includes(reportAction.actorEmail) &&
- reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
- !ReportActionsUtils.isDeletedAction(reportAction) &&
- !ReportActionsUtils.isCreatedTaskReportAction(reportAction)
- );
-}
-
/**
* Whether the Money Request report is settled
*
@@ -256,7 +249,7 @@ function canDeleteReportAction(reportAction, reportID) {
) {
return false;
}
- if (reportAction.actorEmail === currentUserEmail) {
+ if (reportAction.actorAccountID === currentUserAccountID) {
return true;
}
const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
@@ -377,6 +370,20 @@ function getBankAccountRoute(report) {
return isPolicyExpenseChat(report) ? ROUTES.getBankAccountRoute('', report.policyID) : ROUTES.SETTINGS_ADD_BANK_ACCOUNT;
}
+/**
+ * Checks if a report is a task report from a policy expense chat.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isWorkspaceTaskReport(report) {
+ if (!isTaskReport(report)) {
+ return false;
+ }
+ const parentReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`];
+ return isPolicyExpenseChat(parentReport);
+}
+
/**
* Returns true if report has a parent
*
@@ -495,7 +502,7 @@ function isArchivedRoom(report) {
*/
function getPolicyName(report, returnEmptyIfNotFound = false) {
const noPolicyFound = returnEmptyIfNotFound ? '' : Localize.translateLocal('workspace.common.unavailable');
- if (report === undefined) {
+ if (_.isEmpty(report)) {
return noPolicyFound;
}
@@ -552,6 +559,26 @@ function isPolicyExpenseChatAdmin(report, policies) {
return policyRole === CONST.POLICY.ROLE.ADMIN;
}
+/**
+ * Returns true if report is a DM/Group DM chat.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isDM(report) {
+ return !getChatType(report);
+}
+
+/**
+ * If the report is a thread and has a chat type set, it is a workspace chat.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isWorkspaceThread(report) {
+ return Boolean(isThread(report) && !isDM(report));
+}
+
/**
* Returns true if reportAction has a child.
*
@@ -573,6 +600,32 @@ function isThreadFirstChat(reportAction, reportID) {
return !_.isUndefined(reportAction.childReportID) && reportAction.childReportID.toString() === reportID;
}
+/**
+ * Checks if a report is a child report.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isChildReport(report) {
+ return isThread(report) || isTaskReport(report);
+}
+
+/**
+ * An Expense Request is a thread where the parent report is an Expense Report and
+ * the parentReportAction is a transaction.
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isExpenseRequest(report) {
+ if (isThread(report)) {
+ const parentReportAction = ReportActionsUtils.getParentReportAction(report);
+ const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+ return isExpenseReport(parentReport) && ReportActionsUtils.isTransactionThread(parentReportAction);
+ }
+ return false;
+}
+
/**
* Get welcome message based on room type
* @param {Object} report
@@ -721,6 +774,24 @@ function getIconsForParticipants(participants, personalDetails) {
return avatars;
}
+/**
+ * Given a report, return the associated workspace icon.
+ *
+ * @param {Object} report
+ * @returns {Object}
+ */
+function getWorkspaceIcon(report) {
+ const workspaceName = getPolicyName(report);
+ const policyExpenseChatAvatarSource = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar']) || getDefaultWorkspaceAvatar(workspaceName);
+ const workspaceIcon = {
+ source: policyExpenseChatAvatarSource,
+ type: CONST.ICON_TYPE_WORKSPACE,
+ name: workspaceName,
+ id: -1,
+ };
+ return workspaceIcon;
+}
+
/**
* Returns the appropriate icons for the given chat report using the stored personalDetails.
* The Avatar sources can be URLs or Icon components according to the chat type.
@@ -733,107 +804,104 @@ function getIconsForParticipants(participants, personalDetails) {
* @param {Number} [defaultAccountID]
* @returns {Array<*>}
*/
-function getIcons(report, personalDetails, defaultIcon = null, isPayer = false, defaultName = '', defaultAccountID = undefined) {
- const result = {
- source: '',
- type: CONST.ICON_TYPE_AVATAR,
- name: '',
- };
-
+function getIcons(report, personalDetails, defaultIcon = null, isPayer = false) {
if (_.isEmpty(report)) {
- result.source = defaultIcon || Expensicons.FallbackAvatar;
- result.name = defaultName || '';
- result.id = defaultAccountID;
- return [result];
+ const fallbackIcon = {
+ source: defaultIcon || Expensicons.FallbackAvatar,
+ type: CONST.ICON_TYPE_AVATAR,
+ name: '',
+ id: -1,
+ };
+ return [fallbackIcon];
}
- if (isArchivedRoom(report)) {
- result.source = Expensicons.DeletedRoomAvatar;
- return [result];
+ if (isExpenseRequest(report)) {
+ const parentReportAction = ReportActionsUtils.getParentReportAction(report);
+ const workspaceIcon = getWorkspaceIcon(report);
+ const memberIcon = {
+ source: UserUtils.getAvatar(lodashGet(personalDetails, [parentReportAction.actorAccountID, 'avatar']), parentReportAction.actorAccountID),
+ id: parentReportAction.actorAccountID,
+ type: CONST.ICON_TYPE_AVATAR,
+ name: lodashGet(personalDetails, [parentReportAction.actorAccountID, 'displayName'], ''),
+ };
+
+ return [memberIcon, workspaceIcon];
}
if (isChatThread(report)) {
const parentReportAction = ReportActionsUtils.getParentReportAction(report);
- const actorEmail = lodashGet(parentReportAction, 'actorEmail', '');
- const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', '');
+ const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
+ const actorDisplayName = lodashGet(allPersonalDetails, [actorAccountID, 'displayName'], '');
const actorIcon = {
id: actorAccountID,
source: UserUtils.getAvatar(lodashGet(personalDetails, [actorAccountID, 'avatar']), actorAccountID),
- name: actorEmail,
+ name: actorDisplayName,
type: CONST.ICON_TYPE_AVATAR,
};
+ if (isWorkspaceThread(report)) {
+ const workspaceIcon = getWorkspaceIcon(report);
+ return [actorIcon, workspaceIcon];
+ }
return [actorIcon];
}
if (isTaskReport(report)) {
- const ownerEmail = report.ownerEmail || '';
const ownerIcon = {
id: report.ownerAccountID,
source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
- name: ownerEmail,
type: CONST.ICON_TYPE_AVATAR,
+ name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
};
+ if (isWorkspaceTaskReport(report)) {
+ const workspaceIcon = getWorkspaceIcon(report);
+ return [ownerIcon, workspaceIcon];
+ }
+
return [ownerIcon];
}
if (isDomainRoom(report)) {
- result.source = Expensicons.DomainRoomAvatar;
- return [result];
- }
- if (isAdminRoom(report)) {
- result.source = Expensicons.AdminRoomAvatar;
- return [result];
- }
- if (isAnnounceRoom(report)) {
- result.source = Expensicons.AnnounceRoomAvatar;
- return [result];
+ // Get domain name after the #. Domain Rooms use our default workspace avatar pattern.
+ const domainName = report.reportName.substring(1);
+ const policyExpenseChatAvatarSource = getDefaultWorkspaceAvatar(domainName);
+ const domainIcon = {
+ source: policyExpenseChatAvatarSource,
+ type: CONST.ICON_TYPE_WORKSPACE,
+ name: domainName,
+ id: -1,
+ };
+ return [domainIcon];
}
- if (isChatRoom(report)) {
- result.source = Expensicons.ActiveRoomAvatar;
- return [result];
+ if (isAdminRoom(report) || isAnnounceRoom(report) || isChatRoom(report) || isArchivedRoom(report)) {
+ const workspaceIcon = getWorkspaceIcon(report);
+ return [workspaceIcon];
}
if (isPolicyExpenseChat(report) || isExpenseReport(report)) {
- const workspaceName = getPolicyName(report);
-
- const policyExpenseChatAvatarSource = getWorkspaceAvatar(report);
-
- // Return the workspace avatar if the user is the owner of the policy expense chat
- if (report.isOwnPolicyExpenseChat && !isExpenseReport(report)) {
- result.source = policyExpenseChatAvatarSource;
- result.type = CONST.ICON_TYPE_WORKSPACE;
- result.name = workspaceName;
- return [result];
- }
-
- const adminIcon = {
- id: report.ownerAccountID,
+ const workspaceIcon = getWorkspaceIcon(report);
+ const memberIcon = {
source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
- name: report.ownerEmail,
+ id: report.ownerAccountID,
+ type: CONST.ICON_TYPE_AVATAR,
+ name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
+ };
+ return isExpenseReport(report) ? [memberIcon, workspaceIcon] : [workspaceIcon, memberIcon];
+ }
+ if (isIOUReport(report)) {
+ const managerIcon = {
+ source: UserUtils.getAvatar(lodashGet(personalDetails, [report.managerID, 'avatar']), report.managerID),
+ id: report.managerID,
type: CONST.ICON_TYPE_AVATAR,
+ name: lodashGet(personalDetails, [report.managerID, 'displayName'], ''),
};
- const workspaceIcon = {
- source: policyExpenseChatAvatarSource,
- type: CONST.ICON_TYPE_WORKSPACE,
- name: workspaceName,
+ const ownerIcon = {
+ id: report.ownerAccountID,
+ source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
+ type: CONST.ICON_TYPE_AVATAR,
+ name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
};
- // If the user is an admin, return avatar source of the other participant of the report
- // (their workspace chat) and the avatar source of the workspace
- return [adminIcon, workspaceIcon];
- }
- if (isIOUReport(report)) {
- const email = isPayer ? report.managerEmail : report.ownerEmail;
- const accountID = isPayer ? report.managerID : report.ownerAccountID;
- return [
- {
- id: accountID,
- source: UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar']), accountID),
- name: email,
- type: CONST.ICON_TYPE_AVATAR,
- },
- ];
+ return isPayer ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon];
}
-
return getIconsForParticipants(report.participantAccountIDs, personalDetails);
}
@@ -960,7 +1028,7 @@ function getMoneyRequestTotal(report, moneyRequestReports = {}) {
* @returns {String}
*/
function getPolicyExpenseChatName(report) {
- const reportOwnerDisplayName = getDisplayNameForParticipant(report.ownerAccountID) || report.ownerEmail || report.reportName;
+ const reportOwnerDisplayName = getDisplayNameForParticipant(report.ownerAccountID) || lodashGet(allPersonalDetails, [report.ownerAccountID, 'login']) || report.reportName;
// If the policy expense chat is owned by this user, use the name of the policy as the report name.
if (report.isOwnPolicyExpenseChat) {
@@ -1080,8 +1148,8 @@ function getReportName(report) {
}
// Not a room or PolicyExpenseChat, generate title from participants
- const participants = (report && report.participantAccountIDs) || [];
- const participantsWithoutCurrentUser = _.without(participants, currentUserAccountID);
+ const participantAccountIDs = (report && report.participantAccountIDs) || [];
+ const participantsWithoutCurrentUser = _.without(participantAccountIDs, currentUserAccountID);
const isMultipleParticipantReport = participantsWithoutCurrentUser.length > 1;
return _.map(participantsWithoutCurrentUser, (accountID) => getDisplayNameForParticipant(accountID, isMultipleParticipantReport)).join(', ');
@@ -1094,7 +1162,7 @@ function getReportName(report) {
* @returns {Object}
*/
function getRootReportAndWorkspaceName(report) {
- if (isThread(report) && !isMoneyRequestReport(report)) {
+ if (isChildReport(report) && !isMoneyRequestReport(report)) {
const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
return getRootReportAndWorkspaceName(parentReport);
}
@@ -1243,7 +1311,6 @@ function buildOptimisticAddCommentReportAction(text, file) {
reportAction: {
reportActionID: NumberUtils.rand64(),
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
- actorEmail: currentUserEmail,
actorAccountID: currentUserAccountID,
person: [
{
@@ -1295,7 +1362,6 @@ function buildOptimisticTaskCommentReportAction(taskReportID, taskTitle, taskAss
reportAction.reportAction.parentReportID = parentReportID;
reportAction.reportAction.childType = CONST.REPORT.TYPE.TASK;
reportAction.reportAction.childReportName = taskTitle;
- reportAction.reportAction.childManagerEmail = taskAssignee;
reportAction.reportAction.childManagerAccountID = taskAssigneeAccountID;
reportAction.reportAction.childStatusNum = CONST.REPORT.STATUS.OPEN;
reportAction.reportAction.childStateNum = CONST.REPORT.STATE_NUM.OPEN;
@@ -1389,7 +1455,8 @@ function buildOptimisticExpenseReport(chatReportID, policyID, payeeEmail, payeeA
* @returns {Array}
*/
function getIOUReportActionMessage(type, total, comment, currency, paymentType = '', isSettlingUp = false) {
- const amount = NumberFormatUtils.format(preferredLocale, total / 100, {style: 'currency', currency});
+ const currencyUnit = CurrencyUtils.getCurrencyUnit(currency);
+ const amount = NumberFormatUtils.format(preferredLocale, total / currencyUnit, {style: 'currency', currency});
let paymentMethodMessage;
switch (paymentType) {
case CONST.IOU.PAYMENT_TYPE.ELSEWHERE:
@@ -1469,14 +1536,12 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
// IOUs of type split only exist in group DMs and those don't have an iouReport so we need to delete the IOUReportID key
if (type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT) {
delete originalMessage.IOUReportID;
- originalMessage.participants = [currentUserEmail, ..._.pluck(participants, 'login')];
originalMessage.participantAccountIDs = [currentUserAccountID, ..._.pluck(participants, 'accountID')];
}
return {
actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
actorAccountID: currentUserAccountID,
- actorEmail: currentUserEmail,
automatic: false,
avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatar(currentUserAccountID)),
isAttachment: false,
@@ -1515,7 +1580,6 @@ function buildOptimisticReportPreview(reportID, iouReportID, payeeAccountID) {
originalMessage: {
linkedReportID: iouReportID,
},
- actorEmail: currentUserEmail,
actorAccountID: currentUserAccountID,
};
}
@@ -1530,7 +1594,6 @@ function buildOptimisticTaskReportAction(taskReportID, actionName, message = '')
return {
actionName,
actorAccountID: currentUserAccountID,
- actorEmail: currentUserEmail,
automatic: false,
avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatar(currentUserAccountID)),
isAttachment: false,
@@ -1629,7 +1692,6 @@ function buildOptimisticCreatedReportAction(ownerEmail) {
actionName: CONST.REPORT.ACTIONS.TYPE.CREATED,
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
actorAccountID: currentUserAccountID,
- actorEmail: currentUserEmail,
message: [
{
type: CONST.REPORT.MESSAGE.TYPE.TEXT,
@@ -1669,7 +1731,6 @@ function buildOptimisticEditedTaskReportAction(ownerEmail) {
actionName: CONST.REPORT.ACTIONS.TYPE.TASKEDITED,
pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
actorAccountID: currentUserAccountID,
- actorEmail: currentUserEmail,
message: [
{
type: CONST.REPORT.MESSAGE.TYPE.TEXT,
@@ -1834,7 +1895,6 @@ function buildOptimisticTaskReport(ownerEmail, ownerAccountID, assigneeAccountID
description,
ownerEmail,
ownerAccountID,
- // managerEmail: assignee,
managerID: assigneeAccountID,
type: CONST.REPORT.TYPE.TASK,
parentReportID,
@@ -2039,8 +2099,8 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, iouRep
return false;
}
- // Hide thread reports that haven't been commented on
- if (isThread(report) && !report.lastMessageText) {
+ // Hide only chat threads that haven't been commented on (other threads are actionable)
+ if (isChatThread(report) && !report.lastMessageText) {
return false;
}
@@ -2123,6 +2183,26 @@ function chatIncludesChronos(report) {
return report.participantAccountIDs && _.contains(report.participantAccountIDs, CONST.ACCOUNT_ID.CHRONOS);
}
+/**
+ * Can only flag if:
+ *
+ * - It was written by someone else
+ * - It's an ADDCOMMENT that is not an attachment
+ *
+ * @param {Object} reportAction
+ * @param {number} reportID
+ * @returns {Boolean}
+ */
+function canFlagReportAction(reportAction, reportID) {
+ return (
+ reportAction.actorAccountID !== currentUserAccountID &&
+ reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
+ !ReportActionsUtils.isDeletedAction(reportAction) &&
+ !ReportActionsUtils.isCreatedTaskReportAction(reportAction) &&
+ isAllowedToComment(getReport(reportID))
+ );
+}
+
/**
* Whether flag comment page should show
*
@@ -2133,11 +2213,11 @@ function chatIncludesChronos(report) {
function shouldShowFlagComment(reportAction, report) {
return (
- canFlagReportAction(reportAction) &&
+ canFlagReportAction(reportAction, report.reportID) &&
!isArchivedRoom(report) &&
!chatIncludesChronos(report) &&
!isConciergeChatReport(report.reportID) &&
- reportAction.actorEmail !== CONST.EMAIL.CONCIERGE
+ reportAction.actorAccountID !== CONST.ACCOUNT_ID.CONCIERGE
);
}
@@ -2235,8 +2315,8 @@ function canRequestMoney(report) {
* @returns {Array}
*/
function getMoneyRequestOptions(report, reportParticipants, betas) {
- // In any thread, we do not allow any new money requests yet
- if (isChatThread(report)) {
+ // In any thread or task report, we do not allow any new money requests yet
+ if (isChatThread(report) || isTaskReport(report)) {
return [];
}
@@ -2333,7 +2413,7 @@ function getWhisperDisplayNames(participantAccountIDs) {
}
/**
- * Show subscript on IOU or expense report
+ * Show subscript on workspace chats / threads and expense requests
* @param {Object} report
* @returns {Boolean}
*/
@@ -2346,7 +2426,23 @@ function shouldReportShowSubscript(report) {
return true;
}
- return isExpenseReport(report);
+ if (isPolicyExpenseChat(report) && !isThread(report) && !isTaskReport(report)) {
+ return true;
+ }
+
+ if (isExpenseRequest(report)) {
+ return true;
+ }
+
+ if (isWorkspaceTaskReport(report)) {
+ return true;
+ }
+
+ if (isWorkspaceThread(report)) {
+ return true;
+ }
+
+ return false;
}
/**
@@ -2377,7 +2473,7 @@ function getParentReport(report) {
* @returns {Boolean}
*/
function shouldHideComposer(report, reportErrors) {
- return isArchivedRoom(report) || !_.isEmpty(reportErrors) || !isAllowedToComment(report);
+ return isArchivedRoom(report) || !_.isEmpty(reportErrors) || !isAllowedToComment(report) || isAnonymousUser;
}
/**
@@ -2460,9 +2556,12 @@ export {
getDisplayNameForParticipant,
isChatReport,
isExpenseReport,
+ isExpenseRequest,
isIOUReport,
isTaskReport,
- isTaskCompleted,
+ isOpenTaskReport,
+ isCanceledTaskReport,
+ isCompletedTaskReport,
isTaskAssignee,
isMoneyRequestReport,
chatIncludesChronos,
@@ -2479,6 +2578,7 @@ export {
isChatThread,
isThreadParent,
isThreadFirstChat,
+ isChildReport,
shouldReportShowSubscript,
isReportDataReady,
isSettled,
diff --git a/src/libs/SessionUtils.js b/src/libs/SessionUtils.js
index 875b540e5599..7b1fc9f42d25 100644
--- a/src/libs/SessionUtils.js
+++ b/src/libs/SessionUtils.js
@@ -1,4 +1,7 @@
+import Onyx from 'react-native-onyx';
+import _ from 'underscore';
import lodashGet from 'lodash/get';
+import ONYXKEYS from '../ONYXKEYS';
/**
* Determine if the transitioning user is logging in as a new user.
@@ -28,7 +31,34 @@ function isLoggingInAsNewUser(transitionURL, sessionEmail) {
return linkedEmail !== sessionEmail;
}
-export {
- // eslint-disable-next-line import/prefer-default-export
- isLoggingInAsNewUser,
-};
+let loggedInDuringSession;
+
+// To tell if the user logged in during this session we will check the value of session.authToken once when the app's JS inits. When the user logs out
+// we can reset this flag so that it can be updated again.
+Onyx.connect({
+ key: ONYXKEYS.SESSION,
+ callback: (session) => {
+ if (!_.isUndefined(loggedInDuringSession)) {
+ return;
+ }
+
+ if (session && session.authToken) {
+ loggedInDuringSession = false;
+ } else {
+ loggedInDuringSession = true;
+ }
+ },
+});
+
+function resetDidUserLogInDuringSession() {
+ loggedInDuringSession = undefined;
+}
+
+/**
+ * @returns {boolean}
+ */
+function didUserLogInDuringSession() {
+ return Boolean(loggedInDuringSession);
+}
+
+export {isLoggingInAsNewUser, didUserLogInDuringSession, resetDidUserLogInDuringSession};
diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
index f722f0cd1572..2e5c08aa0a24 100644
--- a/src/libs/SidebarUtils.js
+++ b/src/libs/SidebarUtils.js
@@ -183,7 +183,7 @@ function getOrderedReportIDs(currentReportId) {
return;
}
- if (ReportUtils.isTaskReport(report) && ReportUtils.isTaskCompleted(report)) {
+ if (ReportUtils.isTaskReport(report) && ReportUtils.isCompletedTaskReport(report)) {
archivedReports.push(report);
return;
}
@@ -234,7 +234,6 @@ function getOptionData(reportID) {
brickRoadIndicator: null,
icons: null,
tooltipText: null,
- ownerEmail: null,
ownerAccountID: null,
subtitle: null,
participantsList: null,
@@ -258,6 +257,7 @@ function getOptionData(reportID) {
shouldShowSubscript: false,
isPolicyExpenseChat: false,
isMoneyRequestReport: false,
+ isExpenseRequest: false,
};
const participantPersonalDetailList = _.values(OptionsListUtils.getPersonalDetailsForAccountIDs(report.participantAccountIDs, personalDetails));
@@ -267,17 +267,17 @@ function getOptionData(reportID) {
result.isChatRoom = ReportUtils.isChatRoom(report);
result.isTaskReport = ReportUtils.isTaskReport(report);
if (result.isTaskReport) {
- result.isTaskCompleted = ReportUtils.isTaskCompleted(report);
+ result.isCompletedTaskReport = ReportUtils.isCompletedTaskReport(report);
result.isTaskAssignee = ReportUtils.isTaskAssignee(report);
}
result.isArchivedRoom = ReportUtils.isArchivedRoom(report);
result.isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+ result.isExpenseRequest = ReportUtils.isExpenseRequest(report);
result.isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report);
result.shouldShowSubscript = ReportUtils.shouldReportShowSubscript(report);
result.pendingAction = report.pendingFields ? report.pendingFields.addWorkspaceRoom || report.pendingFields.createChat : null;
result.allReportErrors = OptionsListUtils.getAllReportErrors(report, reportActions);
result.brickRoadIndicator = !_.isEmpty(result.allReportErrors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
- result.ownerEmail = report.ownerEmail;
result.ownerAccountID = report.ownerAccountID;
result.reportID = report.reportID;
result.isUnread = ReportUtils.isUnread(report);
@@ -332,6 +332,10 @@ function getOptionData(reportID) {
if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
const newName = lodashGet(lastAction, 'originalMessage.newName', '');
result.alternateText = Localize.translate(preferredLocale, 'newRoomPage.roomRenamedTo', {newName});
+ } else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED) {
+ result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.reopened')}: ${report.reportName}`;
+ } else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED) {
+ result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.completed')}: ${report.reportName}`;
} else {
result.alternateText = lastMessageTextFromReport.length > 0 ? lastMessageText : Localize.translate(preferredLocale, 'report.noActivityYet');
}
diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
index 6f05da08c703..c120f649b401 100644
--- a/src/libs/ValidationUtils.js
+++ b/src/libs/ValidationUtils.js
@@ -419,7 +419,7 @@ function isValidRoomName(roomName) {
* @returns {Boolean}
*/
function isValidTaxID(taxID) {
- return taxID && CONST.REGEX.TAX_ID.test(taxID.replace(CONST.REGEX.NON_NUMERIC, ''));
+ return taxID && CONST.REGEX.TAX_ID.test(taxID);
}
/**
diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js
index d4012829b90c..fe7934e3e591 100644
--- a/src/libs/actions/App.js
+++ b/src/libs/actions/App.js
@@ -15,6 +15,8 @@ import ROUTES from '../../ROUTES';
import * as SessionUtils from '../SessionUtils';
import getCurrentUrl from '../Navigation/currentUrl';
import * as Session from './Session';
+import * as ReportActionsUtils from '../ReportActionsUtils';
+import Timing from './Timing';
let currentUserAccountID;
Onyx.connect({
@@ -31,13 +33,6 @@ Onyx.connect({
initWithStoredValues: false,
});
-let allPolicies = [];
-Onyx.connect({
- key: ONYXKEYS.COLLECTION.POLICY,
- waitForCollectionCallback: true,
- callback: (policies) => (allPolicies = policies),
-});
-
let preferredLocale;
Onyx.connect({
key: ONYXKEYS.NVP_PREFERRED_LOCALE,
@@ -125,42 +120,52 @@ AppState.addEventListener('change', (nextAppState) => {
/**
* Fetches data needed for app initialization
+ * @param {boolean} [isReconnecting]
*/
-function openApp() {
+function openApp(isReconnecting = false) {
isReadyToOpenApp.then(() => {
- // We need a fresh connection/callback here to make sure that the list of policyIDs that is sent to OpenApp is the most updated list from Onyx
const connectionID = Onyx.connect({
key: ONYXKEYS.COLLECTION.POLICY,
waitForCollectionCallback: true,
callback: (policies) => {
+ // When the app reconnects we do a fast "sync" of the LHN and only return chats that have new messages. We achieve this by sending the most recent reportActionID.
+ // we have locally. And then only update the user about chats with messages that have occurred after that reportActionID.
+ //
+ // - Look through the local report actions and reports to find the most recently modified report action or report.
+ // - We send this to the server so that it can compute which new chats the user needs to see and return only those as an optimization.
+ const params = {policyIDList: getNonOptimisticPolicyIDs(policies)};
+ if (isReconnecting) {
+ Timing.start(CONST.TIMING.CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION);
+ params.mostRecentReportActionLastModified = ReportActionsUtils.getMostRecentReportActionLastModified();
+ Timing.end(CONST.TIMING.CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION, '', 500);
+ }
Onyx.disconnect(connectionID);
- API.read(
- 'OpenApp',
- {policyIDList: getNonOptimisticPolicyIDs(policies)},
- {
- optimisticData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: true,
- },
- ],
- successData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: false,
- },
- ],
- failureData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: false,
- },
- ],
- },
- );
+
+ // eslint-disable-next-line rulesdir/no-multiple-api-calls
+ const apiMethod = isReconnecting ? API.write : API.read;
+ apiMethod(isReconnecting ? 'ReconnectApp' : 'OpenApp', params, {
+ optimisticData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+ value: true,
+ },
+ ],
+ successData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+ value: false,
+ },
+ ],
+ failureData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+ value: false,
+ },
+ ],
+ });
},
});
});
@@ -170,33 +175,7 @@ function openApp() {
* Refreshes data when the app reconnects
*/
function reconnectApp() {
- API.write(
- CONST.NETWORK.COMMAND.RECONNECT_APP,
- {policyIDList: getNonOptimisticPolicyIDs(allPolicies)},
- {
- optimisticData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: true,
- },
- ],
- successData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: false,
- },
- ],
- failureData: [
- {
- onyxMethod: Onyx.METHOD.MERGE,
- key: ONYXKEYS.IS_LOADING_REPORT_DATA,
- value: false,
- },
- ],
- },
- );
+ openApp(true);
}
/**
@@ -231,7 +210,7 @@ function setUpPoliciesAndNavigate(session) {
// Approved Accountants and Guides can enter a flow where they make a workspace for other users,
// and those are passed as a search parameter when using transition links
- const ownerEmail = url.searchParams.get('ownerEmail');
+ const policyOwnerEmail = url.searchParams.get('ownerEmail');
const makeMeAdmin = url.searchParams.get('makeMeAdmin');
const policyName = url.searchParams.get('policyName');
@@ -243,7 +222,7 @@ function setUpPoliciesAndNavigate(session) {
const shouldCreateFreePolicy = !isLoggingInAsNewUser && isTransitioningFromOldDot && exitTo === ROUTES.WORKSPACE_NEW;
if (shouldCreateFreePolicy) {
- Policy.createWorkspace(ownerEmail, makeMeAdmin, policyName, true);
+ Policy.createWorkspace(policyOwnerEmail, makeMeAdmin, policyName, true);
return;
}
if (!isLoggingInAsNewUser && exitTo) {
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 1e3a297f08da..e3bd124743b5 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -10,6 +10,7 @@ import * as Localize from '../Localize';
import asyncOpenURL from '../asyncOpenURL';
import * as API from '../API';
import * as ReportUtils from '../ReportUtils';
+import * as CurrencyUtils from '../CurrencyUtils';
import * as ReportActionsUtils from '../ReportActionsUtils';
import * as IOUUtils from '../IOUUtils';
import * as OptionsListUtils from '../OptionsListUtils';
@@ -884,7 +885,8 @@ function deleteMoneyRequest(chatReportID, iouReportID, moneyRequestAction, shoul
* @returns {String}
*/
function buildPayPalPaymentUrl(amount, submitterPayPalMeAddress, currency) {
- return `https://paypal.me/${submitterPayPalMeAddress}/${Math.abs(amount) / 100}${currency}`;
+ const currencyUnit = CurrencyUtils.getCurrencyUnit(currency);
+ return `https://paypal.me/${submitterPayPalMeAddress}/${Math.abs(amount) / currencyUnit}${currency}`;
}
/**
diff --git a/src/libs/actions/PersistedRequests.js b/src/libs/actions/PersistedRequests.js
index e3aafd18c35d..d893ee255287 100644
--- a/src/libs/actions/PersistedRequests.js
+++ b/src/libs/actions/PersistedRequests.js
@@ -1,8 +1,6 @@
import Onyx from 'react-native-onyx';
import _ from 'underscore';
-import CONST from '../../CONST';
import ONYXKEYS from '../../ONYXKEYS';
-import HttpUtils from '../HttpUtils';
let persistedRequests = [];
@@ -19,12 +17,7 @@ function clear() {
* @param {Array} requestsToPersist
*/
function save(requestsToPersist) {
- HttpUtils.cancelPendingReconnectAppRequest();
- persistedRequests = _.chain(persistedRequests)
- .concat(requestsToPersist)
- .partition((request) => request.command !== CONST.NETWORK.COMMAND.RECONNECT_APP)
- .flatten()
- .value();
+ persistedRequests = persistedRequests.concat(requestsToPersist);
Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, persistedRequests);
}
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index bad48978b0e1..5b0afa1caf69 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -821,15 +821,15 @@ function generatePolicyID() {
/**
* Optimistically creates a new workspace and default workspace chats
*
- * @param {String} [ownerEmail] Optional, the email of the account to make the owner of the policy
+ * @param {String} [policyOwnerEmail] Optional, the email of the account to make the owner of the policy
* @param {Boolean} [makeMeAdmin] Optional, leave the calling account as an admin on the policy
* @param {String} [policyName] Optional, custom policy name we will use for created workspace
* @param {Boolean} [transitionFromOldDot] Optional, if the user is transitioning from old dot
* @returns {Promise}
*/
-function createWorkspace(ownerEmail = '', makeMeAdmin = false, policyName = '', transitionFromOldDot = false) {
+function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName = '', transitionFromOldDot = false) {
const policyID = generatePolicyID();
- const workspaceName = policyName || generateDefaultWorkspaceName(ownerEmail);
+ const workspaceName = policyName || generateDefaultWorkspaceName(policyOwnerEmail);
const {
announceChatReportID,
@@ -853,7 +853,7 @@ function createWorkspace(ownerEmail = '', makeMeAdmin = false, policyName = '',
announceChatReportID,
adminsChatReportID,
expenseChatReportID,
- ownerEmail,
+ ownerEmail: policyOwnerEmail,
makeMeAdmin,
policyName: workspaceName,
type: CONST.POLICY.TYPE.FREE,
@@ -1038,7 +1038,8 @@ function createWorkspace(ownerEmail = '', makeMeAdmin = false, policyName = '',
return Navigation.isNavigationReady().then(() => {
if (transitionFromOldDot) {
- Navigation.dismissModal(); // Dismiss /transition route for OldDot to NewDot transitions
+ // We must call goBack() to remove the /transition route from history
+ Navigation.goBack();
}
// Get the reportID associated with the newly created #admins room and route the user to that chat
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 9027b8fb2f3c..efe1ebe2bd91 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1177,7 +1177,7 @@ function updateWriteCapabilityAndNavigate(report, newValue) {
function navigateToConciergeChat() {
if (!conciergeChatReportID) {
// In order not to delay the report life cycle, we first navigate to the unknown report
- if (_.isEmpty(Navigation.getReportIDFromRoute())) {
+ if (!Navigation.getReportIDFromRoute()) {
Navigation.navigate(ROUTES.REPORT);
}
// In order to avoid creating concierge repeatedly,
@@ -1200,8 +1200,9 @@ function navigateToConciergeChat() {
* @param {Array} policyMembers
*/
function addPolicyReport(policyID, reportName, visibility, policyMembers) {
- // The participants include the current user (admin) and the employees. Participants must not be empty.
- const participants = _.unique([currentUserAccountID, ...policyMembers]);
+ // The participants include the current user (admin), and for restricted rooms, the policy members. Participants must not be empty.
+ const members = visibility === CONST.REPORT.VISIBILITY.RESTRICTED ? policyMembers : [];
+ const participants = _.unique([currentUserAccountID, ...members]);
const policyReport = ReportUtils.buildOptimisticChatReport(
participants,
reportName,
@@ -1433,7 +1434,7 @@ function shouldShowReportActionNotification(reportID, action = null, isRemote =
}
// If we are currently viewing this report do not show a notification.
- if (reportID === Navigation.getReportIDFromRoute() && Visibility.isVisible() && Visibility.hasFocus()) {
+ if (reportID === Navigation.getTopmostReportId() && Visibility.isVisible() && Visibility.hasFocus()) {
Log.info(`${tag} No notification because it was a comment for the current report`);
return false;
}
@@ -1636,17 +1637,18 @@ function removeEmojiReaction(reportID, originalReportAction, emoji) {
* Calls either addEmojiReaction or removeEmojiReaction depending on if the current user has reacted to the report action.
* @param {String} reportID
* @param {String} reportActionID
- * @param {Object} emoji
+ * @param {Object} reactionEmoji
* @param {number} paramSkinTone
* @returns {Promise}
*/
-function toggleEmojiReaction(reportID, reportActionID, emoji, paramSkinTone = preferredSkinTone) {
+function toggleEmojiReaction(reportID, reportActionID, reactionEmoji, paramSkinTone = preferredSkinTone) {
const reportAction = ReportActionsUtils.getReportAction(reportID, reportActionID);
if (_.isEmpty(reportAction)) {
return;
}
+ const emoji = EmojiUtils.findEmojiByCode(reactionEmoji.code);
const message = reportAction.message[0];
const reactionObject = message.reactions && _.find(message.reactions, (reaction) => reaction.emoji === emoji.name);
const skinTone = emoji.types === undefined ? null : paramSkinTone; // only use skin tone if emoji supports it
diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js
index a500635222d6..a010621c4eea 100644
--- a/src/libs/actions/SignInRedirect.js
+++ b/src/libs/actions/SignInRedirect.js
@@ -10,6 +10,7 @@ import navigationRef from '../Navigation/navigationRef';
import SCREENS from '../../SCREENS';
import Navigation from '../Navigation/Navigation';
import * as ErrorUtils from '../ErrorUtils';
+import * as SessionUtils from '../SessionUtils';
let currentIsOffline;
let currentShouldForceOffline;
@@ -87,6 +88,7 @@ function redirectToSignIn(errorMessage) {
NetworkConnection.clearReconnectionCallbacks();
clearStorageAndRedirect(errorMessage);
resetHomeRouteParams();
+ SessionUtils.resetDidUserLogInDuringSession();
}
export default redirectToSignIn;
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 3d19a632a634..6e60c68c1507 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -10,9 +10,18 @@ import ROUTES from '../../ROUTES';
import CONST from '../../CONST';
import DateUtils from '../DateUtils';
import * as UserUtils from '../UserUtils';
-import * as PersonalDetailsUtils from '../PersonalDetailsUtils';
import * as ReportActionsUtils from '../ReportActionsUtils';
+let currentUserEmail;
+let currentUserAccountID;
+Onyx.connect({
+ key: ONYXKEYS.SESSION,
+ callback: (val) => {
+ currentUserEmail = lodashGet(val, 'email', '');
+ currentUserAccountID = lodashGet(val, 'accountID', 0);
+ },
+});
+
/**
* Clears out the task info from the store
*/
@@ -24,8 +33,6 @@ function clearOutTaskInfo() {
* Assign a task to a user
* Function title is createTask for consistency with the rest of the actions
* and also because we can create a task without assigning it to anyone
- * @param {String} currentUserEmail
- * @param {Number} currentUserAccountID
* @param {String} parentReportID
* @param {String} title
* @param {String} description
@@ -34,7 +41,7 @@ function clearOutTaskInfo() {
*
*/
-function createTaskAndNavigate(currentUserEmail, currentUserAccountID, parentReportID, title, description, assignee, assigneeAccountID = 0) {
+function createTaskAndNavigate(parentReportID, title, description, assignee, assigneeAccountID = 0) {
// Create the task report
const optimisticTaskReport = ReportUtils.buildOptimisticTaskReport(currentUserEmail, currentUserAccountID, assigneeAccountID, parentReportID, title, description);
@@ -251,7 +258,7 @@ function reopenTask(taskReportID, taskTitle) {
statusNum: CONST.REPORT.STATUS.OPEN,
lastVisibleActionCreated: reopenedTaskReportAction.created,
lastMessageText: message,
- lastActorEmail: reopenedTaskReportAction.actorEmail,
+ lastActorEmail: currentUserEmail,
lastActorAccountID: reopenedTaskReportAction.actorAccountID,
lastReadTime: reopenedTaskReportAction.created,
},
@@ -300,7 +307,7 @@ function reopenTask(taskReportID, taskTitle) {
* @param {String} editedTask.assignee
* @param {Number} editedTask.assigneeAccountID
*/
-function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee, assigneeAccountID = 0}) {
+function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, description, assignee = '', assigneeAccountID = 0}) {
// Create the EditedReportAction on the task
const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(ownerEmail);
@@ -340,6 +347,7 @@ function editTaskAndNavigate(report, ownerEmail, ownerAccountID, {title, descrip
reportName,
description: reportDescription,
managerID: assigneeAccountID || report.managerID,
+ managerEmail: assignee || report.managerEmail,
},
},
];
@@ -586,7 +594,7 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
value: {
lastVisibleActionCreated: optimisticCancelReportAction.created,
lastMessageText: message,
- lastActorEmail: optimisticCancelReportAction.actorEmail,
+ lastActorEmail: currentUserEmail,
lastActorAccountID: optimisticCancelReportAction.actorAccountID,
},
},
@@ -617,11 +625,7 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
},
];
- API.write('CancelTask', {taskReportID, optimisticReportActionID}, {optimisticData, failureData});
-}
-
-function isTaskCanceled(taskReport) {
- return taskReport.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && taskReport.statusNum === CONST.REPORT.STATUS.CLOSED;
+ API.write('CancelTask', {cancelledTaskReportActionID: optimisticReportActionID, taskReportID}, {optimisticData, failureData});
}
/**
@@ -648,13 +652,7 @@ function getTaskAssigneeAccountID(taskReport) {
}
const reportAction = ReportActionsUtils.getParentReportAction(taskReport);
- const childManagerEmail = lodashGet(reportAction, 'childManagerEmail', '');
-
- if (!childManagerEmail) {
- return null;
- }
-
- return PersonalDetailsUtils.getAccountIDsByLogins([childManagerEmail])[0];
+ return lodashGet(reportAction, 'childManagerAccountID');
}
/**
@@ -695,7 +693,6 @@ export {
getAssignee,
getShareDestination,
cancelTask,
- isTaskCanceled,
dismissModalAndClearOutTaskInfo,
getTaskAssigneeAccountID,
isTaskAssigneeOrTaskOwner,
diff --git a/src/libs/actions/Timing.js b/src/libs/actions/Timing.js
index baaf666948ff..2be2cdc6fa63 100644
--- a/src/libs/actions/Timing.js
+++ b/src/libs/actions/Timing.js
@@ -2,6 +2,7 @@ import getPlatform from '../getPlatform';
import * as Environment from '../Environment/Environment';
import Firebase from '../Firebase';
import * as API from '../API';
+import Log from '../Log';
let timestampData = {};
@@ -26,8 +27,9 @@ function start(eventName, shouldUseFirebase = false) {
*
* @param {String} eventName - event name used as timestamp key
* @param {String} [secondaryName] - optional secondary event name, passed to grafana
+ * @param {number} [maxExecutionTime] - optional amount of time (ms) to wait before logging a warn
*/
-function end(eventName, secondaryName = '') {
+function end(eventName, secondaryName = '', maxExecutionTime = 0) {
if (!timestampData[eventName]) {
return;
}
@@ -51,6 +53,10 @@ function end(eventName, secondaryName = '') {
return;
}
+ if (maxExecutionTime && eventTime > maxExecutionTime) {
+ Log.warn(`${eventName} exceeded max execution time of ${maxExecutionTime}.`, {eventTime, eventName});
+ }
+
API.read(
'SendPerformanceTiming',
{
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 421b8781d84c..f1337927c35c 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -224,13 +224,6 @@ function updateNewsletterSubscription(isSubscribed) {
function deleteContactMethod(contactMethod, loginList) {
const oldLoginData = loginList[contactMethod];
- // If the contact method failed to be added to the account, then it should only be deleted locally.
- if (lodashGet(oldLoginData, 'errorFields.addedLogin', null)) {
- Onyx.merge(ONYXKEYS.LOGIN_LIST, {[contactMethod]: null});
- Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS);
- return;
- }
-
const optimisticData = [
{
onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/libs/actions/Welcome.js b/src/libs/actions/Welcome.js
index ddd0d872ce97..0a866e0c8c81 100644
--- a/src/libs/actions/Welcome.js
+++ b/src/libs/actions/Welcome.js
@@ -16,7 +16,7 @@ let isReadyPromise = new Promise((resolve) => {
let isFirstTimeNewExpensifyUser;
let isLoadingReportData = true;
-let email = '';
+let currentUserAccountID;
/**
* Check that a few requests have completed so that the welcome action can proceed:
@@ -92,7 +92,7 @@ Onyx.connect({
return;
}
- email = val.email;
+ currentUserAccountID = val.accountID;
},
});
@@ -119,7 +119,10 @@ function show({routes, showCreateMenu = () => {}, showPopoverMenu = () => {}}) {
const isDisplayingWorkspaceRoute = isWorkspaceRoute || exitingToWorkspaceRoute;
// We want to display the Workspace chat first since that means a user is already in a Workspace and doesn't need to create another one
- const workspaceChatReport = _.find(allReports, (report) => ReportUtils.isPolicyExpenseChat(report) && report.ownerEmail === email && report.statusNum !== CONST.REPORT.STATUS.CLOSED);
+ const workspaceChatReport = _.find(
+ allReports,
+ (report) => ReportUtils.isPolicyExpenseChat(report) && report.ownerAccountID === currentUserAccountID && report.statusNum !== CONST.REPORT.STATUS.CLOSED,
+ );
if (workspaceChatReport && !isDisplayingWorkspaceRoute) {
// This key is only updated when we call ReconnectApp, setting it to false now allows the user to navigate normally instead of always redirecting to the workspace chat
Onyx.set(ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, false);
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index ac42017d3c7c..a5540843451a 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -148,8 +148,10 @@ function DetailsPage(props) {
>
{({show}) => (
{
const errorFields = {};
if (!values.acceptTerms) {
errorFields.acceptTerms = 'common.error.acceptTerms';
}
return errorFields;
- }
+ }, []);
- submit() {
- const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
- plaidAccountID: lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''),
+ const submit = useCallback(() => {
+ const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
+ plaidAccountID: lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''),
});
const bankAccountData = {
@@ -65,83 +61,79 @@ class BankAccountPlaidStep extends React.Component {
accountNumber: selectedPlaidBankAccount.accountNumber,
plaidMask: selectedPlaidBankAccount.mask,
isSavings: selectedPlaidBankAccount.isSavings,
- bankName: lodashGet(this.props.plaidData, 'bankName') || '',
+ bankName: lodashGet(plaidData, 'bankName') || '',
plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
- plaidAccessToken: lodashGet(this.props.plaidData, 'plaidAccessToken') || '',
+ plaidAccessToken: lodashGet(plaidData, 'plaidAccessToken') || '',
};
ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);
- const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0;
+ const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0;
BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData);
- }
+ }, [reimbursementAccount, reimbursementAccountDraft, plaidData]);
- render() {
- const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0;
- const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', '');
+ const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0;
+ const selectedPlaidAccountID = lodashGet(reimbursementAccountDraft, 'plaidAccountID', '');
- return (
-
+
+
- );
- }
+ )}
+
+
+ );
}
BankAccountPlaidStep.propTypes = propTypes;
BankAccountPlaidStep.defaultProps = defaultProps;
-export default compose(
- withLocalize,
- withOnyx({
- plaidData: {
- key: ONYXKEYS.PLAID_DATA,
- },
- }),
-)(BankAccountPlaidStep);
+BankAccountPlaidStep.displayName = 'BankAccountPlaidStep';
+export default withOnyx({
+ plaidData: {
+ key: ONYXKEYS.PLAID_DATA,
+ },
+})(BankAccountPlaidStep);
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 977f5f3bdfdf..259aa8e89024 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -80,7 +80,6 @@ function EnableStep(props) {
icon={icon}
iconWidth={iconSize}
iconHeight={iconSize}
- disabled
interactive={false}
wrapperStyle={[styles.cardMenuItem, styles.mv3]}
/>
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 7b4681100f6b..69a5d0deb3cd 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -362,16 +362,6 @@ class ReimbursementAccountPage extends React.Component {
);
}
- if (this.state.shouldShowContinueSetupButton) {
- return (
-
- );
- }
-
let errorText;
const userHasPhonePrimaryEmail = Str.endsWith(this.props.session.email, CONST.SMS.DOMAIN);
const throttledDate = lodashGet(this.props.reimbursementAccount, 'throttledDate');
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index cb727d9e3eae..f55070796fb0 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -157,7 +157,7 @@ function ReportDetailsPage(props) {
{isPolicyAdmin ? (
{
Navigation.navigate(ROUTES.getWorkspaceInitialRoute(props.report.policyID));
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index 6d9bdbffba54..a62817e3395b 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -113,7 +113,7 @@ function ReportParticipantsPage(props) {
},
]}
onSelectRow={(option) => {
- Navigation.navigate(ROUTES.getReportParticipantRoute(props.route.params.reportID, option.accountID));
+ Navigation.navigate(ROUTES.getProfileRoute(option.accountID));
}}
hideSectionHeaders
showTitleTooltip
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 080d9b840bda..548cbb53dd1d 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -51,6 +51,7 @@ class ShareCodePage extends React.Component {
const platform = getPlatform();
const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+ const formattedEmail = this.props.formatPhoneNumber(this.props.session.email);
return (
@@ -65,7 +66,7 @@ class ShareCodePage extends React.Component {
ref={this.qrCodeRef}
url={url}
title={isReport ? this.props.report.reportName : this.props.currentUserPersonalDetails.displayName}
- subtitle={isReport ? subtitle : this.props.session.email}
+ subtitle={isReport ? subtitle : formattedEmail}
logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}
logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
diff --git a/src/pages/ValidateLoginPage/index.js b/src/pages/ValidateLoginPage/index.js
index 7d4bbfc89e85..57893a03b8bc 100644
--- a/src/pages/ValidateLoginPage/index.js
+++ b/src/pages/ValidateLoginPage/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
@@ -7,19 +7,14 @@ import * as User from '../../libs/actions/User';
import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
import ONYXKEYS from '../../ONYXKEYS';
import * as Session from '../../libs/actions/Session';
-import Permissions from '../../libs/Permissions';
+import usePermissions from '../../hooks/usePermissions';
+import useLocalize from '../../hooks/useLocalize';
import Navigation from '../../libs/Navigation/Navigation';
-import withLocalize from '../../components/withLocalize';
-import CONST from '../../CONST';
-import compose from '../../libs/compose';
const propTypes = {
/** The accountID and validateCode are passed via the URL */
route: validateLinkPropTypes,
- /** List of betas available to current user */
- betas: PropTypes.arrayOf(PropTypes.string),
-
/** Session of currently logged in user */
session: PropTypes.shape({
/** Currently logged in user authToken */
@@ -31,55 +26,49 @@ const propTypes = {
/** The email the user logged in with */
login: PropTypes.string,
}),
-
- /** Indicates which locale the user currently has selected */
- preferredLocale: PropTypes.string,
};
const defaultProps = {
route: validateLinkDefaultProps,
- betas: [],
session: {
authToken: null,
},
credentials: {},
- preferredLocale: CONST.LOCALES.DEFAULT,
};
-class ValidateLoginPage extends Component {
- componentDidMount() {
- const login = lodashGet(this.props, 'credentials.login', null);
- const accountID = lodashGet(this.props.route.params, 'accountID', '');
- const validateCode = lodashGet(this.props.route.params, 'validateCode', '');
+function ValidateLoginPage(props) {
+ const {canUsePasswordlessLogins} = usePermissions();
+ const {preferredLocale} = useLocalize();
+
+ useEffect(() => {
+ const login = lodashGet(props, 'credentials.login', null);
+ const accountID = lodashGet(props.route.params, 'accountID', '');
+ const validateCode = lodashGet(props.route.params, 'validateCode', '');
// A fresh session will not have credentials.login and user permission betas available.
// In that case, we directly allow users to go through password less flow
- if (!login || Permissions.canUsePasswordlessLogins(this.props.betas)) {
- if (lodashGet(this.props, 'session.authToken')) {
+ if (!login || canUsePasswordlessLogins) {
+ if (lodashGet(props, 'session.authToken')) {
// If already signed in, do not show the validate code if not on web,
// because we don't want to block the user with the interstitial page.
Navigation.goBack(false);
} else {
- Session.signInWithValidateCodeAndNavigate(accountID, validateCode, this.props.preferredLocale);
+ Session.signInWithValidateCodeAndNavigate(accountID, validateCode, preferredLocale);
}
} else {
User.validateLogin(accountID, validateCode);
}
- }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
- render() {
- return ;
- }
+ return ;
}
-ValidateLoginPage.propTypes = propTypes;
ValidateLoginPage.defaultProps = defaultProps;
+ValidateLoginPage.displayName = 'ValidateLoginPage';
+ValidateLoginPage.propTypes = propTypes;
-export default compose(
- withLocalize,
- withOnyx({
- betas: {key: ONYXKEYS.BETAS},
- credentials: {key: ONYXKEYS.CREDENTIALS},
- session: {key: ONYXKEYS.SESSION},
- }),
-)(ValidateLoginPage);
+export default withOnyx({
+ credentials: {key: ONYXKEYS.CREDENTIALS},
+ session: {key: ONYXKEYS.SESSION},
+})(ValidateLoginPage);
diff --git a/src/pages/YearPickerPage.js b/src/pages/YearPickerPage.js
index dad6bf513730..56bd990c8ad6 100644
--- a/src/pages/YearPickerPage.js
+++ b/src/pages/YearPickerPage.js
@@ -6,14 +6,9 @@ import ScreenWrapper from '../components/ScreenWrapper';
import HeaderWithBackButton from '../components/HeaderWithBackButton';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import ROUTES from '../ROUTES';
-import styles from '../styles/styles';
import Navigation from '../libs/Navigation/Navigation';
-import OptionsSelector from '../components/OptionsSelector';
-import themeColors from '../styles/themes/default';
-import * as Expensicons from '../components/Icon/Expensicons';
import CONST from '../CONST';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionListRadio from '../components/SelectionListRadio';
const propTypes = {
...withLocalizePropTypes,
@@ -40,12 +35,7 @@ class YearPickerPage extends React.Component {
text: value.toString(),
value,
keyForList: value.toString(),
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: value === currentYear ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: value === currentYear,
+ isSelected: value === currentYear,
}),
);
@@ -102,20 +92,16 @@ class YearPickerPage extends React.Component {
title={this.props.translate('yearPickerPage.year')}
onBackButtonPress={() => Navigation.goBack(`${this.props.route.params.backTo}?year=${this.currentYear}` || ROUTES.HOME)}
/>
- this.updateSelectedYear(option.value)}
- headerMessage={headerMessage}
initiallyFocusedOptionKey={this.currentYear.toString()}
- hideSectionHeaders
- optionHoveredStyle={styles.hoveredComponentBG}
- shouldHaveOptionSeparator
- contentContainerStyles={[styles.ph5]}
/>
);
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 030f4eef5e18..bf616870fc48 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import styles from '../../styles/styles';
-import themeColors from '../../styles/themes/default';
import Icon from '../../components/Icon';
import * as Expensicons from '../../components/Icon/Expensicons';
import compose from '../../libs/compose';
@@ -31,6 +30,7 @@ import PressableWithoutFeedback from '../../components/Pressable/PressableWithou
import PinButton from '../../components/PinButton';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
+import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
const propTypes = {
/** Toggles the navigationMenu open and closed */
@@ -101,19 +101,19 @@ function HeaderView(props) {
const threeDotMenuItems = [];
if (isTaskReport) {
const isTaskAssigneeOrTaskOwner = Task.isTaskAssigneeOrTaskOwner(props.report, props.session.accountID);
- if (props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN && isTaskAssigneeOrTaskOwner) {
+ if (ReportUtils.isOpenTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
threeDotMenuItems.push({
icon: Expensicons.Checkmark,
- text: props.translate('newTaskPage.markAsDone'),
+ text: props.translate('task.markAsDone'),
onSelected: () => Task.completeTask(props.report.reportID, title),
});
}
// Task is marked as completed
- if (props.report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum === CONST.REPORT.STATUS.APPROVED && isTaskAssigneeOrTaskOwner) {
+ if (ReportUtils.isCompletedTaskReport(props.report) && isTaskAssigneeOrTaskOwner) {
threeDotMenuItems.push({
icon: Expensicons.Checkmark,
- text: props.translate('newTaskPage.markAsIncomplete'),
+ text: props.translate('task.markAsIncomplete'),
onSelected: () => Task.reopenTask(props.report.reportID, title),
});
}
@@ -130,11 +130,14 @@ function HeaderView(props) {
const shouldShowThreeDotsButton = !!threeDotMenuItems.length;
const shouldShowSubscript = ReportUtils.shouldReportShowSubscript(props.report);
+ const defaultSubscriptSize = ReportUtils.isExpenseRequest(props.report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+ const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
+
return (
@@ -144,7 +147,7 @@ function HeaderView(props) {
style={[styles.LHNToggle]}
accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={props.translate('common.back')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
ReportUtils.navigateToDetailsPage(props.report)}
+ onPress={() => (isTaskReport ? Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID)) : ReportUtils.navigateToDetailsPage(props.report))}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
- disabled={isTaskReport}
+ disabled={isTaskReport && !ReportUtils.isOpenTaskReport(props.report)}
accessibilityLabel={title}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{shouldShowSubscript ? (
) : (
+ {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && }
{shouldShowCallButton && (
Navigation.goBack(ROUTES.HOME)}
+ onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME, false, true)}
personalDetails={this.props.personalDetails}
report={this.props.report}
/>
)}
- {ReportUtils.isTaskReport(this.props.report) && (
-
+ {ReportUtils.isTaskReport(this.props.report) && this.props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(this.props.report) && (
+
+
+
+
+
+
+
)}
{Boolean(this.props.accountManagerReportID) && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && (
@@ -363,7 +365,6 @@ class ReportScreen extends React.Component {
/>
)}
-
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index b05c29804d19..4b7ddaec1f99 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -325,7 +325,7 @@ export default [
!isArchivedRoom &&
!isChronosReport &&
!ReportUtils.isConciergeChatReport(reportID) &&
- reportAction.actorEmail !== CONST.EMAIL.CONCIERGE,
+ reportAction.actorAccountID !== CONST.ACCOUNT_ID.CONCIERGE,
onPress: (closePopover, {reportID, reportAction}) => {
if (closePopover) {
hideContextMenu(false, () => Navigation.navigate(ROUTES.getFlagCommentRoute(reportID, reportAction.reportActionID)));
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index aef32aa2b7e6..00611ca12409 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -5,6 +5,7 @@ import Text from '../../../../components/Text';
import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
import compose from '../../../../libs/compose';
+import * as EmojiUtils from '../../../../libs/EmojiUtils';
import * as StyleUtils from '../../../../styles/StyleUtils';
import styles from '../../../../styles/styles';
import reactionPropTypes from './reactionPropTypes';
@@ -32,7 +33,7 @@ function HeaderReactionList(props) {
{props.emojiCodes.join('')}
{props.emojiCount}
- {`:${props.emojiName}:`}
+ {`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, props.preferredLocale)}:`}
);
diff --git a/src/pages/home/report/ReactionList/PopoverReactionList.js b/src/pages/home/report/ReactionList/PopoverReactionList.js
index c4452ec5f3bf..ae2801b2f97d 100644
--- a/src/pages/home/report/ReactionList/PopoverReactionList.js
+++ b/src/pages/home/report/ReactionList/PopoverReactionList.js
@@ -14,7 +14,6 @@ import reportActionPropTypes from '../reportActionPropTypes';
import ONYXKEYS from '../../../../ONYXKEYS';
import withCurrentUserPersonalDetails from '../../../../components/withCurrentUserPersonalDetails';
import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils';
-import emojis from '../../../../../assets/emojis';
import * as EmojiUtils from '../../../../libs/EmojiUtils';
import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils';
import * as ReportUtils from '../../../../libs/ReportUtils';
@@ -185,7 +184,7 @@ class PopoverReactionList extends React.Component {
}
const emojiCount = selectedReaction.users.length;
const reactionUsers = _.map(selectedReaction.users, (sender) => sender.accountID);
- const emoji = _.find(emojis, (e) => e.name === selectedReaction.emoji);
+ const emoji = EmojiUtils.findEmojiByName(selectedReaction.emoji);
const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emoji, selectedReaction.users);
const hasUserReacted = Report.hasAccountIDReacted(this.props.currentUserPersonalDetails.accountID, reactionUsers);
const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers, this.props.currentUserPersonalDetails.accountID, true);
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index c9ffce2b2e89..d4e35c31c6b6 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -48,7 +48,7 @@ import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
import * as ComposerUtils from '../../../libs/ComposerUtils';
import * as Welcome from '../../../libs/actions/Welcome';
import Permissions from '../../../libs/Permissions';
-import * as TaskUtils from '../../../libs/actions/Task';
+import * as Task from '../../../libs/actions/Task';
import * as Browser from '../../../libs/Browser';
import * as IOU from '../../../libs/actions/IOU';
import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
@@ -182,7 +182,9 @@ class ReportActionCompose extends React.Component {
this.setExceededMaxCommentLength = this.setExceededMaxCommentLength.bind(this);
this.updateNumberOfLines = this.updateNumberOfLines.bind(this);
this.showPopoverMenu = this.showPopoverMenu.bind(this);
+ this.debouncedUpdateFrequentlyUsedEmojis = _.debounce(this.debouncedUpdateFrequentlyUsedEmojis.bind(this), 1000, false);
this.comment = props.comment;
+ this.insertedEmojis = [];
// React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management
// code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager
@@ -236,6 +238,14 @@ class ReportActionCompose extends React.Component {
this.focus(false);
});
+ // This listener is used for focusing the composer again after going back to a report without remounting it.
+ this.unsubscribeNavFocus = this.props.navigation.addListener('focus', () => {
+ if (!this.willBlurTextInputOnTapOutside || this.props.isFocused || this.props.modal.isVisible) {
+ return;
+ }
+ this.focus();
+ });
+
this.updateComment(this.comment);
// Shows Popover Menu on Workspace Chat at first sign-in
@@ -274,6 +284,10 @@ class ReportActionCompose extends React.Component {
componentWillUnmount() {
ReportActionComposeFocusManager.clear();
+ if (!this.unsubscribeNavFocus) {
+ return;
+ }
+ this.unsubscribeNavFocus();
}
onSelectionChange(e) {
@@ -428,7 +442,7 @@ class ReportActionCompose extends React.Component {
{
icon: Expensicons.Task,
text: this.props.translate('newTaskPage.assignTask'),
- onSelected: () => TaskUtils.clearOutTaskInfoAndNavigate(this.props.reportID),
+ onSelected: () => Task.clearOutTaskInfoAndNavigate(this.props.reportID),
},
];
}
@@ -522,7 +536,7 @@ class ReportActionCompose extends React.Component {
shouldShowEmojiSuggestionMenu: false,
isAutoSuggestionPickerLarge,
};
- const newSuggestedEmojis = EmojiUtils.suggestEmojis(leftString);
+ const newSuggestedEmojis = EmojiUtils.suggestEmojis(leftString, this.props.preferredLocale);
if (newSuggestedEmojis.length && isCurrentlyShowingEmojiSuggestion) {
nextState.suggestedEmojis = newSuggestedEmojis;
@@ -633,8 +647,8 @@ class ReportActionCompose extends React.Component {
},
suggestedEmojis: [],
}));
- const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject);
- User.updateFrequentlyUsedEmojis(frequentEmojiList);
+ this.insertedEmojis = [...this.insertedEmojis, emojiObject];
+ this.debouncedUpdateFrequentlyUsedEmojis(emojiObject);
}
/**
@@ -719,6 +733,15 @@ class ReportActionCompose extends React.Component {
Report.broadcastUserIsTyping(this.props.reportID);
}
+ /**
+ * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
+ * API is not called too often.
+ */
+ debouncedUpdateFrequentlyUsedEmojis() {
+ User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(this.insertedEmojis));
+ this.insertedEmojis = [];
+ }
+
/**
* Update the value of the comment in Onyx
*
@@ -726,10 +749,11 @@ class ReportActionCompose extends React.Component {
* @param {Boolean} shouldDebounceSaveComment
*/
updateComment(comment, shouldDebounceSaveComment) {
- const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.preferredSkinTone);
+ const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.preferredSkinTone, this.props.preferredLocale);
if (!_.isEmpty(emojis)) {
- User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));
+ this.insertedEmojis = [...this.insertedEmojis, ...emojis];
+ this.debouncedUpdateFrequentlyUsedEmojis();
}
this.setState((prevState) => {
@@ -803,8 +827,6 @@ class ReportActionCompose extends React.Component {
e.preventDefault();
if (suggestionsExist) {
this.resetSuggestions();
- } else if (this.comment.length > 0) {
- this.updateComment('', true);
}
return;
}
@@ -972,7 +994,7 @@ class ReportActionCompose extends React.Component {
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('reportActionCompose.collapse')}
>
@@ -991,7 +1013,7 @@ class ReportActionCompose extends React.Component {
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('reportActionCompose.expand')}
>
@@ -1010,7 +1032,7 @@ class ReportActionCompose extends React.Component {
}}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || this.props.disabled}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('reportActionCompose.addAction')}
>
@@ -1139,7 +1161,7 @@ class ReportActionCompose extends React.Component {
style={[styles.chatItemSubmitButton, this.state.isCommentEmpty || hasExceededMaxCommentLength ? undefined : styles.buttonSuccess]}
onPress={this.submitForm}
disabled={this.state.isCommentEmpty || isBlockedFromConcierge || this.props.disabled || hasExceededMaxCommentLength}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={this.props.translate('common.send')}
>
{
- if (!props.action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || _.isEmpty(latestDecision)) {
+ if (props.action.actionName !== CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || _.isEmpty(latestDecision)) {
return;
}
- if (latestDecision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || latestDecision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN) {
+ if (_.contains([CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE, CONST.MODERATION.MODERATOR_DECISION_HIDDEN], latestDecision)) {
setIsHidden(true);
}
setModerationDecision(latestDecision);
@@ -332,7 +337,7 @@ function ReportActionItem(props) {
const hasReplies = numberOfThreadReplies > 0;
const shouldDisplayThreadReplies = hasReplies && props.action.childCommenterCount && !ReportUtils.isThreadFirstChat(props.action, props.report.reportID);
- const oldestFourAccountIDs = lodashGet(props.action, 'childOldestFourAccountIDs', '').split(',');
+ const oldestFourAccountIDs = _.map(lodashGet(props.action, 'childOldestFourAccountIDs', '').split(','), (accountID) => Number(accountID));
const draftMessageRightAlign = props.draftMessage ? styles.chatItemReactionsDraftRight : {};
return (
@@ -409,10 +414,18 @@ function ReportActionItem(props) {
};
if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
+ if (ReportUtils.isTaskReport(props.report)) {
+ return (
+
+ );
+ }
return (
);
}
@@ -541,6 +554,17 @@ export default compose(
_.isEqual(prevProps.action, nextProps.action) &&
lodashGet(prevProps.report, 'statusNum') === lodashGet(nextProps.report, 'statusNum') &&
lodashGet(prevProps.report, 'stateNum') === lodashGet(nextProps.report, 'stateNum') &&
- prevProps.translate === nextProps.translate,
+ prevProps.translate === nextProps.translate &&
+ // TaskReport's created actions render the TaskView, which updates depending on certain fields in the TaskReport
+ ReportUtils.isTaskReport(prevProps.report) &&
+ prevProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
+ ReportUtils.isTaskReport(nextProps.report) &&
+ nextProps.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
+ prevProps.report.reportName === nextProps.report.reportName &&
+ prevProps.report.description === nextProps.report.description &&
+ ReportUtils.isCompletedTaskReport(prevProps.report) === ReportUtils.isCompletedTaskReport(nextProps.report) &&
+ prevProps.report.managerID === nextProps.report.managerID &&
+ prevProps.report.managerEmail === nextProps.report.managerEmail &&
+ prevProps.isOnlyReportAction === nextProps.isOnlyReportAction,
),
);
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index e90e793dcfcb..095b6ac350c3 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -4,7 +4,6 @@ import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import ONYXKEYS from '../../../ONYXKEYS';
-import RoomHeaderAvatars from '../../../components/RoomHeaderAvatars';
import ReportWelcomeText from '../../../components/ReportWelcomeText';
import participantPropTypes from '../../../components/participantPropTypes';
import * as ReportUtils from '../../../libs/ReportUtils';
@@ -18,6 +17,8 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
import compose from '../../../libs/compose';
import withLocalize from '../../../components/withLocalize';
import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
+import MultipleAvatars from '../../../components/MultipleAvatars';
+import CONST from '../../../CONST';
const propTypes = {
/** The id of the report */
@@ -74,9 +75,15 @@ function ReportActionItemCreated(props) {
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
style={[styles.ph5, styles.pb3, styles.alignSelfStart]}
accessibilityLabel={props.translate('common.details')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
-
+
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index c5a06ee1d617..30c64c7cf6b4 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -29,6 +29,7 @@ import * as ComposerActions from '../../../libs/actions/Composer';
import * as User from '../../../libs/actions/User';
import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
import getButtonState from '../../../libs/getButtonState';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import useLocalize from '../../../hooks/useLocalize';
import useKeyboardState from '../../../hooks/useKeyboardState';
import useWindowDimensions from '../../../hooks/useWindowDimensions';
@@ -59,6 +60,8 @@ const propTypes = {
/** Stores user's preferred skin tone */
preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+ ...withLocalizePropTypes,
};
const defaultProps = {
@@ -95,6 +98,7 @@ function ReportActionItemMessageEdit(props) {
const textInputRef = useRef(null);
const isFocusedRef = useRef(false);
+ const insertedEmojis = useRef([]);
useEffect(() => {
// required for keeping last state of isFocused variable
@@ -138,6 +142,19 @@ function ReportActionItemMessageEdit(props) {
[props.reportID, props.action.reportActionID],
);
+ /**
+ * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
+ * API is not called too often.
+ */
+ const debouncedUpdateFrequentlyUsedEmojis = useMemo(
+ () =>
+ _.debounce(() => {
+ User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(insertedEmojis.current));
+ insertedEmojis.current = [];
+ }, 1000),
+ [],
+ );
+
/**
* Update the value of the draft in Onyx
*
@@ -145,10 +162,11 @@ function ReportActionItemMessageEdit(props) {
*/
const updateDraft = useCallback(
(newDraftInput) => {
- const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, props.preferredSkinTone);
+ const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, props.preferredSkinTone, props.preferredLocale);
if (!_.isEmpty(emojis)) {
- User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));
+ insertedEmojis.current = [...insertedEmojis.current, ...emojis];
+ debouncedUpdateFrequentlyUsedEmojis();
}
setDraft((prevDraft) => {
if (newDraftInput !== newDraft) {
@@ -172,7 +190,7 @@ function ReportActionItemMessageEdit(props) {
debouncedSaveDraft(props.action.message[0].html);
}
},
- [props.action.message, debouncedSaveDraft, props.preferredSkinTone],
+ [props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone, props.preferredLocale],
);
/**
@@ -259,7 +277,7 @@ function ReportActionItemMessageEdit(props) {
onPress={deleteDraft}
style={styles.chatItemSubmitButton}
nativeID={cancelButtonID}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={translate('common.close')}
// disable dimming
hoverDimmingValue={1}
@@ -338,7 +356,7 @@ function ReportActionItemMessageEdit(props) {
onPress={publishDraft}
nativeID={saveButtonID}
disabled={hasExceededMaxCommentLength}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={translate('common.saveChanges')}
hoverDimmingValue={1}
pressDimmingValue={0.2}
@@ -364,10 +382,12 @@ ReportActionItemMessageEdit.propTypes = propTypes;
ReportActionItemMessageEdit.defaultProps = defaultProps;
ReportActionItemMessageEdit.displayName = 'ReportActionItemMessageEdit';
-export default React.forwardRef((props, ref) => (
-
-));
+export default withLocalize(
+ React.forwardRef((props, ref) => (
+
+ )),
+);
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 54b989a1fc47..30a02336aa42 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -73,8 +73,8 @@ const showWorkspaceDetails = (reportID) => {
function ReportActionItemSingle(props) {
const actorAccountID = props.action.actorAccountID;
let {displayName} = props.personalDetailsList[actorAccountID] || {};
- const {avatar, pendingFields} = props.personalDetailsList[actorAccountID] || {};
- let actorHint = lodashGet(props.action, 'actorEmail', '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
+ const {avatar, login, pendingFields} = props.personalDetailsList[actorAccountID] || {};
+ let actorHint = (login || displayName || '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(props.report) && !actorAccountID;
let avatarSource = UserUtils.getAvatar(avatar, actorAccountID);
@@ -91,6 +91,7 @@ function ReportActionItemSingle(props) {
displayName = actorHint;
avatarSource = UserUtils.getAvatar(delegateDetails.avatar, props.action.delegateAccountID);
}
+ const icon = {source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: displayName, id: actorAccountID};
// Since the display name for a report action message is delivered with the report history as an array of fragments
// we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
@@ -120,12 +121,12 @@ function ReportActionItemSingle(props) {
onPressOut={ControlSelection.unblock}
onPress={showActorDetails}
accessibilityLabel={actorHint}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{props.shouldShowSubscriptAvatar ? (
@@ -155,7 +159,7 @@ function ReportActionItemSingle(props) {
onPressOut={ControlSelection.unblock}
onPress={showActorDetails}
accessibilityLabel={actorHint}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{_.map(personArray, (fragment, index) => (
CONST.MAX_THREAD_REPLIES_PREVIEW ? `${CONST.MAX_THREAD_REPLIES_PREVIEW}+` : `${props.numberOfReplies}`;
const replyText = props.numberOfReplies === 1 ? props.translate('threads.reply') : props.translate('threads.replies');
- const timeStamp = props.datetimeToCalendarTime(props.mostRecentReply, false, true);
+ const timeStamp = props.datetimeToCalendarTime(props.mostRecentReply, false);
return (
@@ -43,7 +43,7 @@ function ReportActionItemThread(props) {
onPress={() => {
Report.navigateToAndOpenChildReport(props.childReportID);
}}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={`${props.numberOfReplies} ${replyText}`}
>
@@ -65,7 +65,9 @@ function ReportActionItemThread(props) {
selectable={false}
numberOfLines={1}
style={[styles.ml2, styles.textMicroSupporting, styles.flex1]}
- >{`${props.translate('threads.lastReply')} ${timeStamp}`}
+ >
+ {timeStamp}
+
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index b0f108ed7d39..663774da1d98 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -139,6 +139,7 @@ function ReportActionsList(props) {
isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
hasOutstandingIOU={hasOutstandingIOU}
index={index}
+ isOnlyReportAction={sortedReportActions.length === 1}
/>
);
},
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index f3c9e67d79db..f7021131aa64 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef, useState, useEffect, useContext, useMemo} from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import lodashGet from 'lodash/get';
@@ -10,7 +10,7 @@ import Timing from '../../../libs/actions/Timing';
import CONST from '../../../CONST';
import compose from '../../../libs/compose';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import * as ReportScrollManager from '../../../libs/ReportScrollManager';
+import useReportScrollManager from '../../../hooks/useReportScrollManager';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import Performance from '../../../libs/Performance';
import {withNetwork} from '../../../components/OnyxProvider';
@@ -34,6 +34,7 @@ const propTypes = {
reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
/** Whether the composer is full size */
+ /* eslint-disable-next-line react/no-unused-prop-types */
isComposerFullSize: PropTypes.bool.isRequired,
/** Information about the network */
@@ -57,240 +58,205 @@ const defaultProps = {
policy: null,
};
-class ReportActionsView extends React.Component {
- constructor(props) {
- super(props);
+function ReportActionsView(props) {
+ const context = useContext(ReportScreenContext);
- this.didLayout = false;
- this.didSubscribeToReportTypingEvents = false;
- this.unsubscribeVisibilityListener = null;
- this.hasCachedActions = _.size(props.reportActions) > 0;
+ const reportScrollManager = useReportScrollManager();
- this.reactionListRef = React.createRef();
- this.state = {
- isFloatingMessageCounterVisible: false,
- newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, props.reportActions),
- };
+ const didLayout = useRef(false);
+ const didSubscribeToReportTypingEvents = useRef(false);
+ const unsubscribeVisibilityListener = useRef(null);
+ const hasCachedActions = useRef(_.size(props.reportActions) > 0);
- this.currentScrollOffset = 0;
- this.mostRecentIOUReportActionID = ReportActionsUtils.getMostRecentIOURequestActionID(props.reportActions);
- this.trackScroll = this.trackScroll.bind(this);
- this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this);
- this.loadMoreChats = this.loadMoreChats.bind(this);
- this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this);
- this.scrollToBottomAndMarkReportAsRead = this.scrollToBottomAndMarkReportAsRead.bind(this);
- this.openReportIfNecessary = this.openReportIfNecessary.bind(this);
- }
+ const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(false);
+ const [newMarkerReportActionID, setNewMarkerReportActionID] = useState(ReportUtils.getNewMarkerReportActionID(props.report, props.reportActions));
+
+ const currentScrollOffset = useRef(0);
+ const mostRecentIOUReportActionID = useRef(ReportActionsUtils.getMostRecentIOURequestActionID(props.reportActions));
+
+ const unsubscribeFromNewActionEvent = useRef(null);
+
+ const prevReportActionsRef = useRef(props.reportActions);
+ const prevReportRef = useRef(props.report);
+ const prevNetworkRef = useRef(props.network);
+ const prevIsSmallScreenWidthRef = useRef(props.isSmallScreenWidth);
+
+ /**
+ * @returns {Boolean}
+ */
+ const isReportFullyVisible = useMemo(() => getIsReportFullyVisible(props.isFocused), [props.isFocused]);
- componentDidMount() {
- this.unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
- if (!this.isReportFullyVisible()) {
+ const openReportIfNecessary = () => {
+ // If the report is optimistic (AKA not yet created) we don't need to call openReport again
+ if (props.report.isOptimisticReport) {
+ return;
+ }
+
+ Report.openReport(props.report.reportID);
+ };
+
+ useEffect(() => {
+ unsubscribeVisibilityListener.current = Visibility.onVisibilityChange(() => {
+ if (!isReportFullyVisible) {
return;
}
-
// If the app user becomes active and they have no unread actions we clear the new marker to sync their device
// e.g. they could have read these messages on another device and only just become active here
- const hasUnreadActions = ReportUtils.isUnread(this.props.report);
+ const hasUnreadActions = ReportUtils.isUnread(props.report);
if (!hasUnreadActions) {
- this.setState({newMarkerReportActionID: ''});
+ setNewMarkerReportActionID('');
}
});
+ return () => {
+ if (!unsubscribeVisibilityListener.current) {
+ return;
+ }
+ unsubscribeVisibilityListener.current();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
- this.openReportIfNecessary();
+ useEffect(() => {
+ openReportIfNecessary();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ useEffect(() => {
// This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain
// a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props.
- this.unsubscribeFromNewActionEvent = Report.subscribeToNewActionEvent(this.props.report.reportID, (isFromCurrentUser, newActionID) => {
- const isNewMarkerReportActionIDSet = !_.isEmpty(this.state.newMarkerReportActionID);
+ unsubscribeFromNewActionEvent.current = Report.subscribeToNewActionEvent(props.report.reportID, (isFromCurrentUser, newActionID) => {
+ const isNewMarkerReportActionIDSet = !_.isEmpty(newMarkerReportActionID);
// If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
// they are now in the list.
if (isFromCurrentUser) {
- ReportScrollManager.scrollToBottom(this.context.flatListRef);
-
+ reportScrollManager.scrollToBottom();
// If the current user sends a new message in the chat we clear the new marker since they have "read" the report
- this.setState({newMarkerReportActionID: ''});
- } else if (this.isReportFullyVisible()) {
+ setNewMarkerReportActionID('');
+ } else if (isReportFullyVisible) {
// We use the scroll position to determine whether the report should be marked as read and the new line indicator reset.
// If the user is scrolled up and no new line marker is set we will set it otherwise we will do nothing so the new marker
// stays in it's previous position.
- if (this.currentScrollOffset === 0) {
- Report.readNewestAction(this.props.report.reportID);
- this.setState({newMarkerReportActionID: ''});
+ if (currentScrollOffset.current === 0) {
+ Report.readNewestAction(props.report.reportID);
+ setNewMarkerReportActionID('');
} else if (!isNewMarkerReportActionIDSet) {
- this.setState({newMarkerReportActionID: newActionID});
+ // The report is not in view and we received a comment from another user while the new marker is not set
+ // so we will set the new marker now.
+ setNewMarkerReportActionID(newActionID);
}
} else if (!isNewMarkerReportActionIDSet) {
- // The report is not in view and we received a comment from another user while the new marker is not set
- // so we will set the new marker now.
- this.setState({newMarkerReportActionID: newActionID});
+ setNewMarkerReportActionID(newActionID);
}
});
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- if (!_.isEqual(nextProps.reportActions, this.props.reportActions)) {
- this.mostRecentIOUReportActionID = ReportActionsUtils.getMostRecentIOURequestActionID(nextProps.reportActions);
- return true;
- }
-
- if (lodashGet(nextProps.network, 'isOffline') !== lodashGet(this.props.network, 'isOffline')) {
- return true;
- }
-
- if (nextProps.report.isLoadingMoreReportActions !== this.props.report.isLoadingMoreReportActions) {
- return true;
- }
-
- if (nextProps.report.isLoadingReportActions !== this.props.report.isLoadingReportActions) {
- return true;
- }
-
- if (nextProps.report.lastReadTime !== this.props.report.lastReadTime) {
- return true;
- }
-
- if (nextState.isFloatingMessageCounterVisible !== this.state.isFloatingMessageCounterVisible) {
- return true;
- }
-
- if (nextState.newMarkerReportActionID !== this.state.newMarkerReportActionID) {
- return true;
- }
-
- if (this.props.isSmallScreenWidth !== nextProps.isSmallScreenWidth) {
- return true;
- }
-
- if (lodashGet(this.props.report, 'hasOutstandingIOU') !== lodashGet(nextProps.report, 'hasOutstandingIOU')) {
- return true;
- }
-
- if (this.props.isComposerFullSize !== nextProps.isComposerFullSize) {
- return true;
- }
-
- if (lodashGet(this.props.report, 'statusNum') !== lodashGet(nextProps.report, 'statusNum') || lodashGet(this.props.report, 'stateNum') !== lodashGet(nextProps.report, 'stateNum')) {
- return true;
- }
-
- if (lodashGet(this.props, 'policy.avatar') !== lodashGet(nextProps, 'policy.avatar')) {
- return true;
- }
-
- if (lodashGet(this.props, 'policy.name') !== lodashGet(nextProps, 'policy.name')) {
- return true;
- }
- return !_.isEqual(lodashGet(this.props.report, 'icons', []), lodashGet(nextProps.report, 'icons', []));
- }
+ return () => {
+ if (unsubscribeFromNewActionEvent.current) {
+ unsubscribeFromNewActionEvent.current();
+ }
- componentDidUpdate(prevProps) {
- const isReportFullyVisible = this.isReportFullyVisible();
+ Report.unsubscribeFromReportChannel(props.report.reportID);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ useEffect(() => {
+ const prevNetwork = prevNetworkRef.current;
// When returning from offline to online state we want to trigger a request to OpenReport which
// will fetch the reportActions data and mark the report as read. If the report is not fully visible
// then we call ReconnectToReport which only loads the reportActions data without marking the report as read.
- const wasNetworkChangeDetected = lodashGet(prevProps.network, 'isOffline') && !lodashGet(this.props.network, 'isOffline');
+ const wasNetworkChangeDetected = lodashGet(prevNetwork, 'isOffline') && !lodashGet(props.network, 'isOffline');
if (wasNetworkChangeDetected) {
if (isReportFullyVisible) {
- this.openReportIfNecessary();
+ openReportIfNecessary();
} else {
- Report.reconnect(this.props.report.reportID);
+ Report.reconnect(props.report.reportID);
}
}
+ // update ref with current network state
+ prevNetworkRef.current = props.network;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.network, props.report, isReportFullyVisible]);
+ useEffect(() => {
+ const prevIsSmallScreenWidth = prevIsSmallScreenWidthRef.current;
// If the view is expanded from mobile to desktop layout
// we update the new marker position, mark the report as read, and fetch new report actions
- const didScreenSizeIncrease = prevProps.isSmallScreenWidth && !this.props.isSmallScreenWidth;
+ const didScreenSizeIncrease = prevIsSmallScreenWidth && !props.isSmallScreenWidth;
const didReportBecomeVisible = isReportFullyVisible && didScreenSizeIncrease;
if (didReportBecomeVisible) {
- this.setState({
- newMarkerReportActionID: ReportUtils.isUnread(this.props.report) ? ReportUtils.getNewMarkerReportActionID(this.props.report, this.props.reportActions) : '',
- });
- this.openReportIfNecessary();
+ setNewMarkerReportActionID(ReportUtils.isUnread(props.report) ? ReportUtils.getNewMarkerReportActionID(props.report, props.reportActions) : '');
+ openReportIfNecessary();
}
+ // update ref with current state
+ prevIsSmallScreenWidthRef.current = props.isSmallScreenWidth;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.isSmallScreenWidth, props.report, props.reportActions, isReportFullyVisible]);
+ useEffect(() => {
+ const prevReportActions = prevReportActionsRef.current;
// If the report is unread, we want to check if the number of actions has decreased. If so, then it seems that one of them was deleted. In this case, if the deleted action was the
// one marking the unread point, we need to recalculate which action should be the unread marker.
- if (ReportUtils.isUnread(this.props.report) && prevProps.reportActions.length > this.props.reportActions.length) {
- this.setState({
- newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, this.props.reportActions),
- });
- }
+ if (prevReportActions && ReportUtils.isUnread(props.report) && prevReportActions.length > props.report.length)
+ setNewMarkerReportActionID(ReportUtils.getNewMarkerReportActionID(props.report, props.reportActions));
+ prevReportActionsRef.current = props.reportActions;
+ }, [props.report, props.reportActions]);
+
+ useEffect(() => {
// If the last unread message was deleted, remove the *New* green marker and the *New Messages* notification at scroll just as the deletion starts.
if (
- ReportUtils.isUnread(this.props.report) &&
- this.props.reportActions.length > 0 &&
- this.props.reportActions[0].pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
- !this.props.network.isOffline
+ !(
+ ReportUtils.isUnread(props.report) &&
+ props.reportActions.length > 0 &&
+ props.reportActions[0].pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
+ !props.network.isOffline
+ )
) {
- const reportActionsWithoutPendingOne = lodashCloneDeep(this.props.reportActions);
- reportActionsWithoutPendingOne.shift();
- const newMarkerReportActionID = ReportUtils.getNewMarkerReportActionID(this.props.report, reportActionsWithoutPendingOne);
- if (newMarkerReportActionID !== this.state.newMarkerReportActionID) {
- this.setState({newMarkerReportActionID});
- }
+ return;
+ }
+ const reportActionsWithoutPendingOne = lodashCloneDeep(props.reportActions);
+ reportActionsWithoutPendingOne.shift();
+ if (newMarkerReportActionID !== ReportUtils.getNewMarkerReportActionID(props.report, reportActionsWithoutPendingOne)) {
+ setNewMarkerReportActionID(ReportUtils.getNewMarkerReportActionID(props.report, reportActionsWithoutPendingOne));
}
+ }, [props.report, props.reportActions, props.network, newMarkerReportActionID]);
+ useEffect(() => {
+ const prevReport = prevReportRef.current;
// Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadTime
// changes it will be because we marked the entire report as read.
- const didManuallyMarkReportAsUnread = prevProps.report.lastReadTime !== this.props.report.lastReadTime && ReportUtils.isUnread(this.props.report);
+ const didManuallyMarkReportAsUnread = prevReport && prevReport.lastReadTime !== props.report.lastReadTime && ReportUtils.isUnread(props.report);
if (didManuallyMarkReportAsUnread) {
- this.setState({newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, this.props.reportActions)});
+ setNewMarkerReportActionID(ReportUtils.getNewMarkerReportActionID(props.report, props.reportActions));
}
+ // update ref with current report
+ prevReportRef.current = props.report;
+ }, [props.report, props.reportActions]);
+ useEffect(() => {
// Ensures subscription event succeeds when the report/workspace room is created optimistically.
// Check if the optimistic `OpenReport` or `AddWorkspaceRoom` has succeeded by confirming
// any `pendingFields.createChat` or `pendingFields.addWorkspaceRoom` fields are set to null.
// Existing reports created will have empty fields for `pendingFields`.
- const didCreateReportSuccessfully = !this.props.report.pendingFields || (!this.props.report.pendingFields.addWorkspaceRoom && !this.props.report.pendingFields.createChat);
- if (!this.didSubscribeToReportTypingEvents && didCreateReportSuccessfully) {
- Report.subscribeToReportTypingEvents(this.props.report.reportID);
- this.didSubscribeToReportTypingEvents = true;
- }
- }
-
- componentWillUnmount() {
- if (this.unsubscribeVisibilityListener) {
- this.unsubscribeVisibilityListener();
+ const didCreateReportSuccessfully = !props.report.pendingFields || (!props.report.pendingFields.addWorkspaceRoom && !props.report.pendingFields.createChat);
+ if (!didSubscribeToReportTypingEvents && didCreateReportSuccessfully) {
+ Report.subscribeToReportTypingEvents(props.report.reportID);
+ didSubscribeToReportTypingEvents.current = true;
}
-
- if (this.unsubscribeFromNewActionEvent) {
- this.unsubscribeFromNewActionEvent();
- }
-
- Report.unsubscribeFromReportChannel(this.props.report.reportID);
- }
-
- /**
- * @returns {Boolean}
- */
- isReportFullyVisible() {
- return getIsReportFullyVisible(this.props.isFocused);
- }
-
- // If the report is optimistic (AKA not yet created) we don't need to call openReport again
- openReportIfNecessary() {
- if (this.props.report.isOptimisticReport) {
- return;
- }
-
- Report.openReport(this.props.report.reportID);
- }
+ }, [props.report, didSubscribeToReportTypingEvents]);
/**
* Retrieves the next set of report actions for the chat once we are nearing the end of what we are currently
* displaying.
*/
- loadMoreChats() {
+ const loadMoreChats = () => {
// Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
- if (this.props.report.isLoadingMoreReportActions) {
+ if (props.report.isLoadingMoreReportActions) {
return;
}
- const oldestReportAction = _.last(this.props.reportActions);
+ const oldestReportAction = _.last(props.reportActions);
// Don't load more chats if we're already at the beginning of the chat history
if (oldestReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
@@ -298,47 +264,46 @@ class ReportActionsView extends React.Component {
}
// Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments
- Report.readOldestAction(this.props.report.reportID, oldestReportAction.reportActionID);
- }
+ Report.readOldestAction(props.report.reportID, oldestReportAction.reportActionID);
+ };
- scrollToBottomAndMarkReportAsRead() {
- ReportScrollManager.scrollToBottom(this.context.flatListRef);
- Report.readNewestAction(this.props.report.reportID);
- }
+ const scrollToBottomAndMarkReportAsRead = () => {
+ reportScrollManager.scrollToBottom();
+ Report.readNewestAction(props.report.reportID);
+ };
/**
* Show/hide the new floating message counter when user is scrolling back/forth in the history of messages.
*/
- toggleFloatingMessageCounter() {
- if (this.currentScrollOffset < -200 && !this.state.isFloatingMessageCounterVisible) {
- this.setState({isFloatingMessageCounterVisible: true});
+ const toggleFloatingMessageCounter = () => {
+ if (currentScrollOffset.current < -200 && !isFloatingMessageCounterVisible) {
+ setIsFloatingMessageCounterVisible(true);
}
- if (this.currentScrollOffset > -200 && this.state.isFloatingMessageCounterVisible) {
- this.setState({isFloatingMessageCounterVisible: false});
+ if (currentScrollOffset.current > -200 && isFloatingMessageCounterVisible) {
+ setIsFloatingMessageCounterVisible(false);
}
- }
+ };
/**
* keeps track of the Scroll offset of the main messages list
*
* @param {Object} {nativeEvent}
*/
- trackScroll({nativeEvent}) {
- this.currentScrollOffset = -nativeEvent.contentOffset.y;
- this.toggleFloatingMessageCounter();
- }
-
+ const trackScroll = ({nativeEvent}) => {
+ currentScrollOffset.current = -nativeEvent.contentOffset.y;
+ toggleFloatingMessageCounter();
+ };
/**
* Runs when the FlatList finishes laying out
*/
- recordTimeToMeasureItemLayout() {
- if (this.didLayout) {
+ const recordTimeToMeasureItemLayout = () => {
+ if (didLayout.current) {
return;
}
- this.didLayout = true;
- Timing.end(CONST.TIMING.SWITCH_REPORT, this.hasCachedActions ? CONST.TIMING.WARM : CONST.TIMING.COLD);
+ didLayout.current = true;
+ Timing.end(CONST.TIMING.SWITCH_REPORT, hasCachedActions.current ? CONST.TIMING.WARM : CONST.TIMING.COLD);
// Capture the init measurement only once not per each chat switch as the value gets overwritten
if (!ReportActionsView.initMeasured) {
@@ -347,41 +312,106 @@ class ReportActionsView extends React.Component {
} else {
Performance.markEnd(CONST.TIMING.SWITCH_REPORT);
}
- }
+ };
- render() {
- // Comments have not loaded at all yet do nothing
- if (!_.size(this.props.reportActions)) {
- return null;
- }
- return (
- <>
-
-
-
-
-
- );
+ // Comments have not loaded at all yet do nothing
+ if (!_.size(props.reportActions)) {
+ return null;
}
+
+ return (
+ <>
+
+
+
+
+
+ );
}
ReportActionsView.propTypes = propTypes;
ReportActionsView.defaultProps = defaultProps;
-ReportActionsView.contextType = ReportScreenContext;
+ReportActionsView.displayName = 'ReportActionsView';
+
+function arePropsEqual(oldProps, newProps) {
+ if (!_.isEqual(oldProps.reportActions, newProps.reportActions)) {
+ return false;
+ }
+
+ if (lodashGet(oldProps.network, 'isOffline') !== lodashGet(newProps.network, 'isOffline')) {
+ return false;
+ }
+
+ if (oldProps.report.isLoadingMoreReportActions !== newProps.report.isLoadingMoreReportActions) {
+ return false;
+ }
+
+ if (oldProps.report.isLoadingReportActions !== newProps.report.isLoadingReportActions) {
+ return false;
+ }
+
+ if (oldProps.report.lastReadTime !== newProps.report.lastReadTime) {
+ return false;
+ }
+
+ if (newProps.isSmallScreenWidth !== oldProps.isSmallScreenWidth) {
+ return false;
+ }
+
+ if (lodashGet(newProps.report, 'hasOutstandingIOU') !== lodashGet(oldProps.report, 'hasOutstandingIOU')) {
+ return false;
+ }
+
+ if (newProps.isComposerFullSize !== oldProps.isComposerFullSize) {
+ return false;
+ }
+
+ if (lodashGet(newProps.report, 'statusNum') !== lodashGet(oldProps.report, 'statusNum') || lodashGet(newProps.report, 'stateNum') !== lodashGet(oldProps.report, 'stateNum')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'policy.avatar') !== lodashGet(oldProps, 'policy.avatar')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'policy.name') !== lodashGet(oldProps, 'policy.name')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'report.reportName') !== lodashGet(oldProps, 'report.reportName')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'report.description') !== lodashGet(oldProps, 'report.description')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'report.managerID') !== lodashGet(oldProps, 'report.managerID')) {
+ return false;
+ }
+
+ if (lodashGet(newProps, 'report.managerEmail') !== lodashGet(oldProps, 'report.managerEmail')) {
+ return false;
+ }
+
+ return _.isEqual(lodashGet(newProps.report, 'icons', []), lodashGet(oldProps.report, 'icons', []));
+}
+
+const MemoizedReportActionsView = React.memo(ReportActionsView, arePropsEqual);
-export default compose(Performance.withRenderTrace({id: ' rendering'}), withWindowDimensions, withNavigationFocus, withLocalize, withNetwork())(ReportActionsView);
+export default compose(Performance.withRenderTrace({id: ' rendering'}), withWindowDimensions, withNavigationFocus, withLocalize, withNetwork())(MemoizedReportActionsView);
diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js
index 38e7781aedf5..c8b5dd1ae685 100644
--- a/src/pages/home/report/ReportAttachments.js
+++ b/src/pages/home/report/ReportAttachments.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import AttachmentModal from '../../../components/AttachmentModal';
import Navigation from '../../../libs/Navigation/Navigation';
import * as ReportUtils from '../../../libs/ReportUtils';
+import ROUTES from '../../../ROUTES';
const propTypes = {
/** Navigation route context info provided by react navigation */
@@ -30,6 +31,10 @@ function ReportAttachments(props) {
report={report}
source={source}
onModalHide={() => Navigation.dismissModal(reportID)}
+ onCarouselAttachmentChange={(attachment) => {
+ const route = ROUTES.getReportAttachmentRoute(reportID, attachment.source);
+ Navigation.navigate(route);
+ }}
/>
);
}
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index 50a84c2f2fea..c03e47dd531e 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -12,6 +12,7 @@ import compose from '../../../libs/compose';
import ONYXKEYS from '../../../ONYXKEYS';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
import styles from '../../../styles/styles';
+import variables from '../../../styles/variables';
import reportActionPropTypes from './reportActionPropTypes';
import reportPropTypes from '../../reportPropTypes';
import * as ReportUtils from '../../../libs/ReportUtils';
@@ -59,12 +60,21 @@ const defaultProps = {
function ReportFooter(props) {
const chatFooterStyles = {...styles.chatFooter, minHeight: !props.isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
+ const isAnonymousUser = Session.isAnonymousUser();
+
+ const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.sideBarWidth) < variables.anonymousReportFooterBreakpoint;
const hideComposer = ReportUtils.shouldHideComposer(props.report, props.errors);
return (
<>
- {(isArchivedRoom || hideComposer) && (
+ {hideComposer && (
+ {isAnonymousUser && !isArchivedRoom && (
+
+ )}
{isArchivedRoom && }
{!props.isSmallScreenWidth && (
{hideComposer && }
@@ -74,19 +84,15 @@ function ReportFooter(props) {
{!hideComposer && (props.shouldShowComposeInput || !props.isSmallScreenWidth) && (
- {Session.isAnonymousUser() ? (
-
- ) : (
-
- )}
+
)}
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 6f122733607b..3134797e5bc9 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -216,13 +216,13 @@ class SidebarLinks extends React.Component {
height={variables.lhnLogoHeight}
/>
}
- accessibilityRole="text"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
shouldShowEnvironmentBadge
/>
@@ -231,7 +231,7 @@ class SidebarLinks extends React.Component {
{Session.isAnonymousUser() ? (
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index d1e0f3bf9bb4..07c096b630a1 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -22,7 +22,7 @@ import ONYXKEYS from '../../../../ONYXKEYS';
import withNavigation from '../../../../components/withNavigation';
import * as Welcome from '../../../../libs/actions/Welcome';
import withNavigationFocus from '../../../../components/withNavigationFocus';
-import * as TaskUtils from '../../../../libs/actions/Task';
+import * as Task from '../../../../libs/actions/Task';
import * as Session from '../../../../libs/actions/Session';
import * as IOU from '../../../../libs/actions/IOU';
@@ -224,7 +224,7 @@ class FloatingActionButtonAndPopover extends React.Component {
{
icon: Expensicons.Task,
text: this.props.translate('newTaskPage.assignTask'),
- onSelected: () => this.interceptAnonymousUser(() => TaskUtils.clearOutTaskInfoAndNavigate()),
+ onSelected: () => this.interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()),
},
]
: []),
@@ -244,7 +244,7 @@ class FloatingActionButtonAndPopover extends React.Component {
/>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 08185e0420ab..44a7fba5d487 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -1,4 +1,4 @@
-import React, {useState, useMemo, useCallback} from 'react';
+import React, {useState, useMemo, useCallback, useEffect} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
@@ -17,6 +17,8 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils';
import ROUTES from '../../ROUTES';
import themeColors from '../../styles/themes/default';
import * as Expensicons from '../../components/Icon/Expensicons';
+import reportPropTypes from '../reportPropTypes';
+import * as ReportUtils from '../../libs/ReportUtils';
const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
@@ -43,10 +45,19 @@ const propTypes = {
currency: PropTypes.string,
}),
+ /** The report on which the request is initiated on */
+ report: reportPropTypes,
+
+ /** Any errors associated with an attempt to create a chat */
+ // eslint-disable-next-line react/forbid-prop-types
+ errors: PropTypes.object,
+
...withLocalizePropTypes,
};
const defaultProps = {
+ report: {},
+ errors: {},
currencyList: {},
iou: {
currency: CONST.CURRENCY.USD,
@@ -57,6 +68,18 @@ function IOUCurrencySelection(props) {
const [searchValue, setSearchValue] = useState('');
const selectedCurrencyCode = lodashGet(props.route, 'params.currency', props.iou.currency, CONST.CURRENCY.USD);
+ const iouType = lodashGet(props.route, 'params.iouType', CONST.IOU.MONEY_REQUEST_TYPE.REQUEST);
+ const reportID = lodashGet(props.route, 'params.reportID', '');
+
+ const shouldDismissModal = ReportUtils.shouldHideComposer(props.report, props.errors);
+
+ useEffect(() => {
+ if (!shouldDismissModal) {
+ return;
+ }
+ Navigation.dismissModal(reportID);
+ }, [shouldDismissModal, reportID]);
+
const confirmCurrencySelection = useCallback(
(option) => {
const backTo = lodashGet(props.route, 'params.backTo', '');
@@ -114,7 +137,7 @@ function IOUCurrencySelection(props) {
<>
Navigation.goBack(ROUTES.getIouRequestRoute(Navigation.getTopmostReportId()))}
+ onBackButtonPress={() => Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID))}
/>
`${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
+ },
}),
withNetwork(),
)(IOUCurrencySelection);
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index e3ff75c82668..8f3553763fff 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -18,7 +18,6 @@ import withReportOrNotFound from '../home/report/withReportOrNotFound';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
import CONST from '../../CONST';
import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
const propTypes = {
/* Onyx Props */
@@ -65,7 +64,7 @@ function getReportID(route) {
function SplitBillDetailsPage(props) {
const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`];
- const participantAccountIDs = reportAction.originalMessage.participantAccountIDs || PersonalDetailsUtils.getAccountIDsByLogins(reportAction.originalMessage.participants);
+ const participantAccountIDs = reportAction.originalMessage.participantAccountIDs;
const participants = OptionsListUtils.getParticipantsOptions(
_.map(participantAccountIDs, (accountID) => ({accountID, selected: true})),
props.personalDetails,
diff --git a/src/pages/iou/steps/MoneyRequestAmountPage.js b/src/pages/iou/steps/MoneyRequestAmountPage.js
index 6cf8fa0baf01..82af85d669d3 100755
--- a/src/pages/iou/steps/MoneyRequestAmountPage.js
+++ b/src/pages/iou/steps/MoneyRequestAmountPage.js
@@ -106,6 +106,8 @@ class MoneyRequestAmountPage extends React.Component {
}
componentDidMount() {
+ this.dismissModalIfNecessary();
+
if (this.isEditing) {
const moneyRequestId = `${this.iouType}${this.reportID}`;
const shouldReset = this.props.iou.id !== moneyRequestId;
@@ -126,6 +128,8 @@ class MoneyRequestAmountPage extends React.Component {
}
componentDidUpdate(prevProps) {
+ this.dismissModalIfNecessary();
+
if (this.isEditing) {
// ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
if (_.isEmpty(this.props.iou.participants) || this.props.iou.amount === 0 || prevProps.iou.id !== this.props.iou.id) {
@@ -233,6 +237,16 @@ class MoneyRequestAmountPage extends React.Component {
return title[this.iouType];
}
+ /**
+ * Check and dismiss modal
+ */
+ dismissModalIfNecessary() {
+ if (!ReportUtils.shouldHideComposer(this.props.report, this.props.errors)) {
+ return;
+ }
+ Navigation.dismissModal(this.reportID);
+ }
+
/**
* Focus text input
*/
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
index ef486dff123f..0c1376006271 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import _ from 'underscore';
@@ -12,6 +12,7 @@ import CONST from '../../../../CONST';
import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
import compose from '../../../../libs/compose';
import personalDetailsPropType from '../../../personalDetailsPropType';
+import * as Browser from '../../../../libs/Browser';
import reportPropTypes from '../../../reportPropTypes';
const propTypes = {
@@ -55,37 +56,15 @@ const defaultProps = {
safeAreaPaddingBottomStyle: {},
};
-class MoneyRequestParticipantsSplitSelector extends Component {
- constructor(props) {
- super(props);
-
- this.toggleOption = this.toggleOption.bind(this);
- this.finalizeParticipants = this.finalizeParticipants.bind(this);
- this.updateOptionsWithSearchTerm = this.updateOptionsWithSearchTerm.bind(this);
-
- const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
- props.reports,
- props.personalDetails,
- props.betas,
- '',
- props.participants,
- CONST.EXPENSIFY_EMAILS,
- );
-
- this.state = {
- searchTerm: '',
- recentReports,
- personalDetails,
- userToInvite,
- };
- }
-
- componentDidUpdate(prevProps) {
- if (_.isEqual(prevProps.reports, this.props.reports) && _.isEqual(prevProps.personalDetails, this.props.personalDetails)) {
- return;
- }
- this.updateOptionsWithSearchTerm(this.state.searchTerm);
- }
+function MoneyRequestParticipantsSplitSelector({betas, participants, personalDetails, reports, translate, onAddParticipants, onStepComplete, safeAreaPaddingBottomStyle}) {
+ const [searchTerm, setSearchTerm] = useState('');
+ const [newChatOptions, setNewChatOptions] = useState({
+ recentReports: [],
+ personalDetails: [],
+ userToInvite: null,
+ });
+
+ const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
/**
* Returns the sections needed for the OptionsSelector
@@ -93,145 +72,122 @@ class MoneyRequestParticipantsSplitSelector extends Component {
* @param {Boolean} maxParticipantsReached
* @returns {Array}
*/
- getSections(maxParticipantsReached) {
- const sections = [];
+ const sections = useMemo(() => {
+ const newSections = [];
let indexOffset = 0;
- sections.push({
+ newSections.push({
title: undefined,
- data: OptionsListUtils.getParticipantsOptions(this.props.participants, this.props.personalDetails),
+ data: OptionsListUtils.getParticipantsOptions(participants, personalDetails),
shouldShow: true,
indexOffset,
});
- indexOffset += this.props.participants.length;
+ indexOffset += participants.length;
if (maxParticipantsReached) {
- return sections;
+ return newSections;
}
- sections.push({
- title: this.props.translate('common.recents'),
- data: this.state.recentReports,
- shouldShow: !_.isEmpty(this.state.recentReports),
+ newSections.push({
+ title: translate('common.recents'),
+ data: newChatOptions.recentReports,
+ shouldShow: !_.isEmpty(newChatOptions.recentReports),
indexOffset,
});
- indexOffset += this.state.recentReports.length;
+ indexOffset += newChatOptions.recentReports.length;
- sections.push({
- title: this.props.translate('common.contacts'),
- data: this.state.personalDetails,
- shouldShow: !_.isEmpty(this.state.personalDetails),
+ newSections.push({
+ title: translate('common.contacts'),
+ data: newChatOptions.personalDetails,
+ shouldShow: !_.isEmpty(newChatOptions.personalDetails),
indexOffset,
});
- indexOffset += this.state.personalDetails.length;
+ indexOffset += newChatOptions.personalDetails.length;
- if (this.state.userToInvite && !OptionsListUtils.isCurrentUser(this.state.userToInvite)) {
- sections.push({
+ if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
+ newSections.push({
undefined,
- data: [this.state.userToInvite],
+ data: [newChatOptions.userToInvite],
shouldShow: true,
indexOffset,
});
}
- return sections;
- }
-
- updateOptionsWithSearchTerm(searchTerm = '') {
- const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
- this.props.reports,
- this.props.personalDetails,
- this.props.betas,
- searchTerm,
- this.props.participants,
- CONST.EXPENSIFY_EMAILS,
- );
- this.setState({
- searchTerm,
- userToInvite,
- recentReports,
- personalDetails,
- });
- }
-
- /**
- * Once a single or more users are selected, navigates to next step
- */
- finalizeParticipants() {
- this.props.onStepComplete();
- }
+ return newSections;
+ }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate]);
/**
* Removes a selected option from list if already selected. If not already selected add this option to the list.
* @param {Object} option
*/
- toggleOption(option) {
- const isOptionInList = _.some(this.props.participants, (selectedOption) => selectedOption.accountID === option.accountID);
+ const toggleOption = useCallback(
+ (option) => {
+ const isOptionInList = _.some(participants, (selectedOption) => selectedOption.accountID === option.accountID);
- let newSelectedOptions;
+ let newSelectedOptions;
- if (isOptionInList) {
- newSelectedOptions = _.reject(this.props.participants, (selectedOption) => selectedOption.accountID === option.accountID);
- } else {
- newSelectedOptions = [...this.props.participants, {accountID: option.accountID, login: option.login, selected: true}];
- }
+ if (isOptionInList) {
+ newSelectedOptions = _.reject(participants, (selectedOption) => selectedOption.accountID === option.accountID);
+ } else {
+ newSelectedOptions = [...participants, {accountID: option.accountID, login: option.login, selected: true}];
+ }
+
+ onAddParticipants(newSelectedOptions);
+
+ const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, isOptionInList ? searchTerm : '', newSelectedOptions, CONST.EXPENSIFY_EMAILS);
- this.props.onAddParticipants(newSelectedOptions);
-
- this.setState((prevState) => {
- const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
- this.props.reports,
- this.props.personalDetails,
- this.props.betas,
- isOptionInList ? prevState.searchTerm : '',
- newSelectedOptions,
- CONST.EXPENSIFY_EMAILS,
- );
- return {
- recentReports,
- personalDetails,
- userToInvite,
- searchTerm: isOptionInList ? prevState.searchTerm : '',
- };
+ setNewChatOptions({
+ recentReports: chatOptions.recentReports,
+ personalDetails: chatOptions.personalDetails,
+ userToInvite: chatOptions.userToInvite,
+ });
+ },
+ [searchTerm, participants, onAddParticipants, reports, personalDetails, betas, setNewChatOptions],
+ );
+
+ const headerMessage = OptionsListUtils.getHeaderMessage(
+ newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
+ Boolean(newChatOptions.userToInvite),
+ searchTerm,
+ maxParticipantsReached,
+ );
+ const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+
+ useEffect(() => {
+ const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, participants, CONST.EXPENSIFY_EMAILS);
+ setNewChatOptions({
+ recentReports: chatOptions.recentReports,
+ personalDetails: chatOptions.personalDetails,
+ userToInvite: chatOptions.userToInvite,
});
- }
-
- render() {
- const maxParticipantsReached = this.props.participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
- const sections = this.getSections(maxParticipantsReached);
- const headerMessage = OptionsListUtils.getHeaderMessage(
- this.state.personalDetails.length + this.state.recentReports.length !== 0,
- Boolean(this.state.userToInvite),
- this.state.searchTerm,
- maxParticipantsReached,
- );
- const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails);
-
- return (
- 0 ? this.props.safeAreaPaddingBottomStyle : {}]}>
-
-
- );
- }
+ }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions]);
+
+ return (
+ 0 ? safeAreaPaddingBottomStyle : {}]}>
+
+
+ );
}
MoneyRequestParticipantsSplitSelector.propTypes = propTypes;
MoneyRequestParticipantsSplitSelector.defaultProps = defaultProps;
+MoneyRequestParticipantsSplitSelector.displayName = 'MoneyRequestParticipantsSplitSelector';
export default compose(
withLocalize,
diff --git a/src/pages/iouReportPropTypes.js b/src/pages/iouReportPropTypes.js
index d6481cb1e871..284f0915dbbc 100644
--- a/src/pages/iouReportPropTypes.js
+++ b/src/pages/iouReportPropTypes.js
@@ -11,7 +11,7 @@ export default PropTypes.shape({
total: PropTypes.number,
/** The owner of the IOUReport */
- ownerEmail: PropTypes.string,
+ ownerAccountID: PropTypes.number,
/** The currency of the IOUReport */
currency: PropTypes.string,
diff --git a/src/pages/reportPropTypes.js b/src/pages/reportPropTypes.js
index 4b50909032a1..f2e8578aaa38 100644
--- a/src/pages/reportPropTypes.js
+++ b/src/pages/reportPropTypes.js
@@ -50,9 +50,6 @@ export default PropTypes.shape({
/** The policy name to use for an archived report */
oldPolicyName: PropTypes.string,
- /** The email address of the report owner */
- ownerEmail: PropTypes.string,
-
/** The accountID of the report owner */
ownerAccountID: PropTypes.number,
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 97d013f31084..f74e9ac8dfbc 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -276,7 +276,7 @@ class InitialSettingsPage extends React.Component {
brickRoadIndicator={item.brickRoadIndicator}
floatRightAvatars={item.floatRightAvatars}
shouldStackHorizontally={item.shouldStackHorizontally}
- avatarSize={item.avatarSize}
+ floatRightAvatarSize={item.avatarSize}
ref={this.popoverAnchor}
shouldBlockSelection={Boolean(item.link)}
onSecondaryInteraction={!_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, item.link, this.popoverAnchor.current) : undefined}
@@ -326,7 +326,7 @@ class InitialSettingsPage extends React.Component {
style={[styles.mb3]}
onPress={this.openProfileSettings}
accessibilityLabel={this.props.translate('common.profile')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
() => Session.clearAccountMessages(), []);
/**
* @param {String} field
* @returns {String}
*/
- getErrorText(field) {
- return this.state.errors[field] ? this.errorKeysMap[field] : '';
- }
+ const getErrorText = (field) => (errors[field] ? errorKeysMap[field] : '');
/**
* @param {String} field
* @param {String} value
* @param {String[]} additionalErrorsToClear
*/
- clearErrorAndSetValue(field, value, additionalErrorsToClear) {
+ const clearErrorAndSetValue = (field, value, additionalErrorsToClear) => {
const errorsToReset = {
[field]: false,
};
@@ -95,128 +85,123 @@ class PasswordPage extends Component {
errorsToReset[errorFlag] = false;
});
}
-
- this.setState((prevState) => ({
- [field]: value,
- errors: {...prevState.errors, ...errorsToReset},
- }));
- }
+ setPasswordFields((prev) => ({...prev, [field]: value}));
+ setErrors((prev) => ({...prev, ...errorsToReset}));
+ };
/**
* @returns {Boolean}
*/
- validate() {
- const errors = {};
+ const validate = () => {
+ const error = {};
- if (!this.state.currentPassword) {
- errors.currentPassword = true;
+ if (!passwordFields.currentPassword) {
+ error.currentPassword = true;
}
- if (!this.state.newPassword || !ValidationUtils.isValidPassword(this.state.newPassword)) {
- errors.newPassword = true;
+ if (!passwordFields.newPassword || !ValidationUtils.isValidPassword(passwordFields.newPassword)) {
+ error.newPassword = true;
}
- if (this.state.currentPassword && this.state.newPassword && _.isEqual(this.state.currentPassword, this.state.newPassword)) {
- errors.newPasswordSameAsOld = true;
+ if (passwordFields.currentPassword && passwordFields.newPassword && _.isEqual(passwordFields.currentPassword, passwordFields.newPassword)) {
+ error.newPasswordSameAsOld = true;
}
- this.setState({errors});
- return _.size(errors) === 0;
- }
+ setErrors(error);
+ return _.size(error) === 0;
+ };
/**
* Submit the form
*/
- submit() {
- if (!this.validate()) {
+ const submit = () => {
+ if (!validate()) {
return;
}
- User.updatePassword(this.state.currentPassword, this.state.newPassword);
- }
-
- render() {
- const shouldShowNewPasswordPrompt = !this.state.errors.newPassword && !this.state.errors.newPasswordSameAsOld;
- return (
- {
- if (!this.currentPasswordInputRef) {
- return;
- }
-
- this.currentPasswordInputRef.focus();
- }}
- >
- Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
+ User.updatePassword(passwordFields.currentPassword, passwordFields.newPassword);
+ };
+
+ const shouldShowNewPasswordPrompt = !errors.newPassword && !errors.newPasswordSameAsOld;
+ return (
+ {
+ if (!currentPasswordInputRef.current) {
+ return;
+ }
+
+ currentPasswordInputRef.current.focus();
+ }}
+ >
+ Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
+ />
+ {!_.isEmpty(props.account.success) ? (
+
- {!_.isEmpty(this.props.account.success) ? (
-
- ) : (
- <>
-
- {this.props.translate('passwordPage.changingYourPasswordPrompt')}
-
- (this.currentPasswordInputRef = el)}
- secureTextEntry
- autoCompleteType="password"
- textContentType="password"
- value={this.state.currentPassword}
- onChangeText={(text) => this.clearErrorAndSetValue('currentPassword', text)}
- returnKeyType="done"
- hasError={this.state.errors.currentPassword}
- errorText={this.getErrorText('currentPassword')}
- onSubmitEditing={this.submit}
- />
-
-
- this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
- onSubmitEditing={this.submit}
- />
- {shouldShowNewPasswordPrompt && {this.props.translate('passwordPage.newPasswordPrompt')}}
-
- {_.every(this.state.errors, (error) => !error) && !_.isEmpty(this.props.account.errors) && (
-
- )}
-
-
-
-
- )}
-
- );
- }
+ )}
+
+
+
+
+
+ )}
+
+ );
}
PasswordPage.propTypes = propTypes;
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index ec5476a9162e..7c1f400a30e6 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -71,7 +71,7 @@ function AddPayPalMePage(props) {
{props.translate('addPayPalMePage.checkListOf')}
Linking.openURL('https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies')}
>
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index e449b43b22b7..7075c998a56d 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -4,15 +4,10 @@ import PropTypes from 'prop-types';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import ScreenWrapper from '../../../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import OptionsList from '../../../components/OptionsList';
-import styles from '../../../styles/styles';
-import themeColors from '../../../styles/themes/default';
-import * as Expensicons from '../../../components/Icon/Expensicons';
import * as App from '../../../libs/actions/App';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionListRadio from '../../../components/SelectionListRadio';
const propTypes = {
...withLocalizePropTypes,
@@ -26,12 +21,7 @@ function LanguagePage(props) {
value: key,
text: language.label,
keyForList: key,
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: props.preferredLocale === key ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: props.preferredLocale === key,
+ isSelected: props.preferredLocale === key,
}));
return (
@@ -40,18 +30,10 @@ function LanguagePage(props) {
title={props.translate('languagePage.language')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
/>
- App.setLocaleAndNavigate(language.value)}
- hideSectionHeaders
- optionHoveredStyle={{
- ...styles.hoveredComponentBG,
- ...styles.mhn5,
- ...styles.ph5,
- }}
- shouldHaveOptionSeparator
- shouldDisableRowInnerPadding
- contentContainerStyles={[styles.ph5]}
+ initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList}
/>
);
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index cf48e63d015d..3c3ea5bfe6f8 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -5,18 +5,14 @@ import PropTypes from 'prop-types';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import ScreenWrapper from '../../../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import OptionsList from '../../../components/OptionsList';
import styles from '../../../styles/styles';
import Text from '../../../components/Text';
-import themeColors from '../../../styles/themes/default';
-import * as Expensicons from '../../../components/Icon/Expensicons';
import ONYXKEYS from '../../../ONYXKEYS';
import * as User from '../../../libs/actions/User';
import CONST from '../../../CONST';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionListRadio from '../../../components/SelectionListRadio';
const propTypes = {
/** The chat priority mode */
@@ -38,12 +34,7 @@ function PriorityModePage(props) {
// Set max line to undefined to reset line restriction
alternateTextMaxLines: undefined,
keyForList: key,
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: props.priorityMode === key ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: props.priorityMode === key,
+ isSelected: props.priorityMode === key,
}));
return (
@@ -53,18 +44,10 @@ function PriorityModePage(props) {
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
/>
{props.translate('priorityModePage.explainerText')}
- User.updateChatPriorityMode(mode.value)}
- hideSectionHeaders
- optionHoveredStyle={{
- ...styles.hoveredComponentBG,
- ...styles.mhn5,
- ...styles.ph5,
- }}
- shouldHaveOptionSeparator
- shouldDisableRowInnerPadding
- contentContainerStyles={[styles.ph5]}
+ initiallyFocusedOptionKey={_.find(priorityModes, (mode) => mode.isSelected).keyForList}
/>
);
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 8c97c2706ebd..f45f9ee154f6 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -2,7 +2,7 @@ import Str from 'expensify-common/lib/str';
import lodashGet from 'lodash/get';
import _ from 'underscore';
import React, {Component} from 'react';
-import {View, ScrollView} from 'react-native';
+import {View, ScrollView, Keyboard} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import Navigation from '../../../../libs/Navigation/Navigation';
@@ -177,6 +177,7 @@ class ContactMethodDetailsPage extends Component {
*/
toggleDeleteModal(isOpen) {
this.setState({isDeleteModalOpen: isOpen});
+ Keyboard.dismiss();
}
/**
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 383327ecd941..cedfa19c243a 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -111,7 +111,7 @@ function ContactMethodsPage(props) {
});
return (
-
+
Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 5b1aa87cea80..2bf899a6eea5 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -15,11 +15,13 @@ import * as User from '../../../../../libs/actions/User';
import Button from '../../../../../components/Button';
import DotIndicatorMessage from '../../../../../components/DotIndicatorMessage';
import * as Session from '../../../../../libs/actions/Session';
+import shouldDelayFocus from '../../../../../libs/shouldDelayFocus';
import Text from '../../../../../components/Text';
import {withNetwork} from '../../../../../components/OnyxProvider';
import PressableWithFeedback from '../../../../../components/Pressable/PressableWithFeedback';
import themeColors from '../../../../../styles/themes/default';
import * as StyleUtils from '../../../../../styles/StyleUtils';
+import CONST from '../../../../../CONST';
const propTypes = {
...withLocalizePropTypes,
@@ -134,6 +136,7 @@ function BaseValidateCodeForm(props) {
errorText={formError.validateCode ? props.translate(formError.validateCode) : ErrorUtils.getLatestErrorMessage(props.account)}
onFulfill={validateAndSubmitForm}
autoFocus
+ shouldDelayFocus={shouldDelayFocus}
/>
{props.translate('contacts.resendMagicCode')}
@@ -165,7 +168,7 @@ function BaseValidateCodeForm(props) {
User.clearContactMethodErrors(props.contactMethod, 'validateLogin')}
>
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index d26960e406f5..446d8fa180ef 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -77,48 +77,45 @@ function AddressPage(props) {
* @param {Object} values - form input values
* @returns {Object} - An object containing the errors for each inputID
*/
- const validate = useCallback(
- (values) => {
- const errors = {};
+ const validate = useCallback((values) => {
+ const errors = {};
- const requiredFields = ['addressLine1', 'city', 'country', 'state'];
+ const requiredFields = ['addressLine1', 'city', 'country', 'state'];
- // Check "State" dropdown is a valid state if selected Country is USA.
- if (isUSAForm && !COMMON_CONST.STATES[values.state]) {
- errors.state = 'common.error.fieldRequired';
- }
+ // Check "State" dropdown is a valid state if selected Country is USA
+ if (values.country === CONST.COUNTRY.US && !COMMON_CONST.STATES[values.state]) {
+ errors.state = 'common.error.fieldRequired';
+ }
- // Add "Field required" errors if any required field is empty
- _.each(requiredFields, (fieldKey) => {
- if (ValidationUtils.isRequiredFulfilled(values[fieldKey])) {
- return;
- }
- errors[fieldKey] = 'common.error.fieldRequired';
- });
-
- // If no country is selected, default value is an empty string and there's no related regex data so we default to an empty object
- const countryRegexDetails = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, values.country, {});
-
- // The postal code system might not exist for a country, so no regex either for them.
- const countrySpecificZipRegex = lodashGet(countryRegexDetails, 'regex');
- const countryZipFormat = lodashGet(countryRegexDetails, 'samples');
-
- if (countrySpecificZipRegex) {
- if (!countrySpecificZipRegex.test(values.zipPostCode.trim().toUpperCase())) {
- if (ValidationUtils.isRequiredFulfilled(values.zipPostCode.trim())) {
- errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];
- } else {
- errors.zipPostCode = 'common.error.fieldRequired';
- }
+ // Add "Field required" errors if any required field is empty
+ _.each(requiredFields, (fieldKey) => {
+ if (ValidationUtils.isRequiredFulfilled(values[fieldKey])) {
+ return;
+ }
+ errors[fieldKey] = 'common.error.fieldRequired';
+ });
+
+ // If no country is selected, default value is an empty string and there's no related regex data so we default to an empty object
+ const countryRegexDetails = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, values.country, {});
+
+ // The postal code system might not exist for a country, so no regex either for them.
+ const countrySpecificZipRegex = lodashGet(countryRegexDetails, 'regex');
+ const countryZipFormat = lodashGet(countryRegexDetails, 'samples');
+
+ if (countrySpecificZipRegex) {
+ if (!countrySpecificZipRegex.test(values.zipPostCode.trim().toUpperCase())) {
+ if (ValidationUtils.isRequiredFulfilled(values.zipPostCode.trim())) {
+ errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];
+ } else {
+ errors.zipPostCode = 'common.error.fieldRequired';
}
- } else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values.zipPostCode.trim().toUpperCase())) {
- errors.zipPostCode = 'privatePersonalDetails.error.incorrectZipFormat';
}
+ } else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values.zipPostCode.trim().toUpperCase())) {
+ errors.zipPostCode = 'privatePersonalDetails.error.incorrectZipFormat';
+ }
- return errors;
- },
- [isUSAForm],
- );
+ return errors;
+ }, []);
return (
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index c18ba1968cd4..90f934658def 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -9,14 +9,10 @@ import Text from '../../../components/Text';
import styles from '../../../styles/styles';
import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
import compose from '../../../libs/compose';
-import themeColors from '../../../styles/themes/default';
-import * as Expensicons from '../../../components/Icon/Expensicons';
import CONST from '../../../CONST';
-import OptionsSelector from '../../../components/OptionsSelector';
import ROUTES from '../../../ROUTES';
import Navigation from '../../../libs/Navigation/Navigation';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionListRadio from '../../../components/SelectionListRadio';
const propTypes = {
...withLocalizePropTypes,
@@ -56,12 +52,7 @@ function PronounsPage(props) {
text: value,
value: fullPronounKey,
keyForList: key,
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: isCurrentPronouns ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: isCurrentPronouns,
+ isSelected: isCurrentPronouns,
};
})
.sortBy((pronoun) => pronoun.text.toLowerCase())
@@ -108,30 +99,21 @@ function PronounsPage(props) {
return (
- {({safeAreaPaddingBottomStyle}) => (
- <>
- Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
- />
- {props.translate('pronounsPage.isShownOnProfile')}
-
-
- )}
+ Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
+ />
+ {props.translate('pronounsPage.isShownOnProfile')}
+
);
}
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index a5853d3c99d5..22f9739e4d51 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -7,16 +7,11 @@ import ScreenWrapper from '../../../components/ScreenWrapper';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import CONST from '../../../CONST';
-import styles from '../../../styles/styles';
import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
import compose from '../../../libs/compose';
-import OptionsSelector from '../../../components/OptionsSelector';
-import themeColors from '../../../styles/themes/default';
-import * as Expensicons from '../../../components/Icon/Expensicons';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
-
-const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
+import SelectionListRadio from '../../../components/SelectionListRadio';
const propTypes = {
...withLocalizePropTypes,
@@ -84,12 +79,7 @@ class TimezoneSelectPage extends Component {
return {
text,
keyForList: this.getKey(text),
-
- // Include the green checkmark icon to indicate the currently selected value
- customIcon: text === this.timezone.selected ? greenCheckmark : undefined,
-
- // This property will make the currently selected value have bold text
- boldStyle: text === this.timezone.selected,
+ isSelected: text === this.timezone.selected,
};
}
@@ -122,25 +112,18 @@ class TimezoneSelectPage extends Component {
render() {
return (
- {({safeAreaPaddingBottomStyle}) => (
- <>
- Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
- />
- tz.text === this.timezone.selected)[0], 'keyForList')}
- />
-
- )}
+ Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
+ />
+ tz.text === this.timezone.selected)[0], 'keyForList')}
+ />
);
}
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index 02ab518d999b..7f246a346c56 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -97,9 +97,12 @@ class ReportSettingsPage extends Component {
const shouldDisableRename = this.shouldDisableRename(linkedWorkspace) || ReportUtils.isChatThread(this.props.report);
const notificationPreference = this.props.translate(`notificationPreferencesPage.notificationPreferences.${this.props.report.notificationPreference}`);
const shouldDisableWelcomeMessage = this.shouldDisableWelcomeMessage(linkedWorkspace);
- const writeCapability = this.props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL;
+ const writeCapability = ReportUtils.isAdminRoom(this.props.report)
+ ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS
+ : this.props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL;
+
const writeCapabilityText = this.props.translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
- const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN;
+ const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(this.props.report);
return (
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index 381d21785564..bfec919fddc8 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -14,6 +14,8 @@ import ROUTES from '../../../ROUTES';
import * as Report from '../../../libs/actions/Report';
import * as Expensicons from '../../../components/Icon/Expensicons';
import themeColors from '../../../styles/themes/default';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
const propTypes = {
...withLocalizePropTypes,
@@ -38,24 +40,26 @@ function WriteCapabilityPage(props) {
return (
- Navigation.goBack(ROUTES.getReportSettingsRoute(props.report.reportID))}
- />
- Report.updateWriteCapabilityAndNavigate(props.report, option.value)}
- hideSectionHeaders
- optionHoveredStyle={{
- ...styles.hoveredComponentBG,
- ...styles.mhn5,
- ...styles.ph5,
- }}
- shouldHaveOptionSeparator
- shouldDisableRowInnerPadding
- contentContainerStyles={[styles.ph5]}
- />
+
+ Navigation.goBack(ROUTES.getReportSettingsRoute(props.report.reportID))}
+ />
+ Report.updateWriteCapabilityAndNavigate(props.report, option.value)}
+ hideSectionHeaders
+ optionHoveredStyle={{
+ ...styles.hoveredComponentBG,
+ ...styles.mhn5,
+ ...styles.ph5,
+ }}
+ shouldHaveOptionSeparator
+ shouldDisableRowInnerPadding
+ contentContainerStyles={[styles.ph5]}
+ />
+
);
}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 8b99d16302b2..3d6daf73bd04 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -109,6 +109,7 @@ function CloseAccountPage(props) {
keyboardType={Str.isValidEmail(userEmailOrPhone) ? CONST.KEYBOARD_TYPE.EMAIL_ADDRESS : CONST.KEYBOARD_TYPE.DEFAULT}
/>
Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
/>
-
- {
- setIsConfirmModalVisible(true);
+
+
+ {
+ setIsConfirmModalVisible(true);
+ },
+ icon: Expensicons.Close,
+ iconFill: themeColors.danger,
+ wrapperStyle: [styles.cardMenuItem],
},
- icon: Expensicons.Close,
- iconFill: themeColors.danger,
- wrapperStyle: [styles.cardMenuItem],
- },
- ]}
- containerStyles={[styles.twoFactorAuthSection]}
- >
-
- {props.translate('twoFactorAuth.whatIsTwoFactorAuth')}
-
-
- {
- setIsConfirmModalVisible(false);
- Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLE);
- }}
- onCancel={() => setIsConfirmModalVisible(false)}
- onModalHide={() => setIsConfirmModalVisible(false)}
- isVisible={isConfirmModalVisible}
- prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
- confirmText={props.translate('twoFactorAuth.disable')}
- cancelText={props.translate('common.cancel')}
- shouldShowCancelButton
- danger
- />
-
+ ]}
+ containerStyles={[styles.twoFactorAuthSection]}
+ >
+
+ {props.translate('twoFactorAuth.whatIsTwoFactorAuth')}
+
+
+ {
+ setIsConfirmModalVisible(false);
+ Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLE);
+ }}
+ onCancel={() => setIsConfirmModalVisible(false)}
+ onModalHide={() => setIsConfirmModalVisible(false)}
+ isVisible={isConfirmModalVisible}
+ prompt={props.translate('twoFactorAuth.disableTwoFactorAuthConfirmation')}
+ confirmText={props.translate('twoFactorAuth.disable')}
+ cancelText={props.translate('common.cancel')}
+ shouldShowCancelButton
+ danger
+ />
+
+
);
}
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
index ca78219178ef..7455a19f1131 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, forwardRef, useImperativeHandle} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import MagicCodeInput from '../../../../../components/MagicCodeInput';
@@ -31,6 +31,7 @@ const defaultProps = {
function BaseTwoFactorAuthForm(props) {
const [formError, setFormError] = useState({});
const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
+ const inputRef = React.useRef(null);
/**
* Handle text input and clear formError upon text change
@@ -53,6 +54,9 @@ function BaseTwoFactorAuthForm(props) {
* Check that all the form fields are valid, then trigger the submit callback
*/
const validateAndSubmitForm = useCallback(() => {
+ if (inputRef.current) {
+ inputRef.current.blur();
+ }
if (!twoFactorAuthCode.trim()) {
setFormError({twoFactorAuthCode: 'twoFactorAuthForm.error.pleaseFillTwoFactorAuth'});
return;
@@ -67,6 +71,12 @@ function BaseTwoFactorAuthForm(props) {
Session.validateTwoFactorAuth(twoFactorAuthCode);
}, [twoFactorAuthCode]);
+ useImperativeHandle(props.innerRef, () => ({
+ validateAndSubmitForm() {
+ validateAndSubmitForm();
+ },
+ }));
+
return (
);
}
@@ -90,4 +101,12 @@ export default compose(
withOnyx({
account: {key: ONYXKEYS.ACCOUNT},
}),
-)(BaseTwoFactorAuthForm);
+)(
+ forwardRef((props, ref) => (
+
+ )),
+);
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
index ea0d5e257e2f..ba7bb2186aa6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.android.js
@@ -1,10 +1,29 @@
import React from 'react';
+import PropTypes from 'prop-types';
import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-function TwoFactorAuthForm() {
- return ;
+const propTypes = {
+ /**
+ * A ref to forward to the Pressable
+ */
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+const defaultProps = {
+ innerRef: () => {},
+};
+
+function TwoFactorAuthForm(props) {
+ return (
+
+ );
}
+TwoFactorAuthForm.propTypes = propTypes;
+TwoFactorAuthForm.defaultProps = defaultProps;
TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
index c52e65facd6d..171322ecb32d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/index.js
@@ -1,10 +1,29 @@
import React from 'react';
+import PropTypes from 'prop-types';
import BaseTwoFactorAuthForm from './BaseTwoFactorAuthForm';
-function TwoFactorAuthForm() {
- return ;
+const propTypes = {
+ /**
+ * A ref to forward to the Pressable
+ */
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+};
+
+const defaultProps = {
+ innerRef: () => {},
+};
+
+function TwoFactorAuthForm(props) {
+ return (
+
+ );
}
+TwoFactorAuthForm.propTypes = propTypes;
+TwoFactorAuthForm.defaultProps = defaultProps;
TwoFactorAuthForm.displayName = 'TwoFactorAuthForm';
export default TwoFactorAuthForm;
diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
index 90765b45caa2..8b91fdbe8693 100644
--- a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
@@ -55,6 +55,8 @@ const defaultProps = {
};
function VerifyPage(props) {
+ const formRef = React.useRef(null);
+
useEffect(() => {
Session.clearAccountMessages();
}, []);
@@ -139,15 +141,20 @@ function VerifyPage(props) {
{props.translate('twoFactorAuth.enterCode')}
-
+
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 3419454d611b..c152a903fbef 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -9,6 +9,7 @@ import ONYXKEYS from '../../ONYXKEYS';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
import PressableWithFeedback from '../../components/Pressable/PressableWithFeedback';
+import CONST from '../../CONST';
const propTypes = {
/** The credentials of the logged in person */
@@ -36,7 +37,7 @@ function ChangeExpensifyLoginLink(props) {
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
old mode 100755
new mode 100644
index 154efb3b56e0..4bea0a276638
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
@@ -65,165 +65,150 @@ const defaultProps = {
blurOnSubmit: false,
};
-class LoginForm extends React.Component {
- constructor(props) {
- super(props);
- this.onTextInput = this.onTextInput.bind(this);
- this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this);
+function LoginForm(props) {
+ const input = useRef();
+ const [login, setLogin] = useState('');
+ const [formError, setFormError] = useState(false);
- this.state = {
- formError: false,
- login: '',
- };
-
- if (this.props.account.errors || this.props.account.isLoading) {
- Session.clearAccountMessages();
- }
- }
-
- componentDidMount() {
- if (!canFocusInputOnScreenFocus() || !this.input || !this.props.isVisible) {
- return;
- }
- this.input.focus();
- }
-
- componentDidUpdate(prevProps) {
- if (!prevProps.blurOnSubmit && this.props.blurOnSubmit) {
- this.input.blur();
- }
- if (prevProps.isVisible || !this.props.isVisible) {
- return;
- }
- this.input.focus();
- }
+ const {translate} = props;
/**
* Handle text input and clear formError upon text change
*
* @param {String} text
*/
- onTextInput(text) {
- this.setState({
- login: text,
- formError: null,
- });
-
- if (this.props.account.errors || this.props.account.message) {
- Session.clearAccountMessages();
- }
+ const onTextInput = useCallback(
+ (text) => {
+ setLogin(text);
+ setFormError(null);
- // Clear the "Account successfully closed" message when the user starts typing
- if (this.props.closeAccount.success && !isInputAutoFilled(this.input)) {
- CloseAccount.setDefaultData();
- }
- }
+ if (props.account.errors || props.account.message) {
+ Session.clearAccountMessages();
+ }
- /**
- * Clear Login from the state
- */
- clearLogin() {
- this.setState({login: ''}, this.input.clear);
- }
+ // Clear the "Account successfully closed" message when the user starts typing
+ if (props.closeAccount.success && !isInputAutoFilled(input.current)) {
+ CloseAccount.setDefaultData();
+ }
+ },
+ [props.account, props.closeAccount, input, setFormError, setLogin],
+ );
/**
* Check that all the form fields are valid, then trigger the submit callback
*/
- validateAndSubmitForm() {
- if (this.props.network.isOffline) {
+ const validateAndSubmitForm = useCallback(() => {
+ if (props.network.isOffline) {
return;
}
// If account was closed and have success message in Onyx, we clear it here
- if (!_.isEmpty(this.props.closeAccount.success)) {
+ if (!_.isEmpty(props.closeAccount.success)) {
CloseAccount.setDefaultData();
}
- const login = this.state.login.trim();
- if (!login) {
- this.setState({formError: 'common.pleaseEnterEmailOrPhoneNumber'});
+ const loginTrim = login.trim();
+ if (!loginTrim) {
+ setFormError('common.pleaseEnterEmailOrPhoneNumber');
return;
}
- const phoneLogin = LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(login));
+ const phoneLogin = LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(loginTrim));
const parsedPhoneNumber = parsePhoneNumber(phoneLogin);
- if (!Str.isValidEmail(login) && !parsedPhoneNumber.possible) {
- if (ValidationUtils.isNumericWithSpecialChars(login)) {
- this.setState({formError: 'common.error.phoneNumber'});
+ if (!Str.isValidEmail(loginTrim) && !parsedPhoneNumber.possible) {
+ if (ValidationUtils.isNumericWithSpecialChars(loginTrim)) {
+ setFormError('common.error.phoneNumber');
} else {
- this.setState({formError: 'loginForm.error.invalidFormatEmailLogin'});
+ setFormError('loginForm.error.invalidFormatEmailLogin');
}
return;
}
- this.setState({
- formError: null,
- });
+ setFormError(null);
// Check if this login has an account associated with it or not
- Session.beginSignIn(parsedPhoneNumber.possible ? parsedPhoneNumber.number.e164 : login);
- }
-
- render() {
- const formErrorText = this.state.formError ? this.props.translate(this.state.formError) : '';
- const serverErrorText = ErrorUtils.getLatestErrorMessage(this.props.account);
- const hasError = !_.isEmpty(serverErrorText);
- return (
- <>
-
- (this.input = el)}
- label={this.props.translate('loginForm.phoneOrEmail')}
- value={this.state.login}
- autoCompleteType="username"
- textContentType="username"
- nativeID="username"
- name="username"
- onChangeText={this.onTextInput}
- onSubmitEditing={this.validateAndSubmitForm}
- autoCapitalize="none"
- autoCorrect={false}
- keyboardType={CONST.KEYBOARD_TYPE.EMAIL_ADDRESS}
- errorText={formErrorText}
- hasError={hasError}
- />
-
- {!_.isEmpty(this.props.account.success) && {this.props.account.success}}
- {!_.isEmpty(this.props.closeAccount.success || this.props.account.message) && (
- // DotIndicatorMessage mostly expects onyxData errors, so we need to mock an object so that the messages looks similar to prop.account.errors
-
- )}
- {
- // We need to unmount the submit button when the component is not visible so that the Enter button
- // key handler gets unsubscribed and does not conflict with the Password Form
- this.props.isVisible && (
-
-
-
- )
- }
-
- );
- }
+ Session.beginSignIn(parsedPhoneNumber.possible ? parsedPhoneNumber.number.e164 : loginTrim);
+ }, [login, props.closeAccount, props.network, setFormError]);
+
+ useEffect(() => {
+ Session.clearAccountMessages();
+ if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible) {
+ return;
+ }
+ input.current.focus();
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to call this function when component is mounted
+ }, []);
+
+ useEffect(() => {
+ if (props.blurOnSubmit) {
+ input.current.blur();
+ }
+ if (!input.current || !props.isVisible) {
+ return;
+ }
+ input.current.focus();
+ }, [props.blurOnSubmit, props.isVisible, input]);
+
+ const formErrorText = useMemo(() => (formError ? translate(formError) : ''), [formError, translate]);
+ const serverErrorText = useMemo(() => ErrorUtils.getLatestErrorMessage(props.account), [props.account]);
+ const hasError = !_.isEmpty(serverErrorText);
+
+ return (
+ <>
+
+
+
+ {!_.isEmpty(props.account.success) && {props.account.success}}
+ {!_.isEmpty(props.closeAccount.success || props.account.message) && (
+ // DotIndicatorMessage mostly expects onyxData errors, so we need to mock an object so that the messages looks similar to prop.account.errors
+
+ )}
+ {
+ // We need to unmount the submit button when the component is not visible so that the Enter button
+ // key handler gets unsubscribed and does not conflict with the Password Form
+ props.isVisible && (
+
+
+
+ )
+ }
+
+ );
}
LoginForm.propTypes = propTypes;
LoginForm.defaultProps = defaultProps;
+LoginForm.displayName = 'LoginForm';
export default compose(
withOnyx({
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 48e9493be4a3..36bf29462e21 100644
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -202,7 +202,7 @@ function PasswordForm(props) {
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 091e386fb100..aea03469e938 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -94,7 +94,7 @@ function ResendValidationForm(props) {
redirectToSignIn()}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={props.translate('common.back')}
// disable hover dim for switch
hoverDimmingValue={1}
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 8c3d513f5303..042837401751 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -1,5 +1,6 @@
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
+import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
import {View} from 'react-native';
import Str from 'expensify-common/lib/str';
@@ -64,11 +65,11 @@ const defaultProps = {
* @param {Boolean} canUsePasswordlessLogins
* @returns {Object}
*/
-function getRenderOptions({hasLogin, hasPassword, hasValidateCode, isPrimaryLogin, isAccountValidated, didForgetPassword, canUsePasswordlessLogins}) {
+function getRenderOptions({hasLogin, hasPassword, hasValidateCode, hasAccount, isPrimaryLogin, isAccountValidated, didForgetPassword, canUsePasswordlessLogins}) {
const shouldShowLoginForm = !hasLogin && !hasValidateCode;
const isUnvalidatedSecondaryLogin = hasLogin && !isPrimaryLogin && !isAccountValidated;
const shouldShowPasswordForm = hasLogin && isAccountValidated && !hasPassword && !didForgetPassword && !isUnvalidatedSecondaryLogin && !canUsePasswordlessLogins;
- const shouldShowValidateCodeForm = (hasLogin || hasValidateCode) && !isUnvalidatedSecondaryLogin && canUsePasswordlessLogins;
+ const shouldShowValidateCodeForm = hasAccount && (hasLogin || hasValidateCode) && !isUnvalidatedSecondaryLogin && canUsePasswordlessLogins;
const shouldShowResendValidationForm = hasLogin && (!isAccountValidated || didForgetPassword) && !isUnvalidatedSecondaryLogin && !canUsePasswordlessLogins;
const shouldShowWelcomeHeader = shouldShowLoginForm || shouldShowPasswordForm || shouldShowValidateCodeForm || isUnvalidatedSecondaryLogin;
const shouldShowWelcomeText = shouldShowLoginForm || shouldShowPasswordForm || shouldShowValidateCodeForm;
@@ -106,6 +107,7 @@ function SignInPage({credentials, account}) {
hasLogin: Boolean(credentials.login),
hasPassword: Boolean(credentials.password),
hasValidateCode: Boolean(credentials.validateCode),
+ hasAccount: !_.isEmpty(account),
isPrimaryLogin: !account.primaryLogin || account.primaryLogin === credentials.login,
isAccountValidated: Boolean(account.validated),
didForgetPassword: Boolean(account.forgotPassword),
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 83a4d0afbaa5..d5e0f73d303f 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -91,7 +91,7 @@ function BaseValidateCodeForm(props) {
const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors);
useEffect(() => {
- if (!(inputValidateCodeRef.current && ((hasError && props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED) || props.account.isLoading))) {
+ if (!(inputValidateCodeRef.current && hasError && (props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED || props.account.isLoading))) {
return;
}
inputValidateCodeRef.current.blur();
@@ -286,7 +286,7 @@ function BaseValidateCodeForm(props) {
disabled={props.network.isOffline}
hoverDimmingValue={1}
pressDimmingValue={0.2}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
>
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 287ec0396d92..582763349e5b 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -13,7 +13,7 @@ import Form from '../../components/Form';
import TextInput from '../../components/TextInput';
import Permissions from '../../libs/Permissions';
import ROUTES from '../../ROUTES';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
import focusAndUpdateMultilineInputRange from '../../libs/focusAndUpdateMultilineInputRange';
const propTypes = {
@@ -42,7 +42,7 @@ function NewTaskDescriptionPage(props) {
// On submit, we want to call the assignTask function and wait to validate
// the response
const onSubmit = (values) => {
- TaskUtils.setDescriptionValue(values.taskDescription);
+ Task.setDescriptionValue(values.taskDescription);
Navigation.navigate(ROUTES.NEW_TASK);
};
@@ -56,8 +56,8 @@ function NewTaskDescriptionPage(props) {
onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
>
TaskUtils.dismissModalAndClearOutTaskInfo()}
+ title={props.translate('task.description')}
+ onCloseButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
onBackButtonPress={() => Navigation.goBack(ROUTES.NEW_TASK)}
/>
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index c9e80e0343dc..277bf2d7058b 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -1,8 +1,10 @@
/* eslint-disable es/no-optional-chaining */
-import React, {useState, useEffect, useMemo} from 'react';
+import React, {useState, useEffect, useMemo, useCallback} from 'react';
import {View} from 'react-native';
+import _ from 'underscore';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
import OptionsSelector from '../../components/OptionsSelector';
import * as OptionsListUtils from '../../libs/OptionsListUtils';
import ONYXKEYS from '../../ONYXKEYS';
@@ -17,7 +19,7 @@ import personalDetailsPropType from '../personalDetailsPropType';
import reportPropTypes from '../reportPropTypes';
import ROUTES from '../../ROUTES';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
const propTypes = {
/** Beta features list */
@@ -75,16 +77,7 @@ function TaskAssigneeSelectorModal(props) {
const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null);
- useEffect(() => {
- const results = OptionsListUtils.getNewChatOptions(props.reports, props.personalDetails, props.betas, '', [], CONST.EXPENSIFY_EMAILS, false);
-
- setFilteredRecentReports(results.recentReports);
- setFilteredPersonalDetails(results.personalDetails);
- setFilteredUserToInvite(results.userToInvite);
- setFilteredCurrentUserOption(results.currentUserOption);
- }, [props]);
-
- useEffect(() => {
+ const updateOptions = useCallback(() => {
const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getNewChatOptions(
props.reports,
props.personalDetails,
@@ -103,6 +96,14 @@ function TaskAssigneeSelectorModal(props) {
setFilteredCurrentUserOption(currentUserOption);
}, [props, searchValue]);
+ useEffect(() => {
+ const debouncedSearch = _.debounce(updateOptions, 200);
+ debouncedSearch();
+ return () => {
+ debouncedSearch.cancel();
+ };
+ }, [updateOptions]);
+
const onChangeText = (newSearchTerm = '') => {
setSearchValue(newSearchTerm);
};
@@ -158,7 +159,7 @@ function TaskAssigneeSelectorModal(props) {
if (!props.route.params && option.accountID) {
// Clear out the state value, set the assignee and navigate back to the NewTaskPage
setSearchValue('');
- TaskUtils.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+ Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
return Navigation.goBack();
}
@@ -166,9 +167,13 @@ function TaskAssigneeSelectorModal(props) {
if (props.route.params.reportID && props.task.report.reportID === props.route.params.reportID) {
// There was an issue where sometimes a new assignee didn't have a DM thread
// This would cause the app to crash, so we need to make sure we have a DM thread
- TaskUtils.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+ Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
+
// Pass through the selected assignee
- TaskUtils.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {assignee: option.login, assigneeAccountID: option.accountID});
+ Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {
+ assignee: option.login,
+ assigneeAccountID: option.accountID,
+ });
}
};
@@ -177,8 +182,8 @@ function TaskAssigneeSelectorModal(props) {
{({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
<>
Navigation.goBack(ROUTES.NEW_TASK)}
+ title={props.translate('task.assignee')}
+ onBackButtonPress={() => (lodashGet(props.task.report, 'isExistingTaskReport') ? Navigation.dismissModal() : Navigation.goBack(ROUTES.NEW_TASK))}
/>
{
- // Set the description of the report in the store and then call TaskUtils.editTaskReport
+ // Set the description of the report in the store and then call Task.editTaskReport
// to update the description of the report on the server
- TaskUtils.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {description: values.description});
+ Task.editTaskAndNavigate(props.task.report, props.session.email, props.session.accountID, {description: values.description});
},
[props],
);
@@ -54,7 +54,7 @@ function TaskDescriptionPage(props) {
includeSafeAreaPaddingBottom={false}
onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
>
-
+
@@ -99,8 +99,8 @@ export default compose(
session: {
key: ONYXKEYS.SESSION,
},
- task: {
- key: ONYXKEYS.TASK,
+ report: {
+ key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
},
}),
)(TaskTitlePage);
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index a5bb8493da51..38be2fa07655 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -212,7 +212,7 @@ function WorkspaceInitialPage(props) {
style={[styles.pRelative, styles.avatarLarge]}
onPress={() => openEditor(policy.id)}
accessibilityLabel={props.translate('workspace.common.settings')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
openEditor(policy.id)}
accessibilityLabel={props.translate('workspace.common.settings')}
- accessibilityRole="button"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 2fc0cfc4c5fe..4d4a1e09f331 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -178,10 +178,7 @@ class WorkspaceInvitePage extends React.Component {
_.forEach(personalDetails, (detail) => (detailsMap[detail.login] = detail));
const selectedOptions = [];
_.forEach(this.state.selectedOptions, (option) => {
- if (!_.has(detailsMap, option.login)) {
- return;
- }
- selectedOptions.push(detailsMap[option.login]);
+ selectedOptions.push(_.has(detailsMap, option.login) ? detailsMap[option.login] : option);
});
this.setState({
@@ -266,58 +263,63 @@ class WorkspaceInvitePage extends React.Component {
}
render() {
- const sections = this.getSections();
const headerMessage = OptionsListUtils.getHeaderMessage(this.state.personalDetails.length !== 0, Boolean(this.state.userToInvite), this.state.searchTerm);
const policyName = lodashGet(this.props.policy, 'name');
return (
- Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
- >
- {
- this.clearErrors();
- Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
- }}
- />
-
-
-
-
-
-
-
+ {({didScreenTransitionEnd}) => {
+ const sections = didScreenTransitionEnd ? this.getSections() : [];
+ return (
+ Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
+ >
+ {
+ this.clearErrors();
+ Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
+ }}
+ />
+
+
+
+
+
+
+
+ );
+ }}
);
}
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index e4f8559e37b7..bb03051af05c 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -32,7 +32,7 @@ import * as UserUtils from '../../libs/UserUtils';
import FormHelpMessage from '../../components/FormHelpMessage';
import TextInput from '../../components/TextInput';
import KeyboardDismissingFlatList from '../../components/KeyboardDismissingFlatList';
-import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
import * as PolicyUtils from '../../libs/PolicyUtils';
import PressableWithFeedback from '../../components/Pressable/PressableWithFeedback';
import usePrevious from '../../hooks/usePrevious';
@@ -40,7 +40,7 @@ import Log from '../../libs/Log';
import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
const propTypes = {
- /** The personal details of the person who is logged in */
+ /** All personal details asssociated with user */
personalDetails: personalDetailsPropType,
/** URL Route params */
@@ -61,6 +61,7 @@ const propTypes = {
...policyPropTypes,
...withLocalizePropTypes,
...windowDimensionsPropTypes,
+ ...withCurrentUserPersonalDetailsPropTypes,
network: networkPropTypes.isRequired,
};
@@ -70,6 +71,7 @@ const defaultProps = {
accountID: 0,
},
...policyDefaultProps,
+ ...withCurrentUserPersonalDetailsDefaultProps,
};
function WorkspaceMembersPage(props) {
@@ -305,7 +307,7 @@ function WorkspaceMembersPage(props) {
style={[styles.peopleRow, (_.isEmpty(item.errors) || errors[item.accountID]) && styles.peopleRowBorderBottom, hasError && styles.borderColorDanger]}
disabled={disabled}
onPress={() => toggleUser(item.accountID, item.pendingAction)}
- accessibilityRole="checkbox"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
accessibilityState={{
checked: isChecked,
}}
@@ -334,7 +336,7 @@ function WorkspaceMembersPage(props) {
type: CONST.ICON_TYPE_AVATAR,
},
],
- keyForList: item.accountID,
+ keyForList: String(item.accountID),
}}
onSelectRow={() => toggleUser(item.accountID, item.pendingAction)}
/>
@@ -455,7 +457,7 @@ function WorkspaceMembersPage(props) {
toggleAllUsers(removableMembers)}
- accessibilityRole="checkbox"
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
accessibilityState={{
checked: !_.isEmpty(removableMembers) && _.every(_.keys(removableMembers), (accountID) => _.contains(selectedEmployees, Number(accountID))),
}}
diff --git a/src/stories/SelectionListRadio.stories.js b/src/stories/SelectionListRadio.stories.js
new file mode 100644
index 000000000000..698e4743f25a
--- /dev/null
+++ b/src/stories/SelectionListRadio.stories.js
@@ -0,0 +1,207 @@
+import React, {useState} from 'react';
+import _ from 'underscore';
+import SelectionListRadio from '../components/SelectionListRadio';
+import CONST from '../CONST';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+ title: 'Components/SelectionListRadio',
+ component: SelectionListRadio,
+};
+
+const SECTIONS = [
+ {
+ data: [
+ {
+ text: 'Option 1',
+ keyForList: 'option-1',
+ isSelected: false,
+ },
+ {
+ text: 'Option 2',
+ keyForList: 'option-2',
+ isSelected: false,
+ },
+ {
+ text: 'Option 3',
+ keyForList: 'option-3',
+ isSelected: false,
+ },
+ ],
+ indexOffset: 0,
+ isDisabled: false,
+ },
+ {
+ data: [
+ {
+ text: 'Option 4',
+ keyForList: 'option-4',
+ isSelected: false,
+ },
+ {
+ text: 'Option 5',
+ keyForList: 'option-5',
+ isSelected: false,
+ },
+ {
+ text: 'Option 6',
+ keyForList: 'option-6',
+ isSelected: false,
+ },
+ ],
+ indexOffset: 3,
+ isDisabled: false,
+ },
+];
+
+function Default(args) {
+ const [selectedIndex, setSelectedIndex] = useState(1);
+
+ const sections = _.map(args.sections, (section) => {
+ const data = _.map(section.data, (item, index) => {
+ const isSelected = selectedIndex === index + section.indexOffset;
+ return {...item, isSelected};
+ });
+
+ return {...section, data};
+ });
+
+ const onSelectRow = (item) => {
+ _.forEach(sections, (section) => {
+ const newSelectedIndex = _.findIndex(section.data, (option) => option.keyForList === item.keyForList);
+
+ if (newSelectedIndex >= 0) {
+ setSelectedIndex(newSelectedIndex + section.indexOffset);
+ }
+ });
+ };
+
+ return (
+
+ );
+}
+
+Default.args = {
+ sections: SECTIONS,
+ initiallyFocusedOptionKey: 'option-2',
+};
+
+function WithTextInput(args) {
+ const [searchText, setSearchText] = useState('');
+ const [selectedIndex, setSelectedIndex] = useState(1);
+
+ const sections = _.map(args.sections, (section) => {
+ const data = _.reduce(
+ section.data,
+ (memo, item, index) => {
+ if (!item.text.toLowerCase().includes(searchText.trim().toLowerCase())) {
+ return memo;
+ }
+
+ const isSelected = selectedIndex === index + section.indexOffset;
+ memo.push({...item, isSelected});
+ return memo;
+ },
+ [],
+ );
+
+ return {...section, data};
+ });
+
+ const onSelectRow = (item) => {
+ _.forEach(sections, (section) => {
+ const newSelectedIndex = _.findIndex(section.data, (option) => option.keyForList === item.keyForList);
+
+ if (newSelectedIndex >= 0) {
+ setSelectedIndex(newSelectedIndex + section.indexOffset);
+ }
+ });
+ };
+
+ return (
+
+ );
+}
+
+WithTextInput.args = {
+ sections: SECTIONS,
+ textInputLabel: 'Option list',
+ textInputPlaceholder: 'Search something...',
+ textInputMaxLength: 4,
+ keyboardType: CONST.KEYBOARD_TYPE.NUMBER_PAD,
+ initiallyFocusedOptionKey: 'option-2',
+};
+
+function WithHeaderMessage(props) {
+ return (
+
+ );
+}
+
+WithHeaderMessage.args = {
+ ...WithTextInput.args,
+ headerMessage: 'No results found',
+ sections: [],
+};
+
+function WithAlternateText(args) {
+ const [selectedIndex, setSelectedIndex] = useState(1);
+
+ const sections = _.map(args.sections, (section) => {
+ const data = _.map(section.data, (item, index) => {
+ const isSelected = selectedIndex === index + section.indexOffset;
+
+ return {
+ ...item,
+ alternateText: `Alternate ${index + 1}`,
+ isSelected,
+ };
+ });
+
+ return {...section, data};
+ });
+
+ const onSelectRow = (item) => {
+ _.forEach(sections, (section) => {
+ const newSelectedIndex = _.findIndex(section.data, (option) => option.keyForList === item.keyForList);
+
+ if (newSelectedIndex >= 0) {
+ setSelectedIndex(newSelectedIndex + section.indexOffset);
+ }
+ });
+ };
+ return (
+
+ );
+}
+
+WithAlternateText.args = {
+ ...Default.args,
+};
+
+export {Default, WithTextInput, WithHeaderMessage, WithAlternateText};
+export default story;
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index e38ef7bc0c3c..77952c412e0c 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -43,6 +43,7 @@ const avatarBorderSizes = {
[CONST.AVATAR_SIZE.MEDIUM]: variables.componentBorderRadiusLarge,
[CONST.AVATAR_SIZE.LARGE]: variables.componentBorderRadiusLarge,
[CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.componentBorderRadiusRounded,
+ [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.componentBorderRadiusMedium,
};
const avatarSizes = {
@@ -57,6 +58,7 @@ const avatarSizes = {
[CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered,
[CONST.AVATAR_SIZE.HEADER]: variables.avatarSizeHeader,
[CONST.AVATAR_SIZE.MENTION_ICON]: variables.avatarSizeMentionIcon,
+ [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal,
};
const emptyAvatarStyles = {
@@ -94,6 +96,19 @@ function getEmptyAvatarStyle(size) {
return emptyAvatarStyles[size];
}
+/**
+ * Return the width style from an avatar size constant
+ *
+ * @param {String} size
+ * @returns {Object}
+ */
+function getAvatarWidthStyle(size) {
+ const avatarSize = getAvatarSize(size);
+ return {
+ width: avatarSize,
+ };
+}
+
/**
* Return the style from an avatar size constant
*
@@ -701,6 +716,24 @@ function convertRGBToUnitValues(red, green, blue) {
return [red / 255, green / 255, blue / 255];
}
+/**
+ * Matches an RGBA or RGB color value and extracts the color components.
+ *
+ * @param {string} color - The RGBA or RGB color value to match and extract components from.
+ * @returns {Array} An array containing the extracted color components [red, green, blue, alpha].
+ * Returns null if the input string does not match the pattern.
+ */
+function extractValuesFromRGB(color) {
+ const rgbaPattern = /rgba?\((?[.\d]+)[, ]+(?[.\d]+)[, ]+(?[.\d]+)(?:\s?[,/]\s?(?[.\d]+%?))?\)$/i;
+ const matchRGBA = color.match(rgbaPattern);
+ if (matchRGBA) {
+ const [, red, green, blue, alpha] = matchRGBA;
+ return [parseInt(red, 10), parseInt(green, 10), parseInt(blue, 10), alpha ? parseFloat(alpha) : 1];
+ }
+
+ return null;
+}
+
/**
* Determines the theme color for a modal based on the app's background color,
* the modal's backdrop, and the backdrop's opacity.
@@ -711,7 +744,7 @@ function convertRGBToUnitValues(red, green, blue) {
function getThemeBackgroundColor(bgColor = themeColors.appBG) {
const backdropOpacity = variables.modalFullscreenBackdropOpacity;
- const [backgroundRed, backgroundGreen, backgroundBlue] = hexadecimalToRGBArray(bgColor);
+ const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) || hexadecimalToRGBArray(bgColor);
const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.modalBackdrop);
const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue);
const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue);
@@ -1209,6 +1242,17 @@ function getWrappingStyle(isExtraSmallScreenWidth) {
};
}
+/**
+ * Returns the text container styles for menu items depending on if the menu item container a small avatar
+ * @param {Boolean} isSmallAvatarSubscriptMenu
+ * @returns {Number}
+ */
+function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu) {
+ return {
+ minHeight: isSmallAvatarSubscriptMenu ? variables.avatarSizeSubscript : variables.componentSizeNormal,
+ };
+}
+
/**
* Returns link styles based on whether the link is disabled or not
* @param {Boolean} isDisabled
@@ -1226,8 +1270,29 @@ function getDisabledLinkStyles(isDisabled = false) {
};
}
+/**
+ * Returns the checkbox container style
+ * @param {Number} size
+ * @param {Number} borderRadius
+ * @returns {Object}
+ */
+function getCheckboxContainerStyle(size, borderRadius) {
+ return {
+ backgroundColor: themeColors.componentBG,
+ height: size,
+ width: size,
+ borderColor: themeColors.borderLighter,
+ borderWidth: 2,
+ justifyContent: 'center',
+ alignItems: 'center',
+ // eslint-disable-next-line object-shorthand
+ borderRadius: borderRadius,
+ };
+}
+
export {
getAvatarSize,
+ getAvatarWidthStyle,
getAvatarStyle,
getAvatarExtraFontSizeStyle,
getAvatarBorderWidth,
@@ -1294,5 +1359,7 @@ export {
getHeightOfMagicCodeInput,
getOuterModalStyle,
getWrappingStyle,
+ getMenuItemTextContainerStyle,
getDisabledLinkStyles,
+ getCheckboxContainerStyle,
};
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1d0770d5ceb8..05f22e784a0a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -245,6 +245,14 @@ const styles = {
color: themeColors.textMutedReversed,
},
+ highlightBG: {
+ backgroundColor: themeColors.highlightBG,
+ },
+
+ appBG: {
+ backgroundColor: themeColors.appBG,
+ },
+
h1: {
color: themeColors.heading,
fontFamily: fontFamily.EXP_NEUE_BOLD,
@@ -1431,8 +1439,6 @@ const styles = {
},
appContentHeader: {
- borderBottomWidth: 1,
- borderColor: themeColors.border,
height: variables.contentHeaderHeight,
justifyContent: 'center',
display: 'flex',
@@ -1840,6 +1846,12 @@ const styles = {
right: -1,
},
+ secondAvatarSubscriptSmallNormal: {
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ },
+
leftSideLargeAvatar: {
left: 15,
},
@@ -1913,6 +1925,11 @@ const styles = {
width: variables.avatarSizeNormal,
},
+ emptyAvatarSmallNormal: {
+ height: variables.avatarSizeSmallNormal,
+ width: variables.avatarSizeSmallNormal,
+ },
+
emptyAvatarSmall: {
height: variables.avatarSizeSmall,
width: variables.avatarSizeSmall,
@@ -2226,31 +2243,41 @@ const styles = {
minWidth: 110,
},
- anonymousRoomFooter: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
+ anonymousRoomFooter: (isSmallSizeLayout) => ({
+ flexDirection: isSmallSizeLayout ? 'column' : 'row',
+ ...(!isSmallSizeLayout && {
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ }),
padding: 20,
- marginBottom: 20,
- backgroundColor: themeColors.activeComponentBG,
- flexWrap: 'wrap',
- gap: 8,
+ backgroundColor: themeColors.sidebar,
borderRadius: variables.componentBorderRadiusLarge,
overflow: 'hidden',
- },
-
+ }),
+ anonymousRoomFooterWordmarkAndLogoContainer: (isSmallSizeLayout) => ({
+ flexDirection: 'row',
+ alignItems: 'center',
+ ...(isSmallSizeLayout && {
+ justifyContent: 'space-between',
+ marginTop: 16,
+ }),
+ }),
anonymousRoomFooterLogo: {
width: 88,
marginLeft: 0,
height: 20,
},
-
+ anonymousRoomFooterLogoTaglineText: {
+ fontFamily: fontFamily.EXP_NEUE,
+ fontSize: variables.fontSizeMedium,
+ color: themeColors.textLight,
+ },
signInButtonAvatar: {
width: 80,
},
anonymousRoomFooterSignInButton: {
- width: 125,
+ width: 110,
},
roomHeaderAvatarSize: {
@@ -2470,17 +2497,6 @@ const styles = {
alignItems: 'center',
},
- checkboxContainer: {
- backgroundColor: themeColors.componentBG,
- borderRadius: 4,
- height: 20,
- width: 20,
- borderColor: themeColors.borderLighter,
- borderWidth: 2,
- justifyContent: 'center',
- alignItems: 'center',
- },
-
checkedContainer: {
backgroundColor: themeColors.checkBox,
},
@@ -2499,6 +2515,12 @@ const styles = {
magicCodeInputTransparent: {
color: 'transparent',
+ caretColor: 'transparent',
+ WebkitTextFillColor: 'transparent',
+ // After setting the input text color to transparent, it acquires the background-color.
+ // However, it is not possible to override the background-color directly as explained in this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
+ // Therefore, the transition effect needs to be delayed.
+ transitionDelay: '99999s',
},
iouAmountText: {
@@ -2534,14 +2556,14 @@ const styles = {
},
requestPreviewBox: {
- marginTop: 8,
+ marginTop: 12,
maxWidth: variables.sideBarWidth,
},
iouPreviewBox: {
backgroundColor: themeColors.cardBG,
- borderRadius: variables.componentBorderRadiusCard,
- padding: 20,
+ borderRadius: variables.componentBorderRadiusLarge,
+ padding: 16,
maxWidth: variables.sideBarWidth,
width: '100%',
},
@@ -3121,18 +3143,6 @@ const styles = {
zIndex: 2,
},
- textPill: {
- backgroundColor: themeColors.border,
- borderRadius: 10,
- overflow: 'hidden',
- paddingVertical: 2,
- flexShrink: 0,
- maxWidth: variables.badgeMaxWidth,
- fontSize: variables.fontSizeSmall,
- ...whiteSpace.pre,
- ...spacing.ph2,
- },
-
dropZoneTopInvisibleOverlay: {
position: 'absolute',
width: '100%',
@@ -3401,6 +3411,51 @@ const styles = {
width: 16,
},
+ taskTitleMenuItem: {
+ ...writingDirection.ltr,
+ ...headlineFont,
+ ...spacing.flexWrap,
+ ...spacing.flex1,
+ fontSize: variables.fontSizeXLarge,
+ maxWidth: '100%',
+ ...wordBreak.breakWord,
+ },
+
+ taskTitleDescription: {
+ fontFamily: fontFamily.EXP_NEUE,
+ fontSize: variables.fontSizeLabel,
+ color: themeColors.textSupporting,
+ lineHeight: variables.lineHeightNormal,
+ ...spacing.mb1,
+ },
+
+ taskMenuItemCheckbox: {
+ height: 27,
+ ...spacing.mr3,
+ },
+
+ taskHorizontalRule: {
+ borderBottomWidth: 1,
+ borderColor: themeColors.border,
+ ...spacing.mh5,
+ ...spacing.mv2,
+ },
+
+ assigneeTextStyle: {
+ fontFamily: fontFamily.EXP_NEUE_BOLD,
+ fontWeight: fontWeightBold,
+ minHeight: variables.avatarSizeSubscript,
+ },
+
+ taskRightIconContainer: {
+ width: variables.componentSizeNormal,
+ marginLeft: 'auto',
+ ...spacing.mt1,
+ ...pointerEventsAuto,
+ ...spacing.dFlex,
+ ...spacing.alignItemsCenter,
+ },
+
shareCodePage: {
paddingHorizontal: 38.5,
},
diff --git a/src/styles/variables.js b/src/styles/variables.js
index c5e332400cac..a771aa95906e 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -29,15 +29,16 @@ export default {
componentBorderRadiusCard: 12,
componentBorderRadiusRounded: 24,
buttonBorderRadius: 100,
- avatarSizeLarge: 80,
- avatarSizeHeader: 40,
avatarSizeLargeBordered: 88,
+ avatarSizeLarge: 80,
avatarSizeMedium: 52,
+ avatarSizeHeader: 40,
avatarSizeNormal: 40,
+ avatarSizeSmallNormal: 32,
avatarSizeSmall: 28,
avatarSizeSmaller: 24,
- avatarSizeMidSubscript: 18,
avatarSizeSubscript: 20,
+ avatarSizeMidSubscript: 18,
avatarSizeMentionIcon: 16,
avatarSizeSmallSubscript: 14,
defaultAvatarPreviewSize: 360,
@@ -141,6 +142,7 @@ export default {
popoverWidth: 375,
addPaymentPopoverTopSpacing: 8,
addPaymentPopoverRightSpacing: 13,
+ anonymousReportFooterBreakpoint: 650,
// The height of the empty list is 14px (2px for borders and 12px for vertical padding)
// This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility
diff --git a/tests/actions/IOUTest.js b/tests/actions/IOUTest.js
index 112377f373d5..784ff9a057ca 100644
--- a/tests/actions/IOUTest.js
+++ b/tests/actions/IOUTest.js
@@ -372,7 +372,6 @@ describe('actions/IOU', () => {
const iouAction = {
reportActionID: NumberUtils.rand64(),
actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
- actorEmail: RORY_EMAIL,
actorAccountID: RORY_ACCOUNT_ID,
created: DateUtils.getDBTime(),
originalMessage: {
@@ -381,7 +380,6 @@ describe('actions/IOU', () => {
amount: existingTransaction.amount,
currency: CONST.CURRENCY.USD,
type: CONST.IOU.REPORT_ACTION_TYPE.CREATE,
- participants: [RORY_EMAIL, CARLOS_EMAIL],
participantAccountIDs: [RORY_ACCOUNT_ID, CARLOS_ACCOUNT_ID],
},
};
@@ -835,7 +833,6 @@ describe('actions/IOU', () => {
const julesExistingIOUAction = {
reportActionID: NumberUtils.rand64(),
actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
- actorEmail: RORY_EMAIL,
actorAccountID: RORY_ACCOUNT_ID,
created: DateUtils.getDBTime(),
originalMessage: {
@@ -844,7 +841,6 @@ describe('actions/IOU', () => {
amount: julesExistingTransaction.amount,
currency: CONST.CURRENCY.USD,
type: CONST.IOU.REPORT_ACTION_TYPE.CREATE,
- participants: [RORY_EMAIL, JULES_EMAIL],
participantAccountIDs: [RORY_ACCOUNT_ID, JULES_ACCOUNT_ID],
},
};
diff --git a/tests/actions/ReportTest.js b/tests/actions/ReportTest.js
index 5ebffff507b8..5566c66df4b7 100644
--- a/tests/actions/ReportTest.js
+++ b/tests/actions/ReportTest.js
@@ -47,7 +47,6 @@ describe('actions/Report', () => {
const REPORT_ACTION = {
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
actorAccountID: TEST_USER_ACCOUNT_ID,
- actorEmail: TEST_USER_LOGIN,
automatic: false,
avatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png',
message: [{type: 'COMMENT', html: 'Testing a comment', text: 'Testing a comment'}],
@@ -230,7 +229,6 @@ describe('actions/Report', () => {
1: {
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
actorAccountID: USER_2_ACCOUNT_ID,
- actorEmail: USER_2_LOGIN,
automatic: false,
avatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png',
message: [{type: 'COMMENT', html: 'Comment 1', text: 'Comment 1'}],
@@ -316,7 +314,6 @@ describe('actions/Report', () => {
const USER_1_BASE_ACTION = {
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
actorAccountID: USER_1_ACCOUNT_ID,
- actorEmail: USER_1_LOGIN,
automatic: false,
avatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png',
person: [{type: 'TEXT', style: 'strong', text: 'Test User'}],
diff --git a/tests/perf-test/SelectionListRadio.perf-test.js b/tests/perf-test/SelectionListRadio.perf-test.js
new file mode 100644
index 000000000000..b0f6d7aa1d4a
--- /dev/null
+++ b/tests/perf-test/SelectionListRadio.perf-test.js
@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import {measurePerformance} from 'reassure';
+import {fireEvent} from '@testing-library/react-native';
+import SelectionListRadio from '../../src/components/SelectionListRadio';
+
+jest.mock('../../src/components/Icon/Expensicons');
+
+function SelectionListRadioWrapper() {
+ const [selectedIndex, setSelectedIndex] = useState(0);
+
+ const sections = [
+ {
+ data: Array.from({length: 1000}, (__, i) => ({
+ text: `Item ${i}`,
+ keyForList: `item-${i}`,
+ isSelected: selectedIndex === i,
+ })),
+ indexOffset: 0,
+ isDisabled: false,
+ },
+ ];
+
+ const onSelectRow = (item) => {
+ const index = Number(item.keyForList.split('-')[1]);
+ setSelectedIndex(index);
+ };
+
+ return (
+
+ );
+}
+
+test('should render SelectionListRadio with 1 section and a thousand items', () => {
+ measurePerformance();
+});
+
+test('should press a list item', () => {
+ const scenario = (screen) => {
+ fireEvent.press(screen.getByText('Item 5'));
+ };
+
+ measurePerformance(, {scenario});
+});
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index c12b03c6ae18..6ddd5a86e4b2 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -176,15 +176,15 @@ function signInAndGetAppWithUnreadChat() {
},
],
},
- 1: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(10, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '1'),
- 2: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(20, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '2'),
- 3: TestHelper.buildTestReportComment(USER_B_EMAIL, reportAction3CreatedDate, USER_B_ACCOUNT_ID, '3'),
- 4: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(40, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '4'),
- 5: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(50, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '5'),
- 6: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(60, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '6'),
- 7: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(70, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '7'),
- 8: TestHelper.buildTestReportComment(USER_B_EMAIL, MOMENT_TEN_MINUTES_AGO.clone().add(80, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '8'),
- 9: TestHelper.buildTestReportComment(USER_B_EMAIL, reportAction9CreatedDate, USER_B_ACCOUNT_ID, '9'),
+ 1: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(10, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '1'),
+ 2: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(20, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '2'),
+ 3: TestHelper.buildTestReportComment(reportAction3CreatedDate, USER_B_ACCOUNT_ID, '3'),
+ 4: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(40, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '4'),
+ 5: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(50, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '5'),
+ 6: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(60, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '6'),
+ 7: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(70, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '7'),
+ 8: TestHelper.buildTestReportComment(MOMENT_TEN_MINUTES_AGO.clone().add(80, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '8'),
+ 9: TestHelper.buildTestReportComment(reportAction9CreatedDate, USER_B_ACCOUNT_ID, '9'),
});
Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, {
[USER_B_ACCOUNT_ID]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
@@ -321,7 +321,6 @@ describe('Unread Indicators', () => {
},
[commentReportActionID]: {
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
- actorEmail: USER_C_EMAIL,
actorAccountID: USER_C_ACCOUNT_ID,
person: [{type: 'TEXT', style: 'strong', text: 'User C'}],
created: NEW_REPORT_FIST_MESSAGE_CREATED_MOMENT.format(MOMENT_FORMAT),
@@ -522,7 +521,6 @@ describe('Unread Indicators', () => {
Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`, {
lastMessageText: lastReportAction.message[0].text,
lastVisibleActionCreated: DateUtils.getDBTime(lastReportAction.timestamp),
- lastActorEmail: lastReportAction.actorEmail,
reportID: REPORT_ID,
});
return waitForPromisesToResolve();
diff --git a/tests/unit/EmojiTest.js b/tests/unit/EmojiTest.js
index dacd5ec1da9f..9b303e9bfb50 100644
--- a/tests/unit/EmojiTest.js
+++ b/tests/unit/EmojiTest.js
@@ -113,18 +113,39 @@ describe('EmojiTest', () => {
it('suggests emojis when typing emojis prefix after colon', () => {
const text = 'Hi :coffin';
- expect(EmojiUtils.suggestEmojis(text)).toEqual([{code: 'โฐ๏ธ', name: 'coffin'}]);
+ expect(EmojiUtils.suggestEmojis(text, 'en')).toEqual([{code: 'โฐ๏ธ', name: 'coffin'}]);
});
it('suggests a limited number of matching emojis', () => {
const text = 'Hi :face';
const limit = 3;
- expect(EmojiUtils.suggestEmojis(text, limit).length).toBe(limit);
+ expect(EmojiUtils.suggestEmojis(text, 'en', limit).length).toBe(limit);
});
it('correct suggests emojis accounting for keywords', () => {
- const text = ':thumb';
- expect(EmojiUtils.suggestEmojis(text)).toEqual([
+ const thumbEmojis = [
+ {
+ code: '๐',
+ name: '+1',
+ types: ['๐๐ฟ', '๐๐พ', '๐๐ฝ', '๐๐ผ', '๐๐ป'],
+ },
+ {
+ code: '๐',
+ name: '-1',
+ types: ['๐๐ฟ', '๐๐พ', '๐๐ฝ', '๐๐ผ', '๐๐ป'],
+ },
+ ];
+
+ expect(EmojiUtils.suggestEmojis(':thumb', 'en')).toEqual(thumbEmojis);
+
+ expect(EmojiUtils.suggestEmojis(':thumb', 'es')).toEqual(thumbEmojis);
+
+ expect(EmojiUtils.suggestEmojis(':pulgar', 'es')).toEqual([
+ {
+ code: '๐ค',
+ name: 'mano_llรกmame',
+ types: ['๐ค๐ฟ', '๐ค๐พ', '๐ค๐ฝ', '๐ค๐ผ', '๐ค๐ป'],
+ },
{
code: '๐',
name: '+1',
@@ -192,6 +213,7 @@ describe('EmojiTest', () => {
// Then the new emoji should be at the last item of the list
const expectedSmileEmoji = {...smileEmoji, count: 1, lastUpdatedAt: currentTime};
+
const expectedFrequentlyEmojisList = [...frequentlyEmojisList, expectedSmileEmoji];
expect(spy).toBeCalledWith(expectedFrequentlyEmojisList);
});
diff --git a/tests/unit/IOUUtilsTest.js b/tests/unit/IOUUtilsTest.js
index 79844e97c9ee..9348287daf7c 100644
--- a/tests/unit/IOUUtilsTest.js
+++ b/tests/unit/IOUUtilsTest.js
@@ -159,12 +159,12 @@ describe('IOUUtils', () => {
describe('isValidMoneyRequestType', () => {
test('Return true for valid iou type', () => {
- expect(IOUUtils.isValidMoneyRequestType('send')).toBe(true);
expect(IOUUtils.isValidMoneyRequestType('request')).toBe(true);
expect(IOUUtils.isValidMoneyRequestType('split')).toBe(true);
});
test('Return false for invalid iou type', () => {
+ expect(IOUUtils.isValidMoneyRequestType('send')).toBe(false);
expect(IOUUtils.isValidMoneyRequestType('money')).toBe(false);
});
});
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index f12c367b0038..e0fec4bf8ef4 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -283,7 +283,6 @@ describe('OptionsListUtils', () => {
initialKeyStates: {
[ONYXKEYS.SESSION]: {accountID: 2, email: 'tonystark@expensify.com'},
[`${ONYXKEYS.COLLECTION.REPORT}100`]: {
- ownerEmail: 'mistersinister@marauders.com',
ownerAccountID: 8,
total: '1000',
},
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index f33fdc86ef77..5a0446dede65 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -232,7 +232,6 @@ describe('ReportUtils', () => {
chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
policyID: policy.policyID,
isOwnPolicyExpenseChat: true,
- ownerEmail: 'ragnar@vikings.net',
ownerAccountID: 1,
}),
).toBe('Vikings Policy');
@@ -244,7 +243,6 @@ describe('ReportUtils', () => {
chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
policyID: policy.policyID,
isOwnPolicyExpenseChat: false,
- ownerEmail: 'ragnar@vikings.net',
ownerAccountID: 1,
}),
).toBe('Ragnar Lothbrok');
@@ -254,7 +252,6 @@ describe('ReportUtils', () => {
describe('Archived', () => {
const baseArchivedPolicyExpenseChat = {
chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
- ownerEmail: 'ragnar@vikings.net',
ownerAccountID: 1,
policyID: policy.policyID,
oldPolicyName: policy.name,
diff --git a/tests/utils/TestHelper.js b/tests/utils/TestHelper.js
index 4f3cf2d61aa6..a8424d14ed33 100644
--- a/tests/utils/TestHelper.js
+++ b/tests/utils/TestHelper.js
@@ -196,17 +196,15 @@ function setPersonalDetails(login, accountID) {
}
/**
- * @param {String} actorEmail
* @param {String} created
* @param {Number} actorAccountID
* @param {String} actionID
* @returns {Object}
*/
-function buildTestReportComment(actorEmail, created, actorAccountID, actionID = null) {
+function buildTestReportComment(created, actorAccountID, actionID = null) {
const reportActionID = actionID || NumberUtils.rand64();
return {
actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
- actorEmail,
person: [{type: 'TEXT', style: 'strong', text: 'User B'}],
created,
message: [{type: 'COMMENT', html: `Comment ${actionID}`, text: `Comment ${actionID}`}],
diff --git a/web/apple-touch-icon.png b/web/apple-touch-icon.png
new file mode 100644
index 000000000000..625b519e2cfa
Binary files /dev/null and b/web/apple-touch-icon.png differ
diff --git a/web/index.html b/web/index.html
index 90011c87e7a9..d207fa54b97a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -120,6 +120,7 @@
}
+
<% if (htmlWebpackPlugin.options.usePolyfillIO) { %>