diff --git a/.github/ISSUE_TEMPLATE/Accessibility.md b/.github/ISSUE_TEMPLATE/Accessibility.md
index 1323e2c17e78..97fc17d28a94 100644
--- a/.github/ISSUE_TEMPLATE/Accessibility.md
+++ b/.github/ISSUE_TEMPLATE/Accessibility.md
@@ -35,12 +35,12 @@ What can we do to fix the issue?
Check off any platforms that are affected by this issue
--->
Which of our officially supported platforms is this issue occurring on? Please only tick the box if you have provided a screen-recording in the thread for each platform:
-- [ ] Android / native
-- [ ] Android / Chrome
-- [ ] iOS / native
-- [ ] iOS / Safari
-- [ ] MacOS / Chrome / Safari
-- [ ] MacOS / Desktop
+- [ ] Android: Native
+- [ ] Android: mWeb Chrome
+- [ ] iOS: Native
+- [ ] iOS: mWeb Safari
+- [ ] MacOS: Chrome / Safari
+- [ ] MacOS: Desktop
**Version Number:**
**Reproducible in staging?:**
diff --git a/.github/ISSUE_TEMPLATE/Performance.md b/.github/ISSUE_TEMPLATE/Performance.md
index 67b2e6971874..bbb729e8af31 100644
--- a/.github/ISSUE_TEMPLATE/Performance.md
+++ b/.github/ISSUE_TEMPLATE/Performance.md
@@ -28,12 +28,12 @@ Note: These should be the same as the benchmarks collected before any changes.
Check off any platforms that are affected by this issue
--->
Which of our officially supported platforms is this issue occurring on?
-- [ ] Android / native
-- [ ] Android / Chrome
-- [ ] iOS / native
-- [ ] iOS / Safari
-- [ ] MacOS / Chrome / Safari
-- [ ] MacOS / Desktop
+- [ ] Android: Native
+- [ ] Android: mWeb Chrome
+- [ ] iOS: Native
+- [ ] iOS: mWeb Safari
+- [ ] MacOS: Chrome / Safari
+- [ ] MacOS: Desktop
**Version Number:**
**Reproducible in staging?:**
diff --git a/.github/ISSUE_TEMPLATE/Standard.md b/.github/ISSUE_TEMPLATE/Standard.md
index 39d1c38fa56f..5e0e3633f3bc 100644
--- a/.github/ISSUE_TEMPLATE/Standard.md
+++ b/.github/ISSUE_TEMPLATE/Standard.md
@@ -7,6 +7,16 @@ labels: Bug, Daily
If you haven’t already, check out our [contributing guidelines](https://github.com/Expensify/ReactNativeChat/blob/main/contributingGuides/CONTRIBUTING.md) for onboarding and email contributors@expensify.com to request to join our Slack channel!
___
+**Version Number:**
+**Reproducible in staging?:**
+**Reproducible in production?:**
+**If this was caught during regression testing, add the test name, ID and link from TestRail:**
+**Email or phone of affected tester (no customers):**
+**Logs:** https://stackoverflow.com/c/expensify/questions/4856
+**Expensify/Expensify Issue URL:**
+**Issue reported by:**
+**Slack conversation:**
+
## Action Performed:
Break down in numbered steps
@@ -24,22 +34,54 @@ Can the user still use Expensify without this being fixed? Have you informed the
Check off any platforms that are affected by this issue
--->
Which of our officially supported platforms is this issue occurring on?
-- [ ] Android / native
-- [ ] Android / Chrome
-- [ ] iOS / native
-- [ ] iOS / Safari
-- [ ] MacOS / Chrome / Safari
-- [ ] MacOS / Desktop
+- [ ] Android: Native
+- [ ] Android: mWeb Chrome
+- [ ] iOS: Native
+- [ ] iOS: mWeb Safari
+- [ ] MacOS: Chrome / Safari
+- [ ] MacOS: Desktop
-**Version Number:**
-**Reproducible in staging?:**
-**Reproducible in production?:**
-**If this was caught during regression testing, add the test name, ID and link from TestRail:**
-**Email or phone of affected tester (no customers):**
-**Logs:** https://stackoverflow.com/c/expensify/questions/4856
-**Notes/Photos/Videos:** Any additional supporting documentation
-**Expensify/Expensify Issue URL:**
-**Issue reported by:**
-**Slack conversation:**
+## Screenshots/Videos
+
+Android: Native
+
+
+
+
+
+
+Android: mWeb Chrome
+
+
+
+
+
+
+iOS: Native
+
+
+
+
+
+
+iOS: mWeb Safari
+
+
+
+
+
+
+MacOS: Chrome / Safari
+
+
+
+
+
+
+MacOS: Desktop
+
+
+
+
[View all open jobs on GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22)
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 800888580518..0396a7543b50 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -70,12 +70,12 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
- [ ] I tested this PR with a [High Traffic account](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#high-traffic-accounts) against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
- [ ] I included screenshots or videos for tests on [all platforms](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#make-sure-you-can-test-on-all-platforms)
- [ ] I ran the tests on **all platforms** & verified they passed on:
- - [ ] Android / native
- - [ ] Android / Chrome
- - [ ] iOS / native
- - [ ] iOS / Safari
- - [ ] MacOS / Chrome / Safari
- - [ ] MacOS / Desktop
+ - [ ] Android: Native
+ - [ ] Android: mWeb Chrome
+ - [ ] iOS: Native
+ - [ ] iOS: mWeb Safari
+ - [ ] MacOS: Chrome / Safari
+ - [ ] MacOS: Desktop
- [ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
- [ ] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
- [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`)
@@ -120,42 +120,42 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
### Screenshots/Videos
-Web
+Android: Native
-Mobile Web - Chrome
+Android: mWeb Chrome
-Mobile Web - Safari
+iOS: Native
-Desktop
+iOS: mWeb Safari
-iOS
+MacOS: Chrome / Safari
-Android
+MacOS: Desktop
diff --git a/README.md b/README.md
index 9aad797ebb51..daf9ddfae1ff 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
CFBundlePackageType
APPL
CFBundleShortVersionString
- 1.3.79
+ 1.3.81
CFBundleSignature
????
CFBundleURLTypes
@@ -40,7 +40,7 @@
CFBundleVersion
- 1.3.79.3
+ 1.3.81.4
ITSAppUsesNonExemptEncryption
LSApplicationQueriesSchemes
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 614979cf57b7..5dc727d452d5 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
CFBundlePackageType
BNDL
CFBundleShortVersionString
- 1.3.79
+ 1.3.81
CFBundleSignature
????
CFBundleVersion
- 1.3.79.3
+ 1.3.81.4
diff --git a/ios/Podfile b/ios/Podfile
index b30510572448..6aee4b94df04 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -2,17 +2,29 @@
# This value is used by $RNMapboxMaps
$RNMapboxMapsImpl = 'mapbox'
-# Resolve react_native_pods.rb with node to allow for hoisting
-require Pod::Executable.execute_command('node', ['-p',
- 'require.resolve(
- "react-native/scripts/react_native_pods.rb",
- {paths: [process.argv[1]]},
- )', __dir__]).strip
+def node_require(script)
+ # Resolve script with node to allow for hoisting
+ require Pod::Executable.execute_command('node', ['-p',
+ "require.resolve(
+ '#{script}',
+ {paths: [process.argv[1]]},
+ )", __dir__]).strip
+end
+
+node_require('react-native/scripts/react_native_pods.rb')
+node_require('react-native-permissions/scripts/setup.rb')
# Our min supported iOS version is higher than the default (min_ios_version_supported) to support libraires such as Airship
platform :ios, 13
prepare_react_native_project!
+setup_permissions([
+ 'Camera',
+ 'LocationAccuracy',
+ 'LocationAlways',
+ 'LocationWhenInUse'
+])
+
# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
@@ -51,8 +63,6 @@ pre_install do |installer|
end
target 'NewExpensify' do
- permissions_path = '../node_modules/react-native-permissions/ios'
-
project 'NewExpensify',
'DebugDevelopment' => :debug,
'DebugAdHoc' => :debug,
@@ -61,11 +71,6 @@ target 'NewExpensify' do
'ReleaseAdHoc' => :release,
'ReleaseProduction' => :release
- pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
- pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
- pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
- pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
-
config = use_native_modules!
# Flags change depending on the env values.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 6e0c44299398..1f08d51d24a8 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -256,14 +256,6 @@ PODS:
- Onfido (= 27.4.0)
- React
- OpenSSL-Universal (1.1.1100)
- - Permission-Camera (3.6.1):
- - RNPermissions
- - Permission-LocationAccuracy (3.6.1):
- - RNPermissions
- - Permission-LocationAlways (3.6.1):
- - RNPermissions
- - Permission-LocationWhenInUse (3.6.1):
- - RNPermissions
- Plaid (4.1.0)
- PromisesObjC (2.2.0)
- RCT-Folly (2021.07.22.00):
@@ -587,7 +579,7 @@ PODS:
- React
- react-native-image-picker (5.1.0):
- React-Core
- - react-native-key-command (1.0.1):
+ - react-native-key-command (1.0.6):
- React-Core
- react-native-netinfo (9.3.10):
- React-Core
@@ -781,7 +773,7 @@ PODS:
- React
- React-Core
- Turf
- - RNPermissions (3.6.1):
+ - RNPermissions (3.9.3):
- React-Core
- RNReactNativeHapticFeedback (1.14.0):
- React-Core
@@ -867,10 +859,6 @@ DEPENDENCIES:
- lottie-react-native (from `../node_modules/lottie-react-native`)
- "onfido-react-native-sdk (from `../node_modules/@onfido/react-native-sdk`)"
- OpenSSL-Universal (= 1.1.1100)
- - Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera`)
- - Permission-LocationAccuracy (from `../node_modules/react-native-permissions/ios/LocationAccuracy`)
- - Permission-LocationAlways (from `../node_modules/react-native-permissions/ios/LocationAlways`)
- - Permission-LocationWhenInUse (from `../node_modules/react-native-permissions/ios/LocationWhenInUse`)
- RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
- RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
- RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
@@ -1018,14 +1006,6 @@ EXTERNAL SOURCES:
:path: "../node_modules/lottie-react-native"
onfido-react-native-sdk:
:path: "../node_modules/@onfido/react-native-sdk"
- Permission-Camera:
- :path: "../node_modules/react-native-permissions/ios/Camera"
- Permission-LocationAccuracy:
- :path: "../node_modules/react-native-permissions/ios/LocationAccuracy"
- Permission-LocationAlways:
- :path: "../node_modules/react-native-permissions/ios/LocationAlways"
- Permission-LocationWhenInUse:
- :path: "../node_modules/react-native-permissions/ios/LocationWhenInUse"
RCT-Folly:
:podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
RCTRequired:
@@ -1227,10 +1207,6 @@ SPEC CHECKSUMS:
Onfido: e36f284b865adcf99d9c905590a64ac09d4a576b
onfido-react-native-sdk: 4ecde1a97435dcff9f00a878e3f8d1eb14fabbdc
OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
- Permission-Camera: bf6791b17c7f614b6826019fcfdcc286d3a107f6
- Permission-LocationAccuracy: 76df17de5c6b8bc2eee34e61ee92cdd7a864c73d
- Permission-LocationAlways: 8d99b025c9f73c696e0cdb367e42525f2e9a26f2
- Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
@@ -1257,7 +1233,7 @@ SPEC CHECKSUMS:
react-native-geolocation: 0f7fe8a4c2de477e278b0365cce27d089a8c5903
react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
- react-native-key-command: c2645ec01eb1fa664606c09480c05cb4220ef67b
+ react-native-key-command: 5af6ee30ff4932f78da6a2109017549042932aa5
react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
react-native-pdf: 7c0e91ada997bac8bac3bb5bea5b6b81f5a3caae
@@ -1302,7 +1278,7 @@ SPEC CHECKSUMS:
RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
rnmapbox-maps: 6f638ec002aa6e906a6f766d69cd45f968d98e64
- RNPermissions: dcdb7b99796bbeda6975a6e79ad519c41b251b1c
+ RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa
RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
RNScreens: d037903436160a4b039d32606668350d2a808806
@@ -1315,6 +1291,6 @@ SPEC CHECKSUMS:
Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
-PODFILE CHECKSUM: 2daf34c870819a933f3fefe426801d54b2ff2a14
+PODFILE CHECKSUM: ff769666b7221c15936ebc5576a8c8e467dc6879
COCOAPODS: 1.12.1
diff --git a/jest.config.js b/jest.config.js
index 6cf44b6b3695..c3125284837a 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -10,6 +10,7 @@ module.exports = {
],
transform: {
'^.+\\.jsx?$': 'babel-jest',
+ '^.+\\.svg?$': 'jest-transformer-svg',
},
transformIgnorePatterns: ['/node_modules/(?!react-native)/'],
testPathIgnorePatterns: ['/node_modules'],
diff --git a/package-lock.json b/package-lock.json
index ddebbe8a3832..9a029b06ced4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "new.expensify",
- "version": "1.3.79-3",
+ "version": "1.3.81-4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "new.expensify",
- "version": "1.3.79-3",
+ "version": "1.3.81-4",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@@ -51,7 +51,7 @@
"date-fns-tz": "^2.0.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
- "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#f76ff4badf0934e21ac6c3f195ebc5791bb72247",
+ "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b",
"fbjs": "^3.0.2",
"htmlparser2": "^7.2.0",
"idb-keyval": "^6.2.1",
@@ -90,7 +90,7 @@
"react-native-image-pan-zoom": "^2.1.12",
"react-native-image-picker": "^5.1.0",
"react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#8393b7e58df6ff65fd41f60aee8ece8822c91e2b",
- "react-native-key-command": "^1.0.5",
+ "react-native-key-command": "^1.0.6",
"react-native-linear-gradient": "^2.8.1",
"react-native-localize": "^2.2.6",
"react-native-modal": "^13.0.0",
@@ -98,7 +98,7 @@
"react-native-pager-view": "^6.2.0",
"react-native-pdf": "^6.7.1",
"react-native-performance": "^5.1.0",
- "react-native-permissions": "^3.0.1",
+ "react-native-permissions": "^3.9.3",
"react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
"react-native-plaid-link-sdk": "^10.0.0",
"react-native-qrcode-svg": "^6.2.0",
@@ -209,6 +209,7 @@
"jest-circus": "29.4.1",
"jest-cli": "29.4.1",
"jest-environment-jsdom": "^29.4.1",
+ "jest-transformer-svg": "^2.0.1",
"metro-react-native-babel-preset": "0.76.8",
"mock-fs": "^4.13.0",
"onchange": "^7.1.0",
@@ -30218,8 +30219,8 @@
},
"node_modules/expensify-common": {
"version": "1.0.0",
- "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#f76ff4badf0934e21ac6c3f195ebc5791bb72247",
- "integrity": "sha512-RCC3VBRIoW1ZF+wZktHT+0ht6EUjNfCKW4g44RR5570dRpN9SrJASGt2OnEbz6mrbohWRgAaKmB4+nfiQX5ndQ==",
+ "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b",
+ "integrity": "sha512-mD9p6Qj8FfvLdb6JLXvF0UNqLN6ymssUU67Fm37zmK18hd1Abw+vR/pQkNpHR2iv+KRs8HdcyuZ0vaOec4VrFQ==",
"license": "MIT",
"dependencies": {
"classnames": "2.3.1",
@@ -36490,6 +36491,16 @@
"node": ">=8"
}
},
+ "node_modules/jest-transformer-svg": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.1.tgz",
+ "integrity": "sha512-L3j70WjfQtAYXjZi/vyKW8A5pcEUnv7mR0cugSyP6Kqee+fjsMzUHs5UPbnLKH+y7lfSpOjXijMbfEcjLqCuaw==",
+ "dev": true,
+ "peerDependencies": {
+ "jest": ">= 28.1.0",
+ "react": "^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/jest-util": {
"version": "29.6.3",
"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.3.tgz",
@@ -44647,9 +44658,9 @@
"license": "MIT"
},
"node_modules/react-native-key-command": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/react-native-key-command/-/react-native-key-command-1.0.5.tgz",
- "integrity": "sha512-SJWf1e8f3yGFrFDNCmJ+aiGmnwokGgtMicfvuyukhQtXkncCQb9pBI4uhBen0Bd30uMmUDgGAA9O56OyIdf5jw==",
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/react-native-key-command/-/react-native-key-command-1.0.6.tgz",
+ "integrity": "sha512-N+/kmGMSnvTOF5DXupGg9ztkeOXjre//+Z+Mv4RU8RLYNvW7TtDgHlOxl4AngeGD1pG5gbI6hrlUukrRSCs6Ng==",
"dependencies": {
"eventemitter3": "^5.0.1",
"underscore": "^1.13.4"
@@ -44788,8 +44799,9 @@
}
},
"node_modules/react-native-permissions": {
- "version": "3.6.1",
- "license": "MIT",
+ "version": "3.9.3",
+ "resolved": "https://registry.npmjs.org/react-native-permissions/-/react-native-permissions-3.9.3.tgz",
+ "integrity": "sha512-2UqG2Em4xHxLq0E1XynXMdQ//XZltxVUjTn/i4fPIZuuZ0cQ+ydAQmLXqDPxOXvG0sICwc3oe0orJmQdqpa1sQ==",
"peerDependencies": {
"react": ">=16.13.1",
"react-native": ">=0.63.3",
@@ -74887,9 +74899,9 @@
}
},
"expensify-common": {
- "version": "git+ssh://git@github.com/Expensify/expensify-common.git#f76ff4badf0934e21ac6c3f195ebc5791bb72247",
- "integrity": "sha512-RCC3VBRIoW1ZF+wZktHT+0ht6EUjNfCKW4g44RR5570dRpN9SrJASGt2OnEbz6mrbohWRgAaKmB4+nfiQX5ndQ==",
- "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#f76ff4badf0934e21ac6c3f195ebc5791bb72247",
+ "version": "git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b",
+ "integrity": "sha512-mD9p6Qj8FfvLdb6JLXvF0UNqLN6ymssUU67Fm37zmK18hd1Abw+vR/pQkNpHR2iv+KRs8HdcyuZ0vaOec4VrFQ==",
+ "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b",
"requires": {
"classnames": "2.3.1",
"clipboard": "2.0.4",
@@ -79327,6 +79339,13 @@
}
}
},
+ "jest-transformer-svg": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/jest-transformer-svg/-/jest-transformer-svg-2.0.1.tgz",
+ "integrity": "sha512-L3j70WjfQtAYXjZi/vyKW8A5pcEUnv7mR0cugSyP6Kqee+fjsMzUHs5UPbnLKH+y7lfSpOjXijMbfEcjLqCuaw==",
+ "dev": true,
+ "requires": {}
+ },
"jest-util": {
"version": "29.6.3",
"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.3.tgz",
@@ -85249,9 +85268,9 @@
"from": "react-native-image-size@git+https://github.com/Expensify/react-native-image-size#8393b7e58df6ff65fd41f60aee8ece8822c91e2b"
},
"react-native-key-command": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/react-native-key-command/-/react-native-key-command-1.0.5.tgz",
- "integrity": "sha512-SJWf1e8f3yGFrFDNCmJ+aiGmnwokGgtMicfvuyukhQtXkncCQb9pBI4uhBen0Bd30uMmUDgGAA9O56OyIdf5jw==",
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/react-native-key-command/-/react-native-key-command-1.0.6.tgz",
+ "integrity": "sha512-N+/kmGMSnvTOF5DXupGg9ztkeOXjre//+Z+Mv4RU8RLYNvW7TtDgHlOxl4AngeGD1pG5gbI6hrlUukrRSCs6Ng==",
"requires": {
"eventemitter3": "^5.0.1",
"underscore": "^1.13.4"
@@ -85324,7 +85343,9 @@
"requires": {}
},
"react-native-permissions": {
- "version": "3.6.1",
+ "version": "3.9.3",
+ "resolved": "https://registry.npmjs.org/react-native-permissions/-/react-native-permissions-3.9.3.tgz",
+ "integrity": "sha512-2UqG2Em4xHxLq0E1XynXMdQ//XZltxVUjTn/i4fPIZuuZ0cQ+ydAQmLXqDPxOXvG0sICwc3oe0orJmQdqpa1sQ==",
"requires": {}
},
"react-native-picker-select": {
diff --git a/package.json b/package.json
index 9a3b9ed3af86..4533fa30d502 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "new.expensify",
- "version": "1.3.79-3",
+ "version": "1.3.81-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.",
@@ -94,7 +94,7 @@
"date-fns-tz": "^2.0.0",
"dom-serializer": "^0.2.2",
"domhandler": "^4.3.0",
- "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#f76ff4badf0934e21ac6c3f195ebc5791bb72247",
+ "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b",
"fbjs": "^3.0.2",
"htmlparser2": "^7.2.0",
"idb-keyval": "^6.2.1",
@@ -114,8 +114,8 @@
"react-collapse": "^5.1.0",
"react-content-loader": "^6.1.0",
"react-dom": "18.1.0",
- "react-map-gl": "^7.1.3",
"react-error-boundary": "^4.0.11",
+ "react-map-gl": "^7.1.3",
"react-native": "0.72.4",
"react-native-android-location-enabler": "^1.2.2",
"react-native-blob-util": "^0.17.3",
@@ -133,7 +133,7 @@
"react-native-image-pan-zoom": "^2.1.12",
"react-native-image-picker": "^5.1.0",
"react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#8393b7e58df6ff65fd41f60aee8ece8822c91e2b",
- "react-native-key-command": "^1.0.5",
+ "react-native-key-command": "^1.0.6",
"react-native-linear-gradient": "^2.8.1",
"react-native-localize": "^2.2.6",
"react-native-modal": "^13.0.0",
@@ -141,7 +141,7 @@
"react-native-pager-view": "^6.2.0",
"react-native-pdf": "^6.7.1",
"react-native-performance": "^5.1.0",
- "react-native-permissions": "^3.0.1",
+ "react-native-permissions": "^3.9.3",
"react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
"react-native-plaid-link-sdk": "^10.0.0",
"react-native-qrcode-svg": "^6.2.0",
@@ -252,6 +252,7 @@
"jest-circus": "29.4.1",
"jest-cli": "29.4.1",
"jest-environment-jsdom": "^29.4.1",
+ "jest-transformer-svg": "^2.0.1",
"metro-react-native-babel-preset": "0.76.8",
"mock-fs": "^4.13.0",
"onchange": "^7.1.0",
diff --git a/src/CONST.ts b/src/CONST.ts
index bf330ad2795b..a192f9f69f05 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -108,6 +108,7 @@ const CONST = {
// Sizes needed for report empty state background image handling
EMPTY_STATE_BACKGROUND: {
+ ASPECT_RATIO: 3.72,
SMALL_SCREEN: {
IMAGE_HEIGHT: 300,
CONTAINER_MINHEIGHT: 200,
@@ -234,7 +235,6 @@ const CONST = {
BETA_EXPENSIFY_WALLET: 'expensifyWallet',
BETA_COMMENT_LINKING: 'commentLinking',
INTERNATIONALIZATION: 'internationalization',
- IOU_SEND: 'sendMoney',
POLICY_ROOMS: 'policyRooms',
PASSWORDLESS: 'passwordless',
TASKS: 'tasks',
@@ -478,20 +478,21 @@ const CONST = {
ACTIONS: {
LIMIT: 50,
TYPE: {
- APPROVED: 'APPROVED',
ADDCOMMENT: 'ADDCOMMENT',
+ APPROVED: 'APPROVED',
+ CHRONOSOOOLIST: 'CHRONOSOOOLIST',
CLOSED: 'CLOSED',
CREATED: 'CREATED',
- TASKEDITED: 'TASKEDITED',
- TASKCANCELLED: 'TASKCANCELLED',
IOU: 'IOU',
MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
RENAMED: 'RENAMED',
- CHRONOSOOOLIST: 'CHRONOSOOOLIST',
+ REPORTPREVIEW: 'REPORTPREVIEW',
+ SUBMITTED: 'SUBMITTED',
+ TASKCANCELLED: 'TASKCANCELLED',
TASKCOMPLETED: 'TASKCOMPLETED',
+ TASKEDITED: 'TASKEDITED',
TASKREOPENED: 'TASKREOPENED',
- REPORTPREVIEW: 'REPORTPREVIEW',
POLICYCHANGELOG: {
ADD_APPROVER_RULE: 'POLICYCHANGELOG_ADD_APPROVER_RULE',
ADD_CATEGORY: 'POLICYCHANGELOG_ADD_CATEGORY',
@@ -930,6 +931,7 @@ const CONST = {
RECEIPTS: 'receipts@expensify.com',
STUDENT_AMBASSADOR: 'studentambassadors@expensify.com',
SVFG: 'svfg@expensify.com',
+ EXPENSIFY_EMAIL_DOMAIN: '@expensify.com',
},
ACCOUNT_ID: {
@@ -1170,6 +1172,14 @@ const CONST = {
AUDITOR: 'auditor',
USER: 'user',
},
+ AUTO_REPORTING_FREQUENCIES: {
+ IMMEDIATE: 'immediate',
+ WEEKLY: 'weekly',
+ SEMI_MONTHLY: 'semimonthly',
+ MONTHLY: 'monthly',
+ TRIP: 'trip',
+ MANUAL: 'manual',
+ },
ROOM_PREFIX: '#',
CUSTOM_UNIT_RATE_BASE_OFFSET: 100,
OWNER_EMAIL_FAKE: '_FAKE_',
@@ -1254,7 +1264,7 @@ const CONST = {
CARD_NUMBER: /^[0-9]{15,16}$/,
CARD_SECURITY_CODE: /^[0-9]{3,4}$/,
CARD_EXPIRATION_DATE: /^(0[1-9]|1[0-2])([^0-9])?([0-9]{4}|([0-9]{2}))$/,
- ROOM_NAME: /^#[a-z0-9à-ÿ-]{1,80}$/,
+ ROOM_NAME: /^#[\p{Ll}0-9-]{1,80}$/u,
// eslint-disable-next-line max-len, no-misleading-character-class
EMOJIS: /[\p{Extended_Pictographic}](\u200D[\p{Extended_Pictographic}]|[\u{1F3FB}-\u{1F3FF}]|[\u{E0020}-\u{E007F}]|\uFE0F|\u20E3)*|[\u{1F1E6}-\u{1F1FF}]{2}|[#*0-9]\uFE0F?\u20E3/gu,
@@ -2732,6 +2742,14 @@ const CONST = {
SPEND: 'spend',
WORKSPACES: 'workspaces',
},
+
+ MISSING_TRANSLATION: 'MISSING TRANSLATION',
+ SEARCH_MAX_LENGTH: 500,
+
+ /**
+ * The count of characters we'll allow the user to type after reaching SEARCH_MAX_LENGTH in an input.
+ */
+ ADDITIONAL_ALLOWED_CHARACTERS: 20,
} as const;
export default CONST;
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 3aaaff7beda6..57bb0664ba9e 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -252,6 +252,7 @@ const ONYXKEYS = {
REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
SECURITY_GROUP: 'securityGroup_',
TRANSACTION: 'transactions_',
+ PRIVATE_NOTES_DRAFT: 'privateNotesDraft_',
// Manual request tab selector
SELECTED_TAB: 'selectedTab_',
@@ -291,6 +292,7 @@ const ONYXKEYS = {
PRIVATE_NOTES_FORM: 'privateNotesForm',
I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm',
INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm',
+ REPORT_VIRTUAL_CARD_FRAUD: 'reportVirtualCardFraudForm',
},
} as const;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 2b64dd9c5465..2069f773075b 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -75,11 +75,19 @@ export default {
route: '/settings/wallet/card/:domain',
getRoute: (domain: string) => `/settings/wallet/card/${domain}`,
},
+ SETTINGS_REPORT_FRAUD: {
+ route: '/settings/wallet/cards/:domain/report-virtual-fraud',
+ getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-virtual-fraud`,
+ },
SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance',
SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account',
+ SETTINGS_WALLET_CARD_ACTIVATE: {
+ route: 'settings/wallet/cards/:domain/activate',
+ getRoute: (domain: string) => `settings/wallet/cards/${domain}/activate`,
+ },
SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details',
SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name',
SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth',
diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
index df49afbc3f0b..71d331b68db0 100644
--- a/src/components/ArchivedReportFooter.js
+++ b/src/components/ArchivedReportFooter.js
@@ -14,7 +14,6 @@ import reportPropTypes from '../pages/reportPropTypes';
import * as ReportActionsUtils from '../libs/ReportActionsUtils';
import styles from '../styles/styles';
import * as PersonalDetailsUtils from '../libs/PersonalDetailsUtils';
-import ArchivedReportFooterSkeletonView from './ArchivedReportFooterSkeletonView';
const propTypes = {
/** The reason this report was archived */
@@ -51,9 +50,6 @@ const defaultProps = {
};
function ArchivedReportFooter(props) {
- if (!props.reportClosedAction.reportActionID) {
- return
-
-
-
- );
-}
-
-ArchivedReportFooterSkeletonView.propTypes = propTypes;
-ArchivedReportFooterSkeletonView.defaultProps = defaultTypes;
-
-ArchivedReportFooterSkeletonView.displayName = 'ArchivedReportFooterSkeletonView';
-export default compose(withWindowDimensions, withLocalize)(ArchivedReportFooterSkeletonView);
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 0e9085b54c17..3c423ffc80ea 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -61,12 +61,19 @@ function BaseMiniContextMenuItem(props) {
return;
}
+ // Allow text input blur on right click
+ if (!e || e.button === 2) {
+ return;
+ }
+
+ // Prevent text input blur on left click
e.preventDefault();
}}
accessibilityLabel={props.tooltipText}
style={({hovered, pressed}) => [
styles.reportActionContextMenuMiniButton,
StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+ props.isDelayButtonStateComplete && styles.cursorDefault,
]}
>
{(pressableState) => (
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index ef8b1d71ad1d..13abf057e4b1 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -32,6 +32,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
}, [selectedCategory]);
const sections = useMemo(() => {
+ const validPolicyRecentlyUsedCategories = _.filter(policyRecentlyUsedCategories, (p) => !_.isEmpty(p));
const {categoryOptions} = OptionsListUtils.getFilteredOptions(
{},
{},
@@ -43,7 +44,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
false,
true,
policyCategories,
- policyRecentlyUsedCategories,
+ validPolicyRecentlyUsedCategories,
false,
);
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 2314f2fcf64e..4c740caea78a 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -100,6 +100,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
style={getContextMenuItemStyles(windowWidth)}
isAnonymousAction={isAnonymousAction}
focused={isFocused}
+ interactive={isThrottledButtonActive}
/>
);
}
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index e7af97145347..3dfc5f59bb38 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -195,7 +195,7 @@ class EmojiPickerMenu extends Component {
return;
}
const emoji = lodashGet(item, ['types', this.props.preferredSkinTone], item.code);
- this.addToFrequentAndSelectEmoji(emoji, item);
+ this.props.onEmojiSelected(emoji, item);
return;
}
@@ -258,16 +258,6 @@ class EmojiPickerMenu extends Component {
document.removeEventListener('mousemove', this.mouseMoveHandler);
}
- /**
- * @param {String} emoji
- * @param {Object} emojiObject
- */
- addToFrequentAndSelectEmoji(emoji, emojiObject) {
- const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject);
- User.updateFrequentlyUsedEmojis(frequentEmojiList);
- this.props.onEmojiSelected(emoji, emojiObject);
- }
-
/**
* Focuses the search Input and has the text selected
*/
@@ -466,7 +456,7 @@ class EmojiPickerMenu extends Component {
return (
this.addToFrequentAndSelectEmoji(emoji, item)}
+ onPress={(emoji) => this.props.onEmojiSelected(emoji, item)}
onHoverIn={() => this.setState({highlightedIndex: index, isUsingKeyboardMovement: false})}
onHoverOut={() => {
if (this.state.arePointerEventsDisabled) {
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index dd5c18439cc1..fe8c3e275ad2 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -86,16 +86,6 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
setHeaderIndices(undefined);
}, 300);
- /**
- * @param {String} emoji
- * @param {Object} emojiObject
- */
- const addToFrequentAndSelectEmoji = (emoji, emojiObject) => {
- const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject);
- User.updateFrequentlyUsedEmojis(frequentEmojiList);
- onEmojiSelected(emoji, emojiObject);
- };
-
/**
* @param {Number} skinTone
*/
@@ -152,7 +142,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
return (
addToFrequentAndSelectEmoji(emoji, item))}
+ onPress={singleExecution((emoji) => onEmojiSelected(emoji, item))}
emoji={emojiCode}
/>
);
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index a239f197cdd0..0c876910e746 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -46,11 +46,11 @@ function EmojiSkinToneList(props) {
{!isSkinToneListVisible && (
-
+
{currentSkinTone.code}
{props.translate('emojiPicker.skinTonePickerLabel')}
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index bba62cc4f4e0..c806bedc31c7 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
import htmlRenderers from './HTMLRenderers';
import * as HTMLEngineUtils from './htmlEngineUtils';
import styles from '../../styles/styles';
-import fontFamily from '../../styles/fontFamily';
import convertToLTR from '../../libs/convertToLTR';
+import singleFontFamily from '../../styles/fontFamily/singleFontFamily';
const propTypes = {
/** Whether text elements should be selectable */
@@ -60,18 +60,13 @@ function BaseHTMLEngineProvider(props) {
// We need to memoize this prop to make it referentially stable.
const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
- // We need to pass multiple system-specific fonts for emojis but
- // we can't apply multiple fonts at once so we need to pass fallback fonts.
- const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EXP_NEUE};
-
return (
(text.data = convertToLTR(text.data)),
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 37c7eb18dad1..adfe0a8784e2 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -31,16 +31,26 @@ const propTypes = {
/** Style to apply to the header image container */
// eslint-disable-next-line react/forbid-prop-types
headerContainerStyles: PropTypes.arrayOf(PropTypes.object),
+
+ /** Style to apply to the ScrollView container */
+ // eslint-disable-next-line react/forbid-prop-types
+ scrollViewContainerStyles: PropTypes.arrayOf(PropTypes.object),
+
+ /** Style to apply to the children container */
+ // eslint-disable-next-line react/forbid-prop-types
+ childrenContainerStyles: PropTypes.arrayOf(PropTypes.object),
};
const defaultProps = {
backgroundColor: themeColors.appBG,
header: null,
headerContainerStyles: [],
+ scrollViewContainerStyles: [],
+ childrenContainerStyles: [],
footer: null,
};
-function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, style, headerContent, ...propsToPassToHeader}) {
+function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, scrollViewContainerStyles, childrenContainerStyles, style, headerContent, ...propsToPassToHeader}) {
const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
const {isOffline} = useNetwork();
const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
@@ -77,14 +87,14 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
)}
{!Browser.isSafari() &&
{headerContent}
- {children}
+ {children}
{!_.isNull(footer) && {footer} }
diff --git a/src/components/IFrame.js b/src/components/IFrame.js
index 129af4254c42..5f7f657b0c09 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.js
@@ -1,5 +1,8 @@
/* eslint-disable es/no-nullish-coalescing-operators */
import React, {useEffect, useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
+import ONYXKEYS from '../ONYXKEYS';
function getNewDotURL(url) {
const urlObj = new URL(url);
@@ -50,6 +53,11 @@ function getOldDotURL(url) {
const pathname = urlObj.pathname;
const paths = pathname.slice(1).split('/');
+ // TODO: temporary measure until linking config is adjusted
+ if (pathname.startsWith('/r')) {
+ return 'inbox';
+ }
+
if (pathname === 'home') {
return 'inbox';
}
@@ -78,8 +86,19 @@ function getOldDotURL(url) {
return pathname;
}
-export default function ReportScreen() {
- const [oldDotURL, setOldDotURL] = useState('https://www.expensify.com.dev');
+const propTypes = {
+ // The session of the logged in person
+ session: PropTypes.shape({
+ // The email of the logged in person
+ email: PropTypes.string,
+
+ // The authToken of the logged in person
+ authToken: PropTypes.string,
+ }).isRequired,
+};
+
+function OldDotIFrame({session}) {
+ const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
useEffect(() => {
setOldDotURL(`https://expensify.com.dev/${getOldDotURL(window.location.href)}`);
@@ -92,6 +111,11 @@ export default function ReportScreen() {
});
}, []);
+ useEffect(() => {
+ document.cookie = `authToken=${session.authToken}; domain=expensify.com.dev; path=/;`;
+ document.cookie = `email=${session.email}; domain=expensify.com.dev; path=/;`;
+ }, [session.authToken, session.email]);
+
return (
);
}
+
+OldDotIFrame.propTypes = propTypes;
+
+export default withOnyx({
+ session: {
+ key: ONYXKEYS.SESSION,
+ },
+})(OldDotIFrame);
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 7433c2798879..5e07b487c4f7 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -79,6 +79,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
contentContainerStyle={contentContainerStyles}
showsVerticalScrollIndicator={false}
data={data}
+ testID="lhn-options-list"
keyExtractor={(item) => item}
stickySectionHeadersEnabled={false}
renderItem={renderItem}
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index ac37947daa17..4e6564646cac 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -171,13 +171,15 @@ function OptionRowLHN(props) {
props.onSelectRow(optionItem, popoverAnchor);
}}
onMouseDown={(e) => {
- if (!e) {
+ // Allow composer blur on right click
+ if (!e || e.button === 2) {
return;
}
- // Prevent losing Composer focus
+ // Prevent composer blur on left click
e.preventDefault();
}}
+ testID={optionItem.reportID}
onSecondaryInteraction={(e) => showPopover(e)}
withoutFocusOnSecondaryInteraction
activeOpacity={0.8}
diff --git a/src/components/LottieAnimations.js b/src/components/LottieAnimations.js
index 274d60306393..167b1078c3ca 100644
--- a/src/components/LottieAnimations.js
+++ b/src/components/LottieAnimations.js
@@ -6,5 +6,6 @@ const ReviewingBankInfo = require('../../assets/animations/ReviewingBankInfo.jso
const WorkspacePlanet = require('../../assets/animations/WorkspacePlanet.json');
const SaveTheWorld = require('../../assets/animations/SaveTheWorld.json');
const Safe = require('../../assets/animations/Safe.json');
+const Magician = require('../../assets/animations/Magician.json');
-export {ExpensifyLounge, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe};
+export {ExpensifyLounge, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe, Magician};
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 454aacc8a03b..dcaa0273f96a 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -30,7 +30,7 @@ const propTypes = {
errorText: PropTypes.string,
/** Specifies autocomplete hints for the system, so it can provide autofill */
- autoComplete: PropTypes.oneOf(['sms-otp', 'one-time-code']).isRequired,
+ autoComplete: PropTypes.oneOf(['sms-otp', 'one-time-code', 'off']).isRequired,
/* Should submit when the input is complete */
shouldSubmitOnComplete: PropTypes.bool,
@@ -48,6 +48,12 @@ const propTypes = {
/** Specifies the max length of the input */
maxLength: PropTypes.number,
+
+ /** Specifies if the keyboard should be disabled */
+ isDisableKeyboard: PropTypes.bool,
+
+ /** Last pressed digit on BigDigitPad */
+ lastPressedDigit: PropTypes.string,
};
const defaultProps = {
@@ -61,6 +67,8 @@ const defaultProps = {
onFulfill: () => {},
hasError: false,
maxLength: CONST.MAGIC_CODE_LENGTH,
+ isDisableKeyboard: false,
+ lastPressedDigit: '',
};
/**
@@ -190,9 +198,21 @@ function MagicCodeInput(props) {
* @param {Object} event
*/
const onKeyPress = ({nativeEvent: {key: keyValue}}) => {
- if (keyValue === 'Backspace') {
+ if (keyValue === 'Backspace' || keyValue === '<') {
let numbers = decomposeString(props.value, props.maxLength);
+ // If keyboard is disabled and no input is focused we need to remove
+ // the last entered digit and focus on the correct input
+ if (props.isDisableKeyboard && focusedIndex === undefined) {
+ const indexBeforeLastEditIndex = editIndex === 0 ? editIndex : editIndex - 1;
+
+ const indexToFocus = numbers[editIndex] === CONST.MAGIC_CODE_EMPTY_CHAR ? indexBeforeLastEditIndex : editIndex;
+ inputRefs.current[indexToFocus].focus();
+ props.onChangeText(props.value.substring(0, indexToFocus));
+
+ return;
+ }
+
// If the currently focused index already has a value, it will delete
// that value but maintain the focus on the same input.
if (numbers[focusedIndex] !== CONST.MAGIC_CODE_EMPTY_CHAR) {
@@ -237,13 +257,34 @@ function MagicCodeInput(props) {
}
};
+ /**
+ * If isDisableKeyboard is true we will have to call onKeyPress and onChangeText manually
+ * as the press on digit pad will not trigger native events. We take lastPressedDigit from props
+ * as it stores the last pressed digit pressed on digit pad. We take only the first character
+ * as anything after that is added to differentiate between two same digits passed in a row.
+ */
+
+ useEffect(() => {
+ if (!props.isDisableKeyboard) {
+ return;
+ }
+
+ const value = props.lastPressedDigit.charAt(0);
+ onKeyPress({nativeEvent: {key: value}});
+ onChangeText(value);
+
+ // We have not added:
+ // + the onChangeText and onKeyPress as the dependencies because we only want to run this when lastPressedDigit changes.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.lastPressedDigit, props.isDisableKeyboard]);
+
return (
<>
{_.map(getInputPlaceholderSlots(props.maxLength), (index) => (
{
)}
{Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-
+
)}
{!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
-
- );
-}
-
-MenuItemRenderHTMLTitle.propTypes = propTypes;
-MenuItemRenderHTMLTitle.defaultProps = defaultProps;
-MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
-
-export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
deleted file mode 100644
index b3dff8d77eff..000000000000
--- a/src/components/MenuItemRenderHTMLTitle/index.native.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import RenderHTML from '../RenderHTML';
-import menuItemRenderHTMLTitlePropTypes from './propTypes';
-
-const propTypes = menuItemRenderHTMLTitlePropTypes;
-
-const defaultProps = {};
-
-function MenuItemRenderHTMLTitle(props) {
- return
+
)}
{shouldShowApproveButton && !isSmallScreenWidth && (
-
+
)}
+ {shouldShowSubmitButton && !isSmallScreenWidth && (
+
+ IOU.submitReport(moneyRequestReport)}
+ />
+
+ )}
{shouldShowSettlementButton && isSmallScreenWidth && (
@@ -153,6 +167,17 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report
/>
)}
+ {shouldShowSubmitButton && isSmallScreenWidth && (
+
+ IOU.submitReport(moneyRequestReport)}
+ />
+
+ )}
);
}
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index b71047e3ca36..acaa83181bbf 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -114,8 +114,8 @@ const propTypes = {
/** File path of the receipt */
receiptPath: PropTypes.string,
- /** File source of the receipt */
- receiptSource: PropTypes.string,
+ /** File name of the receipt */
+ receiptFilename: PropTypes.string,
/** List styles for OptionsSelector */
listStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
@@ -141,6 +141,12 @@ const propTypes = {
/** Whether the money request is a distance request */
isDistanceRequest: PropTypes.bool,
+ /** Whether the receipt associated with this report is being scanned */
+ isScanning: PropTypes.bool,
+
+ /** A flag for verifying that the current report is a sub-report of a workspace chat */
+ isPolicyExpenseChat: PropTypes.bool,
+
/* Onyx Props */
/** Collection of categories attached to a policy */
policyCategories: PropTypes.objectOf(categoryPropTypes),
@@ -168,7 +174,7 @@ const defaultProps = {
reportID: '',
...withCurrentUserPersonalDetailsDefaultProps,
receiptPath: '',
- receiptSource: '',
+ receiptFilename: '',
listStyles: [],
policyCategories: {},
policyTags: {},
@@ -176,6 +182,8 @@ const defaultProps = {
transaction: {},
mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0, currency: 'USD'},
isDistanceRequest: false,
+ isScanning: false,
+ isPolicyExpenseChat: false,
};
function MoneyRequestConfirmationList(props) {
@@ -184,20 +192,23 @@ function MoneyRequestConfirmationList(props) {
const {onSendMoney, onConfirm, onSelectParticipant, transaction} = props;
const {translate, toLocaleDigit} = useLocalize();
- // A flag and a toggler for showing the rest of the form fields
- const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);
- const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields;
const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
const {unit, rate, currency} = props.mileageRate;
const distance = lodashGet(transaction, 'routes.route0.distance', 0);
const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
- // A flag for verifying that the current report is a sub-report of a workspace chat
- const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(ReportUtils.getReport(props.reportID))), [props.reportID]);
-
// A flag for showing the categories field
- const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories));
+ const shouldShowCategories =
+ props.isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && (props.iouCategory || OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories)));
+
+ // A flag for showing SmartScan fields: date, merchant, and amount, only when we don't have a receiptPath (e.g. manual request)
+ // or in the split details page which is ReadOnly
+ const shouldShowSmartScanFields = (!props.receiptPath || props.isReadOnly) && !props.isScanning;
+
+ // A flag and a toggler for showing the rest of the form fields
+ const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);
+ const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields || !shouldShowSmartScanFields;
// Fetches the first tag list of the policy
const policyTag = PolicyUtils.getTag(props.policyTags);
@@ -205,7 +216,7 @@ function MoneyRequestConfirmationList(props) {
const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
const canUseTags = Permissions.canUseTags(props.betas);
// A flag for showing the tags field
- const shouldShowTags = isPolicyExpenseChat && canUseTags && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
+ const shouldShowTags = props.isPolicyExpenseChat && canUseTags && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
// A flag for showing the billable field
const shouldShowBillable = canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
@@ -243,7 +254,10 @@ function MoneyRequestConfirmationList(props) {
const getParticipantsWithAmount = useCallback(
(participantsList) => {
const iouAmount = IOUUtils.calculateAmount(participantsList.length, props.iouAmount, props.iouCurrencyCode);
- return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participantsList, CurrencyUtils.convertToDisplayString(iouAmount, props.iouCurrencyCode));
+ return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(
+ participantsList,
+ props.iouAmount > 0 ? CurrencyUtils.convertToDisplayString(iouAmount, props.iouCurrencyCode) : '',
+ );
},
[props.iouAmount, props.iouCurrencyCode],
);
@@ -252,7 +266,9 @@ function MoneyRequestConfirmationList(props) {
const splitOrRequestOptions = useMemo(() => {
let text;
- if (props.receiptPath || isDistanceRequestWithoutRoute) {
+ if (props.receiptPath && props.hasMultipleParticipants && props.iouAmount === 0) {
+ text = translate('iou.split');
+ } else if (props.receiptPath || isDistanceRequestWithoutRoute) {
text = translate('iou.request');
} else {
const translationKey = props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount';
@@ -264,7 +280,7 @@ function MoneyRequestConfirmationList(props) {
value: props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
},
];
- }, [props.hasMultipleParticipants, props.receiptPath, translate, formattedAmount, isDistanceRequestWithoutRoute]);
+ }, [props.hasMultipleParticipants, props.iouAmount, props.receiptPath, translate, formattedAmount, isDistanceRequestWithoutRoute]);
const selectedParticipants = useMemo(() => _.filter(props.selectedParticipants, (participant) => participant.selected), [props.selectedParticipants]);
const payeePersonalDetails = useMemo(() => props.payeePersonalDetails || props.currentUserPersonalDetails, [props.payeePersonalDetails, props.currentUserPersonalDetails]);
@@ -288,7 +304,7 @@ function MoneyRequestConfirmationList(props) {
const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, props.iouAmount, props.iouCurrencyCode, true);
const formattedPayeeOption = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
payeePersonalDetails,
- CurrencyUtils.convertToDisplayString(myIOUAmount, props.iouCurrencyCode),
+ props.iouAmount > 0 ? CurrencyUtils.convertToDisplayString(myIOUAmount, props.iouCurrencyCode) : '',
);
sections.push(
@@ -457,6 +473,9 @@ function MoneyRequestConfirmationList(props) {
);
}, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions, translate, formError]);
+ const {image: receiptImage, thumbnail: receiptThumbnail} =
+ props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(props.receiptPath, props.receiptFilename) : {};
+
return (
)}
- {!_.isEmpty(props.receiptPath) ? (
+ {(receiptImage || receiptThumbnail) && (
- Navigation.navigate(ROUTES.MONEY_REQUEST_DATE.getRoute(props.iouType, props.reportID))}
- disabled={didConfirm || props.isReadOnly || !isTypeRequest}
- />
- {props.isDistanceRequest ? (
+ {shouldShowSmartScanFields && (
+ Navigation.navigate(ROUTES.MONEY_REQUEST_DATE.getRoute(props.iouType, props.reportID))}
+ disabled={didConfirm || props.isReadOnly}
+ />
+ )}
+ {props.isDistanceRequest && (
Navigation.navigate(ROUTES.MONEY_REQUEST_DISTANCE.getRoute(props.iouType, props.reportID))}
disabled={didConfirm || props.isReadOnly || !isTypeRequest}
/>
- ) : (
+ )}
+ {shouldShowSmartScanFields && (
Navigation.navigate(ROUTES.MONEY_REQUEST_MERCHANT.getRoute(props.iouType, props.reportID))}
- disabled={didConfirm || props.isReadOnly || !isTypeRequest}
+ disabled={didConfirm || props.isReadOnly}
/>
)}
{shouldShowCategories && (
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 7117f67a29b0..8a2005e64c22 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
import {withOnyx} from 'react-native-onyx';
import {View} from 'react-native';
import PropTypes from 'prop-types';
@@ -81,13 +81,23 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
+ const canModifyRequest = isActionOwner && !isSettled && !isApproved;
+
+ useEffect(() => {
+ if (canModifyRequest) {
+ return;
+ }
+
+ setIsDeleteModalVisible(false);
+ }, [canModifyRequest]);
+
return (
<>
+
{translate('iou.receiptStatusTitle')}
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 70415ab03a13..85d3e83c1360 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -70,6 +70,9 @@ const propTypes = {
/** Whether to remove the lateral padding and align the content with the margins */
shouldDisableRowInnerPadding: PropTypes.bool,
+ /** Whether to prevent default focusing on select */
+ shouldPreventDefaultFocusOnSelectRow: PropTypes.bool,
+
/** Whether to wrap large text up to 2 lines */
isMultilineSupported: PropTypes.bool,
@@ -95,6 +98,7 @@ const defaultProps = {
style: null,
shouldHaveOptionSeparator: false,
shouldDisableRowInnerPadding: false,
+ shouldPreventDefaultFocusOnSelectRow: false,
};
class OptionRow extends Component {
@@ -213,6 +217,7 @@ class OptionRow extends Component {
hoverDimmingValue={1}
hoverStyle={this.props.hoverStyle}
needsOffscreenAlphaCompositing={lodashGet(this.props.option, 'icons.length', 0) >= 2}
+ onMouseDown={this.props.shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
>
@@ -282,6 +287,7 @@ class OptionRow extends Component {
) : (
this.props.onSelectedStatePressed(this.props.option)}
+ disabled={this.state.isDisabled}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
>
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 5a40c28a86c9..23049b65f198 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -54,6 +54,7 @@ function BaseOptionsList({
showScrollIndicator,
listContainerStyles,
shouldDisableRowInnerPadding,
+ shouldPreventDefaultFocusOnSelectRow,
disableFocusOptions,
canSelectMultipleOptions,
shouldShowMultipleOptionSelectorAsButton,
@@ -206,6 +207,7 @@ function BaseOptionsList({
isDisabled={isItemDisabled}
shouldHaveOptionSeparator={index > 0 && shouldHaveOptionSeparator}
shouldDisableRowInnerPadding={shouldDisableRowInnerPadding}
+ shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
isMultilineSupported={isRowMultilineSupported}
/>
);
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index a2479c878041..165cec699b80 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -79,6 +79,9 @@ const propTypes = {
/** Whether to disable the inner padding in rows */
shouldDisableRowInnerPadding: PropTypes.bool,
+ /** Whether to prevent default focusing when selecting a row */
+ shouldPreventDefaultFocusOnSelectRow: PropTypes.bool,
+
/** Whether to show the scroll bar */
showScrollIndicator: PropTypes.bool,
@@ -107,6 +110,7 @@ const defaultProps = {
onLayout: undefined,
shouldHaveOptionSeparator: false,
shouldDisableRowInnerPadding: false,
+ shouldPreventDefaultFocusOnSelectRow: false,
showScrollIndicator: false,
isRowMultilineSupported: false,
};
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 1d0105394042..65f4bc64cee0 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -54,6 +54,7 @@ class BaseOptionsSelector extends Component {
this.selectRow = this.selectRow.bind(this);
this.selectFocusedOption = this.selectFocusedOption.bind(this);
this.addToSelection = this.addToSelection.bind(this);
+ this.updateSearchValue = this.updateSearchValue.bind(this);
this.relatedTarget = null;
const allOptions = this.flattenSections();
@@ -63,6 +64,7 @@ class BaseOptionsSelector extends Component {
allOptions,
focusedIndex,
shouldDisableRowSelection: false,
+ errorMessage: '',
};
}
@@ -167,6 +169,14 @@ class BaseOptionsSelector extends Component {
return defaultIndex;
}
+ updateSearchValue(value) {
+ this.setState({
+ errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '',
+ });
+
+ this.props.onChangeText(value);
+ }
+
subscribeToKeyboardShortcut() {
const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
this.unsubscribeEnter = KeyboardShortcut.subscribe(
@@ -316,7 +326,7 @@ class BaseOptionsSelector extends Component {
*/
selectRow(option, ref) {
return new Promise((resolve) => {
- if (this.props.shouldShowTextInput && this.props.shouldFocusOnSelectRow) {
+ if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) {
if (this.relatedTarget && ref === this.relatedTarget) {
this.textInput.focus();
this.relatedTarget = null;
@@ -344,7 +354,7 @@ class BaseOptionsSelector extends Component {
* @param {Object} option
*/
addToSelection(option) {
- if (this.props.shouldShowTextInput && this.props.shouldFocusOnSelectRow) {
+ if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) {
this.textInput.focus();
if (this.textInput.isFocused()) {
setSelection(this.textInput, 0, this.props.value.length);
@@ -366,13 +376,14 @@ class BaseOptionsSelector extends Component {
label={this.props.textInputLabel}
accessibilityLabel={this.props.textInputLabel}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
- onChangeText={this.props.onChangeText}
+ onChangeText={this.updateSearchValue}
+ errorText={this.state.errorMessage}
onSubmitEditing={this.selectFocusedOption}
placeholder={this.props.placeholderText}
- maxLength={this.props.maxLength}
+ maxLength={this.props.maxLength + CONST.ADDITIONAL_ALLOWED_CHARACTERS}
keyboardType={this.props.keyboardType}
onBlur={(e) => {
- if (!this.props.shouldFocusOnSelectRow) {
+ if (!this.props.shouldPreventDefaultFocusOnSelectRow) {
return;
}
this.relatedTarget = e.relatedTarget;
@@ -396,7 +407,7 @@ class BaseOptionsSelector extends Component {
multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
onAddToSelection={this.addToSelection}
hideSectionHeaders={this.props.hideSectionHeaders}
- headerMessage={this.props.headerMessage}
+ headerMessage={this.state.errorMessage ? '' : this.props.headerMessage}
boldStyle={this.props.boldStyle}
showTitleTooltip={this.props.showTitleTooltip}
isDisabled={this.props.isDisabled}
@@ -417,6 +428,7 @@ class BaseOptionsSelector extends Component {
isLoading={!this.props.shouldShowOptions}
showScrollIndicator={this.props.showScrollIndicator}
isRowMultilineSupported={this.props.isRowMultilineSupported}
+ shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow}
/>
);
return (
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 8a7158092967..9e028510e608 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import optionPropTypes from '../optionPropTypes';
import styles from '../../styles/styles';
+import CONST from '../../CONST';
const propTypes = {
/** Callback to fire when a row is tapped */
@@ -80,8 +81,8 @@ const propTypes = {
/** Whether to show the title tooltip */
showTitleTooltip: PropTypes.bool,
- /** Whether to focus the textinput after an option is selected */
- shouldFocusOnSelectRow: PropTypes.bool,
+ /** Whether to prevent default focusing of options and focus the textinput when selecting an option */
+ shouldPreventDefaultFocusOnSelectRow: PropTypes.bool,
/** Whether to autofocus the search input on mount */
autoFocus: PropTypes.bool,
@@ -144,7 +145,7 @@ const defaultProps = {
hideSectionHeaders: false,
boldStyle: false,
showTitleTooltip: false,
- shouldFocusOnSelectRow: false,
+ shouldPreventDefaultFocusOnSelectRow: false,
autoFocus: true,
shouldShowConfirmButton: false,
confirmButtonText: undefined,
@@ -157,7 +158,7 @@ const defaultProps = {
isDisabled: false,
shouldHaveOptionSeparator: false,
initiallyFocusedOptionKey: undefined,
- maxLength: undefined,
+ maxLength: CONST.SEARCH_MAX_LENGTH,
shouldShowTextInput: true,
onChangeText: () => {},
shouldUseStyleForChildren: true,
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 7287f36e7f2c..3b194ad4b9cf 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useRef} from 'react';
import {View} from 'react-native';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import {PopoverContext} from '../PopoverProvider';
@@ -11,6 +11,7 @@ import withWindowDimensions from '../withWindowDimensions';
function Popover(props) {
const {onOpen, close} = React.useContext(PopoverContext);
+ const firstRenderRef = useRef(true);
const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
'popover',
{
@@ -37,6 +38,13 @@ function Popover(props) {
Modal.onModalDidClose();
}
Modal.willAlertModalBecomeVisible(props.isVisible);
+
+ // We prevent setting closeModal function to null when the component is invisible the first time it is rendered
+ if (!firstRenderRef.current || !props.isVisible) {
+ firstRenderRef.current = false;
+ return;
+ }
+ firstRenderRef.current = false;
Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null);
// We want this effect to run strictly ONLY when isVisible prop changes
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
index 9bb221b2de1e..79ce5629c9e9 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js
@@ -10,6 +10,7 @@ import styles from '../../../styles/styles';
import genericPressablePropTypes from './PropTypes';
import CONST from '../../../CONST';
import * as StyleUtils from '../../../styles/StyleUtils';
+import useSingleExecution from '../../../hooks/useSingleExecution';
/**
* Returns the cursor style based on the state of Pressable
@@ -44,12 +45,12 @@ const GenericPressable = forwardRef((props, ref) => {
keyboardShortcut,
shouldUseAutoHitSlop,
enableInScreenReaderStates,
- isExecuting,
onPressIn,
onPressOut,
...rest
} = props;
+ const {isExecuting, singleExecution} = useSingleExecution();
const isScreenReaderActive = Accessibility.useScreenReaderStatus();
const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
@@ -63,8 +64,8 @@ const GenericPressable = forwardRef((props, ref) => {
shouldBeDisabledByScreenReader = isScreenReaderActive;
}
- return props.disabled || shouldBeDisabledByScreenReader;
- }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]);
+ return props.disabled || shouldBeDisabledByScreenReader || isExecuting;
+ }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled, isExecuting]);
const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);
@@ -134,7 +135,7 @@ const GenericPressable = forwardRef((props, ref) => {
hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
ref={ref}
- onPress={!isDisabled ? onPressHandler : undefined}
+ onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
// In order to prevent haptic feedback, pass empty callback as onLongPress props. Please refer https://github.com/necolas/react-native-web/issues/2349#issuecomment-1195564240
onLongPress={!isDisabled && onLongPress ? onLongPressHandler : defaultLongPressHandler}
onKeyPress={!isDisabled ? onKeyPressHandler : undefined}
diff --git a/src/components/Pressable/GenericPressable/PropTypes.js b/src/components/Pressable/GenericPressable/PropTypes.js
index 690e265b6552..3933b31d2d47 100644
--- a/src/components/Pressable/GenericPressable/PropTypes.js
+++ b/src/components/Pressable/GenericPressable/PropTypes.js
@@ -45,9 +45,6 @@ const pressablePropTypes = {
*/
shouldUseHapticsOnLongPress: PropTypes.bool,
- /** Whether the button is executing */
- isExecuting: PropTypes.bool,
-
/**
* style for when the component is disabled. Can be a function that receives the component's state (active, disabled, hover, focus, pressed, isScreenReaderActive)
* @default {}
@@ -128,7 +125,6 @@ const defaultProps = {
keyboardShortcut: undefined,
shouldUseHapticsOnPress: false,
shouldUseHapticsOnLongPress: false,
- isExecuting: false,
disabledStyle: {},
hoverStyle: {},
focusStyle: {},
diff --git a/src/components/Pressable/PressableWithDelayToggle.js b/src/components/Pressable/PressableWithDelayToggle.js
index 38660e390208..b55770a63196 100644
--- a/src/components/Pressable/PressableWithDelayToggle.js
+++ b/src/components/Pressable/PressableWithDelayToggle.js
@@ -114,7 +114,7 @@ function PressableWithDelayToggle(props) {
focusable={false}
accessible={false}
onPress={updatePressState}
- style={[styles.flexRow, ...props.styles]}
+ style={[styles.flexRow, ...props.styles, !isActive && styles.cursorDefault]}
>
{({hovered, pressed}) => (
<>
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
index a80e2109ebd7..07601ed35789 100644
--- a/src/components/Pressable/PressableWithFeedback.js
+++ b/src/components/Pressable/PressableWithFeedback.js
@@ -5,7 +5,6 @@ import GenericPressable from './GenericPressable';
import GenericPressablePropTypes from './GenericPressable/PropTypes';
import OpacityView from '../OpacityView';
import variables from '../../styles/variables';
-import useSingleExecution from '../../hooks/useSingleExecution';
const omittedProps = ['wrapperStyle', 'needsOffscreenAlphaCompositing'];
@@ -43,14 +42,12 @@ const PressableWithFeedbackDefaultProps = {
const PressableWithFeedback = forwardRef((props, ref) => {
const propsWithoutWrapperProps = _.omit(props, omittedProps);
- const {isExecuting, singleExecution} = useSingleExecution();
const [isPressed, setIsPressed] = useState(false);
const [isHovered, setIsHovered] = useState(false);
- const isDisabled = props.disabled || isExecuting;
return (
{
ref={ref}
// eslint-disable-next-line react/jsx-props-no-spreading
{...propsWithoutWrapperProps}
- disabled={isDisabled}
- isExecuting={isExecuting}
+ disabled={props.disabled}
onHoverIn={() => {
setIsHovered(true);
if (props.onHoverIn) {
@@ -85,9 +81,6 @@ const PressableWithFeedback = forwardRef((props, ref) => {
props.onPressOut();
}
}}
- onPress={(e) => {
- singleExecution(() => props.onPress(e))();
- }}
>
{(state) => (_.isFunction(props.children) ? props.children(state) : props.children)}
diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
index d96024ad1046..837adcac8efe 100644
--- a/src/components/QRShare/index.js
+++ b/src/components/QRShare/index.js
@@ -76,7 +76,6 @@ class QRShare extends Component {
{!_.isEmpty(this.props.subtitle) && (
[styles.emojiReactionBubble, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.isContextMenu)]}
onPress={Session.checkIfActionIsAllowed(onPress)}
- // Prevent text input blur when Add reaction is clicked
- onMouseDown={(e) => e.preventDefault()}
+ onMouseDown={(e) => {
+ // Allow text input blur when Add reaction is right clicked
+ if (!e || e.button === 2) {
+ return;
+ }
+
+ // Prevent text input blur when Add reaction is left clicked
+ e.preventDefault();
+ }}
accessibilityLabel={props.translate('emojiReactions.addReactionTooltip')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
// disable dimming
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 35215cadd15d..b4101d9b5721 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -317,7 +317,7 @@ function MoneyRequestPreview(props) {
)}
{shouldShowDescription && {description} }
- {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
+ {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
{props.translate('iou.amountEach', {
amount: CurrencyUtils.convertToDisplayString(
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 51677892652e..3499aee5f682 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -77,7 +77,9 @@ function TaskPreview(props) {
const assigneeDisplayName = lodashGet(props.personalDetailsList, [taskAssigneeAccountID, 'displayName'], '');
const taskAssignee = assigneeDisplayName || LocalePhoneNumber.formatPhoneNumber(assigneeLogin);
const htmlForTaskPreview =
- taskAssignee && taskAssigneeAccountID !== 0 ? `@${taskAssignee} ${taskTitle}${taskTitle} `;
+ taskAssignee && taskAssigneeAccountID !== 0
+ ? `@${taskAssignee} ${taskTitle}${taskTitle} `;
const isDeletedParentAction = ReportUtils.isCanceledTaskReport(props.taskReport, props.action);
if (isDeletedParentAction) {
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 071e53de1776..7c8444a5d5b9 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -48,9 +48,6 @@ const propTypes = {
/** All of the personal details for everyone */
personalDetails: PropTypes.objectOf(personalDetailsPropTypes),
- /** List of betas available to current user */
- betas: PropTypes.arrayOf(PropTypes.string),
-
...withLocalizePropTypes,
};
@@ -58,7 +55,6 @@ const defaultProps = {
report: {},
policy: {},
personalDetails: {},
- betas: [],
};
function ReportWelcomeText(props) {
@@ -73,7 +69,7 @@ function ReportWelcomeText(props) {
);
const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(props.policy);
const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report, isUserPolicyAdmin);
- const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(props.report, participantAccountIDs, props.betas);
+ const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(props.report, participantAccountIDs);
return (
<>
@@ -137,7 +133,9 @@ function ReportWelcomeText(props) {
))}
)}
- {moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST) && {props.translate('reportActionsView.usePlusButton')} }
+ {(moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)) && (
+ {props.translate('reportActionsView.usePlusButton')}
+ )}
);
@@ -150,9 +148,6 @@ ReportWelcomeText.displayName = 'ReportWelcomeText';
export default compose(
withLocalize,
withOnyx({
- betas: {
- key: ONYXKEYS.BETAS,
- },
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index 8a42c84ffc67..171a58ee9fa9 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -13,7 +13,16 @@ import RadioListItem from './RadioListItem';
import OfflineWithFeedback from '../OfflineWithFeedback';
import CONST from '../../CONST';
-function BaseListItem({item, isFocused = false, isDisabled = false, showTooltip, canSelectMultiple = false, onSelectRow, onDismissError = () => {}}) {
+function BaseListItem({
+ item,
+ isFocused = false,
+ isDisabled = false,
+ showTooltip,
+ shouldPreventDefaultFocusOnSelectRow = false,
+ canSelectMultiple = false,
+ onSelectRow,
+ onDismissError = () => {},
+}) {
const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
const ListItem = isUserItem ? UserListItem : RadioListItem;
@@ -32,6 +41,7 @@ function BaseListItem({item, isFocused = false, isDisabled = false, showTooltip,
hoverDimmingValue={1}
hoverStyle={styles.hoveredComponentBG}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+ onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
>
{
onSelectAll();
- if (shouldShowTextInput && shouldFocusOnSelectRow && textInputRef.current) {
+ if (shouldShowTextInput && shouldPreventDefaultFocusOnSelectRow && textInputRef.current) {
textInputRef.current.focus();
}
};
@@ -299,6 +299,7 @@ function BaseSelectionList({
canSelectMultiple={canSelectMultiple}
onSelectRow={() => selectRow(item, true)}
onDismissError={onDismissError}
+ shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
/>
);
};
@@ -401,6 +402,7 @@ function BaseSelectionList({
accessibilityState={{checked: flattenedSections.allSelected}}
disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+ onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
>
(value: T): T {
+ const ref = useRef(value);
useEffect(() => {
ref.current = value;
}, [value]);
diff --git a/src/hooks/useThrottledButtonState.js b/src/hooks/useThrottledButtonState.ts
similarity index 76%
rename from src/hooks/useThrottledButtonState.js
rename to src/hooks/useThrottledButtonState.ts
index fbf5a15e916f..c6322d063724 100644
--- a/src/hooks/useThrottledButtonState.js
+++ b/src/hooks/useThrottledButtonState.ts
@@ -1,9 +1,8 @@
import {useEffect, useState} from 'react';
-/**
- * @returns {Array}
- */
-export default function useThrottledButtonState() {
+type ThrottledButtonState = [boolean, () => void];
+
+export default function useThrottledButtonState(): ThrottledButtonState {
const [isButtonActive, setIsButtonActive] = useState(true);
useEffect(() => {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7133ed88579e..72e183fc8561 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -193,6 +193,7 @@ export default {
phoneNumber: `Please enter a valid phone number, with the country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER})`,
fieldRequired: 'This field is required.',
characterLimit: ({limit}: CharacterLimitParams) => `Exceeds the maximum length of ${limit} characters`,
+ characterLimitExceedCounter: ({length, limit}) => `Character limit exceeded (${length}/${limit})`,
dateInvalid: 'Please select a valid date',
invalidCharacter: 'Invalid character',
enterMerchant: 'Enter a merchant name',
@@ -441,7 +442,7 @@ export default {
chatWithAccountManager: 'Chat with your account manager here',
sayHello: 'Say hello!',
welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `Welcome to ${roomName}!`,
- usePlusButton: '\n\nYou can also use the + button below to request money or assign a task!',
+ usePlusButton: '\n\nYou can also use the + button to send money, request money, or assign a task!',
},
reportAction: {
asCopilot: 'as copilot for',
@@ -833,6 +834,7 @@ export default {
availableSpend: 'Remaining spending power',
virtualCardNumber: 'Virtual card number',
physicalCardNumber: 'Physical card number',
+ reportFraud: 'Report virtual card fraud',
cardDetails: {
cardNumber: 'Virtual card number',
expiration: 'Expiration',
@@ -842,6 +844,20 @@ export default {
copyCardNumber: 'Copy card number',
},
},
+ reportFraudPage: {
+ title: 'Report virtual card fraud',
+ description: 'If your virtual card details have been stolen or compromised, we’ll permanently deactivate your existing card and provide you with a new virtual card and number.',
+ deactivateCard: 'Deactivate card',
+ reportVirtualCardFraud: 'Report virtual card fraud',
+ },
+ activateCardPage: {
+ activateCard: 'Activate card',
+ pleaseEnterLastFour: 'Please enter the last four digits of your card.',
+ activatePhysicalCard: 'Activate physical card',
+ error: {
+ thatDidntMatch: "That didn't match the last 4 digits on your card. Please try again.",
+ },
+ },
transferAmountPage: {
transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`,
instant: 'Instant (Debit card)',
@@ -995,7 +1011,7 @@ export default {
error: {
dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `Date should be before ${dateString}.`,
dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `Date should be after ${dateString}.`,
- hasInvalidCharacter: 'Name can only include letters.',
+ hasInvalidCharacter: 'Name can only include Latin characters.',
incorrectZipFormat: ({zipFormat}: IncorrectZipFormatParams) => `Incorrect zip code format.${zipFormat ? ` Acceptable format: ${zipFormat}` : ''}`,
},
},
@@ -1354,6 +1370,7 @@ export default {
notAuthorized: `You do not have access to this page. Are you trying to join the workspace? Please reach out to the owner of this workspace so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`,
goToRoom: ({roomName}: GoToRoomParams) => `Go to ${roomName} room`,
workspaceAvatar: 'Workspace avatar',
+ mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
},
emptyWorkspace: {
title: 'Create a new workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a98ddfaff7d0..eed5c75e2269 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -183,6 +183,7 @@ export default {
phoneNumber: `Introduce un teléfono válido, incluyendo el código del país (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER})`,
fieldRequired: 'Este campo es obligatorio.',
characterLimit: ({limit}: CharacterLimitParams) => `Supera el límite de ${limit} caracteres`,
+ characterLimitExceedCounter: ({length, limit}) => `Se superó el límite de caracteres (${length}/${limit})`,
dateInvalid: 'Por favor, selecciona una fecha válida',
invalidCharacter: 'Carácter invalido',
enterMerchant: 'Introduce un comerciante',
@@ -433,7 +434,7 @@ export default {
chatWithAccountManager: 'Chatea con tu gestor de cuenta aquí',
sayHello: '¡Saluda!',
welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `¡Bienvenido a ${roomName}!`,
- usePlusButton: '\n\n¡También puedes usar el botón + de abajo para pedir dinero o asignar una tarea!',
+ usePlusButton: '\n\n¡También puedes usar el botón + de abajo para enviar dinero, pedir dinero, o asignar una tarea!',
},
reportAction: {
asCopilot: 'como copiloto de',
@@ -829,6 +830,7 @@ export default {
availableSpend: 'Capacidad de gasto restante',
virtualCardNumber: 'Número de la tarjeta virtual',
physicalCardNumber: 'Número de la tarjeta física',
+ reportFraud: 'Reportar fraude con la tarjeta virtual',
cardDetails: {
cardNumber: 'Número de tarjeta virtual',
expiration: 'Expiración',
@@ -838,6 +840,21 @@ export default {
copyCardNumber: 'Copiar número de la tarjeta',
},
},
+ reportFraudPage: {
+ title: 'Reportar fraude con la tarjeta virtual',
+ description:
+ 'Si los datos de tu tarjeta virtual han sido robados o se han visto comprometidos, desactivaremos permanentemente la tarjeta actual y le proporcionaremos una tarjeta virtual y un número nuevo.',
+ deactivateCard: 'Desactivar tarjeta',
+ reportVirtualCardFraud: 'Reportar fraude con la tarjeta virtual',
+ },
+ activateCardPage: {
+ activateCard: 'Activar tarjeta',
+ pleaseEnterLastFour: 'Introduce los cuatro últimos dígitos de la tarjeta.',
+ activatePhysicalCard: 'Activar tarjeta física',
+ error: {
+ thatDidntMatch: 'Los 4 últimos dígitos de tu tarjeta no coinciden. Por favor, inténtalo de nuevo.',
+ },
+ },
transferAmountPage: {
transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`,
instant: 'Instante',
@@ -993,7 +1010,7 @@ export default {
dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `La fecha debe ser anterior a ${dateString}.`,
dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `La fecha debe ser posterior a ${dateString}.`,
incorrectZipFormat: ({zipFormat}: IncorrectZipFormatParams) => `Formato de código postal incorrecto.${zipFormat ? ` Formato aceptable: ${zipFormat}` : ''}`,
- hasInvalidCharacter: 'El nombre sólo puede incluir letras.',
+ hasInvalidCharacter: 'El nombre sólo puede incluir caracteres latinos.',
},
},
resendValidationForm: {
@@ -1374,6 +1391,7 @@ export default {
notAuthorized: `No tienes acceso a esta página. ¿Estás tratando de unirte al espacio de trabajo? Comunícate con el propietario de este espacio de trabajo para que pueda añadirte como miembro. ¿Necesitas algo más? Comunícate con ${CONST.EMAIL.CONCIERGE}`,
goToRoom: ({roomName}: GoToRoomParams) => `Ir a la sala ${roomName}`,
workspaceAvatar: 'Espacio de trabajo avatar',
+ mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
},
emptyWorkspace: {
title: 'Crear un nuevo espacio de trabajo',
diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 136eee5a4116..af498831f4a4 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -278,17 +278,10 @@ function extractEmojis(text) {
}
const emojis = [];
-
- // Text can contain similar emojis as well as their skin tone variants. Create a Set to remove duplicate emojis from the search.
- const foundEmojiCodes = new Set();
-
for (let i = 0; i < parsedEmojis.length; i++) {
const character = parsedEmojis[i];
const emoji = Emojis.emojiCodeTableWithSkinTones[character];
-
- // Add the parsed emoji to the final emojis if not already present.
- if (emoji && !foundEmojiCodes.has(emoji.code)) {
- foundEmojiCodes.add(emoji.code);
+ if (emoji) {
emojis.push(emoji);
}
}
@@ -296,6 +289,24 @@ function extractEmojis(text) {
return emojis;
}
+/**
+ * Take the current emojis and the former emojis and return the emojis that were added, if we add an already existing emoji, we also return it
+ * @param {Object[]} currentEmojis The array of current emojis
+ * @param {Object[]} formerEmojis The array of former emojis
+ * @returns {Object[]} The array of added emojis
+ */
+function getAddedEmojis(currentEmojis, formerEmojis) {
+ const newEmojis = [...currentEmojis];
+ // We are removing the emojis from the newEmojis array if they were already present before.
+ formerEmojis.forEach((formerEmoji) => {
+ const indexOfAlreadyPresentEmoji = _.findIndex(newEmojis, (newEmoji) => newEmoji.code === formerEmoji.code);
+ if (indexOfAlreadyPresentEmoji >= 0) {
+ newEmojis.splice(indexOfAlreadyPresentEmoji, 1);
+ }
+ });
+ return newEmojis;
+}
+
/**
* Replace any emoji name in a text with the emoji icon.
* If we're on mobile, we also add a space after the emoji granted there's no text after it.
@@ -484,4 +495,6 @@ export {
getPreferredEmojiCode,
getUniqueEmojiCodes,
replaceAndExtractEmojis,
+ extractEmojis,
+ getAddedEmojis,
};
diff --git a/src/libs/IOUUtils.ts b/src/libs/IOUUtils.ts
index 6f6024506985..2425211d16bc 100644
--- a/src/libs/IOUUtils.ts
+++ b/src/libs/IOUUtils.ts
@@ -77,7 +77,7 @@ function isIOUReportPendingCurrencyConversion(iouReport: Report): boolean {
* Checks if the iou type is one of request, send, or split.
*/
function isValidMoneyRequestType(iouType: string): boolean {
- const moneyRequestType: string[] = [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, CONST.IOU.MONEY_REQUEST_TYPE.SPLIT];
+ const moneyRequestType: string[] = [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, CONST.IOU.MONEY_REQUEST_TYPE.SPLIT, CONST.IOU.MONEY_REQUEST_TYPE.SEND];
return moneyRequestType.includes(iouType);
}
diff --git a/src/libs/Localize/index.js b/src/libs/Localize/index.js
index db371301f43f..a26c7d4ebc10 100644
--- a/src/libs/Localize/index.js
+++ b/src/libs/Localize/index.js
@@ -2,12 +2,27 @@ import _ from 'underscore';
import lodashGet from 'lodash/get';
import Str from 'expensify-common/lib/str';
import * as RNLocalize from 'react-native-localize';
+import Onyx from 'react-native-onyx';
import Log from '../Log';
import Config from '../../CONFIG';
import translations from '../../languages/translations';
import CONST from '../../CONST';
import LocaleListener from './LocaleListener';
import BaseLocaleListener from './LocaleListener/BaseLocaleListener';
+import ONYXKEYS from '../../ONYXKEYS';
+
+// Current user mail is needed for handling missing translations
+let userEmail = '';
+Onyx.connect({
+ key: ONYXKEYS.SESSION,
+ waitForCollectionCallback: true,
+ callback: (val) => {
+ if (!val) {
+ return;
+ }
+ userEmail = val.email;
+ },
+});
// Listener when an update in Onyx happens so we use the updated locale when translating/localizing items.
LocaleListener.connect();
@@ -70,11 +85,14 @@ function translate(desiredLanguage = CONST.LOCALES.DEFAULT, phraseKey, phrasePar
return Str.result(translatedPhrase, phraseParameters);
}
- // Phrase is not found in default language, on production log an alert to server
+ // Phrase is not found in default language, on production and staging log an alert to server
// on development throw an error
- if (Config.IS_IN_PRODUCTION) {
+ if (Config.IS_IN_PRODUCTION || Config.IS_IN_STAGING) {
const phraseString = _.isArray(phraseKey) ? phraseKey.join('.') : phraseKey;
Log.alert(`${phraseString} was not found in the en locale`);
+ if (userEmail.includes(CONST.EMAIL.EXPENSIFY_EMAIL_DOMAIN)) {
+ return CONST.MISSING_TRANSLATION;
+ }
return phraseString;
}
throw new Error(`${phraseKey} was not found in the default language`);
diff --git a/src/libs/Middleware/HandleUnusedOptimisticID.ts b/src/libs/Middleware/HandleUnusedOptimisticID.ts
index a96eb4d5651b..14f7d08d1fdb 100644
--- a/src/libs/Middleware/HandleUnusedOptimisticID.ts
+++ b/src/libs/Middleware/HandleUnusedOptimisticID.ts
@@ -10,11 +10,7 @@ const handleUnusedOptimisticID: Middleware = (requestResponse, request, isFromSe
const responseOnyxData = response?.onyxData ?? [];
responseOnyxData.forEach((onyxData) => {
const key = onyxData.key;
- if (!key) {
- return;
- }
-
- if (!key.startsWith(ONYXKEYS.COLLECTION.REPORT)) {
+ if (!key?.startsWith(ONYXKEYS.COLLECTION.REPORT)) {
return;
}
diff --git a/src/libs/Middleware/SaveResponseInOnyx.js b/src/libs/Middleware/SaveResponseInOnyx.js
index c866a797877e..d8c47d4c01dd 100644
--- a/src/libs/Middleware/SaveResponseInOnyx.js
+++ b/src/libs/Middleware/SaveResponseInOnyx.js
@@ -14,50 +14,46 @@ const requestsToIgnoreLastUpdateID = ['OpenApp', 'ReconnectApp', 'GetMissingOnyx
* @returns {Promise}
*/
function SaveResponseInOnyx(requestResponse, request) {
- return requestResponse
- .then((response = {}) => {
- const onyxUpdates = response.onyxData;
-
- // Sometimes we call requests that are successfull but they don't have any response or any success/failure data to set. Let's return early since
- // we don't need to store anything here.
- if (!onyxUpdates && !request.successData && !request.failureData) {
- return Promise.resolve(response);
+ return requestResponse.then((response = {}) => {
+ const onyxUpdates = response.onyxData;
+
+ // Sometimes we call requests that are successfull but they don't have any response or any success/failure data to set. Let's return early since
+ // we don't need to store anything here.
+ if (!onyxUpdates && !request.successData && !request.failureData) {
+ return Promise.resolve(response);
+ }
+
+ // If there is an OnyxUpdate for using memory only keys, enable them
+ _.find(onyxUpdates, ({key, value}) => {
+ if (key !== ONYXKEYS.IS_USING_MEMORY_ONLY_KEYS || !value) {
+ return false;
}
- // If there is an OnyxUpdate for using memory only keys, enable them
- _.find(onyxUpdates, ({key, value}) => {
- if (key !== ONYXKEYS.IS_USING_MEMORY_ONLY_KEYS || !value) {
- return false;
- }
-
- MemoryOnlyKeys.enable();
- return true;
- });
-
- const responseToApply = {
- type: CONST.ONYX_UPDATE_TYPES.HTTPS,
- lastUpdateID: Number(response.lastUpdateID || 0),
- previousUpdateID: Number(response.previousUpdateID || 0),
- request,
- response,
- };
-
- if (_.includes(requestsToIgnoreLastUpdateID, request.command) || !OnyxUpdates.doesClientNeedToBeUpdated(Number(response.previousUpdateID || 0))) {
- return OnyxUpdates.apply(responseToApply);
- }
+ MemoryOnlyKeys.enable();
+ return true;
+ });
- // Save the update IDs to Onyx so they can be used to fetch incremental updates if the client gets out of sync from the server
- OnyxUpdates.saveUpdateInformation(responseToApply);
-
- // Ensure the queue is paused while the client resolves the gap in onyx updates so that updates are guaranteed to happen in a specific order.
- return Promise.resolve({
- ...response,
- shouldPauseQueue: true,
- });
- })
- .catch((err) => {
- console.error('Got exception while saving response in Onyx', err);
+ const responseToApply = {
+ type: CONST.ONYX_UPDATE_TYPES.HTTPS,
+ lastUpdateID: Number(response.lastUpdateID || 0),
+ previousUpdateID: Number(response.previousUpdateID || 0),
+ request,
+ response,
+ };
+
+ if (_.includes(requestsToIgnoreLastUpdateID, request.command) || !OnyxUpdates.doesClientNeedToBeUpdated(Number(response.previousUpdateID || 0))) {
+ return OnyxUpdates.apply(responseToApply);
+ }
+
+ // Save the update IDs to Onyx so they can be used to fetch incremental updates if the client gets out of sync from the server
+ OnyxUpdates.saveUpdateInformation(responseToApply);
+
+ // Ensure the queue is paused while the client resolves the gap in onyx updates so that updates are guaranteed to happen in a specific order.
+ return Promise.resolve({
+ ...response,
+ shouldPauseQueue: true,
});
+ });
}
export default SaveResponseInOnyx;
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 6636702592c0..c32120db2e45 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -142,6 +142,8 @@ const SettingsModalStackNavigator = createModalStackNavigator({
Settings_Lounge_Access: () => require('../../../pages/settings/Profile/LoungeAccessPage').default,
Settings_Wallet: () => require('../../../pages/settings/Wallet/WalletPage').default,
Settings_Wallet_DomainCards: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default,
+ Settings_Wallet_ReportVirtualCardFraud: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default,
+ Settings_Wallet_Card_Activate: () => require('../../../pages/settings/Wallet/ActivatePhysicalCardPage').default,
Settings_Wallet_Transfer_Balance: () => require('../../../pages/settings/Wallet/TransferBalancePage').default,
Settings_Wallet_Choose_Transfer_Account: () => require('../../../pages/settings/Wallet/ChooseTransferAccountPage').default,
Settings_Wallet_EnablePayments: () => require('../../../pages/EnablePayments/EnablePaymentsPage').default,
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index bf069aba314e..5616e8d63797 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -73,6 +73,10 @@ export default {
path: ROUTES.SETTINGS_WALLET_DOMAINCARDS.route,
exact: true,
},
+ Settings_Wallet_ReportVirtualCardFraud: {
+ path: ROUTES.SETTINGS_REPORT_FRAUD.route,
+ exact: true,
+ },
Settings_Wallet_EnablePayments: {
path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
exact: true,
@@ -85,6 +89,10 @@ export default {
path: ROUTES.SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT,
exact: true,
},
+ Settings_Wallet_Card_Activate: {
+ path: ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.route,
+ exact: true,
+ },
Settings_Add_Debit_Card: {
path: ROUTES.SETTINGS_ADD_DEBIT_CARD,
exact: true,
diff --git a/src/libs/NetworkConnection.js b/src/libs/NetworkConnection.ts
similarity index 90%
rename from src/libs/NetworkConnection.js
rename to src/libs/NetworkConnection.ts
index 9ca09c9154bc..663a9c1b37d5 100644
--- a/src/libs/NetworkConnection.js
+++ b/src/libs/NetworkConnection.ts
@@ -1,6 +1,6 @@
-import _ from 'underscore';
import Onyx from 'react-native-onyx';
import NetInfo from '@react-native-community/netinfo';
+import throttle from 'lodash/throttle';
import AppStateMonitor from './AppStateMonitor';
import Log from './Log';
import * as NetworkActions from './actions/Network';
@@ -13,15 +13,17 @@ let hasPendingNetworkCheck = false;
// Holds all of the callbacks that need to be triggered when the network reconnects
let callbackID = 0;
-const reconnectionCallbacks = {};
+const reconnectionCallbacks: Record Promise> = {};
/**
* Loop over all reconnection callbacks and fire each one
*/
-const triggerReconnectionCallbacks = _.throttle(
+const triggerReconnectionCallbacks = throttle(
(reason) => {
Log.info(`[NetworkConnection] Firing reconnection callbacks because ${reason}`);
- _.each(reconnectionCallbacks, (callback) => callback());
+ Object.values(reconnectionCallbacks).forEach((callback) => {
+ callback();
+ });
},
5000,
{trailing: false},
@@ -30,10 +32,8 @@ const triggerReconnectionCallbacks = _.throttle(
/**
* Called when the offline status of the app changes and if the network is "reconnecting" (going from offline to online)
* then all of the reconnection callbacks are triggered
- *
- * @param {Boolean} isCurrentlyOffline
*/
-function setOfflineStatus(isCurrentlyOffline) {
+function setOfflineStatus(isCurrentlyOffline: boolean): void {
NetworkActions.setIsOffline(isCurrentlyOffline);
// When reconnecting, ie, going from offline to online, all the reconnection callbacks
@@ -72,7 +72,7 @@ Onyx.connect({
* internet connectivity or not. This is more reliable than the Pusher
* `disconnected` event which takes about 10-15 seconds to emit.
*/
-function subscribeToNetInfo() {
+function subscribeToNetInfo(): void {
// Note: We are disabling the configuration for NetInfo when using the local web API since requests can get stuck in a 'Pending' state and are not reliable indicators for "offline".
// If you need to test the "recheck" feature then switch to the production API proxy server.
if (!CONFIG.IS_USING_LOCAL_WEB) {
@@ -101,7 +101,7 @@ function subscribeToNetInfo() {
// Subscribe to the state change event via NetInfo so we can update
// whether a user has internet connectivity or not.
NetInfo.addEventListener((state) => {
- Log.info('[NetworkConnection] NetInfo state change', false, state);
+ Log.info('[NetworkConnection] NetInfo state change', false, {...state});
if (shouldForceOffline) {
Log.info('[NetworkConnection] Not setting offline status because shouldForceOffline = true');
return;
@@ -120,11 +120,9 @@ function listenForReconnect() {
/**
* Register callback to fire when we reconnect
- *
- * @param {Function} callback - must return a Promise
- * @returns {Function} unsubscribe method
+ * @returns unsubscribe method
*/
-function onReconnect(callback) {
+function onReconnect(callback: () => Promise): () => void {
const currentID = callbackID;
callbackID++;
reconnectionCallbacks[currentID] = callback;
@@ -135,7 +133,7 @@ function onReconnect(callback) {
* Delete all queued reconnection callbacks
*/
function clearReconnectionCallbacks() {
- _.each(_.keys(reconnectionCallbacks), (key) => delete reconnectionCallbacks[key]);
+ Object.keys(reconnectionCallbacks).forEach((key) => delete reconnectionCallbacks[key]);
}
/**
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index ca2cfc73866d..3199e4c6388d 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -111,7 +111,7 @@ export default {
const plainTextMessage = (_.find(message, (f) => f.type === 'COMMENT') || {}).text;
if (isChatRoom) {
- const roomName = _.get(report, 'displayName', '');
+ const roomName = ReportUtils.getReportName(report);
title = roomName;
body = `${plainTextPerson}: ${plainTextMessage}`;
} else {
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 05322472a407..13489c396c3c 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -17,13 +17,6 @@ function canUseDefaultRooms(betas: Beta[]): boolean {
return betas?.includes(CONST.BETAS.DEFAULT_ROOMS) || canUseAllBetas(betas);
}
-/**
- * IOU Send feature is temporarily disabled.
- */
-function canUseIOUSend(): boolean {
- return false;
-}
-
function canUseWallet(betas: Beta[]): boolean {
return betas?.includes(CONST.BETAS.BETA_EXPENSIFY_WALLET) || canUseAllBetas(betas);
}
@@ -68,7 +61,6 @@ export default {
canUseChronos,
canUsePayWithExpensify,
canUseDefaultRooms,
- canUseIOUSend,
canUseWallet,
canUseCommentLinking,
canUsePolicyRooms,
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 3508d99c2ae0..79f052bd21b4 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1901,15 +1901,11 @@ function getParentNavigationSubtitle(report) {
function navigateToDetailsPage(report) {
const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
- if (isChatRoom(report) || isPolicyExpenseChat(report) || isChatThread(report) || isTaskReport(report) || isMoneyRequestReport(report)) {
- Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
- return;
- }
- if (participantAccountIDs.length === 1) {
+ if (isDM(report) && participantAccountIDs.length === 1) {
Navigation.navigate(ROUTES.PROFILE.getRoute(participantAccountIDs[0]));
return;
}
- Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
+ Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
}
/**
@@ -2203,6 +2199,9 @@ function getIOUReportActionMessage(iouReportID, type, total, comment, currency,
case CONST.REPORT.ACTIONS.TYPE.APPROVED:
iouMessage = `approved ${amount}`;
break;
+ case CONST.REPORT.ACTIONS.TYPE.SUBMITTED:
+ iouMessage = `submitted ${amount}`;
+ break;
case CONST.IOU.REPORT_ACTION_TYPE.CREATE:
iouMessage = `requested ${amount}${comment && ` for ${comment}`}`;
break;
@@ -2360,6 +2359,44 @@ function buildOptimisticApprovedReportAction(amount, currency, expenseReportID)
};
}
+/**
+ * Builds an optimistic SUBMITTED report action with a randomly generated reportActionID.
+ *
+ * @param {Number} amount
+ * @param {String} currency
+ * @param {Number} expenseReportID
+ *
+ * @returns {Object}
+ */
+function buildOptimisticSubmittedReportAction(amount, currency, expenseReportID) {
+ const originalMessage = {
+ amount,
+ currency,
+ expenseReportID,
+ };
+
+ return {
+ actionName: CONST.REPORT.ACTIONS.TYPE.SUBMITTED,
+ actorAccountID: currentUserAccountID,
+ automatic: false,
+ avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatar(currentUserAccountID)),
+ isAttachment: false,
+ originalMessage,
+ message: getIOUReportActionMessage(expenseReportID, CONST.REPORT.ACTIONS.TYPE.SUBMITTED, Math.abs(amount), '', currency),
+ person: [
+ {
+ style: 'strong',
+ text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+ type: 'TEXT',
+ },
+ ],
+ reportActionID: NumberUtils.rand64(),
+ shouldShow: true,
+ created: DateUtils.getDBTime(),
+ pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+ };
+}
+
/**
* Builds an optimistic report preview action with a randomly generated reportActionID.
*
@@ -3327,10 +3364,9 @@ function canRequestMoney(report, participants) {
*
* @param {Object} report
* @param {Array} reportParticipants
- * @param {Array} betas
* @returns {Array}
*/
-function getMoneyRequestOptions(report, reportParticipants, betas) {
+function getMoneyRequestOptions(report, reportParticipants) {
// In any thread or task report, we do not allow any new money requests yet
if (isChatThread(report) || isTaskReport(report)) {
return [];
@@ -3362,7 +3398,7 @@ function getMoneyRequestOptions(report, reportParticipants, betas) {
...(canRequestMoney(report, participants) ? [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST] : []),
// Send money option should be visible only in DMs
- ...(Permissions.canUseIOUSend(betas) && isChatReport(report) && !isPolicyExpenseChat(report) && hasSingleParticipantInReport ? [CONST.IOU.MONEY_REQUEST_TYPE.SEND] : []),
+ ...(isChatReport(report) && !isPolicyExpenseChat(report) && hasSingleParticipantInReport ? [CONST.IOU.MONEY_REQUEST_TYPE.SEND] : []),
];
}
@@ -3540,12 +3576,13 @@ function getPolicyExpenseChatReportIDByOwner(policyOwner) {
return expenseChat.reportID;
}
-/*
- * @param {Object|null} report
- * @returns {Boolean}
+/**
+ * @param {String} policyID
+ * @param {Array} accountIDs
+ * @returns {Array}
*/
-function shouldDisableSettings(report) {
- return !isMoneyRequestReport(report) && !isPolicyExpenseChat(report) && !isChatRoom(report) && !isChatThread(report);
+function getWorkspaceChats(policyID, accountIDs) {
+ return _.filter(allReports, (report) => isPolicyExpenseChat(report) && lodashGet(report, 'policyID', '') === policyID && _.contains(accountIDs, lodashGet(report, 'ownerAccountID', '')));
}
/**
@@ -3798,7 +3835,7 @@ function useRouteChangeHandler(reportID = '', reportActionID = '', triggerFetch
* @returns {Boolean}
*/
function isReportDraft(report) {
- return lodashGet(report, 'stateNum') === CONST.REPORT.STATE_NUM.OPEN && lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.OPEN;
+ return isExpenseReport(report) && lodashGet(report, 'stateNum') === CONST.REPORT.STATE_NUM.OPEN && lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.OPEN;
}
export {
@@ -3861,6 +3898,7 @@ export {
buildOptimisticEditedTaskReportAction,
buildOptimisticIOUReport,
buildOptimisticApprovedReportAction,
+ buildOptimisticSubmittedReportAction,
buildOptimisticExpenseReport,
buildOptimisticIOUReportAction,
buildOptimisticReportPreview,
@@ -3927,7 +3965,7 @@ export {
isDM,
getPolicy,
getPolicyExpenseChatReportIDByOwner,
- shouldDisableSettings,
+ getWorkspaceChats,
shouldDisableRename,
hasSingleParticipant,
getReportRecipientAccountIDs,
diff --git a/src/libs/__mocks__/Permissions.ts b/src/libs/__mocks__/Permissions.ts
index 2c062590573e..66ef64bbb994 100644
--- a/src/libs/__mocks__/Permissions.ts
+++ b/src/libs/__mocks__/Permissions.ts
@@ -12,6 +12,5 @@ export default {
...jest.requireActual('../Permissions'),
canUseDefaultRooms: (betas: Beta[]) => betas.includes(CONST.BETAS.DEFAULT_ROOMS),
canUsePolicyRooms: (betas: Beta[]) => betas.includes(CONST.BETAS.POLICY_ROOMS),
- canUseIOUSend: (betas: Beta[]) => betas.includes(CONST.BETAS.IOU_SEND),
canUseCustomStatus: (betas: Beta[]) => betas.includes(CONST.BETAS.CUSTOM_STATUS),
};
diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js
index ed83562a3e43..0c4cd88fea70 100644
--- a/src/libs/actions/CanvasSize.js
+++ b/src/libs/actions/CanvasSize.js
@@ -1,16 +1,25 @@
import Onyx from 'react-native-onyx';
import canvasSize from 'canvas-size';
import ONYXKEYS from '../../ONYXKEYS';
+import * as Browser from '../Browser';
/**
* Calculate the max area of canvas on this specific platform and save it in onyx
*/
function retrieveMaxCanvasArea() {
- canvasSize.maxArea({
- onSuccess: (width, height) => {
- Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, width * height);
- },
- });
+ // We're limiting the maximum value on mobile web to prevent a crash related to rendering large canvas elements.
+ // More information at: https://github.com/jhildenbiddle/canvas-size/issues/13
+ canvasSize
+ .maxArea({
+ max: Browser.isMobile() ? 8192 : null,
+ usePromise: true,
+ useWorker: false,
+ })
+ .then(() => ({
+ onSuccess: (width, height) => {
+ Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, width * height);
+ },
+ }));
}
/**
diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js
new file mode 100644
index 000000000000..a060c1bc67fa
--- /dev/null
+++ b/src/libs/actions/Card.js
@@ -0,0 +1,104 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as API from '../API';
+
+/**
+ * @param {Number} cardID
+ */
+function reportVirtualExpensifyCardFraud(cardID) {
+ API.write(
+ 'ReportVirtualExpensifyCardFraud',
+ {
+ cardID,
+ },
+ {
+ optimisticData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+ value: {
+ isLoading: true,
+ },
+ },
+ ],
+ successData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+ value: {
+ isLoading: false,
+ },
+ },
+ ],
+ failureData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+ value: {
+ isLoading: false,
+ },
+ },
+ ],
+ },
+ );
+}
+
+/**
+ * Activates the physical Expensify card based on the last four digits of the card number
+ *
+ * @param {Number} lastFourDigits
+ * @param {Number} cardID
+ */
+function activatePhysicalExpensifyCard(lastFourDigits, cardID) {
+ API.write(
+ 'ActivatePhysicalExpensifyCard',
+ {lastFourDigits, cardID},
+ {
+ optimisticData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.CARD_LIST,
+ value: {
+ [cardID]: {
+ errors: null,
+ isLoading: true,
+ },
+ },
+ },
+ ],
+ successData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.CARD_LIST,
+ value: {
+ [cardID]: {
+ isLoading: false,
+ },
+ },
+ },
+ ],
+ failureData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.CARD_LIST,
+ value: {
+ [cardID]: {
+ isLoading: false,
+ },
+ },
+ },
+ ],
+ },
+ );
+}
+
+/**
+ * Clears errors for a specific cardID
+ *
+ * @param {Number} cardID
+ */
+function clearCardListErrors(cardID) {
+ Onyx.merge(ONYXKEYS.CARD_LIST, {[cardID]: {errors: null, isLoading: false}});
+}
+
+export {reportVirtualExpensifyCardFraud, activatePhysicalExpensifyCard, clearCardListErrors};
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 07f61470f24d..d5676672dd33 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -22,6 +22,15 @@ import * as Report from './Report';
import * as NumberUtils from '../NumberUtils';
import ReceiptGeneric from '../../../assets/images/receipt-generic.png';
import * as LocalePhoneNumber from '../LocalePhoneNumber';
+import * as Policy from './Policy';
+
+let allPersonalDetails;
+Onyx.connect({
+ key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+ callback: (val) => {
+ allPersonalDetails = val || {};
+ },
+});
let allReports;
Onyx.connect({
@@ -44,13 +53,6 @@ Onyx.connect({
},
});
-let allRecentlyUsedCategories = {};
-Onyx.connect({
- key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES,
- waitForCollectionCallback: true,
- callback: (val) => (allRecentlyUsedCategories = val),
-});
-
let allRecentlyUsedTags = {};
Onyx.connect({
key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
@@ -122,7 +124,7 @@ function resetMoneyRequestInfo(id = '') {
tag: '',
created,
receiptPath: '',
- receiptSource: '',
+ receiptFilename: '',
transactionID: '',
billable: null,
});
@@ -137,7 +139,7 @@ function buildOnyxDataForMoneyRequest(
iouAction,
optimisticPersonalDetailListAction,
reportPreviewAction,
- optimisticRecentlyUsedCategories,
+ optimisticPolicyRecentlyUsedCategories,
optimisticPolicyRecentlyUsedTags,
isNewChatReport,
isNewIOUReport,
@@ -189,11 +191,11 @@ function buildOnyxDataForMoneyRequest(
},
];
- if (!_.isEmpty(optimisticRecentlyUsedCategories)) {
+ if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
optimisticData.push({
onyxMethod: Onyx.METHOD.SET,
key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
- value: optimisticRecentlyUsedCategories,
+ value: optimisticPolicyRecentlyUsedCategories,
});
}
@@ -478,13 +480,10 @@ function getMoneyRequestInformation(
billable,
);
- const uniquePolicyRecentlyUsedCategories = allRecentlyUsedCategories
- ? _.filter(
- allRecentlyUsedCategories[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`],
- (recentlyUsedPolicyCategory) => recentlyUsedPolicyCategory !== category,
- )
- : [];
- const optimisticPolicyRecentlyUsedCategories = [category, ...uniquePolicyRecentlyUsedCategories];
+ let optimisticPolicyRecentlyUsedCategories = [];
+ if (category) {
+ optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, category);
+ }
const optimisticPolicyRecentlyUsedTags = {};
const policyTags = allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${iouReport.policyID}`];
@@ -882,11 +881,12 @@ function requestMoney(
* @param {Number} amount - always in the smallest unit of the currency
* @param {String} comment
* @param {String} currency
+ * @param {String} category
* @param {String} existingSplitChatReportID - the report ID where the split bill happens, could be a group chat or a workspace chat
*
* @return {Object}
*/
-function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, existingSplitChatReportID = '') {
+function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
const participantAccountIDs = _.map(participants, (participant) => Number(participant.accountID));
const existingSplitChatReport =
@@ -910,6 +910,10 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
'',
'',
`${Localize.translateLocal('iou.splitBill')} ${Localize.translateLocal('common.with')} ${formattedParticipants} [${DateUtils.getDBTime().slice(0, 10)}]`,
+ undefined,
+ undefined,
+ undefined,
+ category,
);
// Note: The created action must be optimistically generated before the IOU action so there's no chance that the created action appears after the IOU action in the chat
@@ -1036,9 +1040,12 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
const hasMultipleParticipants = participants.length > 1;
_.each(participants, (participant) => {
- // In case the participant is a worskapce, email & accountID should remain undefined and won't be used in the rest of this code
- const email = isOwnPolicyExpenseChat ? '' : OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login).toLowerCase();
- const accountID = isOwnPolicyExpenseChat ? 0 : Number(participant.accountID);
+ // In a case when a participant is a workspace, even when a current user is not an owner of the workspace
+ const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(participant);
+
+ // In case the participant is a workspace, email & accountID should remain undefined and won't be used in the rest of this code
+ const email = isOwnPolicyExpenseChat || isPolicyExpenseChat ? '' : OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login).toLowerCase();
+ const accountID = isOwnPolicyExpenseChat || isPolicyExpenseChat ? 0 : Number(participant.accountID);
if (email === currentUserEmailForIOUSplit) {
return;
}
@@ -1090,6 +1097,11 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
'',
CONST.IOU.MONEY_REQUEST_TYPE.SPLIT,
splitTransaction.transactionID,
+ undefined,
+ undefined,
+ undefined,
+ undefined,
+ category,
);
// STEP 4: Build optimistic reportActions. We need:
@@ -1131,6 +1143,12 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport, oneOnOneIOUReport);
}
+ // Add category to optimistic policy recently used categories when a participant is a workspace
+ let optimisticPolicyRecentlyUsedCategories = [];
+ if (isPolicyExpenseChat) {
+ optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(participant.policyID, category);
+ }
+
// STEP 5: Build Onyx Data
const [oneOnOneOptimisticData, oneOnOneSuccessData, oneOnOneFailureData] = buildOnyxDataForMoneyRequest(
oneOnOneChatReport,
@@ -1141,7 +1159,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
oneOnOneIOUAction,
oneOnOnePersonalDetailListAction,
oneOnOneReportPreviewAction,
- [],
+ optimisticPolicyRecentlyUsedCategories,
{},
isNewOneOnOneChatReport,
shouldCreateNewOneOnOneIOUReport,
@@ -1191,11 +1209,11 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
* @param {Number} amount - always in smallest currency unit
* @param {String} comment
* @param {String} currency
+ * @param {String} category
* @param {String} existingSplitChatReportID - Either a group DM or a workspace chat
*/
-function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, existingSplitChatReportID = '') {
- const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, existingSplitChatReportID);
-
+function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
+ const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID);
API.write(
'SplitBill',
{
@@ -1204,6 +1222,7 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
splits: JSON.stringify(splits),
currency,
comment,
+ category,
transactionID: splitData.transactionID,
reportActionID: splitData.reportActionID,
createdReportActionID: splitData.createdReportActionID,
@@ -1224,9 +1243,10 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
* @param {Number} amount - always in smallest currency unit
* @param {String} comment
* @param {String} currency
+ * @param {String} category
*/
-function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency) {
- const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency);
+function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category) {
+ const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category);
API.write(
'SplitBillAndOpenReport',
@@ -1236,6 +1256,7 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
splits: JSON.stringify(splits),
currency,
comment,
+ category,
transactionID: splitData.transactionID,
reportActionID: splitData.reportActionID,
createdReportActionID: splitData.createdReportActionID,
@@ -1249,6 +1270,225 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
Report.notifyNewAction(splitData.chatReportID, currentUserAccountID);
}
+/** Used exclusively for starting a split bill request that contains a receipt, the split request will be completed once the receipt is scanned
+ * or user enters details manually.
+ *
+ * @param {Array} participants
+ * @param {String} currentUserLogin
+ * @param {Number} currentUserAccountID
+ * @param {String} comment
+ * @param {Object} receipt
+ * @param {String} existingSplitChatReportID - Either a group DM or a workspace chat
+ */
+function startSplitBill(participants, currentUserLogin, currentUserAccountID, comment, receipt, existingSplitChatReportID = '') {
+ const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
+ const participantAccountIDs = _.map(participants, (participant) => Number(participant.accountID));
+ const existingSplitChatReport =
+ existingSplitChatReportID || participants[0].reportID
+ ? allReports[`${ONYXKEYS.COLLECTION.REPORT}${existingSplitChatReportID || participants[0].reportID}`]
+ : ReportUtils.getChatByParticipants(participantAccountIDs);
+ const splitChatReport = existingSplitChatReport || ReportUtils.buildOptimisticChatReport(participantAccountIDs);
+ const isOwnPolicyExpenseChat = splitChatReport.isOwnPolicyExpenseChat || false;
+
+ const {name: filename, source, state = CONST.IOU.RECEIPT_STATE.SCANREADY} = receipt;
+ const receiptObject = {state, source};
+
+ // ReportID is -2 (aka "deleted") on the group transaction
+ const splitTransaction = TransactionUtils.buildOptimisticTransaction(0, CONST.CURRENCY.USD, CONST.REPORT.SPLIT_REPORTID, comment, '', '', '', '', receiptObject, filename);
+
+ // Note: The created action must be optimistically generated before the IOU action so there's no chance that the created action appears after the IOU action in the chat
+ const splitChatCreatedReportAction = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit);
+ const splitIOUReportAction = ReportUtils.buildOptimisticIOUReportAction(
+ CONST.IOU.REPORT_ACTION_TYPE.SPLIT,
+ 0,
+ CONST.CURRENCY.USD,
+ comment,
+ participants,
+ splitTransaction.transactionID,
+ '',
+ '',
+ false,
+ false,
+ receiptObject,
+ isOwnPolicyExpenseChat,
+ );
+
+ splitChatReport.lastReadTime = DateUtils.getDBTime();
+ splitChatReport.lastMessageText = splitIOUReportAction.message[0].text;
+ splitChatReport.lastMessageHtml = splitIOUReportAction.message[0].html;
+
+ // If we have an existing splitChatReport (group chat or workspace) use it's pending fields, otherwise indicate that we are adding a chat
+ if (!existingSplitChatReport) {
+ splitChatReport.pendingFields = {
+ createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+ };
+ }
+
+ const optimisticData = [
+ {
+ // Use set for new reports because it doesn't exist yet, is faster,
+ // and we need the data to be available when we navigate to the chat page
+ onyxMethod: existingSplitChatReport ? Onyx.METHOD.MERGE : Onyx.METHOD.SET,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${splitChatReport.reportID}`,
+ value: splitChatReport,
+ },
+ {
+ onyxMethod: existingSplitChatReport ? Onyx.METHOD.MERGE : Onyx.METHOD.SET,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${splitChatReport.reportID}`,
+ value: {
+ ...(existingSplitChatReport ? {} : {[splitChatCreatedReportAction.reportActionID]: splitChatCreatedReportAction}),
+ [splitIOUReportAction.reportActionID]: splitIOUReportAction,
+ },
+ },
+ {
+ onyxMethod: Onyx.METHOD.SET,
+ key: `${ONYXKEYS.COLLECTION.TRANSACTION}${splitTransaction.transactionID}`,
+ value: splitTransaction,
+ },
+ ];
+
+ const successData = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${splitChatReport.reportID}`,
+ value: {
+ ...(existingSplitChatReport ? {} : {[splitChatCreatedReportAction.reportActionID]: {pendingAction: null}}),
+ [splitIOUReportAction.reportActionID]: {pendingAction: null},
+ },
+ },
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.TRANSACTION}${splitTransaction.transactionID}`,
+ value: {pendingAction: null},
+ },
+ ];
+
+ if (!existingSplitChatReport) {
+ successData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${splitChatReport.reportID}`,
+ value: {pendingFields: {createChat: null}},
+ });
+ }
+
+ const failureData = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.TRANSACTION}${splitTransaction.transactionID}`,
+ value: {
+ errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
+ },
+ },
+ ];
+
+ if (existingSplitChatReport) {
+ failureData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${splitChatReport.reportID}`,
+ value: {
+ [splitIOUReportAction.reportActionID]: {
+ errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
+ },
+ },
+ });
+ } else {
+ failureData.push(
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${splitChatReport.reportID}`,
+ value: {
+ errorFields: {
+ createChat: ErrorUtils.getMicroSecondOnyxError('report.genericCreateReportFailureMessage'),
+ },
+ },
+ },
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${splitChatReport.reportID}`,
+ value: {
+ [splitChatCreatedReportAction.reportActionID]: {
+ errors: ErrorUtils.getMicroSecondOnyxError('report.genericCreateReportFailureMessage'),
+ },
+ [splitIOUReportAction.reportActionID]: {
+ errors: ErrorUtils.getMicroSecondOnyxError('report.genericCreateFailureMessage'),
+ },
+ },
+ },
+ );
+ }
+
+ const splits = [{email: currentUserEmailForIOUSplit, accountID: currentUserAccountID}];
+
+ _.each(participants, (participant) => {
+ const email = participant.isOwnPolicyExpenseChat ? '' : OptionsListUtils.addSMSDomainIfPhoneNumber(participant.login || participant.text).toLowerCase();
+ const accountID = participant.isOwnPolicyExpenseChat ? 0 : Number(participant.accountID);
+ if (email === currentUserEmailForIOUSplit) {
+ return;
+ }
+
+ // When splitting with a workspace chat, we only need to supply the policyID and the workspace reportID as it's needed so we can update the report preview
+ if (participant.isOwnPolicyExpenseChat) {
+ splits.push({
+ policyID: participant.policyID,
+ chatReportID: splitChatReport.reportID,
+ });
+ return;
+ }
+
+ const participantPersonalDetails = allPersonalDetails[participant.accountID];
+ if (!participantPersonalDetails) {
+ optimisticData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+ value: {
+ [accountID]: {
+ accountID,
+ avatar: UserUtils.getDefaultAvatarURL(accountID),
+ displayName: LocalePhoneNumber.formatPhoneNumber(participant.displayName || email),
+ login: participant.login || participant.text,
+ isOptimisticPersonalDetail: true,
+ },
+ },
+ });
+ }
+
+ splits.push({
+ email,
+ accountID,
+ });
+ });
+
+ // Save the new splits array into the transaction's comment in case the user calls CompleteSplitBill while offline
+ optimisticData.push({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.TRANSACTION}${splitTransaction.transactionID}`,
+ value: {
+ comment: {
+ splits,
+ },
+ },
+ });
+
+ API.write(
+ 'StartSplitBill',
+ {
+ chatReportID: splitChatReport.reportID,
+ reportActionID: splitIOUReportAction.reportActionID,
+ transactionID: splitTransaction.transactionID,
+ splits: JSON.stringify(splits),
+ receipt,
+ comment,
+ isFromGroupDM: !existingSplitChatReport,
+ ...(existingSplitChatReport ? {} : {createdReportActionID: splitChatCreatedReportAction.reportActionID}),
+ },
+ {optimisticData, successData, failureData},
+ );
+
+ resetMoneyRequestInfo();
+ Navigation.dismissModal(splitChatReport.reportID);
+ Report.notifyNewAction(splitChatReport.chatReportID, currentUserAccountID);
+}
+
/**
* @param {String} transactionID
* @param {Number} transactionThreadReportID
@@ -2096,6 +2336,80 @@ function approveMoneyRequest(expenseReport) {
API.write('ApproveMoneyRequest', {reportID: expenseReport.reportID, approvedReportActionID: optimisticApprovedReportAction.reportActionID}, {optimisticData, successData, failureData});
}
+/**
+ * @param {Object} expenseReport
+ */
+function submitReport(expenseReport) {
+ const optimisticSubmittedReportAction = ReportUtils.buildOptimisticSubmittedReportAction(expenseReport.total, expenseReport.currency, expenseReport.reportID);
+
+ const optimisticReportActionsData = {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
+ value: {
+ [optimisticSubmittedReportAction.reportActionID]: {
+ ...optimisticSubmittedReportAction,
+ pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+ },
+ },
+ };
+ const optimisticIOUReportData = {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
+ value: {
+ ...expenseReport,
+ lastMessageText: optimisticSubmittedReportAction.message[0].text,
+ lastMessageHtml: optimisticSubmittedReportAction.message[0].html,
+ state: CONST.REPORT.STATE.SUBMITTED,
+ stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+ statusNum: CONST.REPORT.STATUS.SUBMITTED,
+ },
+ };
+ const optimisticData = [optimisticIOUReportData, optimisticReportActionsData];
+
+ const successData = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
+ value: {
+ [optimisticSubmittedReportAction.reportActionID]: {
+ pendingAction: null,
+ },
+ },
+ },
+ ];
+
+ const failureData = [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
+ value: {
+ [expenseReport.reportActionID]: {
+ errors: ErrorUtils.getMicroSecondOnyxError('iou.error.other'),
+ },
+ },
+ },
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
+ value: {
+ state: CONST.REPORT.STATE.OPEN,
+ stateNum: CONST.REPORT.STATE_NUM.OPEN,
+ },
+ },
+ ];
+
+ API.write(
+ 'SubmitReport',
+ {
+ reportID: expenseReport.reportID,
+ managerEmail: expenseReport.managerEmail,
+ managerAccountID: expenseReport.managerID,
+ reportActionID: optimisticSubmittedReportAction.reportActionID,
+ },
+ {optimisticData, successData, failureData},
+ );
+}
+
/**
* @param {String} paymentType
* @param {Object} chatReport
@@ -2244,10 +2558,10 @@ function setMoneyRequestParticipants(participants) {
/**
* @param {String} receiptPath
- * @param {String} receiptSource
+ * @param {String} receiptFilename
*/
-function setMoneyRequestReceipt(receiptPath, receiptSource) {
- Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptSource, merchant: ''});
+function setMoneyRequestReceipt(receiptPath, receiptFilename) {
+ Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptFilename, merchant: ''});
}
function createEmptyTransaction() {
@@ -2302,8 +2616,19 @@ function navigateToNextPage(iou, iouType, report, path = '') {
Navigation.navigate(ROUTES.MONEY_REQUEST_PARTICIPANTS.getRoute(iouType));
}
-function submitReport() {
- // Will be implemented in https://github.com/Expensify/App/issues/28763
+/**
+ * When the money request or split bill creation flow is initialized via FAB, the reportID is not passed as a navigation
+ * parameter.
+ * Gets a report id from the first participant of the IOU object stored in Onyx.
+ * @param {Object} iou
+ * @param {Array} iou.participants
+ * @param {Object} route
+ * @param {Object} route.params
+ * @param {String} [route.params.reportID]
+ * @returns {String}
+ */
+function getIOUReportID(iou, route) {
+ return lodashGet(route, 'params.reportID') || lodashGet(iou, 'participants.0.reportID', '');
}
export {
@@ -2312,9 +2637,11 @@ export {
deleteMoneyRequest,
splitBill,
splitBillAndOpenReport,
+ startSplitBill,
requestMoney,
sendMoneyElsewhere,
approveMoneyRequest,
+ submitReport,
payMoneyRequest,
sendMoneyWithWallet,
startMoneyRequest,
@@ -2336,5 +2663,5 @@ export {
navigateToNextPage,
updateDistanceRequest,
replaceReceipt,
- submitReport,
+ getIOUReportID,
};
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index 577048b1b716..61f9c49e3fdd 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -1,6 +1,7 @@
import _ from 'underscore';
import Onyx from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import lodashUnion from 'lodash/union';
import {PUBLIC_DOMAINS} from 'expensify-common/lib/CONST';
import Str from 'expensify-common/lib/str';
import {escapeRegExp} from 'lodash';
@@ -65,6 +66,13 @@ Onyx.connect({
callback: (val) => (allPersonalDetails = val),
});
+let allRecentlyUsedCategories = {};
+Onyx.connect({
+ key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES,
+ waitForCollectionCallback: true,
+ callback: (val) => (allRecentlyUsedCategories = val),
+});
+
/**
* Stores in Onyx the policy ID of the last workspace that was accessed by the user
* @param {String|null} policyID
@@ -196,14 +204,37 @@ function removeMembers(accountIDs, policyID) {
if (accountIDs.length === 0) {
return;
}
+
const membersListKey = `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`;
+ const policy = ReportUtils.getPolicy(policyID);
+ const workspaceChats = ReportUtils.getWorkspaceChats(policyID, accountIDs);
+ const optimisticClosedReportActions = _.map(workspaceChats, () =>
+ ReportUtils.buildOptimisticClosedReportAction(sessionEmail, policy.name, CONST.REPORT.ARCHIVE_REASON.REMOVED_FROM_POLICY),
+ );
+
const optimisticData = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: membersListKey,
value: _.object(accountIDs, Array(accountIDs.length).fill({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE})),
},
+ ..._.map(workspaceChats, (report) => ({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`,
+ value: {
+ statusNum: CONST.REPORT.STATUS.CLOSED,
+ stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
+ oldPolicyName: policy.name,
+ hasDraft: false,
+ },
+ })),
+ ..._.map(optimisticClosedReportActions, (reportAction, index) => ({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${workspaceChats[index].reportID}`,
+ value: {[reportAction.reportActionID]: reportAction},
+ })),
];
+
const successData = [
{
onyxMethod: Onyx.METHOD.MERGE,
@@ -217,6 +248,21 @@ function removeMembers(accountIDs, policyID) {
key: membersListKey,
value: _.object(accountIDs, Array(accountIDs.length).fill({errors: ErrorUtils.getMicroSecondOnyxError('workspace.people.error.genericRemove')})),
},
+ ..._.map(workspaceChats, ({reportID, stateNum, statusNum, hasDraft, oldPolicyName = null}) => ({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+ value: {
+ stateNum,
+ statusNum,
+ hasDraft,
+ oldPolicyName,
+ },
+ })),
+ ..._.map(optimisticClosedReportActions, (reportAction, index) => ({
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${workspaceChats[index].reportID}`,
+ value: {[reportAction.reportActionID]: null},
+ })),
];
API.write(
'DeleteMembersFromWorkspace',
@@ -1168,6 +1214,21 @@ function clearErrors(policyID) {
hideWorkspaceAlertMessage(policyID);
}
+/**
+ * @param {String} policyID
+ * @param {String} category
+ * @returns {Object}
+ */
+function buildOptimisticPolicyRecentlyUsedCategories(policyID, category) {
+ if (!policyID || !category) {
+ return [];
+ }
+
+ const policyRecentlyUsedCategories = lodashGet(allRecentlyUsedCategories, `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, []);
+
+ return lodashUnion([category], policyRecentlyUsedCategories);
+}
+
export {
removeMembers,
addMembersToWorkspace,
@@ -1197,4 +1258,5 @@ export {
setWorkspaceInviteMembersDraft,
clearErrors,
openDraftWorkspaceRequest,
+ buildOptimisticPolicyRecentlyUsedCategories,
};
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 36f37ac5db7d..7418f579e442 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -87,6 +87,19 @@ Onyx.connect({
},
});
+const draftNoteMap = {};
+Onyx.connect({
+ key: ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT,
+ callback: (value, key) => {
+ if (!key) {
+ return;
+ }
+
+ const reportID = key.replace(ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT, '');
+ draftNoteMap[reportID] = value;
+ },
+});
+
const allReports = {};
let conciergeChatReportID;
const typingWatchTimers = {};
@@ -2233,6 +2246,21 @@ function clearPrivateNotesError(reportID, accountID) {
Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {privateNotes: {[accountID]: {errors: null}}});
}
+function getDraftPrivateNote(reportID) {
+ return draftNoteMap[reportID];
+}
+
+/**
+ * Saves the private notes left by the user as they are typing. By saving this data the user can switch between chats, close
+ * tab, refresh etc without worrying about loosing what they typed out.
+ *
+ * @param {String} reportID
+ * @param {String} note
+ */
+function savePrivateNotesDraft(reportID, note) {
+ Onyx.merge(`${ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT}${reportID}`, note);
+}
+
export {
addComment,
addAttachment,
@@ -2288,4 +2316,6 @@ export {
hasErrorInPrivateNotes,
getOlderActions,
getNewerActions,
+ savePrivateNotesDraft,
+ getDraftPrivateNote,
};
diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
index d96a37d95457..aaa706e71fb2 100644
--- a/src/libs/migrateOnyx.js
+++ b/src/libs/migrateOnyx.js
@@ -1,6 +1,5 @@
import _ from 'underscore';
import Log from './Log';
-import RenamePriorityModeKey from './migrations/RenamePriorityModeKey';
import PersonalDetailsByAccountID from './migrations/PersonalDetailsByAccountID';
import RenameReceiptFilename from './migrations/RenameReceiptFilename';
@@ -10,7 +9,7 @@ export default function () {
return new Promise((resolve) => {
// Add all migrations to an array so they are executed in order
- const migrationPromises = [RenamePriorityModeKey, PersonalDetailsByAccountID, RenameReceiptFilename];
+ const migrationPromises = [PersonalDetailsByAccountID, RenameReceiptFilename];
// Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the
// previous promise to finish before moving onto the next one.
diff --git a/src/libs/migrations/RenamePriorityModeKey.js b/src/libs/migrations/RenamePriorityModeKey.js
deleted file mode 100644
index a2be26880b52..000000000000
--- a/src/libs/migrations/RenamePriorityModeKey.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Onyx from 'react-native-onyx';
-import _ from 'underscore';
-import ONYXKEYS from '../../ONYXKEYS';
-import Log from '../Log';
-
-// This migration changes the name of the Onyx key NVP_PRIORITY_MODE from priorityMode to nvp_priorityMode
-export default function () {
- return new Promise((resolve) => {
- // Connect to the old key in Onyx to get the old value of priorityMode
- // then set the new key nvp_priorityMode to hold the old data
- // finally remove the old key by setting the value to null
- const connectionID = Onyx.connect({
- key: 'priorityMode',
- callback: (oldPriorityMode) => {
- Onyx.disconnect(connectionID);
-
- // Fail early here because there is nothing to migrate
- if (_.isEmpty(oldPriorityMode)) {
- Log.info('[Migrate Onyx] Skipped migration RenamePriorityModeKey');
- return resolve();
- }
-
- Onyx.multiSet({
- priorityMode: null,
- [ONYXKEYS.NVP_PRIORITY_MODE]: oldPriorityMode,
- }).then(() => {
- Log.info('[Migrate Onyx] Ran migration RenamePriorityModeKey');
- resolve();
- });
- },
- });
- });
-}
diff --git a/src/pages/EditRequestDistancePage.js b/src/pages/EditRequestDistancePage.js
index 3a606aeb8f07..f5beba5fdcfd 100644
--- a/src/pages/EditRequestDistancePage.js
+++ b/src/pages/EditRequestDistancePage.js
@@ -39,13 +39,17 @@ const propTypes = {
/* Onyx props */
/** The original transaction that is being edited */
transaction: transactionPropTypes,
+
+ /** backup version of the original transaction */
+ transactionBackup: transactionPropTypes,
};
const defaultProps = {
transaction: {},
+ transactionBackup: {},
};
-function EditRequestDistancePage({report, route, transaction}) {
+function EditRequestDistancePage({report, route, transaction, transactionBackup}) {
const {isOffline} = useNetwork();
const {translate} = useLocalize();
const transactionWasSaved = useRef(false);
@@ -87,6 +91,16 @@ function EditRequestDistancePage({report, route, transaction}) {
* @param {Object} waypoints
*/
const saveTransaction = (waypoints) => {
+ // If nothing was changed, simply go to transaction thread
+ // We compare only addresses because numbers are rounded while backup
+ const oldWaypoints = lodashGet(transactionBackup, 'comment.waypoints', {});
+ const oldAddresses = _.mapObject(oldWaypoints, (waypoint) => _.pick(waypoint, 'address'));
+ const addresses = _.mapObject(waypoints, (waypoint) => _.pick(waypoint, 'address'));
+ if (_.isEqual(oldAddresses, addresses)) {
+ Navigation.dismissModal(report.reportID);
+ return;
+ }
+
transactionWasSaved.current = true;
IOU.updateDistanceRequest(transaction.transactionID, report.reportID, {waypoints});
@@ -125,4 +139,7 @@ export default withOnyx({
transaction: {
key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
},
+ transactionBackup: {
+ key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}-backup`,
+ },
})(EditRequestDistancePage);
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index c3b66910face..565f36d69e54 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -198,7 +198,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
onChangeText={setSearchTerm}
headerMessage={headerMessage}
boldStyle
- shouldFocusOnSelectRow={!Browser.isMobile()}
+ shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
shouldShowOptions={isOptionsDataReady}
shouldShowConfirmButton
confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 183bd6d16233..1bf99a6f5681 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -1,4 +1,4 @@
-import React, {useState, useRef, useCallback} from 'react';
+import React, {useState, useRef, useCallback, useMemo} from 'react';
import PropTypes from 'prop-types';
import {Keyboard} from 'react-native';
import {withOnyx} from 'react-native-onyx';
@@ -63,7 +63,23 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
// We need to edit the note in markdown format, but display it in HTML format
const parser = new ExpensiMark();
- const [privateNote, setPrivateNote] = useState(parser.htmlToMarkdown(lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '')).trim());
+ const [privateNote, setPrivateNote] = useState(
+ Report.getDraftPrivateNote(report.reportID) || parser.htmlToMarkdown(lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '')).trim(),
+ );
+
+ /**
+ * Save the draft of the private note. This debounced so that we're not ceaselessly saving your edit. Saving the draft
+ * allows one to navigate somewhere else and come back to the private note and still have it in edit mode.
+ * @param {String} newDraft
+ */
+ const debouncedSavePrivateNote = useMemo(
+ () =>
+ _.debounce((text) => {
+ Report.savePrivateNotesDraft(report.reportID, text);
+ }, 1000),
+ [report.reportID],
+ );
+
const isCurrentUserNote = Number(session.accountID) === Number(route.params.accountID);
// To focus on the input field when the page loads
@@ -153,7 +169,10 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
containerStyles={[styles.autoGrowHeightMultilineInput]}
defaultValue={privateNote}
value={privateNote}
- onChangeText={(text) => setPrivateNote(text)}
+ onChangeText={(text) => {
+ debouncedSavePrivateNote(text);
+ setPrivateNote(text);
+ }}
ref={(el) => {
if (!el) {
return;
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 6bacc8ed3bb4..3df72deccefd 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -37,6 +37,7 @@ import variables from '../styles/variables';
import * as ValidationUtils from '../libs/ValidationUtils';
import Permissions from '../libs/Permissions';
import ROUTES from '../ROUTES';
+import MenuItemWithTopDescription from '../components/MenuItemWithTopDescription';
const matchType = PropTypes.shape({
params: PropTypes.shape({
@@ -122,7 +123,7 @@ function ProfilePage(props) {
const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : login;
const isCurrentUser = _.keys(props.loginList).includes(login);
- const hasMinimumDetails = !_.isEmpty(details.avatar) && !_.isUndefined(details.displayName);
+ const hasMinimumDetails = !_.isEmpty(details.avatar);
const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details) || props.isLoadingReportData;
// If the API returns an error for some reason there won't be any details and isLoading will get set to false, so we want to show a blocking screen
@@ -135,7 +136,7 @@ function ProfilePage(props) {
const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.HOME);
- const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
+ const notificationPreference = !_.isEmpty(props.report) ? props.translate(`notificationPreferencesPage.notificationPreferences.${props.report.notificationPreference}`) : '';
// eslint-disable-next-line rulesdir/prefer-early-return
useEffect(() => {
@@ -231,6 +232,15 @@ function ProfilePage(props) {
) : null}
{shouldShowLocalTime &&
+ {!_.isEmpty(props.report) && notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN && (
+ Navigation.navigate(ROUTES.REPORT_SETTINGS_NOTIFICATION_PREFERENCES.getRoute(props.report.reportID))}
+ wrapperStyle={[styles.mtn6, styles.mb5]}
+ />
+ )}
{!isCurrentUser && !Session.isAnonymousUser() && (
Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(chatReportWithCurrentUser.reportID))}
+ onPress={() => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID))}
wrapperStyle={styles.breakAll}
shouldShowRightIcon
- brickRoadIndicator={Report.hasErrorInPrivateNotes(chatReportWithCurrentUser) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+ brickRoadIndicator={Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
/>
)}
@@ -289,5 +299,21 @@ export default compose(
betas: {
key: ONYXKEYS.BETAS,
},
+ session: {
+ key: ONYXKEYS.SESSION,
+ },
+ }),
+ // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
+ withOnyx({
+ report: {
+ key: ({route, session}) => {
+ const accountID = Number(lodashGet(route.params, 'accountID', 0));
+ const reportID = lodashGet(ReportUtils.getChatByParticipants([accountID]), 'reportID', '');
+ if (Number(session.accountID) === accountID || Session.isAnonymousUser() || !reportID) {
+ return null;
+ }
+ return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
+ },
+ },
}),
)(ProfilePage);
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index e4ce09fc7e1a..42a535844c72 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -61,8 +61,7 @@ const defaultProps = {
function ReportDetailsPage(props) {
const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]);
- const shouldDisableSettings = useMemo(() => ReportUtils.shouldDisableSettings(props.report), [props.report]);
- const shouldUseFullTitle = !shouldDisableSettings || ReportUtils.isTaskReport(props.report);
+ const shouldUseFullTitle = ReportUtils.isTaskReport(props.report);
const isChatRoom = useMemo(() => ReportUtils.isChatRoom(props.report), [props.report]);
const isThread = useMemo(() => ReportUtils.isChatThread(props.report), [props.report]);
const isUserCreatedPolicyRoom = useMemo(() => ReportUtils.isUserCreatedPolicyRoom(props.report), [props.report]);
@@ -75,16 +74,20 @@ function ReportDetailsPage(props) {
const canLeaveRoom = useMemo(() => ReportUtils.canLeaveRoom(props.report, !_.isEmpty(policy)), [policy, props.report]);
const participants = useMemo(() => ReportUtils.getParticipantsIDs(props.report), [props.report]);
+ const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]);
+
const menuItems = useMemo(() => {
- const items = [
- {
+ const items = [];
+
+ if (!isGroupDMChat) {
+ items.push({
key: CONST.REPORT_DETAILS_MENU_ITEM.SHARE_CODE,
translationKey: 'common.shareCode',
icon: Expensicons.QrCode,
isAnonymousAction: true,
action: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(props.report.reportID)),
- },
- ];
+ });
+ }
if (isArchivedRoom) {
return items;
@@ -103,17 +106,15 @@ function ReportDetailsPage(props) {
});
}
- if (!shouldDisableSettings) {
- items.push({
- key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
- translationKey: 'common.settings',
- icon: Expensicons.Gear,
- isAnonymousAction: false,
- action: () => {
- Navigation.navigate(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID));
- },
- });
- }
+ items.push({
+ key: CONST.REPORT_DETAILS_MENU_ITEM.SETTINGS,
+ translationKey: 'common.settings',
+ icon: Expensicons.Gear,
+ isAnonymousAction: false,
+ action: () => {
+ Navigation.navigate(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID));
+ },
+ });
// Prevent displaying private notes option for threads and task reports
if (!isThread && !isMoneyRequestReport && !ReportUtils.isTaskReport(props.report)) {
@@ -138,7 +139,7 @@ function ReportDetailsPage(props) {
}
return items;
- }, [isArchivedRoom, participants.length, shouldDisableSettings, isThread, isMoneyRequestReport, props.report, isUserCreatedPolicyRoom, canLeaveRoom]);
+ }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isUserCreatedPolicyRoom, canLeaveRoom, isGroupDMChat]);
const displayNamesWithTooltips = useMemo(() => {
const hasMultipleParticipants = participants.length > 1;
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 4a29a05421fc..7d99e84cb7f6 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -262,12 +262,12 @@ function ReportScreen({
// It possible that we may not have the report object yet in Onyx yet e.g. we navigated to a URL for an accessible report that
// is not stored locally yet. If report.reportID exists, then the report has been stored locally and nothing more needs to be done.
// If it doesn't exist, then we fetch the report from the API.
- if (report.reportID && report.reportID === getReportID(route) && !reportMetadata.isLoadingInitialReportActions) {
+ if (report.reportID && report.reportID === getReportID(route) && !isFirstlyLoadingReportActions) {
return;
}
fetchReport();
- }, [report.reportID, route, reportMetadata.isLoadingInitialReportActions, fetchReport]);
+ }, [report.reportID, route, isFirstlyLoadingReportActions, fetchReport]);
const dismissBanner = useCallback(() => {
setIsBannerVisible(false);
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index ecc37a2b785f..67d9a9584b39 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -4,6 +4,8 @@ import useWindowDimensions from '../../../hooks/useWindowDimensions';
import * as NumberUtils from '../../../libs/NumberUtils';
import EmptyStateBackgroundImage from '../../../../assets/images/empty-state_background-fade.png';
import * as StyleUtils from '../../../styles/StyleUtils';
+import variables from '../../../styles/variables';
+import CONST from '../../../CONST';
const IMAGE_OFFSET_Y = 75;
@@ -11,6 +13,9 @@ function AnimatedEmptyStateBackground() {
const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
const IMAGE_OFFSET_X = windowWidth / 2;
+ // If window width is greater than the max background width, repeat the background image
+ const maxBackgroundWidth = variables.sideBarWidth + CONST.EMPTY_STATE_BACKGROUND.ASPECT_RATIO * CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT;
+
// Get data from phone rotation sensor and prep other variables for animation
const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE);
const xOffset = useSharedValue(0);
@@ -32,13 +37,14 @@ function AnimatedEmptyStateBackground() {
return {
transform: [{translateX: withSpring(-IMAGE_OFFSET_X - xOffset.value)}, {translateY: withSpring(yOffset.value)}],
};
- });
+ }, []);
return (
maxBackgroundWidth ? 'repeat' : 'cover'}
/>
);
}
diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
index 58017705c5f1..e987eff4c7e8 100644
--- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
@@ -316,7 +316,7 @@ function PopoverReportActionContextMenu(_props, ref) {
/>
({
+ return _.map(ReportUtils.getMoneyRequestOptions(report, reportParticipantIDs), (option) => ({
...options[option],
onSelected: () => IOU.startMoneyRequest(option, report.reportID),
}));
- }, [betas, report, reportParticipantIDs, translate]);
+ }, [report, reportParticipantIDs, translate]);
/**
* Determines if we can show the task option
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
index a4777556dda7..faa710d2cd6b 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js
@@ -102,8 +102,14 @@ function ComposerWithSuggestions({
const {preferredLocale} = useLocalize();
const isFocused = useIsFocused();
const navigation = useNavigation();
-
- const [value, setValue] = useState(() => getDraftComment(reportID) || '');
+ const emojisPresentBefore = useRef([]);
+ const [value, setValue] = useState(() => {
+ const draft = getDraftComment(reportID) || '';
+ if (draft) {
+ emojisPresentBefore.current = EmojiUtils.extractEmojis(draft);
+ }
+ return draft;
+ });
const commentRef = useRef(value);
const {isSmallScreenWidth} = useWindowDimensions();
@@ -154,14 +160,6 @@ function ComposerWithSuggestions({
debouncedLowerIsScrollLikelyLayoutTriggered();
}, [debouncedLowerIsScrollLikelyLayoutTriggered]);
- const onInsertedEmoji = useCallback(
- (emojiObject) => {
- insertedEmojisRef.current = [...insertedEmojisRef.current, emojiObject];
- debouncedUpdateFrequentlyUsedEmojis(emojiObject);
- },
- [debouncedUpdateFrequentlyUsedEmojis],
- );
-
/**
* Set the TextInput Ref
*
@@ -206,10 +204,13 @@ function ComposerWithSuggestions({
const {text: newComment, emojis} = EmojiUtils.replaceAndExtractEmojis(commentValue, preferredSkinTone, preferredLocale);
if (!_.isEmpty(emojis)) {
- insertedEmojisRef.current = [...insertedEmojisRef.current, ...emojis];
- debouncedUpdateFrequentlyUsedEmojis();
+ const newEmojis = EmojiUtils.getAddedEmojis(emojis, emojisPresentBefore.current);
+ if (!_.isEmpty(newEmojis)) {
+ insertedEmojisRef.current = [...insertedEmojisRef.current, ...newEmojis];
+ debouncedUpdateFrequentlyUsedEmojis();
+ }
}
-
+ emojisPresentBefore.current = emojis;
setIsCommentEmpty(!!newComment.match(/^(\s)*$/));
setValue(newComment);
if (commentValue !== newComment) {
@@ -550,7 +551,6 @@ function ComposerWithSuggestions({
isComposerFullSize={isComposerFullSize}
updateComment={updateComment}
composerHeight={composerHeight}
- onInsertedEmoji={onInsertedEmoji}
measureParentContainer={measureParentContainer}
// Input
value={value}
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
index 910a338c83b6..8ffed01f1068 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
@@ -39,9 +39,6 @@ const propTypes = {
/** Function to clear the input */
resetKeyboardInput: PropTypes.func.isRequired,
- /** Callback when a emoji was inserted */
- onInsertedEmoji: PropTypes.func.isRequired,
-
...SuggestionProps.baseProps,
};
@@ -61,7 +58,6 @@ function SuggestionEmoji({
isAutoSuggestionPickerLarge,
forwardedRef,
resetKeyboardInput,
- onInsertedEmoji,
measureParentContainer,
}) {
const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
@@ -102,10 +98,8 @@ function SuggestionEmoji({
end: suggestionValues.colonIndex + emojiCode.length + CONST.SPACE_LENGTH,
});
setSuggestionValues((prevState) => ({...prevState, suggestedEmojis: []}));
-
- onInsertedEmoji(emojiObject);
},
- [onInsertedEmoji, preferredSkinTone, resetKeyboardInput, selection.end, setSelection, suggestionValues.colonIndex, suggestionValues.suggestedEmojis, updateComment, value],
+ [preferredSkinTone, resetKeyboardInput, selection.end, setSelection, suggestionValues.colonIndex, suggestionValues.suggestedEmojis, updateComment, value],
);
/**
diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js
index a00bd342b17d..0e98e69d31d1 100644
--- a/src/pages/home/report/ReportActionCompose/Suggestions.js
+++ b/src/pages/home/report/ReportActionCompose/Suggestions.js
@@ -9,9 +9,6 @@ const propTypes = {
/** A ref to this component */
forwardedRef: PropTypes.shape({current: PropTypes.shape({})}),
- /** Callback when a emoji was inserted */
- onInsertedEmoji: PropTypes.func.isRequired,
-
/** Function to clear the input */
resetKeyboardInput: PropTypes.func.isRequired,
@@ -28,19 +25,7 @@ const defaultProps = {
*
* @returns {React.Component}
*/
-function Suggestions({
- isComposerFullSize,
- value,
- setValue,
- selection,
- setSelection,
- updateComment,
- composerHeight,
- forwardedRef,
- onInsertedEmoji,
- resetKeyboardInput,
- measureParentContainer,
-}) {
+function Suggestions({isComposerFullSize, value, setValue, selection, setSelection, updateComment, composerHeight, forwardedRef, resetKeyboardInput, measureParentContainer}) {
const suggestionEmojiRef = useRef(null);
const suggestionMentionRef = useRef(null);
@@ -114,7 +99,6 @@ function Suggestions({
ref={suggestionEmojiRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...baseProps}
- onInsertedEmoji={onInsertedEmoji}
resetKeyboardInput={resetKeyboardInput}
/>
getInitialDraft());
+ const emojisPresentBefore = useRef([]);
+ const [draft, setDraft] = useState(() => {
+ const initialDraft = getInitialDraft();
+ if (initialDraft) {
+ emojisPresentBefore.current = EmojiUtils.extractEmojis(initialDraft);
+ }
+ return initialDraft;
+ });
const [selection, setSelection] = useState(getInitialSelection());
const [isFocused, setIsFocused] = useState(false);
const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
@@ -200,9 +204,13 @@ function ReportActionItemMessageEdit(props) {
const {text: newDraft, emojis} = EmojiUtils.replaceAndExtractEmojis(newDraftInput, props.preferredSkinTone, preferredLocale);
if (!_.isEmpty(emojis)) {
- insertedEmojis.current = [...insertedEmojis.current, ...emojis];
- debouncedUpdateFrequentlyUsedEmojis();
+ const newEmojis = EmojiUtils.getAddedEmojis(emojis, emojisPresentBefore.current);
+ if (!_.isEmpty(newEmojis)) {
+ insertedEmojis.current = [...insertedEmojis.current, ...newEmojis];
+ debouncedUpdateFrequentlyUsedEmojis();
+ }
}
+ emojisPresentBefore.current = emojis;
setDraft((prevDraft) => {
if (newDraftInput !== newDraft) {
const remainder = ComposerUtils.getCommonSuffixLength(prevDraft, newDraft);
@@ -313,30 +321,6 @@ function ReportActionItemMessageEdit(props) {
return (
<>
-
-
- e.preventDefault()}
- >
- {({hovered, pressed}) => (
-
-
-
-
+
+
+ e.preventDefault()}
+ >
+
+
+
+
{
diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js
index 8e1fb6aafdd4..b67707031372 100644
--- a/src/pages/home/report/ReportActionItemParentAction.js
+++ b/src/pages/home/report/ReportActionItemParentAction.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {View, Image} from 'react-native';
+import {View} from 'react-native';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import withLocalize from '../../../components/withLocalize';
import ReportActionItem from './ReportActionItem';
import reportActionPropTypes from './reportActionPropTypes';
import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
-import EmptyStateBackgroundImage from '../../../../assets/images/empty-state_background-fade.png';
+import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
const propTypes = {
/** Flag to show, hide the thread divider line */
@@ -61,11 +61,7 @@ function ReportActionItemParentAction(props) {
onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)}
>
- {
- let shouldDisplay = false;
+ const renderItem = useCallback(
+ ({item: reportAction, index}) => {
+ let shouldDisplayNewMarker = false;
if (!currentUnreadMarker) {
const nextMessage = sortedReportActions[index + 1];
const isCurrentMessageUnread = isMessageUnread(reportAction, report.lastReadTime);
- shouldDisplay = isCurrentMessageUnread && !isMessageUnread(nextMessage, report.lastReadTime);
+ shouldDisplayNewMarker = isCurrentMessageUnread && !isMessageUnread(nextMessage, report.lastReadTime);
+
if (!messageManuallyMarkedUnread) {
- shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID();
+ shouldDisplayNewMarker = shouldDisplayNewMarker && reportAction.actorAccountID !== Report.getCurrentUserAccountID();
+ }
+ const canDisplayMarker = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < userActiveSince.current : true;
+
+ if (!currentUnreadMarker && shouldDisplayNewMarker && canDisplayMarker) {
+ setCurrentUnreadMarker(reportAction.reportActionID);
}
} else {
- shouldDisplay = reportAction.reportActionID === currentUnreadMarker;
+ shouldDisplayNewMarker = reportAction.reportActionID === currentUnreadMarker;
}
- return shouldDisplay;
+ return (
+ `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID')}`,
- },
iou: {
key: ONYXKEYS.IOU,
},
}),
// eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
+ withOnyx({
+ report: {
+ key: ({route, iou}) => {
+ const reportID = IOU.getIOUReportID(iou, route);
+
+ return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
+ },
+ },
+ }),
+ // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
withOnyx({
policyTags: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 4887d0816c81..d509fbce176d 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -94,9 +94,7 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
const camera = useRef(null);
const [flash, setFlash] = useState(false);
- const [permissions, setPermissions] = useState('granted');
- const isAndroidBlockedPermissionRef = useRef(false);
- const appState = useRef(AppState.currentState);
+ const [cameraPermissionStatus, setCameraPermissionStatus] = useState(undefined);
const iouType = lodashGet(route, 'params.iouType', '');
const pageIndex = lodashGet(route, 'params.pageIndex', 1);
@@ -105,16 +103,23 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
const CameraComponent = isInTabNavigator ? TabNavigationAwareCamera : NavigationAwareCamera;
- // We want to listen to if the app has come back from background and refresh the permissions status to show camera when permissions were granted
useEffect(() => {
- const subscription = AppState.addEventListener('change', (nextAppState) => {
- if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
- CameraPermission.getCameraPermissionStatus().then((permissionStatus) => {
- setPermissions(permissionStatus);
- });
+ const refreshCameraPermissionStatus = () => {
+ CameraPermission.getCameraPermissionStatus()
+ .then(setCameraPermissionStatus)
+ .catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
+ };
+
+ // Check initial camera permission status
+ refreshCameraPermissionStatus();
+
+ // Refresh permission status when app gain focus
+ const subscription = AppState.addEventListener('change', (appState) => {
+ if (appState !== 'active') {
+ return;
}
- appState.current = nextAppState;
+ refreshCameraPermissionStatus();
});
return () => {
@@ -154,14 +159,17 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
const askForPermissions = () => {
// There's no way we can check for the BLOCKED status without requesting the permission first
// https://github.com/zoontek/react-native-permissions/blob/a836e114ce3a180b2b23916292c79841a267d828/README.md?plain=1#L670
- if (permissions === RESULTS.BLOCKED || isAndroidBlockedPermissionRef.current) {
- Linking.openSettings();
- } else if (permissions === RESULTS.DENIED) {
- CameraPermission.requestCameraPermission().then((permissionStatus) => {
- setPermissions(permissionStatus);
- isAndroidBlockedPermissionRef.current = permissionStatus === RESULTS.BLOCKED;
+ CameraPermission.requestCameraPermission()
+ .then((status) => {
+ setCameraPermissionStatus(status);
+
+ if (status === RESULTS.BLOCKED) {
+ showPermissionsAlert();
+ }
+ })
+ .catch(() => {
+ setCameraPermissionStatus(RESULTS.UNAVAILABLE);
});
- }
};
/**
@@ -230,13 +238,14 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
});
}, [flash, iouType, iou, report, translate, transactionID, route.path]);
- CameraPermission.getCameraPermissionStatus().then((permissionStatus) => {
- setPermissions(permissionStatus);
- });
+ // Wait for camera permission status to render
+ if (cameraPermissionStatus == null) {
+ return null;
+ }
return (
- {permissions !== RESULTS.GRANTED && (
+ {cameraPermissionStatus !== RESULTS.GRANTED && (
)}
- {permissions === RESULTS.GRANTED && device == null && (
+ {cameraPermissionStatus === RESULTS.GRANTED && device == null && (
)}
- {permissions === RESULTS.GRANTED && device != null && (
+ {cameraPermissionStatus === RESULTS.GRANTED && device != null && (
setFlash((prevFlash) => !prevFlash)}
>
participant.accountID !== reportAction.actorAccountID);
- const {amount: splitAmount, currency: splitCurrency, comment: splitComment} = ReportUtils.getTransactionDetails(transaction);
+ const {
+ amount: splitAmount,
+ currency: splitCurrency,
+ merchant: splitMerchant,
+ created: splitCreated,
+ comment: splitComment,
+ category: splitCategory,
+ } = ReportUtils.getTransactionDetails(transaction);
+ const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
return (
@@ -79,17 +89,25 @@ function SplitBillDetailsPage(props) {
pointerEvents="box-none"
style={[styles.containerWithSpaceBetween]}
>
+ {isScanning &&
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 3881221d5c52..d007e168de79 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -75,8 +75,14 @@ function MoneyRequestConfirmPage(props) {
}),
[props.iou.participants, props.personalDetails],
);
+ const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(props.report)), [props.report]);
const isManualRequestDM = props.selectedTab === CONST.TAB.MANUAL && iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST;
+ useEffect(() => {
+ IOU.resetMoneyRequestCategory();
+ IOU.resetMoneyRequestTag();
+ }, []);
+
useEffect(() => {
const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
if (policyExpenseChat) {
@@ -188,6 +194,22 @@ function MoneyRequestConfirmPage(props) {
(selectedParticipants) => {
const trimmedComment = props.iou.comment.trim();
+ // If we have a receipt let's start the split bill by creating only the action, the transaction, and the group DM if needed
+ if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT && props.iou.receiptPath) {
+ const existingSplitChatReportID = CONST.REGEX.NUMBER.test(reportID.current) ? reportID.current : '';
+ FileUtils.readFileAsync(props.iou.receiptPath, props.iou.receiptFilename).then((receipt) => {
+ IOU.startSplitBill(
+ selectedParticipants,
+ props.currentUserPersonalDetails.login,
+ props.currentUserPersonalDetails.accountID,
+ trimmedComment,
+ receipt,
+ existingSplitChatReportID,
+ );
+ });
+ return;
+ }
+
// IOUs created from a group report will have a reportID param in the route.
// Since the user is already viewing the report, we don't need to navigate them to the report
if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT && CONST.REGEX.NUMBER.test(reportID.current)) {
@@ -198,6 +220,7 @@ function MoneyRequestConfirmPage(props) {
props.iou.amount,
trimmedComment,
props.iou.currency,
+ props.iou.category,
reportID.current,
);
return;
@@ -212,12 +235,13 @@ function MoneyRequestConfirmPage(props) {
props.iou.amount,
trimmedComment,
props.iou.currency,
+ props.iou.category,
);
return;
}
- if (props.iou.receiptPath && props.iou.receiptSource) {
- FileUtils.readFileAsync(props.iou.receiptPath, props.iou.receiptSource).then((file) => {
+ if (props.iou.receiptPath && props.iou.receiptFilename) {
+ FileUtils.readFileAsync(props.iou.receiptPath, props.iou.receiptFilename).then((file) => {
const receipt = file;
receipt.state = file && isManualRequestDM ? CONST.IOU.RECEIPT_STATE.OPEN : CONST.IOU.RECEIPT_STATE.SCANREADY;
requestMoney(selectedParticipants, trimmedComment, receipt);
@@ -238,8 +262,9 @@ function MoneyRequestConfirmPage(props) {
props.currentUserPersonalDetails.login,
props.currentUserPersonalDetails.accountID,
props.iou.currency,
+ props.iou.category,
props.iou.receiptPath,
- props.iou.receiptSource,
+ props.iou.receiptFilename,
isDistanceRequest,
requestMoney,
createDistanceRequest,
@@ -335,9 +360,10 @@ function MoneyRequestConfirmPage(props) {
IOU.setMoneyRequestParticipants(newParticipants);
}}
receiptPath={props.iou.receiptPath}
- receiptSource={props.iou.receiptSource}
+ receiptFilename={props.iou.receiptFilename}
iouType={iouType.current}
reportID={reportID.current}
+ isPolicyExpenseChat={isPolicyExpenseChat}
// The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button.
// This is because when there is a group of people, say they are on a trip, and you have some shared expenses with some of the people,
// but not all of them (maybe someone skipped out on dinner). Then it's nice to be able to select/deselect people from the group chat bill
@@ -375,12 +401,8 @@ export default compose(
withOnyx({
report: {
key: ({route, iou}) => {
- let reportID = lodashGet(route, 'params.reportID', '');
- if (!reportID) {
- // When the money request creation flow is initialized on Global Create, the reportID is not passed as a navigation parameter.
- // Get the report id from the participants list on the IOU object stored in Onyx.
- reportID = lodashGet(iou, 'participants.0.reportID', '');
- }
+ const reportID = IOU.getIOUReportID(iou, route);
+
return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
},
},
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 8d745903eb40..bd3ea8a50402 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -35,17 +35,17 @@ const propTypes = {
iou: iouPropTypes,
/** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
- selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
+ selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]),
};
const defaultProps = {
iou: iouDefaultProps,
+ selectedTab: undefined,
};
function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
const {translate} = useLocalize();
const prevMoneyRequestId = useRef(iou.id);
- const isNewReportIDSelectedLocally = useRef(false);
const optionsSelectorRef = useRef();
const iouType = useRef(lodashGet(route, 'params.iouType', ''));
const reportID = useRef(lodashGet(route, 'params.reportID', ''));
@@ -63,19 +63,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
setHeaderTitle(_.isEmpty(iou.participants) ? translate('tabSelector.manual') : translate('iou.split'));
}, [iou.participants, isDistanceRequest, translate]);
- const navigateToRequestStep = (moneyRequestType, option) => {
- if (option.reportID) {
- isNewReportIDSelectedLocally.current = true;
- IOU.setMoneyRequestId(`${moneyRequestType}${option.reportID}`);
- Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, option.reportID));
- return;
- }
-
- IOU.setMoneyRequestId(moneyRequestType);
- Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID.current));
- };
-
- const navigateToSplitStep = (moneyRequestType) => {
+ const navigateToConfirmationStep = (moneyRequestType) => {
IOU.setMoneyRequestId(moneyRequestType);
Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID.current));
};
@@ -88,7 +76,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
// ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
if (prevMoneyRequestId.current !== iou.id) {
// The ID is cleared on completing a request. In that case, we will do nothing
- if (iou.id && !isDistanceRequest && !isSplitRequest && !isNewReportIDSelectedLocally.current) {
+ if (iou.id && !isDistanceRequest && !isSplitRequest) {
navigateBack(true);
}
return;
@@ -96,7 +84,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
// Reset the money request Onyx if the ID in Onyx does not match the ID from params
const moneyRequestId = `${iouType.current}${reportID.current}`;
- const shouldReset = iou.id !== moneyRequestId && !isNewReportIDSelectedLocally.current;
+ const shouldReset = iou.id !== moneyRequestId;
if (shouldReset) {
IOU.resetMoneyRequestInfo(moneyRequestId);
}
@@ -126,8 +114,8 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
ref={(el) => (optionsSelectorRef.current = el)}
participants={iou.participants}
onAddParticipants={IOU.setMoneyRequestParticipants}
- navigateToRequest={(option) => navigateToRequestStep(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, option)}
- navigateToSplit={() => navigateToSplitStep(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)}
+ navigateToRequest={() => navigateToConfirmationStep(iouType.current)}
+ navigateToSplit={() => navigateToConfirmationStep(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
iouType={iouType.current}
isDistanceRequest={isDistanceRequest}
@@ -139,7 +127,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
);
}
-MoneyRequestParticipantsPage.displayName = 'IOUParticipantsPage';
+MoneyRequestParticipantsPage.displayName = 'MoneyRequestParticipantsPage';
MoneyRequestParticipantsPage.propTypes = propTypes;
MoneyRequestParticipantsPage.defaultProps = defaultProps;
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 05b206ce4147..bedca1a10c35 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -59,9 +59,6 @@ const propTypes = {
/** Whether the money request is a distance request or not */
isDistanceRequest: PropTypes.bool,
- /** Whether the money request is a scan request or not */
- isScanRequest: PropTypes.bool,
-
...withLocalizePropTypes,
};
@@ -73,7 +70,6 @@ const defaultProps = {
reports: {},
betas: [],
isDistanceRequest: false,
- isScanRequest: false,
};
function MoneyRequestParticipantsSelector({
@@ -89,7 +85,6 @@ function MoneyRequestParticipantsSelector({
safeAreaPaddingBottomStyle,
iouType,
isDistanceRequest,
- isScanRequest,
}) {
const [searchTerm, setSearchTerm] = useState('');
const [newChatOptions, setNewChatOptions] = useState({
@@ -164,7 +159,7 @@ function MoneyRequestParticipantsSelector({
onAddParticipants([
{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true, searchText: option.searchText},
]);
- navigateToRequest(option);
+ navigateToRequest();
};
/**
@@ -245,7 +240,7 @@ function MoneyRequestParticipantsSelector({
// the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants
const hasPolicyExpenseChatParticipant = _.some(participants, (participant) => participant.isPolicyExpenseChat);
const shouldShowConfirmButton = !(participants.length > 1 && hasPolicyExpenseChatParticipant);
- const isAllowedToSplit = !isDistanceRequest && !isScanRequest;
+ const isAllowedToSplit = !isDistanceRequest;
return (
0 ? safeAreaPaddingBottomStyle : {}]}>
@@ -268,7 +263,7 @@ function MoneyRequestParticipantsSelector({
textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
shouldShowOptions={isOptionsDataReady}
- shouldFocusOnSelectRow={!Browser.isMobile()}
+ shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
shouldDelayFocus
/>
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index af36650d6812..73231cd315ad 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
+import {useFocusEffect} from '@react-navigation/native';
import MagicCodeInput from '../../../../../components/MagicCodeInput';
import * as ErrorUtils from '../../../../../libs/ErrorUtils';
import withLocalize, {withLocalizePropTypes} from '../../../../../components/withLocalize';
@@ -77,6 +78,7 @@ function BaseValidateCodeForm(props) {
const inputValidateCodeRef = useRef();
const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
const shouldDisableResendValidateCode = props.network.isOffline || props.account.isLoading;
+ const focusTimeoutRef = useRef(null);
useImperativeHandle(props.innerRef, () => ({
focus() {
@@ -87,6 +89,21 @@ function BaseValidateCodeForm(props) {
},
}));
+ useFocusEffect(
+ useCallback(() => {
+ if (!inputValidateCodeRef.current) {
+ return;
+ }
+ focusTimeoutRef.current = setTimeout(inputValidateCodeRef.current.focus, CONST.ANIMATED_TRANSITION);
+ return () => {
+ if (!focusTimeoutRef.current) {
+ return;
+ }
+ clearTimeout(focusTimeoutRef.current);
+ };
+ }, []),
+ );
+
useEffect(() => {
Session.clearAccountMessages();
if (!validateLoginError) {
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index a69b227470d6..7dc9ff7773de 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -26,7 +26,7 @@ const propTypes = {
const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
function NotificationPreferencePage(props) {
- const shouldDisableNotificationPreferences = ReportUtils.shouldDisableSettings(props.report) || ReportUtils.isArchivedRoom(props.report);
+ const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(props.report);
const notificationPreferenceOptions = _.map(
_.filter(_.values(CONST.REPORT.NOTIFICATION_PREFERENCE), (pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN),
(preference) => ({
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index 9f4f4d048354..5612096207bb 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -64,7 +64,7 @@ function ReportSettingsPage(props) {
const shouldDisableWelcomeMessage =
isMoneyRequestReport || ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;
- const shouldDisableSettings = _.isEmpty(report) || ReportUtils.shouldDisableSettings(report) || ReportUtils.isArchivedRoom(report);
+ const shouldDisableSettings = _.isEmpty(report) || ReportUtils.isArchivedRoom(report);
const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report);
const notificationPreference =
report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
new file mode 100644
index 000000000000..e7198c009a44
--- /dev/null
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -0,0 +1,180 @@
+import React, {useRef, useCallback, useState, useEffect} 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 Text from '../../../components/Text';
+import Navigation from '../../../libs/Navigation/Navigation';
+import styles from '../../../styles/styles';
+import MagicCodeInput from '../../../components/MagicCodeInput';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
+import * as ErrorUtils from '../../../libs/ErrorUtils';
+import * as CardSettings from '../../../libs/actions/Card';
+import BigNumberPad from '../../../components/BigNumberPad';
+import Button from '../../../components/Button';
+import IllustratedHeaderPageLayout from '../../../components/IllustratedHeaderPageLayout';
+import themeColors from '../../../styles/themes/default';
+import SCREENS from '../../../SCREENS';
+import * as LottieAnimations from '../../../components/LottieAnimations';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import ONYXKEYS from '../../../ONYXKEYS';
+import useLocalize from '../../../hooks/useLocalize';
+import ROUTES from '../../../ROUTES';
+import CONST from '../../../CONST';
+import assignedCardPropTypes from './assignedCardPropTypes';
+import * as CardUtils from '../../../libs/CardUtils';
+import useNetwork from '../../../hooks/useNetwork';
+import NotFoundPage from '../../ErrorPage/NotFoundPage';
+
+const propTypes = {
+ /* Onyx Props */
+
+ /** The details about the Expensify cards */
+ cardList: PropTypes.objectOf(assignedCardPropTypes),
+
+ /** Navigation route context info provided by react navigation */
+ route: PropTypes.shape({
+ params: PropTypes.shape({
+ /** domain passed via route /settings/wallet/card/:domain */
+ domain: PropTypes.string,
+ }),
+ }).isRequired,
+};
+
+const defaultProps = {
+ cardList: {},
+};
+
+const LAST_FOUR_DIGITS_LENGTH = 4;
+const MAGIC_INPUT_MIN_HEIGHT = 86;
+
+function ActivatePhysicalCardPage({
+ cardList,
+ route: {
+ params: {domain},
+ },
+}) {
+ const {isExtraSmallScreenHeight} = useWindowDimensions();
+ const {translate} = useLocalize();
+ const {isOffline} = useNetwork();
+
+ const [formError, setFormError] = useState('');
+ const [lastFourDigits, setLastFourDigits] = useState('');
+ const [lastPressedDigit, setLastPressedDigit] = useState('');
+
+ const domainCards = CardUtils.getDomainCards(cardList)[domain];
+ const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
+ const cardID = lodashGet(physicalCard, 'cardID', 0);
+ const cardError = ErrorUtils.getLatestErrorMessage(physicalCard);
+
+ const activateCardCodeInputRef = useRef(null);
+
+ /**
+ * If state of the card is CONST.EXPENSIFY_CARD.STATE.OPEN, navigate to card details screen.
+ */
+ useEffect(() => {
+ if (physicalCard.isLoading || lodashGet(cardList, `${cardID}.state`, 0) !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
+ return;
+ }
+
+ Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+ }, [cardID, cardList, domain, physicalCard.isLoading]);
+
+ useEffect(
+ () => () => {
+ CardSettings.clearCardListErrors(cardID);
+ },
+ [cardID],
+ );
+
+ /**
+ * Update lastPressedDigit with value that was pressed on BigNumberPad.
+ *
+ * NOTE: If the same digit is pressed twice in a row, append it to the end of the string
+ * so that useEffect inside MagicCodeInput will be triggered by artificial change of the value.
+ *
+ * @param {String} key
+ */
+ const updateLastPressedDigit = useCallback((key) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
+
+ /**
+ * Handle card activation code input
+ *
+ * @param {String} text
+ */
+ const onCodeInput = (text) => {
+ setFormError('');
+
+ if (cardError) {
+ CardSettings.clearCardListErrors(cardID);
+ }
+
+ setLastFourDigits(text);
+ };
+
+ const submitAndNavigateToNextPage = useCallback(() => {
+ activateCardCodeInputRef.current.blur();
+
+ if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) {
+ setFormError(translate('activateCardPage.error.thatDidntMatch'));
+ return;
+ }
+
+ CardSettings.activatePhysicalExpensifyCard(Number(lastFourDigits), cardID);
+ }, [lastFourDigits, cardID, translate]);
+
+ if (_.isEmpty(physicalCard)) {
+ return Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain))}
+ backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
+ illustration={LottieAnimations.Magician}
+ scrollViewContainerStyles={[styles.mnh100]}
+ childrenContainerStyles={[styles.flex1]}
+ >
+ {translate('activateCardPage.pleaseEnterLastFour')}
+
+
+
+ {DeviceCapabilities.canUseTouchScreen() &&
+
+ );
+}
+
+ActivatePhysicalCardPage.propTypes = propTypes;
+ActivatePhysicalCardPage.defaultProps = defaultProps;
+ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage';
+
+export default withOnyx({
+ cardList: {
+ key: ONYXKEYS.CARD_LIST,
+ },
+})(ActivatePhysicalCardPage);
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index 026e8147d79f..cfbd26133ced 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -10,17 +10,20 @@ import CardPreview from '../../../components/CardPreview';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
import ScreenWrapper from '../../../components/ScreenWrapper';
-import assignedCardPropTypes from './assignedCardPropTypes';
import useLocalize from '../../../hooks/useLocalize';
import * as CurrencyUtils from '../../../libs/CurrencyUtils';
import Navigation from '../../../libs/Navigation/Navigation';
import styles from '../../../styles/styles';
+import * as Expensicons from '../../../components/Icon/Expensicons';
import * as CardUtils from '../../../libs/CardUtils';
import Button from '../../../components/Button';
import CardDetails from './WalletPage/CardDetails';
+import CONST from '../../../CONST';
+import assignedCardPropTypes from './assignedCardPropTypes';
const propTypes = {
/* Onyx Props */
+ /** The details about the Expensify cards */
cardList: PropTypes.objectOf(assignedCardPropTypes),
/** Navigation route context info provided by react navigation */
@@ -106,6 +109,13 @@ function ExpensifyCardPage({
}
/>
)}
+ Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(domain))}
+ />
)}
{!_.isEmpty(physicalCard) && (
@@ -113,10 +123,18 @@ function ExpensifyCardPage({
description={translate('cardPage.physicalCardNumber')}
title={CardUtils.maskCard(physicalCard.lastFourPAN)}
interactive={false}
- titleStyle={styles.walletCardNumber}
+ titleStyle={styles.walletCardMenuItem}
/>
)}
+ {physicalCard.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
+ Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain))}
+ text={translate('activateCardPage.activatePhysicalCard')}
+ />
+ )}
)}
diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
new file mode 100644
index 000000000000..2652494aa1c7
--- /dev/null
+++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
@@ -0,0 +1,104 @@
+import React, {useEffect} from 'react';
+import _ from 'underscore';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ROUTES from '../../../ROUTES';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import Navigation from '../../../libs/Navigation/Navigation';
+import styles from '../../../styles/styles';
+import Text from '../../../components/Text';
+import useLocalize from '../../../hooks/useLocalize';
+import * as Card from '../../../libs/actions/Card';
+import assignedCardPropTypes from './assignedCardPropTypes';
+import * as CardUtils from '../../../libs/CardUtils';
+import ONYXKEYS from '../../../ONYXKEYS';
+import NotFoundPage from '../../ErrorPage/NotFoundPage';
+import usePrevious from '../../../hooks/usePrevious';
+import FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitButton';
+import * as ErrorUtils from '../../../libs/ErrorUtils';
+
+const propTypes = {
+ /* Onyx Props */
+ formData: PropTypes.shape({
+ isLoading: PropTypes.bool,
+ }),
+ cardList: PropTypes.objectOf(assignedCardPropTypes),
+ /** The parameters needed to authenticate with a short-lived token are in the URL */
+ route: PropTypes.shape({
+ /** Each parameter passed via the URL */
+ params: PropTypes.shape({
+ /** Domain string */
+ domain: PropTypes.string,
+ }),
+ }).isRequired,
+};
+
+const defaultProps = {
+ cardList: {},
+ formData: {},
+};
+
+function ReportVirtualCardFraudPage({
+ route: {
+ params: {domain},
+ },
+ cardList,
+ formData,
+}) {
+ const {translate} = useLocalize();
+
+ const domainCards = CardUtils.getDomainCards(cardList)[domain];
+ const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
+ const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard) || '';
+
+ const prevIsLoading = usePrevious(formData.isLoading);
+
+ useEffect(() => {
+ if (!prevIsLoading || formData.isLoading) {
+ return;
+ }
+ if (!_.isEmpty(virtualCard.errors)) {
+ return;
+ }
+
+ Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+ }, [domain, formData.isLoading, prevIsLoading, virtualCard.errors]);
+
+ if (_.isEmpty(virtualCard)) {
+ return
+ Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain))}
+ />
+
+ {translate('reportFraudPage.description')}
+ Card.reportVirtualExpensifyCardFraud(virtualCard.cardID)}
+ message={virtualCardError}
+ isLoading={formData.isLoading}
+ buttonText={translate('reportFraudPage.deactivateCard')}
+ />
+
+
+ );
+}
+
+ReportVirtualCardFraudPage.propTypes = propTypes;
+ReportVirtualCardFraudPage.defaultProps = defaultProps;
+ReportVirtualCardFraudPage.displayName = 'ReportVirtualCardFraudPage';
+
+export default withOnyx({
+ cardList: {
+ key: ONYXKEYS.CARD_LIST,
+ },
+ formData: {
+ key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+ },
+})(ReportVirtualCardFraudPage);
diff --git a/src/pages/settings/Wallet/assignedCardPropTypes.js b/src/pages/settings/Wallet/assignedCardPropTypes.js
index 2f0eb1ad4ec9..06779e473579 100644
--- a/src/pages/settings/Wallet/assignedCardPropTypes.js
+++ b/src/pages/settings/Wallet/assignedCardPropTypes.js
@@ -15,6 +15,7 @@ const assignedCardPropTypes = PropTypes.shape({
cardholderFirstName: PropTypes.string,
cardholderLastName: PropTypes.string,
errors: PropTypes.objectOf(PropTypes.string),
+ isLoading: PropTypes.bool,
});
export default assignedCardPropTypes;
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 39495911b8dc..e7bbd9657e8b 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -18,6 +18,7 @@ import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
import ROUTES from '../../ROUTES';
import * as PolicyUtils from '../../libs/PolicyUtils';
+import * as Browser from '../../libs/Browser';
import useNetwork from '../../hooks/useNetwork';
import useLocalize from '../../hooks/useLocalize';
import SelectionList from '../../components/SelectionList';
@@ -231,6 +232,7 @@ function WorkspaceInvitePage(props) {
onConfirm={inviteUser}
showScrollIndicator
showLoadingPlaceholder={!didScreenTransitionEnd || !OptionsListUtils.isPersonalDetailsReady(props.personalDetails)}
+ shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
/>
_.keys(props.policyMembers), [props.policyMembers]);
const prevAccountIDs = usePrevious(accountIDs);
const textInputRef = useRef(null);
-
+ const isOfflineAndNoMemberDataAvailable = _.isEmpty(props.policyMembers) && props.network.isOffline;
/**
* Get members for the current workspace
*/
@@ -344,9 +344,14 @@ function WorkspaceMembersPage(props) {
return result;
};
-
const data = getMemberOptions();
- const headerMessage = searchValue.trim() && !data.length ? props.translate('workspace.common.memberNotFound') : '';
+
+ const getHeaderMessage = () => {
+ if (isOfflineAndNoMemberDataAvailable) {
+ return props.translate('workspace.common.mustBeOnlineToViewMembers');
+ }
+ return searchValue.trim() && !data.length ? props.translate('workspace.common.memberNotFound') : '';
+ };
return (
toggleUser(item.keyForList)}
onSelectAll={() => toggleAllUsers(data)}
onDismissError={dismissError}
- showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers)}
+ showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
showScrollIndicator
- shouldFocusOnSelectRow={!Browser.isMobile()}
+ shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
inputRef={textInputRef}
/>
diff --git a/src/styles/fontFamily/bold/index.android.js b/src/styles/fontFamily/bold/index.android.js
index 7473e4d7533c..73ba56dc4262 100644
--- a/src/styles/fontFamily/bold/index.android.js
+++ b/src/styles/fontFamily/bold/index.android.js
@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Bold';
+const singleBold = 'ExpensifyNeue-Bold';
+const multiBold = 'ExpensifyNeue-Bold';
-export default bold;
+export {singleBold, multiBold};
diff --git a/src/styles/fontFamily/bold/index.ios.js b/src/styles/fontFamily/bold/index.ios.js
index 3ba35f200d3d..a0523831a058 100644
--- a/src/styles/fontFamily/bold/index.ios.js
+++ b/src/styles/fontFamily/bold/index.ios.js
@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Regular';
+const singleBold = 'ExpensifyNeue-Regular';
+const multiBold = 'ExpensifyNeue-Regular';
-export default bold;
+export {singleBold, multiBold};
diff --git a/src/styles/fontFamily/bold/index.js b/src/styles/fontFamily/bold/index.js
index 66d3c64f3565..401a808d29d6 100644
--- a/src/styles/fontFamily/bold/index.js
+++ b/src/styles/fontFamily/bold/index.js
@@ -1,3 +1,4 @@
-const bold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
+const singleBold = 'ExpensifyNeue-Regular';
+const multiBold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji';
-export default bold;
+export {singleBold, multiBold};
diff --git a/src/styles/fontFamily/index.native.ts b/src/styles/fontFamily/index.native.ts
index 0d6c253eb3a6..53f421a58535 100644
--- a/src/styles/fontFamily/index.native.ts
+++ b/src/styles/fontFamily/index.native.ts
@@ -1,17 +1,3 @@
-import bold from './bold';
-import FontFamilyStyles from './types';
+import singleFontFamily from './singleFontFamily';
-const fontFamily: FontFamilyStyles = {
- EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
- EXP_NEUE_BOLD: bold,
- EXP_NEUE: 'ExpensifyNeue-Regular',
- EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
- EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
- SYSTEM: 'System',
- MONOSPACE: 'ExpensifyMono-Regular',
- MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
- MONOSPACE_BOLD: 'ExpensifyMono-Bold',
- MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
-};
-
-export default fontFamily;
+export default singleFontFamily;
diff --git a/src/styles/fontFamily/index.ts b/src/styles/fontFamily/index.ts
index 57d08ce28771..7a8267eba1a5 100644
--- a/src/styles/fontFamily/index.ts
+++ b/src/styles/fontFamily/index.ts
@@ -1,19 +1,3 @@
-import bold from './bold';
-import FontFamilyStyles from './types';
+import multiFontFamily from './multiFontFamily';
-// In windows and ubuntu, we need some extra system fonts for emojis to work properly
-// otherwise few of them will appear as black and white
-const fontFamily: FontFamilyStyles = {
- EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
- EXP_NEUE_BOLD: bold,
- EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
- EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
- EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
- SYSTEM: 'System',
- MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
- MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
- MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
- MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
-};
-
-export default fontFamily;
+export default multiFontFamily;
diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/fontFamily/multiFontFamily.ts
new file mode 100644
index 000000000000..2edd17548354
--- /dev/null
+++ b/src/styles/fontFamily/multiFontFamily.ts
@@ -0,0 +1,19 @@
+import {multiBold} from './bold';
+import FontFamilyStyles from './types';
+
+// In windows and ubuntu, we need some extra system fonts for emojis to work properly
+// otherwise few of them will appear as black and white
+const fontFamily: FontFamilyStyles = {
+ EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji',
+ EXP_NEUE_BOLD: multiBold,
+ EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji',
+ EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji',
+ EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji',
+ SYSTEM: 'System',
+ MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+ MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji',
+ MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
+ MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji',
+};
+
+export default fontFamily;
diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/fontFamily/singleFontFamily.ts
new file mode 100644
index 000000000000..6d5b05a5b0aa
--- /dev/null
+++ b/src/styles/fontFamily/singleFontFamily.ts
@@ -0,0 +1,17 @@
+import {singleBold} from './bold';
+import FontFamilyStyles from './types';
+
+const fontFamily: FontFamilyStyles = {
+ EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic',
+ EXP_NEUE_BOLD: singleBold,
+ EXP_NEUE: 'ExpensifyNeue-Regular',
+ EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium',
+ EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
+ SYSTEM: 'System',
+ MONOSPACE: 'ExpensifyMono-Regular',
+ MONOSPACE_ITALIC: 'ExpensifyMono-Regular',
+ MONOSPACE_BOLD: 'ExpensifyMono-Bold',
+ MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold',
+};
+
+export default fontFamily;
diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts
index 97402467ab4c..be76002bd216 100644
--- a/src/styles/getTooltipStyles.ts
+++ b/src/styles/getTooltipStyles.ts
@@ -257,6 +257,7 @@ export default function getTooltipStyles(
fontSize: variables.fontSizeSmall,
overflow: 'hidden',
lineHeight: variables.lineHeightSmall,
+ textAlign: 'center',
},
pointerWrapperStyle: {
position: 'fixed',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 12f8c3052557..7340350114ed 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1782,7 +1782,6 @@ const styles = (theme) => ({
},
emojiSkinToneTitle: {
- width: '100%',
...spacing.pv1,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
@@ -2533,6 +2532,7 @@ const styles = (theme) => ({
// 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',
+ transitionProperty: 'background-color',
}
: {}),
},
@@ -3784,7 +3784,7 @@ const styles = (theme) => ({
overflow: 'hidden',
},
- walletCardNumber: {
+ walletCardMenuItem: {
color: theme.text,
fontSize: variables.fontSizeNormal,
},
diff --git a/src/styles/utilities/spacing.ts b/src/styles/utilities/spacing.ts
index b635b7cc39a6..f0fbe4b4591a 100644
--- a/src/styles/utilities/spacing.ts
+++ b/src/styles/utilities/spacing.ts
@@ -207,6 +207,10 @@ export default {
marginTop: 'auto',
},
+ mtn6: {
+ marginTop: -24,
+ },
+
mb0: {
marginBottom: 0,
},
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index e7bf417fccc0..be9c31845acd 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -18,6 +18,7 @@ type Card = {
cardholderFirstName: string;
cardholderLastName: string;
errors?: OnyxCommon.Errors;
+ isLoading?: boolean;
};
export default Card;
diff --git a/src/types/onyx/IOU.ts b/src/types/onyx/IOU.ts
index 7151bb84d1f1..a89b0d4530ef 100644
--- a/src/types/onyx/IOU.ts
+++ b/src/types/onyx/IOU.ts
@@ -16,7 +16,7 @@ type IOU = {
merchant?: string;
created?: string;
receiptPath?: string;
- receiptSource?: string;
+ receiptFilename?: string;
transactionID?: string;
participants?: Participant[];
tag?: string;
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index 143b70127de5..e03775ee114e 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -53,6 +53,10 @@ type OriginalMessageAddComment = {
reactions?: Reaction[];
};
};
+type OriginalMessageSubmitted = {
+ actionName: typeof CONST.REPORT.ACTIONS.TYPE.SUBMITTED;
+ originalMessage: unknown;
+};
type OriginalMessageClosed = {
actionName: typeof CONST.REPORT.ACTIONS.TYPE.CLOSED;
@@ -127,6 +131,7 @@ type OriginalMessagePolicyTask = {
type OriginalMessage =
| OriginalMessageIOU
| OriginalMessageAddComment
+ | OriginalMessageSubmitted
| OriginalMessageClosed
| OriginalMessageCreated
| OriginalMessageRenamed
diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
index df4a1364a894..12b4cb92024e 100644
--- a/src/types/onyx/Policy.ts
+++ b/src/types/onyx/Policy.ts
@@ -47,6 +47,12 @@ type Policy = {
/** Whether policy expense chats can be created and used on this policy. Enabled manually by CQ/JS snippet. Always true for free policies. */
isPolicyExpenseChatEnabled: boolean;
+
+ /** Whether the scheduled submit is enabled */
+ autoReporting: boolean;
+
+ /** The scheduled submit frequency set up on the this policy */
+ autoReportingFrequency: ValueOf;
};
export default Policy;
diff --git a/tests/perf-test/SidebarLinks.perf-test.js b/tests/perf-test/SidebarLinks.perf-test.js
index 87d2648f78dd..1772c20fbf72 100644
--- a/tests/perf-test/SidebarLinks.perf-test.js
+++ b/tests/perf-test/SidebarLinks.perf-test.js
@@ -1,57 +1,122 @@
import {measurePerformance} from 'reassure';
import Onyx from 'react-native-onyx';
+import {fireEvent, screen} from '@testing-library/react-native';
import _ from 'underscore';
import * as LHNTestUtils from '../utils/LHNTestUtils';
import CONST from '../../src/CONST';
+import ONYXKEYS from '../../src/ONYXKEYS';
import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
+import variables from '../../src/styles/variables';
+
+jest.setTimeout(10000);
jest.mock('../../src/libs/Permissions');
+jest.mock('../../src/libs/Navigation/Navigation');
jest.mock('../../src/components/Icon/Expensicons');
-const ONYXKEYS = {
- PERSONAL_DETAILS: 'personalDetails',
- NVP_PRIORITY_MODE: 'nvp_priorityMode',
- SESSION: 'session',
- BETAS: 'betas',
- COLLECTION: {
- REPORT: 'report_',
- REPORT_ACTIONS: 'reportActions_',
- },
- NETWORK: 'network',
-};
+jest.mock('@react-navigation/native');
beforeAll(() =>
Onyx.init({
keys: ONYXKEYS,
+ safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
registerStorageEventListener: () => {},
}),
);
// Initialize the network key for OfflineWithFeedback
-beforeEach(() => Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}));
+beforeEach(() => {
+ wrapOnyxWithWaitForBatchedUpdates(Onyx);
+ return Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false});
+});
// Clear out Onyx after each test so that each test starts with a clean slate
afterEach(() => {
Onyx.clear();
});
-test('simple Sidebar render with hundred of reports', () => {
- const mockReports = Array.from({length: 100}, (__, i) => {
+const getMockedReportsMap = (length = 100) => {
+ const mockReports = Array.from({length}, (__, i) => {
const reportID = i + 1;
- const emails = [`email${reportID}@test.com`];
+ const participants = [1, 2];
const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
- const report = LHNTestUtils.getFakeReport(emails, 1, false);
+ const report = LHNTestUtils.getFakeReport(participants, 1, true);
+
return {[reportKey]: report};
});
- const mockOnyxReports = _.assign({}, ...mockReports);
+
+ return _.assign({}, ...mockReports);
+};
+
+const mockedResponseMap = getMockedReportsMap(500);
+
+test('should render Sidebar with 500 reports stored', () => {
+ const scenario = async () => {
+ // Query for the sidebar
+ await screen.findByTestId('lhn-options-list');
+ /**
+ * Query for display names of participants [1, 2].
+ * This will ensure that the sidebar renders a list of items.
+ */
+ await screen.findAllByText('One, Two');
+ };
+
+ return waitForBatchedUpdates()
+ .then(() =>
+ Onyx.multiSet({
+ [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.DEFAULT,
+ [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+ [ONYXKEYS.BETAS]: [CONST.BETAS.DEFAULT_ROOMS, CONST.BETAS.POLICY_ROOMS],
+ [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD,
+ [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
+ ...mockedResponseMap,
+ }),
+ )
+ .then(() => measurePerformance(
+
{}}
/>
);
