diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..35a4a333f8af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -37,10 +37,12 @@ module.exports = { overrides: [ { files: ['*.js', '*.jsx', '*.ts', '*.tsx'], + plugins: ['react'], rules: { 'rulesdir/no-multiple-onyx-in-file': 'off', 'rulesdir/onyx-props-must-have-default': 'off', 'react-native-a11y/has-accessibility-hint': ['off'], + 'react/jsx-no-constructed-context-values': 'error', 'react-native-a11y/has-valid-accessibility-descriptors': [ 'error', { @@ -116,7 +118,7 @@ module.exports = { }, { selector: ['parameter', 'method'], - format: ['camelCase'], + format: ['camelCase', 'PascalCase'], }, ], '@typescript-eslint/ban-types': [ diff --git a/.github/actions/javascript/bumpVersion/index.js b/.github/actions/javascript/bumpVersion/index.js index da08d1a060b6..830dbf626548 100644 --- a/.github/actions/javascript/bumpVersion/index.js +++ b/.github/actions/javascript/bumpVersion/index.js @@ -298,9 +298,6 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } - if (major === 1 && minor === 3 && patch === 83) { - return getVersionStringFromNumber(major, minor, patch - 2, 0); - } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/createOrUpdateStagingDeploy/index.js b/.github/actions/javascript/createOrUpdateStagingDeploy/index.js index 22ad59ed9588..561b8e61bc21 100644 --- a/.github/actions/javascript/createOrUpdateStagingDeploy/index.js +++ b/.github/actions/javascript/createOrUpdateStagingDeploy/index.js @@ -998,9 +998,6 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } - if (major === 1 && minor === 3 && patch === 83) { - return getVersionStringFromNumber(major, minor, patch - 2, 0); - } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/getDeployPullRequestList/index.js b/.github/actions/javascript/getDeployPullRequestList/index.js index 3aafda798c54..e42f97508bc5 100644 --- a/.github/actions/javascript/getDeployPullRequestList/index.js +++ b/.github/actions/javascript/getDeployPullRequestList/index.js @@ -961,9 +961,6 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } - if (major === 1 && minor === 3 && patch === 83) { - return getVersionStringFromNumber(major, minor, patch - 2, 0); - } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/getPreviousVersion/index.js b/.github/actions/javascript/getPreviousVersion/index.js index 6770ba99ba69..37db08db93e9 100644 --- a/.github/actions/javascript/getPreviousVersion/index.js +++ b/.github/actions/javascript/getPreviousVersion/index.js @@ -148,9 +148,6 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } - if (major === 1 && minor === 3 && patch === 83) { - return getVersionStringFromNumber(major, minor, patch - 2, 0); - } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/libs/versionUpdater.js b/.github/libs/versionUpdater.js index b78178f443e6..78e8085621bd 100644 --- a/.github/libs/versionUpdater.js +++ b/.github/libs/versionUpdater.js @@ -118,9 +118,6 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } - if (major === 1 && minor === 3 && patch === 83) { - return getVersionStringFromNumber(major, minor, patch - 2, 0); - } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml index f5a5dc5e1616..1105f78da27a 100644 --- a/.github/workflows/platformDeploy.yml +++ b/.github/workflows/platformDeploy.yml @@ -104,6 +104,13 @@ jobs: name: android-sourcemap path: android/app/build/generated/sourcemaps/react/release/*.map + - name: Upload Android version to GitHub artifacts + if: ${{ !fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }} + uses: actions/upload-artifact@v3 + with: + name: app-production-release.aab + path: android/app/build/outputs/bundle/productionRelease/app-production-release.aab + - name: Upload Android version to Browser Stack if: ${{ !fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }} run: curl -u "$BROWSERSTACK" -X POST "https://api-cloud.browserstack.com/app-live/upload" -F "file=@./android/app/build/outputs/bundle/productionRelease/app-production-release.aab" @@ -238,6 +245,13 @@ jobs: name: ios-sourcemap path: main.jsbundle.map + - name: Upload iOS version to GitHub artifacts + if: ${{ !fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }} + uses: actions/upload-artifact@v3 + with: + name: New Expensify.ipa + path: /Users/runner/work/App/App/New Expensify.ipa + - name: Upload iOS version to Browser Stack if: ${{ !fromJSON(env.SHOULD_DEPLOY_PRODUCTION) }} run: curl -u "$BROWSERSTACK" -X POST "https://api-cloud.browserstack.com/app-live/upload" -F "file=@/Users/runner/work/App/App/New Expensify.ipa" diff --git a/.well-known/apple-app-site-association b/.well-known/apple-app-site-association index d6da0232f2fc..b3adf0f59b9c 100644 --- a/.well-known/apple-app-site-association +++ b/.well-known/apple-app-site-association @@ -79,6 +79,14 @@ { "/": "/search/*", "comment": "Search" + }, + { + "/": "/send/*", + "comment": "Send money" + }, + { + "/": "/money2020/*", + "comment": "Money 2020" } ] } diff --git a/__mocks__/react-native.js b/__mocks__/react-native.js index 006d1aee38af..1eeea877ca0f 100644 --- a/__mocks__/react-native.js +++ b/__mocks__/react-native.js @@ -28,6 +28,7 @@ jest.doMock('react-native', () => { BootSplash: { getVisibilityStatus: jest.fn(), hide: jest.fn(), + logoSizeRatio: 1, navigationBarHeight: 0, }, StartupTimer: {stop: jest.fn()}, diff --git a/android/app/build.gradle b/android/app/build.gradle index bebbda72c856..fa2bd3865ca2 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -90,8 +90,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001038400 - versionName "1.3.84-0" + versionCode 1001038708 + versionName "1.3.87-8" } flavorDimensions "default" diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index d823324f50bf..74e91caa91d5 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -70,6 +70,8 @@ + + @@ -87,6 +89,8 @@ + + diff --git a/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashDialog.java b/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashDialog.java index f5b1ceff60e2..b65cb7306a3d 100644 --- a/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashDialog.java +++ b/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashDialog.java @@ -6,6 +6,7 @@ import android.view.Window; import android.view.WindowManager.LayoutParams; import androidx.annotation.NonNull; +import com.expensify.chat.R; public class BootSplashDialog extends Dialog { @@ -26,6 +27,10 @@ protected void onCreate(Bundle savedInstanceState) { if (window != null) { window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); + + if (BootSplashModule.isSamsungOneUI4()) { + window.setBackgroundDrawableResource(R.drawable.bootsplash_samsung_oneui_4); + } } super.onCreate(savedInstanceState); diff --git a/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashModule.java b/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashModule.java index c286ebf7a935..7498fa6594fb 100644 --- a/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashModule.java +++ b/android/app/src/main/java/com/expensify/chat/bootsplash/BootSplashModule.java @@ -23,6 +23,7 @@ import com.facebook.react.common.ReactConstants; import com.facebook.react.module.annotations.ReactModule; import com.facebook.react.uimanager.PixelUtil; +import java.lang.reflect.Field; import java.util.HashMap; import java.util.Map; import java.util.Timer; @@ -47,6 +48,19 @@ public String getName() { return NAME; } + // From https://stackoverflow.com/a/61062773 + public static boolean isSamsungOneUI4() { + String name = "SEM_PLATFORM_INT"; + + try { + Field field = Build.VERSION.class.getDeclaredField(name); + int version = (field.getInt(null) - 90000) / 10000; + return version == 4; + } catch (Exception ignored) { + return false; + } + } + @Override public Map getConstants() { final HashMap constants = new HashMap<>(); @@ -61,6 +75,7 @@ public Map getConstants() { ? Math.round(PixelUtil.toDIPFromPixel(resources.getDimensionPixelSize(heightResId))) : 0; + constants.put("logoSizeRatio", isSamsungOneUI4() ? 0.5 : 1); constants.put("navigationBarHeight", height); return constants; } diff --git a/android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png b/android/app/src/main/res/drawable-hdpi/bootsplash_logo.png similarity index 100% rename from android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png rename to android/app/src/main/res/drawable-hdpi/bootsplash_logo.png diff --git a/android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png b/android/app/src/main/res/drawable-mdpi/bootsplash_logo.png similarity index 100% rename from android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png rename to android/app/src/main/res/drawable-mdpi/bootsplash_logo.png diff --git a/android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png b/android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png similarity index 100% rename from android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png rename to android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png diff --git a/android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png b/android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png similarity index 100% rename from android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png rename to android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png diff --git a/android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png b/android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png similarity index 100% rename from android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png rename to android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png diff --git a/android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml b/android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml new file mode 100644 index 000000000000..9861004d368f --- /dev/null +++ b/android/app/src/main/res/drawable/bootsplash_samsung_oneui_4.xml @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml index 34d33d240458..aa0e8136957f 100644 --- a/android/app/src/main/res/values/styles.xml +++ b/android/app/src/main/res/values/styles.xml @@ -72,7 +72,7 @@ diff --git a/assets/images/bankicons/american-express.svg b/assets/images/bankicons/american-express.svg index b22ccbb4169a..0ab8383d46ed 100644 --- a/assets/images/bankicons/american-express.svg +++ b/assets/images/bankicons/american-express.svg @@ -1,38 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/bank-of-america.svg b/assets/images/bankicons/bank-of-america.svg index 0d962a914cfd..e4f87be611fc 100644 --- a/assets/images/bankicons/bank-of-america.svg +++ b/assets/images/bankicons/bank-of-america.svg @@ -1,22 +1,22 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/assets/images/bankicons/bb-t.svg b/assets/images/bankicons/bb-t.svg index 13dba55f68f4..7e7bf1f29ee4 100644 --- a/assets/images/bankicons/bb-t.svg +++ b/assets/images/bankicons/bb-t.svg @@ -1,27 +1,25 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/capital-one.svg b/assets/images/bankicons/capital-one.svg index 116543884e52..c37c8e3ca582 100644 --- a/assets/images/bankicons/capital-one.svg +++ b/assets/images/bankicons/capital-one.svg @@ -1,55 +1,53 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/charles-schwab.svg b/assets/images/bankicons/charles-schwab.svg index 4ba4ca4f9488..181a668965da 100644 --- a/assets/images/bankicons/charles-schwab.svg +++ b/assets/images/bankicons/charles-schwab.svg @@ -1,59 +1,58 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/chase.svg b/assets/images/bankicons/chase.svg index 1df546e9785b..70f0b911f147 100644 --- a/assets/images/bankicons/chase.svg +++ b/assets/images/bankicons/chase.svg @@ -1,12 +1,13 @@ - - - - - - - + + + + + + + diff --git a/assets/images/bankicons/citibank.svg b/assets/images/bankicons/citibank.svg index 482f33c8b9c9..b03e1efe9bb6 100644 --- a/assets/images/bankicons/citibank.svg +++ b/assets/images/bankicons/citibank.svg @@ -1,18 +1,18 @@ - - - - - - - - + + + + + + + + diff --git a/assets/images/bankicons/citizens-bank.svg b/assets/images/bankicons/citizens-bank.svg index 19160a747490..a0cdc6c1df2b 100644 --- a/assets/images/bankicons/citizens-bank.svg +++ b/assets/images/bankicons/citizens-bank.svg @@ -1,49 +1,47 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/discover.svg b/assets/images/bankicons/discover.svg index 60396e16d29e..75db16e4d1c1 100644 --- a/assets/images/bankicons/discover.svg +++ b/assets/images/bankicons/discover.svg @@ -1 +1,47 @@ -Discover 4 \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/expensify-background.png b/assets/images/bankicons/expensify-background.png new file mode 100644 index 000000000000..ab7b71d34e11 Binary files /dev/null and b/assets/images/bankicons/expensify-background.png differ diff --git a/assets/images/bankicons/expensify.svg b/assets/images/bankicons/expensify.svg new file mode 100644 index 000000000000..b61773e8d838 --- /dev/null +++ b/assets/images/bankicons/expensify.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/assets/images/bankicons/fidelity.svg b/assets/images/bankicons/fidelity.svg index ac0a05babc95..d49eca17c12d 100644 --- a/assets/images/bankicons/fidelity.svg +++ b/assets/images/bankicons/fidelity.svg @@ -1,17 +1,17 @@ - - - - - - - + + + + + + + diff --git a/assets/images/bankicons/generic-bank-account.svg b/assets/images/bankicons/generic-bank-account.svg index 8912413c668d..493f06b335d8 100644 --- a/assets/images/bankicons/generic-bank-account.svg +++ b/assets/images/bankicons/generic-bank-account.svg @@ -1,14 +1,14 @@ - + - - + + diff --git a/assets/images/bankicons/huntington-bank.svg b/assets/images/bankicons/huntington-bank.svg index e6b43b78daaa..40909a273e19 100644 --- a/assets/images/bankicons/huntington-bank.svg +++ b/assets/images/bankicons/huntington-bank.svg @@ -1,24 +1,22 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/navy-federal-credit-union.svg b/assets/images/bankicons/navy-federal-credit-union.svg index 5541daa9f49a..898cd03768f0 100644 --- a/assets/images/bankicons/navy-federal-credit-union.svg +++ b/assets/images/bankicons/navy-federal-credit-union.svg @@ -1,89 +1,85 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/pnc.svg b/assets/images/bankicons/pnc.svg index 104abb28ba05..3f78dbe94f47 100644 --- a/assets/images/bankicons/pnc.svg +++ b/assets/images/bankicons/pnc.svg @@ -1,19 +1,17 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/regions-bank.svg b/assets/images/bankicons/regions-bank.svg index 2de53c116064..bff045f0eb5a 100644 --- a/assets/images/bankicons/regions-bank.svg +++ b/assets/images/bankicons/regions-bank.svg @@ -1,40 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/suntrust.svg b/assets/images/bankicons/suntrust.svg index 256b8157600f..b5b94c105b14 100644 --- a/assets/images/bankicons/suntrust.svg +++ b/assets/images/bankicons/suntrust.svg @@ -1,220 +1,217 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/bankicons/td-bank.svg b/assets/images/bankicons/td-bank.svg index 03f100171f67..84675de5f2bf 100644 --- a/assets/images/bankicons/td-bank.svg +++ b/assets/images/bankicons/td-bank.svg @@ -1,16 +1,14 @@ - - - - - - - - - - - + + + + + + + + + diff --git a/assets/images/bankicons/us-bank.svg b/assets/images/bankicons/us-bank.svg index d1364e253e62..e091ba0a6f50 100644 --- a/assets/images/bankicons/us-bank.svg +++ b/assets/images/bankicons/us-bank.svg @@ -1,29 +1,27 @@ - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/assets/images/bankicons/usaa.svg b/assets/images/bankicons/usaa.svg index 2552db28eca3..1e137fab626f 100644 --- a/assets/images/bankicons/usaa.svg +++ b/assets/images/bankicons/usaa.svg @@ -1,38 +1,36 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/american-express.svg b/assets/images/cardicons/american-express.svg new file mode 100644 index 000000000000..9e31f7c8a08e --- /dev/null +++ b/assets/images/cardicons/american-express.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/bank-of-america.svg b/assets/images/cardicons/bank-of-america.svg new file mode 100644 index 000000000000..62dd510b0649 --- /dev/null +++ b/assets/images/cardicons/bank-of-america.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/assets/images/cardicons/bb-t.svg b/assets/images/cardicons/bb-t.svg new file mode 100644 index 000000000000..ad3676458d21 --- /dev/null +++ b/assets/images/cardicons/bb-t.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/capital-one.svg b/assets/images/cardicons/capital-one.svg new file mode 100644 index 000000000000..ee4f756e2600 --- /dev/null +++ b/assets/images/cardicons/capital-one.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/charles-schwab.svg b/assets/images/cardicons/charles-schwab.svg new file mode 100644 index 000000000000..39c894042cd3 --- /dev/null +++ b/assets/images/cardicons/charles-schwab.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/chase.svg b/assets/images/cardicons/chase.svg new file mode 100644 index 000000000000..8e8ddb6d5378 --- /dev/null +++ b/assets/images/cardicons/chase.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/assets/images/cardicons/citibank.svg b/assets/images/cardicons/citibank.svg new file mode 100644 index 000000000000..f9869aee7146 --- /dev/null +++ b/assets/images/cardicons/citibank.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/assets/images/cardicons/citizens.svg b/assets/images/cardicons/citizens.svg new file mode 100644 index 000000000000..3b4bf9ea1af3 --- /dev/null +++ b/assets/images/cardicons/citizens.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/discover.svg b/assets/images/cardicons/discover.svg new file mode 100644 index 000000000000..668e5634339d --- /dev/null +++ b/assets/images/cardicons/discover.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/expensify-card-dark.svg b/assets/images/cardicons/expensify-card-dark.svg new file mode 100644 index 000000000000..4a65afeeda9d --- /dev/null +++ b/assets/images/cardicons/expensify-card-dark.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/fidelity.svg b/assets/images/cardicons/fidelity.svg new file mode 100644 index 000000000000..c87f9c4aa56c --- /dev/null +++ b/assets/images/cardicons/fidelity.svg @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/assets/images/cardicons/generic-bank-card.svg b/assets/images/cardicons/generic-bank-card.svg new file mode 100644 index 000000000000..f700691ac29b --- /dev/null +++ b/assets/images/cardicons/generic-bank-card.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/huntington-bank.svg b/assets/images/cardicons/huntington-bank.svg new file mode 100644 index 000000000000..c108c7039898 --- /dev/null +++ b/assets/images/cardicons/huntington-bank.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/navy-federal-credit-union.svg b/assets/images/cardicons/navy-federal-credit-union.svg new file mode 100644 index 000000000000..5abc1103cce1 --- /dev/null +++ b/assets/images/cardicons/navy-federal-credit-union.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/pnc.svg b/assets/images/cardicons/pnc.svg new file mode 100644 index 000000000000..ae4d4aac8e41 --- /dev/null +++ b/assets/images/cardicons/pnc.svg @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/assets/images/cardicons/regions-bank.svg b/assets/images/cardicons/regions-bank.svg new file mode 100644 index 000000000000..1837ad2be41b --- /dev/null +++ b/assets/images/cardicons/regions-bank.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/suntrust.svg b/assets/images/cardicons/suntrust.svg new file mode 100644 index 000000000000..32ea5096f876 --- /dev/null +++ b/assets/images/cardicons/suntrust.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/cardicons/td-bank.svg b/assets/images/cardicons/td-bank.svg new file mode 100644 index 000000000000..19988e35bbbe --- /dev/null +++ b/assets/images/cardicons/td-bank.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/us-bank.svg b/assets/images/cardicons/us-bank.svg new file mode 100644 index 000000000000..321b4cb755b0 --- /dev/null +++ b/assets/images/cardicons/us-bank.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + diff --git a/assets/images/cardicons/usaa.svg b/assets/images/cardicons/usaa.svg new file mode 100644 index 000000000000..bb634f64e658 --- /dev/null +++ b/assets/images/cardicons/usaa.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/images/new-expensify-dark.svg b/assets/images/new-expensify-dark.svg index bcdb3c87f164..ad34f1d9dfce 100644 --- a/assets/images/new-expensify-dark.svg +++ b/assets/images/new-expensify-dark.svg @@ -1,29 +1,10 @@ - - - - - - - - - - - - - - - - - - + + diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index 27656eeb68f0..de99bbcb48ef 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -256,6 +256,7 @@ GEM PLATFORMS arm64-darwin-22 + arm64-darwin-23 x86_64-darwin-20 x86_64-darwin-21 diff --git a/docs/_data/_routes.yml b/docs/_data/_routes.yml index c6733ac11715..84735e95e0e9 100644 --- a/docs/_data/_routes.yml +++ b/docs/_data/_routes.yml @@ -44,16 +44,21 @@ platforms: icon: /assets/images/hand-card.svg description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here. - - href: exports - title: Exports - icon: /assets/images/monitor.svg - description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options. + - href: expensify-partner-program + title: Expensify Partner Program + icon: /assets/images/handshake.svg + description: Discover how to get the most out of Expensify as an ExpensifyApproved! accountant partner. Learn how to set up your clients, receive CPE credits, and take advantage of your partner discount. - href: get-paid-back title: Get Paid Back icon: /assets/images/money-into-wallet.svg description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time. + - href: insights-and-custom-reporting + title: Insights & Custom Reporting + icon: /assets/images/monitor.svg + description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options. + - href: integrations title: Integrations icon: /assets/images/workflow.svg @@ -64,15 +69,15 @@ platforms: icon: /assets/images/envelope-receipt.svg description: Master the art of overseeing employees and reports by utilizing Expensify’s automation features and approval workflows. - - href: policy-and-domain-settings - title: Policy & Domain Settings - icon: /assets/images/shield.svg - description: Discover how to set up and manage policies, define user permissions, and implement compliance rules to maintain a secure and compliant financial management landscape. - - href: send-payments title: Send Payments icon: /assets/images/money-wings.svg description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options. + + - href: workspace-and-domain-settings + title: Workspace & Domain Settings + icon: /assets/images/shield.svg + description: Discover how to set up and manage workspace, define user permissions, and implement compliance rules to maintain a secure and compliant financial management landscape. - href: new-expensify title: New Expensify @@ -113,16 +118,21 @@ platforms: icon: /assets/images/hand-card.svg description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here. - - href: exports - title: Exports - icon: /assets/images/monitor.svg - description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options. + - href: expensify-partner-program + title: Expensify Partner Program + icon: /assets/images/handshake.svg + description: Discover how to get the most out of Expensify as an ExpensifyApproved! accountant partner. Learn how to set up your clients, receive CPE credits, and take advantage of your partner discount. - href: get-paid-back title: Get Paid Back icon: /assets/images/money-into-wallet.svg description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time. + - href: insights-and-custom-reporting + title: Insights & Custom Reporting + icon: /assets/images/monitor.svg + description: From exporting reports to creating custom templates, here is where you can learn more about Expensify's versatile export options. + - href: integrations title: Integrations icon: /assets/images/workflow.svg diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 3ad2276713da..c887849ffd99 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -371,9 +371,26 @@ button { flex-wrap: wrap; } + h1 { + font-size: 1.5em; + padding: 20px 0 12px 0; + } + + h2 { + font-size: 1.125em; + font-weight: 500; + font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; + } + + h3 { + font-size: 1em; + font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif; + } + h2, h3 { - font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif; + margin: 0; + padding: 12px 0 12px 0; } blockquote { diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Business-Bank-Account-(AUD).md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Business-Bank-Account-(AUD).md deleted file mode 100644 index 1fa5734293ac..000000000000 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Business-Bank-Account-(AUD).md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Add-a-Business-Bank-Account-(AUD).md -description: This article provides insight on setting up and using an Australian Business Bank account in Expensify. ---- - -# How to add an Australian business bank account (for admins) -A withdrawal account is the business bank account that you want to use to pay your employee reimbursements. - -_Your policy currency must be set to AUD and reimbursement setting set to Indirect to continue. If your main policy is used for something other than AUD, then you will need to create a new one and set that policy to AUD._ - -To set this up, you’ll run through the following steps: - -1. Go to **Settings > Your Account > Payments** and click **Add Verified Bank Account** -![Click the Verified Bank Account button in the bottom right-hand corner of the screen](https://help.expensify.com/assets/images/add-vba-australian-account.png){:width="100%"} - -2. Enter the required information to connect to your business bank account. If you don't know your Bank User ID/Direct Entry ID/APCA Number, please contact your bank and they will be able to provide this. -![Enter your information in each of the required fields](https://help.expensify.com/assets/images/add-vba-australian-account-modal.png){:width="100%"} - -3. Link the withdrawal account to your policy by heading to **Settings > Policies > Group > [Policy name] > Reimbursement** -4. Click **Direct reimbursement** -5. Set the default withdrawal account for processing reimbursements -6. Tell your employees to add their deposit accounts and start reimbursing. - -# How to delete a bank account -If you’re no longer using a bank account you previously connected to Expensify, you can delete it by doing the following: - -1. Navigate to Settings > Accounts > Payments -2. Click **Delete** -![Click the Delete button](https://help.expensify.com/assets/images/delete-australian-bank-account.png){:width="100%"} - -You can complete this process either via the web app (on a computer), or via the mobile app. - -# Deep Dive -## Bank-specific batch payment support - -If you are new to using Batch Payments in Australia, to reimburse your staff or process payroll, you may want to check out these bank-specific instructions for how to upload your .aba file: - -- ANZ Bank - [Import a file for payroll payments](https://www.anz.com.au/support/internet-banking/pay-transfer-business/payroll/import-file/) -- CommBank - [Importing and using
 Direct Entry (EFT) files](https://www.commbank.com.au/business/pds/003-279-importing-a-de-file.pdf) -- Westpac - [Importing Payment Files](https://www.westpac.com.au/business-banking/online-banking/support-faqs/import-files/) -- NAB - [Quick Reference Guide - Upload a payment file](https://www.nab.com.au/business/online-banking/nab-connect/help) -- Bendigo Bank - [Bulk payments user guide](https://www.bendigobank.com.au/globalassets/documents/business/bulk-payments-user-guide.pdf) -- Bank of Queensland - [Payments file upload facility FAQ](https://www.boq.com.au/help-and-support/online-banking/ob-faqs-and-support/faq-pfuf) - -**Note:** Some financial institutions require an ABA file to include a *self-balancing transaction*. If you are unsure, please check with your bank to ensure whether to tick this option or not, as selecting an incorrect option will result in the ABA file not working with your bank's internet banking platform. - -## Enable Global Reimbursement - -If you have employees in other countries outside of Australia, you can now reimburse them directly using Global Reimbursement. - -To do this, you’ll first need to delete any existing Australian business bank accounts. Then, you’ll want to follow the instructions to enable Global Reimbursements diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Business-Bank-Accounts-AUD.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Business-Bank-Accounts-AUD.md index 7c789942a2b3..b59f68a65ce6 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Business-Bank-Accounts-AUD.md +++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Business-Bank-Accounts-AUD.md @@ -1,5 +1,51 @@ --- -title: Business Bank Accounts - AUD -description: Business Bank Accounts - AUD +title: Add a Business Bank Account +description: This article provides insight on setting up and using an Australian Business Bank account in Expensify. --- -## Resource Coming Soon! + +# How to add an Australian business bank account (for admins) +A withdrawal account is the business bank account that you want to use to pay your employee reimbursements. + +_Your policy currency must be set to AUD and reimbursement setting set to Indirect to continue. If your main policy is used for something other than AUD, then you will need to create a new one and set that policy to AUD._ + +To set this up, you’ll run through the following steps: + +1. Go to **Settings > Your Account > Payments** and click **Add Verified Bank Account** +![Click the Verified Bank Account button in the bottom right-hand corner of the screen](https://help.expensify.com/assets/images/add-vba-australian-account.png){:width="100%"} + +2. Enter the required information to connect to your business bank account. If you don't know your Bank User ID/Direct Entry ID/APCA Number, please contact your bank and they will be able to provide this. +![Enter your information in each of the required fields](https://help.expensify.com/assets/images/add-vba-australian-account-modal.png){:width="100%"} + +3. Link the withdrawal account to your policy by heading to **Settings > Policies > Group > [Policy name] > Reimbursement** +4. Click **Direct reimbursement** +5. Set the default withdrawal account for processing reimbursements +6. Tell your employees to add their deposit accounts and start reimbursing. + +# How to delete a bank account +If you’re no longer using a bank account you previously connected to Expensify, you can delete it by doing the following: + +1. Navigate to Settings > Accounts > Payments +2. Click **Delete** +![Click the Delete button](https://help.expensify.com/assets/images/delete-australian-bank-account.png){:width="100%"} + +You can complete this process either via the web app (on a computer), or via the mobile app. + +# Deep Dive +## Bank-specific batch payment support + +If you are new to using Batch Payments in Australia, to reimburse your staff or process payroll, you may want to check out these bank-specific instructions for how to upload your .aba file: + +- ANZ Bank - [Import a file for payroll payments](https://www.anz.com.au/support/internet-banking/pay-transfer-business/payroll/import-file/) +- CommBank - [Importing and using
 Direct Entry (EFT) files](https://www.commbank.com.au/business/pds/003-279-importing-a-de-file.pdf) +- Westpac - [Importing Payment Files](https://www.westpac.com.au/business-banking/online-banking/support-faqs/import-files/) +- NAB - [Quick Reference Guide - Upload a payment file](https://www.nab.com.au/business/online-banking/nab-connect/help) +- Bendigo Bank - [Bulk payments user guide](https://www.bendigobank.com.au/globalassets/documents/business/bulk-payments-user-guide.pdf) +- Bank of Queensland - [Payments file upload facility FAQ](https://www.boq.com.au/help-and-support/online-banking/ob-faqs-and-support/faq-pfuf) + +**Note:** Some financial institutions require an ABA file to include a *self-balancing transaction*. If you are unsure, please check with your bank to ensure whether to tick this option or not, as selecting an incorrect option will result in the ABA file not working with your bank's internet banking platform. + +## Enable Global Reimbursement + +If you have employees in other countries outside of Australia, you can now reimburse them directly using Global Reimbursement. + +To do this, you’ll first need to delete any existing Australian business bank accounts. Then, you’ll want to follow the instructions to enable Global Reimbursements diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Deposit-Account-(AUD).md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUD.md similarity index 83% rename from docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Deposit-Account-(AUD).md rename to docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUD.md index 7273e5ece879..6114e98883e0 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Deposit-Account-(AUD).md +++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUD.md @@ -1,12 +1,12 @@ --- -title: Add a Deposit Account (AUD) +title: Deposit Accounts (AUD) description: Expensify allows you to add a personal bank account to receive reimbursements for your expenses. We never take money out of this account β€” it is only a place for us to deposit funds from your employer. This article covers deposit accounts for Australian banks. --- ## How-to add your Australian personal deposit account information 1. Confirm with your Policy Admin that they’ve set up Global Reimbursment 2. Set your default policy (by selecting the correct policy after clicking on your profile picture) before adding your deposit account. -3. Go to *Settings > Account > Payments* and click *Add Deposit-Only Bank Account* +3. Go to **Settings > Account > Payments** and click **Add Deposit-Only Bank Account** ![Click the Add Deposit-Only Bank Account button](https://help.expensify.com/assets/images/add-australian-deposit-only-account.png){:width="100%"} 4. Enter your BSB, account number and name. If your screen looks different than the image below, that means your company hasn't enabled reimbursements through Expensify. Please contact your administrator and ask them to enable reimbursements. @@ -14,7 +14,7 @@ description: Expensify allows you to add a personal bank account to receive reim ![Fill in the required fields](https://help.expensify.com/assets/images/add-australian-deposit-only-account-modal.png){:width="100%"} # How-to delete a bank account -Bank accounts are easy to delete! Simply click the red β€œDelete” button in the bank account under *Settings > Account > Payments*. +Bank accounts are easy to delete! Simply click the red **Delete** button in the bank account under **Settings > Account > Payments**. ![Click the Delete button](https://help.expensify.com/assets/images/delete-australian-bank-account.png){:width="100%"} diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUS.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUS.md deleted file mode 100644 index 61e6dfd95e38..000000000000 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-AUS.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Deposit Accounts - AUD -description: Deposit Accounts - AUD ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-USD.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-USD.md index 19010be95980..a4ff7503f7bb 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-USD.md +++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/deposit-accounts/Deposit-Accounts-USD.md @@ -1,5 +1,75 @@ --- title: Deposit Accounts - USD -description: Deposit Accounts - USD +description: How to add a deposit account to receive payments for yourself or your business (US) --- -## Resource Coming Soon! +# Overview + +There are two types of deposit-only accounts: + +1. If you're an employee seeking reimbursement for expenses you’ve incurred, you’ll add a **Personal deposit-only bank account**. +2. If you're a vendor seeking payment for goods or services, you’ll add a **Business deposit-only account**. + +# How to connect a personal deposit-only bank account + +**Connect a personal deposit-only bank account if you are:** + +- An employee based in the US who gets reimbursed by their employer +- An employee based in Australia who gets reimbursed by their company via batch payments +- An international (non-US) employee whose US-based employers send international reimbursements + +**To establish the connection to a personal bank account, follow these steps:** + +1. Navigate to your **Settings > Account > Payments** and click the **Add Deposit-Only Bank Account** button. +2. Click **Log into your bank** button and click **Continue** on the Plaid connection pop-up window. +3. Search for your bank account in the list of banks and follow the prompts to sign-in to your bank account. +4. Enter your bank login credentials when prompted. + - If your bank doesn't appear, click the 'x' in the upper right corner of the Plaid pop-up window and click **Connect Manually**. + - Enter your account information, then click **Save & Continue**. + +You should be all set! You’ll receive reimbursement for your expense reports directly to this bank account. + +# How to connect a business deposit-only bank account + +**Connect a business deposit-only bank account if you are:** + +- A US-based vendor who wants to be paid directly for bills sent to customers/clients +- A US-based vendor who want to pay invoices directly via Expensify + +**To establish the connection to a business bank account, follow these steps:** + +1. Navigate to your **Settings > Account > Payments and click the Add Deposit-Only Bank Account** button. +2. Click **Log into your bank** button and click **Continue** on the Plaid connection pop-up window. +3. Search for your bank account in the list of banks and follow the prompts to sign-in to your bank account. +4. Enter your bank login credentials when prompted. + - If your bank doesn't appear, click the 'x' in the upper right corner of the Plaid pop-up window and click **Connect Manually**. + - Enter your account information, then click **Save & Continue**. +5. If you see the option to β€œSwitch to Business” after entering the account owner information, click that link. +6. Enter your Company Name and FEIN or TIN information. +7. Enter your company’s website formatted as https://www.domain.com. + +You should be all set! The bank account will display as a deposit-only business account, and you’ll be paid directly for any invoices you submit for payment. + +# How to delete a deposit-only bank account + +**To delete a deposit-only bank account, do the following:** + +1. Navigate to **Settings > Account > Payments > Bank Accounts** +2. Click the **Delete** next to the bank account you want to remove + +# FAQ + +## **What happens if my bank requires an additional security check before adding it to a third-party?** + +If your bank account has 2FA enabled or another security step, you should be prompted to complete this when adding the account. If not, and you encounter an error, you can always select the option to β€œConnect Manually”. Either way, please double check that you are entering the correct bank account details to ensure successful payments. + +## **What if I also want to pay employees with my business bank account?** + +If you’ve added a business deposit-only account and also wish to also pay employees, vendors, or utilize the Expensify Card with this bank account, select β€œVerify” on the listed bank account. This will take you through the additional verification steps to use this account to issue payments. + +## **I connected my deposit-only bank account – Why haven’t I received my reimbursement?** + +There are a few reasons a reimbursement may be unsuccessful. The first step is to review the estimated deposit date on the report. If it’s after that date and you still haven’t seen the funds, it could have been unsuccessful because: + - The incorrect account was added. If you believe you may have entered the wrong account, please reach out to Concierge and provide the Report ID for the missing reimbursement. + - Your account wasn’t set up for Direct Deposit/ACH. You may want to contact your bank to confirm. + +If you aren’t sure, please reach out to Concierge and we can assist! diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Pay-Per-Use-Subscription.md b/docs/articles/expensify-classic/billing-and-subscriptions/Pay-Per-Use-Subscription.md index 77aca2a01678..1d689f5b0355 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Pay-Per-Use-Subscription.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Pay-Per-Use-Subscription.md @@ -1,5 +1,29 @@ --- title: Pay-per-use Subscription -description: Pay-per-use Subscription +description: Learn more about your pay-per-use subscription. --- -## Resource Coming Soon! +# Overview +Pay-per-use is a billing option for people who prefer to use Expensify month to month or on an as-needed basis. On a pay-per-use subscription, you will only pay for active users in that given month. + +**We recommend this billing setup for companies that use Expensify a few months out of the year**. If you have expenses to manage for more than 6 out of 12 months, an [**Annual Subscription**](https://help.expensify.com/articles/expensify-classic/billing-and-subscriptions/Annual-Subscription#gsc.tab=0) may better suit your needs. + +# How to start a pay-per-use subscription +1. Create a Group Workspace if you haven’t already by going to **Settings > Workspaces > Group > New Workspace** +2. Once you’ve created your Workspace, under the β€œSubscription” section on the Group Workspace page, select β€œPay-per-use”. + +# FAQ + +## What is considered an active user? +An active user is anyone who chats, creates, modifies, submits, approves, reimburses, or exports a report in Expensify. This includes actions taken by a Copilot and Workspace automation (such as Scheduled Submit and automated reimbursement). If no one on your Group Workspace uses Expensify in a given month, you will not be billed for that month. + +You can review the number of Active Users by selecting β€œView Activity” next to your billing receipt (**Settings > Account > Payments > Billing History**). + +## Why do I have pay-per-use users in addition to my Annual Subscription on my Expensify bill? +If you have an Annual Subscription, but go above your set user count, we will charge at the pay-per-use rate for these ad-hoc users. + +If you expect to have an increased number of users for more than 3 out of 12 months, the most cost-effective approach is to increase your Annual Subscription size. + +## Will billing only be in USD currency? +While USD is the default billing currency, we also have GBP, AUD, and NZD billing currencies. You can see the rates on our [pricing](https://www.expensify.com/pricing) page. + + diff --git a/docs/articles/expensify-classic/expense-and-report-features/Expense-Rules.md b/docs/articles/expensify-classic/expense-and-report-features/Expense-Rules.md index 304c93d1da6d..ae6a9ca77db1 100644 --- a/docs/articles/expensify-classic/expense-and-report-features/Expense-Rules.md +++ b/docs/articles/expensify-classic/expense-and-report-features/Expense-Rules.md @@ -1,5 +1,55 @@ --- title: Expense Rules -description: Expense Rules +description: Expense rules allow you to automatically categorize, tag, and report expenses based on the merchant's name. + --- -## Resource Coming Soon! +# Overview +Expense rules allow you to automatically categorize, tag, and report expenses based on the merchant’s name. + +# How to use Expense Rules +**To create an expense rule, follow these steps:** +1. Navigate to **Settings > Account > Expense Rules** +2. Click on **New Rule** +3. Fill in the required information to set up your rule + +When creating an expense rule, you will be able to apply the following rules to expenses: + +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/ExpensifyHelp_ExpenseRules_01.png){:width="100%"} + +- **Merchant:** Updates the merchant name, e.g., β€œStarbucks #238” could be changed to β€œStarbucks” +- **Category:** Applies a workspace category to the expense +- **Tag:** Applies a tag to the expense, e.g., a Department or Location +- **Description:** Adds a description to the description field on the expense +- **Reimbursability:** Determines whether the expense will be marked as reimbursable or non-reimbursable +- **Billable**: Determines whether the expense is billable +- **Add to a report named:** Adds the expense to a report with the name you type into the field. If no report with that name exists, a new report will be created + +## Tips on using Expense Rules +- If you'd like to apply a rule to all expenses (β€œUniversal Rule”) rather than just one merchant, simply enter a period [.] and nothing else into the **β€œWhen the merchant name contains:”** field. **Note:** Universal Rules will always take precedence over all other rules for category (more on this below). +- You can apply a rule to previously entered expenses by checking the **Apply to existing matching expenses** checkbox. Click β€œPreview Matching Expenses” to see if your rule matches the intended expenses. +- You can create expense rules while editing an expense. To do this, simply check the box **β€œCreate a rule based on your changes"** at the time of editing. Note that the expense must be saved, reopened, and edited for this option to appear. + + +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/ExpensifyHelp_ExpenseRules_02.png){:width="100%"} + + +To delete an expense rule, go to **Settings > Account > Expense Rules**, scroll down to the rule you’d like to remove, and then click the trash can icon in the upper right corner of the rule: + +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/ExpensifyHelp_ExpenseRules_03.png){:width="100%"} + +# Deep Dive +In general, your expense rules will be applied in order, from **top to bottom**, i.e., from the first rule. However, other settings can impact how expense rules are applied. Here is the hierarchy that determines how these are applied: +1. A Universal Rule will **always** precede over any other expense category rules. Rules that would otherwise change the expense category will **not** override the Universal Rule. +2. If Scheduled Submit and the setting β€œEnforce Default Report Title” are enabled on the workspace, this will take precedence over any rules trying to add the expense to a report. +3. If the expense is from a Company Card that is forced to a workspace with strict rule enforcement, those rules will take precedence over individual expense rules. +4. If you belong to a workspace that is tied to an accounting integration, the configuration settings for this connection may update your expense details upon export, even if the expense rules were successfully applied to the expense. + + +# FAQ +## How can I use Expense Rules to vendor match when exporting to an accounting package? +When exporting non-reimbursable expenses to your connected accounting package, the payee field will list "Credit Card Misc." if the merchant name on the expense in Expensify is not an exact match to a vendor in the accounting package. +When an exact match is unavailable, "Credit Card Misc." prevents multiple variations of the same vendor (e.g., Starbucks and Starbucks #1234, as is often seen in credit card statements) from being created in your accounting package. +For repeated expenses, the best practice is to use Expense Rules, which will automatically update the merchant name without having to do it manually each time. +This only works for connections to QuickBooks Online, Desktop, and Xero. Vendor matching cannot be performed in this manner for NetSuite or Sage Intacct due to limitations in the API of the accounting package. + + diff --git a/docs/articles/expensify-classic/expensify-card/Card-Settings.md b/docs/articles/expensify-classic/expensify-card/Card-Settings.md index ab212354974a..35708b6fbb1e 100644 --- a/docs/articles/expensify-classic/expensify-card/Card-Settings.md +++ b/docs/articles/expensify-classic/expensify-card/Card-Settings.md @@ -1,5 +1,169 @@ --- -title: Card Settings -description: Card Settings +title: Expensify Card Settings +description: Admin Card Settings and Features --- -## Resource Coming Soon! +## Expensify Card - admin settings and features +​ +# Overview +​ +The Expensify Card offers a range of settings and functionality to customize how admins manage expenses and card usage in Expensify. To start, we'll lay out the best way to make these options work for you. +​ +Set Smart Limits to control card spend. Smart Limits are spend limits that can be set for individual cards or specific groups. Once a given Smart Limit is reached, the card is temporarily disabled until expenses are approved. +​ +Monitor spend using your Domain Limit and the Reconciliation Dashboard. +Your Domain Limit is the total Expensify Card limit across your entire organization. No member can spend more than what's available here, no matter what their individual Smart Limit is. A Domain Limit is dynamic and depends on a number of factors, which we'll explain below. +​ +Decide the settlement model that works best for your business +Monthly settlement is when your Expensify Card balance is paid in full on a certain day each month. Though the Expensify Card is set to settle daily by default, any Domain Admin can change this setting to monthly. +​ +Now, let's get into the mechanics of each piece mentioned above. +​ +# How to set Smart Limits +Smart Limits allow you to set a custom spend limit for each Expensify cardholder, or default limits for groups. Setting a Smart Limit is the step that activates an Expensify card for your user (and issues a virtual card for immediate use). +​ +## Set limits for individual cardholders +As a Domain Admin, you can set or edit Custom Smart Limits for a card by going to Settings > Domains > Domain Name > Company Cards. Simply click Edit Limit to set the limit. This limit will restrict the amount of unapproved (unsubmitted and Processing) expenses that a cardholder can incur. After the limit is reached, the cardholder won't be able to use their card until they submit outstanding expenses and have their card spend approved. If you set the Smart Limit to $0, the user's card can't be used. +## Set default group limits +Domain Admins can set or edit custom Smart Limits for a domain group by going to Settings > Domains > Domain Name > Groups. Just click on the limit in-line for your chosen group and amend the value. +​ +This limit will apply to all members of the Domain Group who do not have an individual limit set via Settings > Domains > Domain Name > Company Cards. +## Refreshing Smart Limits +To let cardholders keep spending, you can approve their pending expenses via the Reconciliation tab. This will free up their limit, allowing them to use their card again. +​ +To check an unapproved card balance and approve expenses, click on Reconciliation and enter a date range, then click though the Unapproved total to see what needs approving. You can add to a new report or approve an existing report from here. +​ +You can also increase a Smart Limit at any time by clicking Edit Limit. +​ +# Understanding your Domain Limit +​ +To get the most accurate Domain Limit for your company, connect your bank account via Plaid under Settings > Account > Payments > Add Verified Bank Account. +​ +If your bank isn't supported or you're having connection issues, you can request a custom limit under Settings > Domains > Domain Name > Company Cards > Request Limit Increase. As a note, you'll need to provide three months of unredacted bank statements for review by our risk management team. +​ +Your Domain Limit may fluctuate from time to time based on various factors, including: +​ +- Available funds in your Verified Business Bank Account: We regularly check bank balances via Plaid. A sudden drop in balance within the last 24 hours may affect your limit. For 'sweep' accounts, be sure to maintain a substantial balance even if you're sweeping daily. +- Pending expenses: Review the Reconciliation Dashboard to check for large pending expenses that may impact your available balance. Your Domain Limit will adjust automatically to include pending expenses. +- Processing settlements: Settlements need about three business days to process and clear. Several large settlements over consecutive days may impact your Domain Limit, which will dynamically update when settlements have cleared. +​ +As a note, if your Domain Limit is reduced to $0, your cardholders can't make purchases even if they have a larger Smart Limit set on their individual cards. +# How to reconcile Expensify Cards +## How to reconcile expenses +Reconciling expenses is essential to ensuring your financial records are accurate and up-to-date. +​ +Follow the steps below to quickly review and reconcile expenses associated with your Expensify Cards: +​ +1. Go to Settings > Domains > Domain Name > Company Cards > Reconciliation > Expenses +2. Enter your start and end dates, then click Run +3. The Imported Total will show all Expensify Card transactions for the period +4. You'll also see a list of all Expensify Cards, the total spend on each card, and a snapshot of expenses that have and have not been approved (Approved Total and Unapproved Total, respectively) +By clicking on the amounts, you can view the associated expenses +​ +## How to reconcile settlements +A settlement is the payment to Expensify for the purchases made using the Expensify Cards. +​ +The Expensify Card program can settle on either a daily or monthly basis. One thing to note is that not all transactions in a settlement will be approved when running reconciliation. +​ +You can view the Expensify Card settlements under Settings > Domains > Domain Name > Company Cards > Reconciliation > Settlements. +​ +By clicking each settlement amount, you can see the transactions contained in that specific payment amount. +​ +Follow the below steps to run reconciliation on the Expensify Card settlements: +​ +1. Log into the Expensify web app +2. Click Settings > Domains > Domain Name > Company Cards > Reconciliation tab > Settlements +3. Use the Search function to generate a statement for the specific period you need +4. The search results will include the following info for each entry: + - Date: when a purchase was made or funds were debited for payments + - Posted Date: when the purchase transaction posted + - Entry ID: a unique number grouping card payments and transactions settled by those payments + - Amount: the amount debited from the Business Bank Account for payments + - Merchant: the business where a purchase was made + - Card: refers to the Expensify credit card number and cardholder's email address + - Business Account: the business bank account connected to Expensify that the settlement is paid from + - Transaction ID: a special ID that helps Expensify support locate transactions if there's an issue +​ +5. Review the individual transactions (debits) and the payments (credits) that settled them +6. Every cardholder will have a virtual and a physical card listed. They're handled the same way for settlements, reconciliation, and exporting. +7. Click Download CSV for reconciliation +8. This will list everything that you see on screen +9. To reconcile pre-authorizations, you can use the Transaction ID column in the CSV file to locate the original purchase +10. Review account payments +11. You'll see payments made from the accounts listed under Settings > Account > Payments > Bank Accounts. Payment data won't show for deleted accounts. +​ +You can use the Reconciliation Dashboard to confirm the status of expenses that are missing from your accounting system. It allows you to view both approved and unapproved expenses within your selected date range that haven't been exported yet. +​ +# Deep dive +## Set a preferred workspace +Some customers choose to split their company card expenses from other expense types for coding purposes. Most commonly this is done by creating a separate workspace for card expenses. +​ +You can use the preferred workspace feature in conjunction with Scheduled Submit to make sure all newly imported card expenses are automatically added to reports connected to your card-specific workspace. +## How to change your settlement account +You can change your settlement account to any other verified business bank account in Expensify. If your bank account is closing, make sure you set up the replacement bank account in Expensify as early as possible. +​ +To select a different settlement account: +​ +1. Go to Settings > Domains > Domain Name > Company Cards > Settings tab +2. Use the Expensify Card settlement account dropdown to select a new account +3. Click Save +​ +## Change the settlement frequency +​ +By default, the Expensify Cards settle on a daily cadence. However, you can choose to have the cards settle on a monthly basis. +​ +1. Monthly settlement is only available if the settlement account hasn't had a negative balance in the last 90 days +2. There will be an initial settlement to settle any outstanding spend that happened before switching the settlement frequency +3. The date that the settlement is changed to monthly is the settlement date going forward (e.g. If you switch to monthly settlement on September 15th, Expensify Cards will settle on the 15th of each month going forward) +​ +To change the settlement frequency: +1. Go to Settings > Domains > Domain Name > Company Cards > Settings tab +2. Click the Settlement Frequency dropdown and select Monthly +3. Click Save to confirm the change +​ +​ +## Declined Expensify Card transactions +As long as you have 'Receive realtime alerts' enabled, you'll get a notification explaining the decline reason. You can enable alerts in the mobile app by clicking on three-bar icon in the upper-left corner > Settings > toggle Receive realtime alerts on. +​ +If you ever notice any unfamiliar purchases or need a new card, go to Settings > Account > Credit Card Import and click on Request a New Card right away. +​ +Here are some reasons an Expensify Card transaction might be declined: +​ +1. You have an insufficient card limit + - If a transaction amount exceeds the available limit on your Expensify Card, the transaction will be declined. It's essential to be aware of the available balance before making a purchase to avoid this - you can see the balance under Settings > Account > Credit Card Import on the web app or mobile app. Submitting expenses and having them approved will free up your limit for more spend. +​ +2. Your card hasn't been activated yet, or has been canceled + - If the card has been canceled or not yet activated, it won't process any transactions. +​ +3. Your card information was entered incorrectly. Entering incorrect card information, such as the CVC, ZIP or expiration date will also lead to declines. +​ +4. There was suspicious activity + - If Expensify detects unusual or suspicious activity, we may block transactions as a security measure. This could happen due to irregular spending patterns, attempted purchases from risky vendors, or multiple rapid transactions. Check your Expensify Home page to approve unsual merchants and try again. + If the spending looks suspicious, we may do a manual due diligence check, and our team will do this as quickly as possible - your cards will all be locked while this happens. +​ +5. The merchant is located in a restricted country + - Some countries may be off-limits for transactions. If a merchant or their headquarters (billing address) are physically located in one of these countries, Expensify Card purchases will be declined. This list may change at any time, so be sure to check back frequently: Belarus, Burundi, Cambodia, Central African Republic, Democratic Republic of the Congo, Cuba, Iran, Iraq, North Korea, Lebanon, Libya, Russia, Somalia, South Sudan, Syrian Arab Republic, Tanzania, Ukraine, Venezuela, Yemen, and Zimbabwe. +​ +# FAQ +## What happens when I reject an Expensify Card expense? +​ +​ +Rejecting an Expensify Card expense from an Expensify report will simply allow it to be reported on a different report. You cannot undo a credit card charge. +​ +If an Expensify Card expense needs to be rejected, you can reject the report or the specific expense so it can be added to a different report. The rejected expense will become Unreported and return to the submitter's Expenses page. +​ +If you want to dispute a card charge, please message Concierge to start the dispute process. +​ +If your employee has accidentally made an unauthorised purchase, you will need to work that out with the employee to determine how they will pay back your company. +​ +​ +## What happens when an Expensify Card transaction is refunded? +​ +​ +The way a refund is displayed in Expensify depends on the status of the expense (pending or posted) and whether or not the employee also submitted an accompanying SmartScanned receipt. Remember, a SmartScanned receipt will auto-merge with the Expensify Card expense. +​ +- Full refunds: +If a transaction is pending and doesn't have a receipt attached (except for eReceipts), getting a full refund will make the transaction disappear. +If a transaction is pending and has a receipt attached (excluding eReceipts), a full refund will zero-out the transaction (amount becomes zero). +- Partial refunds: +If a transaction is pending, a partial refund will reduce the amount of the transaction. +- If a transaction is posted, a partial refund will create a negative transaction for the refund amount. diff --git a/docs/articles/expensify-classic/expensify-card/Set-Up-the-Card-for-Your-Company.md b/docs/articles/expensify-classic/expensify-card/Set-Up-the-Card-for-Your-Company.md new file mode 100644 index 000000000000..8f87b36ef3d9 --- /dev/null +++ b/docs/articles/expensify-classic/expensify-card/Set-Up-the-Card-for-Your-Company.md @@ -0,0 +1,67 @@ +--- +title: Set Up the Card for your Company +description: Details on setting up the Expensify Card for your company as an admin +--- +# Overview + +If you’re an admin interested in rolling out the Expensify Card for your organization, you’re in the right place. This article will cover how to qualify and apply for the Expensify Card program and begin issuing cards to your employees. + +# How to qualify for the Expensify Card program + +There are three prerequisites to consider before applying for the Expensify Card: + +1. The email address associated with your account must be on a private domain +2. You must claim your private domain in Expensify +3. You must add and verify a US business bank account to your Expensify account + +To claim a domain, you must be a workspace admin with a company email address matching the domain you want to claim. After you create an account and set up a workspace, head to **Settings > Domains** to claim your domain. + +You can add a business bank account by navigating to **Settings > Account > Payments** and clicking Add Verified Bank Account. Follow the setup steps and complete the verification process as required. + +# How to apply for the Expensify Card + +Once you’ve claimed your domain and added a verified US business bank account, you can apply for the Expensify Card. There are multiple ways to apply for the card from the web: + +## From the home page + +1. Log into your Expensify account using your preferred web browser +2. Head to your account’s home page +3. On the task that says β€œIntroducing the Expensify Card,” click **Enable my Expensify Cards** to get started + +## From the Company Cards page + +1. Log into your Expensify account using your preferred web browser +2. Head to **Settings > Domains > _Domain Name_ > Company Cards** +3. Click **Get the Card** + +After we receive your application, we’ll review it ASAP and send you a confirmation email with the next steps once we have them. + +# How to issue cards + +After you’ve been approved, it’s time to set limits for your employees. Setting a limit triggers an email and task on the home page requesting the employee’s shipping address. Once they enter their details, a card will be shipped to them. We’ll also create a virtual card for the employee that can be used immediately. + +To set a limit, head over to the Company Cards UI via **Settings > Domains > _Domain Name_ > Company Cards**. Click the **Edit Limit** button next to members who need a card assigned, and set a non-$0 to issue them a card. + +If you have a validated domain, you can set a limit for multiple members by setting a limit for an entire domain group via **Settings > Domains > _Domain Name_ > Groups**. Keep in mind that custom limits that are set on an individual basis will override the group limit. + +The Company Cards page will act as a hub to view all employees who have been issued a card and where you can view and edit the individual card limits. You’ll also be able to see anyone who has requested a card but doesn’t have one yet. + +# FAQ + +## Are there foreign transaction fees? + +There are no foreign transaction fees when using your Expensify Card for international purchases. + +## How does the Expensify Card affect my or my company's credit score? + +Applying for or using the Expensify Card will never have any positive or negative effect on your personal credit score or your business's credit score. We do not consider your or your business' credit score when determining approval and your card limit. + +## How much does the Expensify Card cost? + +The Expensify Card is a free corporate card, and no fees are associated with it. In addition, if you use the Expensify Card, you can save money on your Expensify subscription. + +## If I have staff outside the US, can they use the Expensify Card? + +As long as the verified bank account used to apply for the Expensify Card is a US bank account, your cardholders can be anywhere in the world. + +Otherwise, the Expensify Card is not available for customers using non-US banks. With that said, launching international support is a top priority for us. Let us know if you’re interested in contacting support, and we’ll reach out as soon as the Expensify Card is available outside the United States. diff --git a/docs/articles/expensify-classic/expensify-card/Statements.md b/docs/articles/expensify-classic/expensify-card/Statements.md index b48d303a1a9b..5b583370b810 100644 --- a/docs/articles/expensify-classic/expensify-card/Statements.md +++ b/docs/articles/expensify-classic/expensify-card/Statements.md @@ -1,5 +1,73 @@ --- -title: Statements -description: Statements +title: β€” Expensify Card Statements and Settlements +description: Learn how the Expensify Card statement and settlements work! --- -## Resource Coming Soon! + +# Overview +Expensify offers several settlement types and a statement that provides a detailed view of transactions and settlements. We discuss specifics on both below. + +# How to use Expensify Card Statement and Settlements +## Using the statement +If your domain uses the Expensify Card and you have a validated Business Bank Account, access the Expensify Card statement at Settings > Domains > Company Cards > Reconciliation Tab > Settlements. + +The Expensify Card statement displays individual transactions (debits) and their corresponding settlements (credits). Each Expensify Cardholder has a Digital Card and a Physical Card, which are treated the same in settlement, reconciliation, and exporting to your accounting system. + +Here's a breakdown of crucial information in the statement: +- **Date:** For card payments, it shows the debit date; for card transactions, it displays the purchase date. +- **Entry ID:** This unique ID groups card payments and transactions together. +- **Withdrawn Amount:** This applies to card payments, matching the debited amount from the Business Bank Account. +- **Transaction Amount:** This applies to card transactions, matching the expense purchase amount. +- **User email:** Applies to card transactions, indicating the cardholder's Expensify email address. +- **Transaction ID:** A unique ID for locating transactions and assisting Expensify Support in case of issues. Transaction IDs are handy for reconciling pre-authorizations. To find the original purchase, locate the Transaction ID in the Settlements tab of the reconciliation dashboard, download the settlements as a CSV, and search for the Transaction ID within it. + +![Expanded card settlement that shows the various items that make up each card settlement.](https://help.expensify.com/assets/images/ExpensifyHelp_SettlementExpanded.png){:width="100%"} + +The Expensify Card statement only shows payments from existing Business Bank Accounts under Settings > Account > Payments > Business Accounts. If a Business Account is deleted, the statement won't contain data for payments from that account. + +## Exporting your statement +When using the Expensify Card, you can export your statement to a CSV with these steps: + + 1. Login to your account on the web app and click on Settings > Domains > Company Cards. + 2. Click the Reconciliation tab at the top right, then select Settlements. + 3. Enter your desired statement dates using the Start and End fields. + 4. Click Search to access the statement for that period. + 5. You can view the table or select Download to export it as a CSV. + +![Click the Download CSV button in the middle of the page to export your card settlements.](https://help.expensify.com/assets/images/ExpensifyHelp_SettlementExport.png){:width="100%"} + +## Expensify Card Settlement Frequency +Paying your Expensify Card balance is simple with automatic settlement. There are two settlement frequency options: + - **Daily Settlement:** Your Expensify Card balance is paid in full every business day, meaning you’ll see an itemized debit each business day. + - **Monthly Settlement:** Expensify Cards are settled monthly, with your settlement date determined during the card activation process. With monthly, you’ll see only one itemized debit per month. (Available for Plaid-connected bank accounts with no recent negative balance.) + +## How settlement works +Each business day (Monday through Friday, excluding US bank holidays) or on your monthly settlement date, we calculate the total of posted Expensify Card transactions since the last settlement. The settlement amount represents what you must pay to bring your Expensify Card balance back to $0. + +We'll automatically withdraw this settlement amount from the Verified Business Bank Account linked to the primary domain admin. You can set up this bank account in the web app under Settings > Account > Payments > Bank Accounts. + +Once the payment is made, your Expensify Card balance will be $0, and the transactions are considered "settled." + +To change your settlement frequency or bank account, go to Settings > Domains > [Domain Name] > Company Cards. On the Company Cards page, click the Settings tab, choose a new settlement frequency or account from the dropdown menu, and click Save to confirm the change. + +![Change your card settlement account or settlement frequency via the dropdown menus in the middle of the screen.](https://help.expensify.com/assets/images/ExpensifyHelp_CardSettings.png){:width="100%"} + +# Expensify Card Statement and Settlements FAQs +## Can you pay your balance early if you've reached your Domain Limit? +If you've chosen Monthly Settlement, you can manually initiate settlement using the "Settle Now" button. We'll settle the outstanding balance and then perform settlement again on your selected predetermined monthly settlement date. + +If you opt for Daily Settlement, the Expensify Card statement will automatically settle daily through an automatic withdrawal from your business bank account. No additional action is needed on your part. + +## Will our domain limit change if our Verified Bank Account has a higher balance? +Your domain limit may fluctuate based on your cash balance, spending patterns, and history with Expensify. Suppose you've recently transferred funds to the business bank account linked to Expensify card settlements. In that case, you should expect a change in your domain limit within 24 hours of the transfer (assuming your business bank account is connected through Plaid). + +## How is the β€œAmount Owed” figure on the card list calculated? +The amount owed consists of all Expensify Card transactions, both pending and posted, since the last settlement date. The settlement amount withdrawn from your designated Verified Business Bank Account only includes posted transactions. + +Your amount owed decreases when the settlement clears. Any pending transactions that don't post timely will automatically expire, reducing your amount owed. + +## **How do I view all unsettled expenses?** +To view unsettled expenses since the last settlement, use the Reconciliation Dashboard's Expenses tab. Follow these steps: + 1. Note the dates of expenses in your last settlement. + 2. Switch to the Expenses tab on the Reconciliation Dashboard. + 3. Set the start date just after the last settled expenses and the end date to today. + 4. The Imported Total will show the outstanding amount, and you can click through to view individual expenses. diff --git a/docs/articles/new-expensify/exports/Coming-Soon.md b/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md similarity index 100% rename from docs/articles/new-expensify/exports/Coming-Soon.md rename to docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md diff --git a/docs/articles/expensify-classic/getting-started/playbooks/Expensify-Playbook-For-Small-To-Medium-Sized-Businesses.md b/docs/articles/expensify-classic/getting-started/playbooks/Expensify-Playbook-For-Small-To-Medium-Sized-Businesses.md index a7553e6ae179..d933e66cc2d1 100644 --- a/docs/articles/expensify-classic/getting-started/playbooks/Expensify-Playbook-For-Small-To-Medium-Sized-Businesses.md +++ b/docs/articles/expensify-classic/getting-started/playbooks/Expensify-Playbook-For-Small-To-Medium-Sized-Businesses.md @@ -3,18 +3,18 @@ title: Expensify Playbook for Small to Medium-Sized Businesses description: Best practices for how to deploy Expensify for your business redirect_from: articles/playbooks/Expensify-Playbook-for-Small-to-Medium-Sized-Businesses/ --- -## Overview +# Overview This guide provides practical tips and recommendations for small businesses with 100 to 250 employees to effectively use Expensify to improve spend visibility, facilitate employee reimbursements, and reduce the risk of fraudulent expenses. - See our [US-based VC-Backed Startups](https://help.expensify.com/articles/playbooks/Expensify-Playbook-for-US-based-VC-Backed-Startups) if you are more concerned with top-line revenue growth -## Who you are +# Who you are As a small to medium-sized business owner, your main aim is to achieve success and grow your business. To achieve your goals, it is crucial that you make worthwhile investments in both your workforce and your business processes. This means providing your employees with the resources they need to generate revenue effectively, while also adopting measures to guarantee that expenses are compliant. -## Step-by-step instructions for setting up Expensify +# Step-by-step instructions for setting up Expensify This playbook is built on best practices we’ve developed after processing expenses for tens of thousands of companies around the world. As such, use this playbook as your starting point, knowing that you can customize Expensify to suit your business needs. Every company is different, and your dedicated Setup Specialist is always one chat away with any questions you may have. -### Step 1: Create your Expensify account +## Step 1: Create your Expensify account If you don't already have one, go to *[new.expensify.com](https://new.expensify.com)* and sign up for an account with your work email address. The account is free so don’t worry about the cost at this stage. > _Employees really appreciate how easy it is to use, and the fact that the reimbursement drops right into their bank account. Since most employees are submitting expenses from their phones, the ease of use of the app is critical_ @@ -22,7 +22,7 @@ If you don't already have one, go to *[new.expensify.com](https://new.expensify. > **Robyn Gresham** > Senior Accounting Systems Manager at SunCommon -### Step 2: Create a Control Policy +## Step 2: Create a Control Policy There are three policy types, but for your small business needs we recommend the *Control Plan* for the following reasons: - *The Control Plan* is designed for organizations with a high volume of employee expense submissions, who also rely on compliance controls @@ -40,7 +40,7 @@ To create your Control Policy: The Control Plan also gives you access to a dedicated Setup Specialist. You can find yours by looking at your policy's *#admins* room in *[new.expensify.com](https://new.expensify.com)*, and in your company’s policy settings in the *Overview* tab, where you can chat with them and schedule an onboarding call to walk through any setup questions. The Control Plan bundled with the Expensify Card is only *$9 per user per month* (not taking into account cash back your earn) when you commit annually. That’s a 75% discount off the unbundled price point if you choose to use a different Corporate Card (or no) provider. -### Step 3: Connect your accounting system +## Step 3: Connect your accounting system As a small to medium-sized business, it's important to maintain proper spend management to ensure the success and stability of your organization. This requires paying close attention to your expenses, streamlining your financial processes, and making sure that your financial information is accurate, compliant, and transparent. Include best practices such as: - Every purchase is categorized into the correct account in your chart of accounts @@ -65,7 +65,7 @@ Check out the links below for more information on how to connect to your account *β€œEmployees really appreciate how easy it is to use, and the fact that the reimbursement drops right into their bank account. Since most employees are submitting expenses from their phones, the ease of use of the app is critical.”* - Robyn Gresham, Senior Accounting Systems Manager at SunCommon -### Step 4: Set category-specific compliance controls +## Step 4: Set category-specific compliance controls Head over to the *Categories* tab to set compliance controls on your newly imported list of categories. More specifically, we recommend the following: 1. First, enable *People Must Categorize Expenses*. Employees must select a category for each expense, otherwise, in most cases, it’s more work on you and our accounting connections will simply reject any attempt to export. @@ -78,7 +78,7 @@ Head over to the *Categories* tab to set compliance controls on your newly impor 3. Disable any irrelevant expense categories that aren’t associated with employee spend 4. Configure *auto-categorization*, located just below your category list in the same tab. The section is titled *Default Categories*. Just find the right category, and match it with the presented category groups to allow for MCC (merchant category code) automated category selection with every imported connected card transaction. -### Step 5: Make sure tags are required, or defaults are set +## Step 5: Make sure tags are required, or defaults are set Tags in Expensify often relate to departments, projects/customers, classes, and so on. And in some cases they are *required* to be selected on every transactions. And in others, something like *departments* is a static field, meaning we could set it as an employee default and not enforce the tag selection with each expense. *Make Tags Required* @@ -89,7 +89,7 @@ In the tags tab in your policy settings, you’ll notice the option to enable th *Set Tags as an Employee Default* Separately, if your policy is connected to NetSuite or Sage Intacct, you can set departments, for example, as an employee default. All that means is we’ll apply the department (for example) that’s assigned to the employee record in your accounting package and apply that to every exported transaction, eliminating the need for the employee to have to manually select a department for each expense. -### Step 6: Set rules for all expenses regardless of categorization +## Step 6: Set rules for all expenses regardless of categorization In the Expenses tab in your group Control policy, you’ll notice a *Violations* section designed to enforce top-level compliance controls that apply to every expense, for every employee in your policy. We recommend the following confiuration: *Max Expense Age: 90 days (or leave it blank)* @@ -105,7 +105,7 @@ Receipts are important, and in most cases you prefer an itemized receipt. Howeve At this point, you’ve set enough compliance controls around categorical spend and general expenses for all employees, such that you can put trust in our solution to audit all expenses up front so you don’t have to. Next, let’s dive into how we can comfortably take on more automation, while relying on compliance controls to capture bad behavior (or better yet, instill best practices in our employees). -### Step 7: Set up scheduled submit +## Step 7: Set up scheduled submit For an efficient company, we recommend setting up [Scheduled Submit](https://community.expensify.com/discussion/4476/how-to-enable-scheduled-submit-for-a-group-policy) on a *Daily* frequency: - Click *Settings > Policies* @@ -125,7 +125,7 @@ Expenses with violations will stay behind for the employee to fix, while expense > Kevin Valuska > AP/AR at Road Trippers -### Step 8: Connect your business bank account (US only) +## Step 8: Connect your business bank account (US only) If you’re located in the US, you can utilize Expensify’s payment processing and reimbursement features. *Note:* Before you begin, you’ll need the following to validate your business bank account: @@ -145,7 +145,7 @@ Let’s walk through the process of linking your business bank account: You only need to do this once: you are fully set up for not only reimbursing expense reports, but issuing Expensify Cards, collecting customer invoice payments online (if applicable), as well as paying supplier bills online. -### Step 9: Invite employees and set an approval workflow +## Step 9: Invite employees and set an approval workflow *Select an Approval Mode* We recommend you select *Advanced Approval* as your Approval Mode to set up a middle-management layer of a approval. If you have a single layer of approval, we recommend selecting [Submit & Approve](https://community.expensify.com/discussion/5643/deep-dive-submit-and-approve). But if *Advanced Approval* if your jam, keep reading! @@ -159,13 +159,13 @@ In most cases, at this stage, approvers prefer to review all expenses for a few In this case we recommend setting *Manually approve all expenses over: $0* -### Step 10: Configure Auto-Approval +## Step 10: Configure Auto-Approval Knowing you have all the control you need to review reports, we recommend configuring auto-approval for *all reports*. Why? Because you’ve already put reports through an entire approval workflow, and manually triggering reimbursement is an unnecessary action at this stage. 1. Navigate to *Settings > Policies > Group > [Policy Name] > Reimbursement* 2. Set your *Manual Reimbursement threshold to $20,0000* -### Step 11: Enable Domains and set up your corporate card feed for employees +## Step 11: Enable Domains and set up your corporate card feed for employees Expensify is optimized to work with corporate cards from all banks – or even better, use our own perfectly integrated *[Expensify Card](https://use.expensify.com/company-credit-card)*. The first step for connecting to any bank you use for corporate cards, and the Expensify Card is to validate your company’s domain in Domain settings. To do this: @@ -173,7 +173,7 @@ To do this: - Click *Settings* - Then select *Domains* -#### If you have an existing corporate card +### If you have an existing corporate card Expensify supports direct card feeds from most financial institutions. Setting up a corporate card feed will pull in the transactions from the connected cards on a daily basis. To set this up, do the following: 1. Go to *Company Cards >* Select your bank @@ -187,7 +187,7 @@ Expensify supports direct card feeds from most financial institutions. Setting u As mentioned above, we’ll be able to pull in transactions as they post (daily) and handle receipt matching for you and your employees. One benefit of the Expensify Card for your company is being able to see transactions at the point of purchase which provides you with real-time compliance. We even send users push notifications to SmartScan their receipt when it’s required and generate IRS-compliant e-receipts as a backup wherever applicable. -#### If you don't have a corporate card, use the Expensify Card (US only) +### If you don't have a corporate card, use the Expensify Card (US only) Expensify provides a corporate card with the following features: - Up to 2% cash back (up to 4% in your first 3 months!) @@ -214,7 +214,7 @@ Once the Expensify Cards have been assigned, each employee will be prompted to e If you have an accounting system we directly integrate with, check out how we take automation a step further with [Continuous Reconciliation](https://community.expensify.com/discussion/7335/faq-what-is-the-expensify-card-auto-reconciliation-process). We’ll create an Expensify Card clearing and liability account for you. Each time settlement occurs, we’ll take the total amount of your purchases and create a journal entry that credits the settlement account and debits the liability account - saving you hours of manual reconciliation work at the end of your statement period. -### Step 12: Set up Bill Pay and Invoicing +## Step 12: Set up Bill Pay and Invoicing As a small business, managing bills and invoices can be a complex and time-consuming task. Whether you receive bills from vendors or need to invoice clients, it's important to have a solution that makes the process simple, efficient, and cost-effective. Here are some of the key benefits of using Expensify for bill payments and invoicing: @@ -246,7 +246,7 @@ Reports, invoices, and bills are largely the same, in theory, just with differen You’ll notice it’s a slightly different flow from creating a Bill. Here, you are adding the transactions tied to the Invoice, and establishing a due date for when it needs to get paid. If you need to apply any markups, you can do so from your policy settings under the Invoices tab. Your customers can pay their invoice in Expensify via ACH, or Check, or Credit Card. -### Step 13: Run monthly, quarterly and annual reporting +## Step 13: Run monthly, quarterly and annual reporting At this stage, reporting is important and given that Expensify is the primary point of entry for all employee spend, we make reporting visually appealing and wildly customizable. 1. Head to the *Expenses* tab on the far left of your left-hand navigation @@ -261,7 +261,7 @@ We recommend reporting: ![Expenses!](https://help.expensify.com/assets/images/playbook-expenses.png){:width="100%"} -### Step 14: Set your Subscription Size and Add a Payment card +## Step 14: Set your Subscription Size and Add a Payment card Our pricing model is unique in the sense that you are in full control of your billing. Meaning, you have the ability to set a minimum number of employees you know will be active each month and you can choose which level of commitment fits best. We recommend setting your subscription to *Annual* to get an additional 50% off on your monthly Expensify bill. In the end, you've spent enough time getting your company fully set up with Expensify, and you've seen how well it supports you and your employees. Committing annually just makes sense. To set your subscription, head to: @@ -280,5 +280,5 @@ Now that we’ve gone through all of the steps for setting up your account, let 3. Enter your name, card number, postal code, expiration and CVV 4. Click *Accept Terms* -## You’re all set! +# You’re all set! Congrats, you are all set up! If you need any assistance with anything mentioned above or would like to understand other features available in Expensify, reach out to your Setup Specialist directly in *[new.expensify.com](https://new.expensify.com)*. Don’t have one yet? Create a Control Policy, and we’ll automatically assign a dedicated Setup Specialist to you. diff --git a/docs/articles/expensify-classic/exports/Custom-Templates.md b/docs/articles/expensify-classic/insights-and-custom-reporting/Custom-Templates.md similarity index 100% rename from docs/articles/expensify-classic/exports/Custom-Templates.md rename to docs/articles/expensify-classic/insights-and-custom-reporting/Custom-Templates.md diff --git a/docs/articles/expensify-classic/exports/Default-Export-Templates.md b/docs/articles/expensify-classic/insights-and-custom-reporting/Default-Export-Templates.md similarity index 100% rename from docs/articles/expensify-classic/exports/Default-Export-Templates.md rename to docs/articles/expensify-classic/insights-and-custom-reporting/Default-Export-Templates.md diff --git a/docs/articles/expensify-classic/exports/Insights.md b/docs/articles/expensify-classic/insights-and-custom-reporting/Insights.md similarity index 100% rename from docs/articles/expensify-classic/exports/Insights.md rename to docs/articles/expensify-classic/insights-and-custom-reporting/Insights.md diff --git a/docs/articles/expensify-classic/exports/Other-Export-Options.md b/docs/articles/expensify-classic/insights-and-custom-reporting/Other-Export-Options.md similarity index 100% rename from docs/articles/expensify-classic/exports/Other-Export-Options.md rename to docs/articles/expensify-classic/insights-and-custom-reporting/Other-Export-Options.md diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct.md b/docs/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct.md index 3ee1c8656b4b..ac0a90ba6d37 100644 --- a/docs/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct.md +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/Sage-Intacct.md @@ -1,5 +1,568 @@ --- -title: Coming Soon -description: Coming Soon +title: Sage Intacct +description: Connect your Expensify workspace with Sage Intacct --- -## Resource Coming Soon! +# Overview +Expensify’s seamless integration with Sage Intacct allows you to connect using either Role-based permissions or User-based permissions. + +Once connected to Intacct you’re able to automate report exports, customize your coding preferences, and utilize Sage Intacct’s advanced features. When you’ve configured these settings in Expensify correctly, you can use the integration's settings to automate many tasks, streamlining your workflow for increased efficiency. + +# How to connect to Sage Intacct +We support setting up Sage Intacct with both User-based permissions and Role-based permissions for Expense Reports and Vendor Bills. +- User-based Permissions - Expense Reports +- User-based Permissions - Vendor Bills +- Role-based Permissions - Expense Reports +- Role-based Permissions - Vendor Bills + + +## User-based Permissions - Expense Reports + +Please follow these steps if exporting as Expense Reports with **user-based permissions**. + + +### Checklist of items to complete: +1. Create a web services user and set up permissions. +2. Enable the Time & Expenses module **(Required if exporting as Expense Reports)**. +3. Set up Employees in Sage Intacct **(Required if exporting as Expense Reports)**. +4. Set up Expense Types in Sage Intacct **(Required if exporting as Expense Reports)**. +5. Enable Customization Services (only applicable if you don't already use Platform Services). +6. Create a test workspace and download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage). +7. Upload the Package in Sage Intacct. +8. Add web services authorization. +9. Enter credentials and connect Expensify and Sage Intacct. +10. Configure integration sync options. +11. Export a test report. +12. Connect Sage Intacct to the production workspace. + + +### Step 1: Create a web services user with user-based permissions + +_Note: If the steps in this section look different in your Sage Intacct instance, you likely use role-based permissions. If that's the case, see the steps below on creating a web services user for role-based permissions._ +To connect to Sage Intacct, you'll need to create a special web services user. This user is essential for tracking actions in Sage Intacct, such as exporting expense reports and credit card charges from Expensify. It also helps ensure smooth operations when new members join or leave your accounting team. The good news is that setting up this web services user won't cost you anything. Just follow these steps: +Go to **Company > Web Services Users > New** +Setup the user using these configurations: + - **User ID:** "xmlgateway_expensify" + - **Last Name and First Name:** "Expensify" + - **Email Address:** Your shared accounting team email + - **User Type:** "Business" + - **Admin Privileges:** "Full" + - **Status:** "Active" +Once you've created the user, you'll need to set the correct permissions. To set those, go to the **subscription** link for this user in the user list, **click on the checkbox** next to the Application/Module and then click on the **Permissions** link to modify those. + +These are the permissions required for a user to export reimbursable expenses as Expense Reports: +- **Administration (All)** +- **Company (Read-only)** +- **Cash Management (All)** +- **General Ledger (All)** +- **Time & Expense (All)** +- **Projects (Read-only)** (only needed if using Projects and Customers) +- **Accounts Payable (All)** (only needed for exporting non-reimbursable expenses as vendor bills) + +**Note:** you can set permissions for each Application/Module by selecting the radio button next to the desired Permission and clicking **Save**. + + +### Step 2: Enable the Time & Expenses Module (Only required if exporting reimbursable expenses as Expense Reports) +The Time & Expenses (T&E) module is often included in your Sage Intacct instance, but if it wasn't part of your initial Sage Intacct setup, you may need to enable it. **Enabling the T&E module is a paid subscription through Sage Intacct. For information on the costs of enabling this module, please contact your Sage Intacct account manager**. It's necessary for our integration and only takes a few minutes to configure. +1. In Sage Intacct, go to the **Company menu > Subscriptions > Time & Expenses** and toggle the switch to subscribe. +2. After enabling T&E, configure it as follows: + - Ensure that **Expense types** is checked: + - Under **Auto-numbering sequences** set the following: + - **Expense Report:** EXP + - **Employee:** EMP + - **Duplicate Numbers:** Select β€œDo not allow creation” + + - To create the EXP sequence, **click on the down arrow on the expense report line and select **Add**: + - **Sequence ID:** EXP + - **Print Title:** EXPENSE REPORT + - **Starting Number:** 1 + - **Next Number:** 2 +3. Select **Advanced Settings** and configure the following: +- **Fixed Number Length:** 4 +- **Fixed Prefix:** EXP +4. Click **Save** +5. Under Expense Report approval settings, ensure that **Enable expense report approval** is unchecked +6. Click **Save** to confirm your configurations. + + +### Step 3: Set up Employees in Sage Intacct (Only required if exporting reimbursable expenses as Expense Reports) +To set up Employees in Sage Intacct, follow these steps: +1. Navigate to **Time & Expenses** and click the plus button next to **Employees**. + - If you don't see the Time & Expense option in the top ribbon, you may need to adjust your settings. Go to **Company > Roles > Time & Expenses** and enable all permissions. +2. To create an employee, you'll need to provide the following information: + - **Employee ID** + - **Primary contact name** + - **Email address** + - In the **Primary contact name** field, click the dropdown arrow. + - Select the employee if they've already been created. + - Otherwise, click **+ Add** to create a new employee. + - Fill in their **Primary Email Address** along with any other required information. + + +### Step 4: Set up Expense Types in Sage Intacct (Only required if exporting reimbursable expenses as Expense Reports) + +Expense Types provide a user-friendly way to display the names of your expense accounts to your employees. They are essential for our integration. To set up Expense Types, follow these steps: +1. **Setup Your Chart of Accounts:** Before configuring Expense Types, ensure your Chart of Accounts is set up. You can set up accounts in bulk by going to **Company > Open Setup > Company Setup Checklist > click Import**. +2. **Set up Expense Types:** + - Go to **Time & Expense**. + - Open Setup and click the plus button next to **Expense Types**. +3. For each Expense Type, provide the following information: + - **Expense Type** + - **Description** + - **Account Number** (from your General Ledger) +This step is necessary if you are exporting reimbursable expenses as Expense Reports. + + +### Step 5: Enable Customization Services +To enable Customization Services go to **Company > Subscriptions > Customization Services**. + - If you already have Platform Services enabled, you can skip this step. + + +### Step 6: Create a Test Workspace in Expensify and Download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) +Creating a test workspace in Expensify allows you to have a sandbox environment for testing before implementing the integration live. If you are already using Expensify, creating a test workspace ensures that your existing group workspace rules and approval workflows remain intact. Here's how to set it up: +1. Go to **expensify.com > Settings > Workspaces > New Workspace**. +2. Name the workspace something like "Sage Intacct Test Workspace." +3. Go to **Connections > Sage Intacct > Connect to Sage Intacct**. +4. Select **Download Package** (You only need to download the file; we'll upload it from your Downloads folder later). + + +### Step 7: Upload Package in Sage Intacct + + +If you use **Customization Services**: +1. Go to **Customization Services > Custom Packages > New Package**. +2. Click on **Choose File** and select the Package file from your downloads folder. +3. Click **Import**. + + +If you use **Platform Services**: +1. Go to **Platform Services > Custom Packages > New Package**. +2. Click on **Choose File** and select the Package file from your downloads folder. +3. Click **Import**. + + +### Step 8: Add Web Services Authorization +1. Go to **Company > Company Info > Security** in Intacct and click **Edit**. +2. Scroll down to **Web Services Authorizations** and add "expensify" (all lower case) as a Sender ID. + + +### Step 9: Enter Credentials and Connect Expensify and Sage Intacct + + +1. Go back to **Settings > Workspaces > Group > [Workspace Name] > Connections > Configure**. +2. Click **Connect to Sage Intacct** and enter the credentials you've set for your web services user. +3. Click **Send** once you're done. + +Next, you’ll configure the Export, Coding, and Advanced tabs of the connection configuration in Expensify. + + +## User-based Permissions - Vendor Bills +In this setup guide, we'll take you through the steps to establish your connection for Vendor Bills with user-based permissions. Please follow this checklist of items to complete: +1. Create a web services user and set up permissions. +2. Enable Customization Services (only required if you don't already use Platform Services). +3. Create a test workspace in Expensify and download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) +4. Upload the Package in Sage Intacct. +5. Add web services authorization. +6. Enter credentials and connect Expensify and Sage Intacct. +7. Configure integration sync options. + + +### Step 1: Create a web services user with user-based permissions +**Note:** If the steps in this section look different in your Sage Intacct instance, you likely use role-based permissions. If that's the case, see the steps below on creating a web services user for role-based permissions. +To connect to Sage Intacct, it's necessary to set up a web services user. This user simplifies tracking activity within Sage Intacct, such as exporting expense reports and credit card charges from Expensify. It also ensures a seamless transition when someone joins or leaves your accounting department. Setting up the web services user is free of charge. Please follow these steps: +1. Go to **Company > Web Services Users > New**. +2. Configure the user as shown in the screenshot below, making sure to follow these guidelines: + - **User ID:** "xmlgateway_expensify" + - **Last Name and First Name:** "Expensify" + - **Email Address:** Your shared accounting team email + - **User Type:** "Business" + - **Admin Privileges:** "Full" + - **Status:** "Active" + + +Once you've created the user, you'll need to set the correct permissions. To do this, follow these steps: +1. Go to the subscription link for this user in the user list. +2. Click on the checkbox next to the Application/Module you want to modify permissions for. +3. Click on the **Permissions** link to make modifications. + +These are the permissions the user needs to have if exporting reimbursable expenses as Vendor Bills: +- **Administration (All)** +- **Company (Read-only)** +- **Cash Management (All)** +- **General Ledger (All)** +- **Accounts Payable (All)** +- **Projects (Read-only)** (required if you're going to be using Projects and Customers) + +**Note:** that selecting the radio button next to the Permission you want and clicking **Save** will set the permission for that particular Application/Module. + + +### Step 2: Enable Customization Services (only applicable if you don't already use Platform Services) +To enable Customization Services go to **Company > Subscriptions > Customization Services**. + - If you already have Platform Services enabled, you can skip this step. + +### Step 3: Create a Test Workspace in Expensify and Download [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) +Creating a test workspace in Expensify allows you to establish a sandbox environment for testing before implementing the integration in a live environment. If you're already using Expensify, creating a test workspace ensures that your existing company workspace rules and approval workflows remain intact. Here's how to set it up: +1. Go to **expensify.com > Settings > Workspaces > Groups > New Workspace**. +2. Name the workspace something like "Sage Intacct Test Workspace." +3. Go to **Connections > Sage Intacct > Connect to Sage Intacct**. +4. Select "I've completed these" if you've downloaded the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) and completed the previous steps in Sage Intacct. +5. Select **Download Package** (You only need to download the file; we'll upload it from your Downloads folder later). + +### Step 4: Upload the Package in Sage Intacct +If you use **Customization Services**: + +1. Go to **Customization Services > Custom Packages > New Package**. +2. Click on **Choose File** and select the Package file from your downloads folder. +3. Click **Import**. + + +If you use **Platform Services**: + +1. Go to **Platform Services > Custom Packages > New Package**. +2. Click on **Choose File** and select the Package file from your downloads folder. +3. Click **Import**. + +### Step 5: Add Web Services Authorization +1. Go to **Company > Company Info > Security** in Intacct and click **Edit**. +2. Scroll down to **Web Services Authorizations** and add "expensify" (all lowercase) as a Sender ID. + +### Step 6: Enter Credentials and Connect Expensify with Sage Intacct +1. Go back to **Settings > Workspaces > Groups > [Workspace Name] > Connections > Configure**. +2. Click on **Connect to Sage Intacct**. +3. Enter the credentials that you've previously set for your web services user. +4. Click **Send** once you've finished entering the credentials. + +Next, you’ll configure the Export, Coding, and Advanced tabs of the connection configuration in Expensify. + + + +## Role-based Permissions - Expense Reports + +For this setup guide, we're going to walk you through how to get your connection up and running as Expense Reports with role-based permissions. + +### Checklist of items to complete: + +1. Create web services user and set up permissions +2. Enable Time & Expenses module +3. Set up Employees in Sage Intacct +4. Set up Expense Types in Sage Intacct +5. Enable Customization Services (only applicable if you don't already use Platform Services) +6. Create a test workspace and download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) +7. Upload the Package in Sage Intacct +8. Add web services authorization +9. Enter credentials and connect Expensify and Sage Intacct +10. Configure integration sync options + + +### Step 1: Create a web services user with role-based permissions + +In Sage Intacct, click **Company**, then click on the **+** button next to **Roles**. + +Name the role, then click **Save**. + +Go to **Roles > Subscriptions** for the "Expensify" role you just created. + +Set the permissions for this role by clicking the checkbox and then clicking on the **Permissions** hyperlink. + +These are the permissions required for a user to export reimbursable expenses as Expense Reports: +- **Administration (All)** +- **Company (Read-only)** +- **Cash Management (All)** +- **General Ledger (All)** +- **Time & Expense (All)** +- **Projects (Read-only)** (only needed if using Projects and Customers) +- **Accounts Payable (All)** (only needed for exporting non-reimbursable expenses as vendor bills) + +Now, you'll need to create a web services user and assign this role to that user. + +- **Company > Web Services Users > New** +- Set up the user like the screenshot below, making sure to do the following: + - User ID: β€œxmlgateway_expensify" + - Last name and First name: "Expensify" + - Email address: your shared accounting team email + - User type: "Business" + - Admin privileges: "Full" + - Status: "Active" + +To assign the role, go to **Roles Information**: + +- Click the **+** button, then find the "Expensify" role and click **Save**. + +### Step 2: Enable the Time & Expenses module (Only required if exporting reimbursable expenses as Expense Reports) + +The T&E module often comes standard on your Sage Intacct instance, but you may need to enable it if it was not a part of your initial Sage Intacct implementation. Enabling the T&E module is a paid subscription through Sage Intacct. Please reach out to your Sage Intacct account manager with any questions on the costs of enabling this module. It's required for our integration and takes just a few minutes to configure. + +In Sage Intacct, click on the **Company** menu > **Subscriptions** > **Time & Expenses** and click the toggle to subscribe. + +Once you've enabled T&E, you'll need to configure it properly: +- Ensure that **Expense types** is checked. +- Under Auto-numbering sequences, please set the following: + - To create the EXP sequence, click on the down arrow on the expense report line > **Add** + - Sequence ID: EXP + - Print Title: EXPENSE REPORT + - Starting Number: 1 + - Next Number: 2 + - Once you've done this, select **Advanced Settings** + - Fixed Number Length: 4 + - Fixed Prefix: EXP + - Once you've done this, hit **Save** +- Under Expense Report approval settings, make sure the "Enable expense report approval" is unchecked. +- Click **Save**! + +### Step 3: Set up Employees in Sage Intacct (Only required if exporting reimbursable expenses as Expense Reports) + +In order to set up Employees, go to **Time & Expenses** > click the plus button next to **Employees**. If you don't see Time & Expense in the top ribbon, you may need to adjust your settings by going to **Company > Roles > Time & Expenses > Enable all permissions**. To create an employee, you'll need to insert the following information: +- Employee ID +- Primary contact name +- Email address (click the dropdown arrow in the Primary contact name field) > select the employee if they've already been created. Otherwise click **+ Add** > fill in their Primary Email Address along with any other information you require. + +### Step 4: Set up Expense Types in Sage Intacct (only required if exporting reimbursable expenses as Expense Reports) + +Expense Types are a user-friendly way of displaying the names of your expense accounts to your employees. They are required for our integration. In order to set up Expense Types, you'll first need to setup your Chart of Accounts (these can be set up in bulk by going to **Company > Open Setup > Company Setup Checklist > click Import**). + +Once you've setup your Chart of Accounts, to set Expense Types, go to **Time & Expense** > **Open Setup** > click the plus button next to **Expense Types**. For each Expense Type, you'll need to include the following information: +- Expense Type +- Description +- Account Number (from your GL) + +### Step 5: Enable Customization Services + +To enable, go **Company > Subscriptions > Customization Services** (if you already have Platform Services enabled, you will skip this step). + +### Step 6: Create a test workspace in Expensify and download [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) + +The test workspace will be used as a sandbox environment where we can test before going live with the integration. If you're already using Expensify, creating a test workspace will ensure that your existing group workspace rules, approval workflow, etc remain intact. In order to set this up: + +- Go to **expensify.com > Settings > Workspaces > New Workspace** +- Name the workspace something like "Sage Intacct Test Workspace" +- Go to **Connections > Sage Intacct > Connect to Sage Intacct** +- Select **Download Package** (All you need to do is download the file. We'll upload it from your Downloads folder later). + +### Step 7: Upload Package in Sage Intacct + +If you use Customization Services: + +- **Customization Services > Custom Packages > New Package > Choose File >** select the Package file from your downloads folder > Import + +If you use Platform Services: + +- **Platform Services > Custom Packages > New Package > Choose File >** select the Package file from your downloads folder > Import + +### Step 8: Add web services authorization + +- Go to **Company > Company Info > Security** in Intacct and click Edit. Next, scroll down to Web Services authorizations and add "expensify" (this must be all lower case) as a Sender ID. + +### Step 9: Enter credentials and connect Expensify and Sage Intacct + +- Now, go back to **Settings > Workspaces > Group > [Workspace Name] > Connections > Configure > Connect to Sage Intacct** and enter the credentials that you've set for your web services user. Click Send once you're done. + +Next, follow the links in the related articles section below to complete the configuration for the Export, Coding, and Advanced tabs of the connection settings. + +## Role-based Permissions - Vendor Bills + +Follow the steps below to set up Sage Intacct with role-based permissions and export Vendor Bills: + +### Checklist of items to complete: + +1. Create a web services user and configure permissions. +2. Enable Customization Services (if not using Platform Services). +3. Create a test workspace in Expensify and download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage). +4. Upload the Package in Sage Intacct. +5. Add web services authorization. +6. Enter credentials and connect Expensify and Sage Intacct. +7. Configure integration sync options. + + +### Step 1: Create a web services user with role-based permissions + +In Sage Intacct: +- Navigate to "Company" and click the **+** button next to "Roles." +- Name the role and click **Save**. +- Go to "Roles" > "Subscriptions" for the "Expensify" role you created. +- Set the permissions for this role by clicking the checkbox and then clicking on the Permissions hyperlink + + +These are the permissions required for a user to export reimbursable expenses as Vendor Bills: +- **Administration (All)** +- **Company (Read-only)** +- **Cash Management (All)** +- **General Ledger (All)** +- **Time & Expense (All)** +- **Projects (Read-only)** (only needed if using Projects and Customers) +- **Accounts Payable (All)** (only needed for exporting non-reimbursable expenses as vendor bills) + + +- Create a web services user: + - Go to **Company > Web Services Users > New** + - Configure the user as follows: + - User ID: "xmlgateway_expensify" + - Last Name and First Name: "Expensify" + - Email Address: Your shared accounting team email + - User Type: "Business" + - Admin Privileges: "Full" + - Status: "Active" + - To assign the role, go to "Roles Information", click the **+** button, find the "Expensify" role, and click **Save** + +### Step 2: Enable Customization Services + +Only required if you don't already use Platform Services: +- To enable, go to **Company > Subscriptions > Customization Services** + +### Step 3: Create a test workspace in Expensify and download the [Expensify Package](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fwww.expensify.com%2Ftools%2Fintegrations%2FdownloadPackage) + +Create a test workspace in Expensify: +- Go to **Settings > Workspaces** and click **New Workspace** on the Expensify website. +- Name the workspace something like "Sage Intacct Test Workspace." +- Once created, navigate to **Settings > Workspaces > [Group Workspace Name] > Connections > Accounting Integrations > Connect to Sage Intacct** +- Select **Create a new Sage Intacct connection/Connect to Sage Intacct** +- Select **Download Package** (We'll upload it from your Downloads folder later.) + +### Step 4: Upload Package in Sage Intacct + +If you use **Customization Services**: +- Go to **Customization Services > Custom Packages > New Package > Choose File > select the Package file from your downloads folder > Import**. + +If you use **Platform Services**: +- Go to **Platform Services > Custom Packages > New Package > Choose File > select the Package file from your downloads folder > Import**. + +### Step 5: Add web services authorization + +- Go to **Company > Company Info > Security** in Intacct and click **Edit** +- Scroll down to **Web Services Authorizations** and add **expensify** (all lowercase) as a Sender ID. + +### Step 6: Enter credentials and connect Expensify and Sage Intacct + +Now, go back to **Settings > Workspaces > [Group Workspace Name] > Connections > Accounting Integrations > Configure > Connect to Sage Intacct** and enter the credentials you set for your web services user. Click **Send** when finished. + +### Step 7: Configure your connection + +Once the initial sync completes, you may receive the error "No Expense Types Found" if you're not using the Time and Expenses module. Close the error dialogue, and your configuration options will appear. Switch the reimbursable export option to **Vendor Bills** and click **Save** before completing your configuration. + +Next, refer to the related articles section below to finish configuring the Export, Coding, and Advanced tabs of the connection configuration. + +# How to configure export settings + +When you connect Intacct with Expensify, you can configure how information appears once exported. To do this, Admins who are connected to Intacct can go to **Settings > Workspaces > Group > [Workspace Name] > Connections**, and then click on **Configure** under Intacct. This is where you can set things up the way you want. + + +## Preferred Exporter + +Any workspace admin can export to Sage Intacct, but only the preferred exporter will see reports that are ready for export in their Inbox. + + + +## Date + +Choose which date you would like your Expense Reports or Vendor Bills to use when exported. + +- **Date of last expense:** Uses the date on the most recent expense added to the report. +- **Exported date:** Is the date you export the report to Sage Intacct. +- **Submitted date:** Is the date the report creator originally submitted the report. + +All export options except credit cards use the date in the drop-down. Credit card transactions use the transaction date. + +## Reimbursable Expenses + +Depending on your initial setup, your **reimbursable expenses** will be exported as either **Expense Reports** or **Vendor Bills** to Sage Intacct. + +## Non-Reimbursable Expenses + +**Non-reimbursable expenses** will export separately from reimbursable expenses, either as **Vendor Bills**, or as **credit card charges** to the account you select. It is not an option to export non-reimbursable expenses as **Journal** entries. + + +If you are centrally managing your company cards through Domain Control, you can export expenses from each individual card to a specific account in Intacct. +Please note, Credit Card Transactions cannot be exported to Sage Intacct at the top-level if you have **Multi-Currency** enabled, so you will need to select an entity in the configuration of your Expensify Workspace by going to **Settings > Workspaces > Groups > [Workspace Name] > Connections > Configure**. + +## Exporting Negative Expenses + +You can export negative expenses successfully to Intacct regardless of which Export Option you choose. The one thing to keep in mind is that if you have Expense Reports selected as your export option, the **total** of the report can not be negative. + +# How to configure coding settings + +The appearance of your expense data in Sage Intacct depends on how you've configured it in Expensify. It's important to understand each available option to achieve the desired results. + +## Expense Types + +Categories are always enabled and are the primary means of matching expenses to the correct accounts in Sage Intact. The Categories in Expensify depend on your **Reimbursable** export options: +- If your Reimbursable export option is set to **Expense Reports** (the default), your Categories will be your **Expense Types**. +- If your Reimbursable export option is set to **Vendor Bills**, your Categories will be your **Chart of Accounts** (also known as GL Codes or Account Codes). + +You can disable unnecessary categories from your **Settings > Workspaces > Group > [Workspace Name] > Categories** page if your list is too extensive. Note that every expense must be coded with a Category, or it will not export. Also, when you first set up the integration, your existing categories will be overwritten. + +## Billable Expenses + +Enabling Billable expenses allows you to map your expense types or accounts to items in Sage Intacct. To do this, you'll need to enable the correct permissions on your Sage Intacct user or role. This may vary based on the modules you use in Sage Intacct, so you should enable read-only permissions for relevant modules such as Projects, Purchasing, Inventory Control, and Order Entry. + +Once permissions are set, you can map your categories (expense types or accounts, depending on your export settings) to specific items, which will then export to Sage Intacct. When an expense is marked as Billable in Expensify, users must select the correct billable Category (Item), or there will be an error during export. + +## Dimensions - Departments, Classes, and Locations + +If you enable these dimensions, you can choose from three data options: +- Not pulled into Expensify: Employee default (available when the reimbursable export option is set to Expense Reports) +- Pulled into Expensify and selectable on reports/expenses: Tags (useful for cross-charging between Departments or Locations) +- Report Fields (applies at the header level, useful when an employee's Location varies from one report to another) + +Please note that the term "tag" may appear instead of "Department" on your reports, so ensure that "Projects" is not disabled in your Tags configuration within your workspace settings. Make sure it's enabled within your coding settings of the Intacct configuration settings. When multiple options are available, the term will default to Tags. + +## Customers and Projects + +These settings are particularly relevant to billable expenses and can be configured as Tags or Report Fields. + +## Tax + +As of September 2023, our Sage Intacct integration supports native VAT and GST tax. To enable this feature, open the Sage Intacct configuration settings in your workspace, go to the Coding tab, and enable Tax. For existing Sage Intacct connectings, simply resync your workspace and the tax toggle will appear. For new Sage Intacct connections, the tax toggle will be available when you complete the integration steps. +Having this option enabled will then import your native tax rates from Sage Intacct into Expensify. From there, you can select default rates for each category. + +## User-Defined Dimensions + +You can add User-Defined Dimensions (UDD) to your workspace by locating the "Integration Name" in Sage Intacct. Please note that you must be logged in as an administrator in Sage Intacct to find the required fields. + +To find the Integration Name in Sage Intacct: +1. Go to **Platform Services > Objects > List** +2. Set "filter by application" to "user-defined dimensions." + +Now, in Expensify, navigate to **Settings > Workspaces > Group > [Workspace Name] > Connections**, and click **Configure** under Sage Intacct. On the Coding tab, enable the toggle next to User Defined Dimensions. Enter the "Integration name" and choose whether to import it into Expensify as an expense-level Tag or as a Report Field, then click **Save**. + +You'll now see the values for your custom segment available under Tags settings or Report Fields settings in Expensify. + + + +# How to configure advanced settings +In multi-entity environments, you'll find a dropdown at the top of the sync options menu, where you can choose to sync with the top-level or a specific entity in your Sage Intacct instance. If you sync at the top level, we pull in employees and dimensions shared at the top level and export transactions to the top level. Otherwise, we sync information with the selected entity. +## Auto Sync +When a non-reimbursable report is finally approved, it will be automatically exported to Sage Intacct. Typically, non-reimbursable expenses will sync to the next open period in Sage Intacct by default. If your company uses Expensify's ACH reimbursement, reimbursable expenses will be held back and exported to Sage when the report is reimbursed. +## Inviting Employees +Enabling **Invite Employees** allows the integration to automatically add your employees to your workspace and create an Expensify account for them if they don't have one. +If you have your domain verified on your account, ensure that the Expensify account connected to Sage Intacct is an admin on your domain. +When you toggle on "Invite Employees" on the Advanced tab, all employees in Sage Intacct who haven't been invited to the Expensify group workspace you're connecting will receive an email invitation to join the group workspace. Approval workflow will default to Manager Approval and can be further configured on the People settings page. +## Import Sage Intacct Approvals +When the "Import Sage Intacct Approvals" setting is enabled, Expensify will automatically set each user's manager listed in Sage Intacct as their first approver in Expensify. If no manager exists in Sage Intacct, the approver can be set in the Expensify People table. You can also add a second level of approval to your Sage Intacct integration by setting a final approver in Expensify. +Please note that if you need to add or edit an optional final approver, you will need to select the **Manager Approval** option in the workflow. Here is how each option works: +- **Basic Approval:** All users submit to one user. +- **Manager Approval:** Each user submits to the manager (imported from Sage Intacct). Each manager forwards to one final approver (optional). +- **Configure Manually:** Import employees only, configure workflow in Expensify. + + +## Sync Reimbursed Reports +When using Expensify ACH, reimbursable reports exported to Intacct are exported: +- As Vendor Bills to the default Accounts Payable account set in your Intacct Accounts Payable module configuration, OR +- As Expense Reports to the Employee Liabilities account in your Time & Expenses module configuration. +When ACH reimbursement is enabled, the "Sync Reimbursed Reports" feature will additionally export a Bill Payment to the selected Cash and Cash Equivalents account listed. If **Auto Sync** is enabled, the payment will be created when the report is reimbursed; otherwise, it will be created the next time you manually sync the workspace. +Intacct requires that the target account for the Bill Payment be a Cash and Cash Equivalents account type. If you aren't seeing the account you want in that list, please first confirm that the category on the account is Cash and Cash Equivalents. + + +# FAQ +## What if my report isn't automatically exported to Sage Intacct? +There are a number of factors that can cause automatic export to fail. If this happens, the preferred exporter will receive an email and an Inbox task outlining the issue and any associated error messages. +The same information will be populated in the comments section of the report. +The fastest way to find a resolution for a specific error is to search the Community, and if you get stuck, give us a shout! +Once you've resolved any errors, you can manually export the report to Sage Intacct. +## How can I make sure that I final approve reports before they're exported to Sage Intacct? +Make sure your approval workflow is configured correctly so that all reports are reviewed by the appropriate people within Expensify before exporting to Sage Intacct. +Also, if you have verified your domain, consider strictly enforcing expense workspace workflows. You can set this up via Settings > Domains > [Domain Name] > Groups. + + +## If I enable Auto Sync, what happens to existing approved and reimbursed reports? +If your workspace has been connected to Intacct with Auto Sync disabled, you can safely turn on Auto Sync without affecting existing reports which have not been exported. +If a report has been exported to Intacct and reimbursed via ACH in Expensify, we'll automatically mark it as paid in Intacct during the next sync. +If a report has been exported to Intacct and marked as paid in Intacct, we'll automatically mark it as reimbursed in Expensify during the next sync. +If a report has not been exported to Intacct, it will not be exported to Intacct automatically. diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/Xero.md b/docs/articles/expensify-classic/integrations/accounting-integrations/Xero.md index 3ee1c8656b4b..98cc6f2bfdf6 100644 --- a/docs/articles/expensify-classic/integrations/accounting-integrations/Xero.md +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/Xero.md @@ -1,5 +1,260 @@ --- -title: Coming Soon -description: Coming Soon +title: The Xero Integration +description: Everything you need to know about Expensify's direct integration with Xero --- -## Resource Coming Soon! + +# About + +The integration enables seamless import of expense accounts into Expensify and sends expense reports back to Xero as purchasing bills awaiting payment or "spend money" bank transactions. + +# How-to Connect to Xero + +## Prerequisites + +You must be a Workspace Admin in Expensify using a Collect or Control Workspace to connect your Xero account to Expensify. + +## Connect Expensify and Xero + +1. Let's get started by heading over to your Settings. You can find it by following this path: *Settings > Workspaces > Groups > [Workspace Name] > Connections > Xero.* +2. To connect Expensify to Xero, click on the "Connect to Xero” button, then choose "Create a new Xero connection." +3. Next, enter your Xero login details. After that, you'll need to select the Xero organization you want to link with Expensify. Remember, you can connect one organization for each Workspace. + +One important note: Starting in September 2021, there's a chance for Cashbook and Ledger-type organizations in Xero. Apps like Expensify won't be able to create invoices and bills for these accounts using the Xero API. So, if you're using a Cashbook or Ledger Xero account, please be aware that this might affect your Expensify integration. + +# How to Configure Export Settings for Xero + +When you integrate Expensify with Xero you gain control over several settings that determine how your reports will be displayed in Xero. To manage these settings simply follow this path: *Settings > Workspaces > Group > [Workspace Name] > Connections > Accounting Integrations > Xero > Configure > Export*. This is where you can fine-tune how your reports appear on the Xero side, making your expense management a breeze! + +## Xero Organization + +When you have multiple organizations set up in Xero you can choose which one you'd like to connect. Here are some essential things to keep in mind: + +1. Organization Selection: You'll see this option only if you have multiple organizations configured in Xero. +2. One Workspace, One Organization: Each Workspace can connect to just one organization at a time. It's a one-to-one connection. +3. Adding New Organizations: If you create a new organization in Xero after your initial connection, you'll need to disconnect and then reconnect it to Xero. Don't forget to take a screenshot of your current settings by clicking on "Configure" and checking the Export, Coding, and Advanced tabs. This way, you can easily set everything up again. + +Now you can seamlessly manage your connections with Xero while staying in control of your configurations! + +## Preferred Exporter + +Any Workspace admin can export to Xero, but only the preferred exporter will see reports that are ready for export in their Home. + +## Reimbursable Expenses + +Export to Xero as bills awaiting payment with the following additional settings: + +- Bill date β€” the bill is posted on the last day of the month in which expenses were incurred. + +To view the bills in Xero, navigate to *Business > Purchase Overview > Awaiting Payments*. Bills will be payable to the individual who created and reported the expense. + +## Non-reimbursable Expenses + +When you export non-reimbursable expenses, like company card transactions, to Xero they'll show up as bank transactions. Each expense is neatly listed as a separate line item in the bank account of your choice. Plus the transaction date matches the date on your bank statement for seamless tracking. + +To check out these expenses in Xero please follow these steps: + +1. Head over to your Dashboard. +2. Select your company card. +3. Locate the specific expense you're interested in. + +If you're managing company cards centrally, you can export expenses from each card to a designated account in Xero using Domains. This way, you have complete control and clarity over your company's finances! + +# How to Configure Coding for Xero + +The Coding tab in Expensify is where you configure Xero information to ensure accurate expense coding by your employees. Here's how you can access these settings: + +1. Navigate to Settings. +2. Go to Workspace within your specified group (Workspace Name). +3. Click on Connections, and then hit the Configure button. +4. Now, select the Coding tab. + +## Categories + +Xero expense accounts and those marked "Show In Expense Claims" will be automatically imported into Expensify as Categories. + +To manage these categories, follow these steps: + +1. After connecting, go to *Settings > Workspaces > Groups > [Workspace Name] > Categories*. +2. You can enable/disable categories using the checkbox. +3. For specific category rules (like default tax rate, maximum amount, receipts required, comments, and comment hints), click the settings cog. +4. Note that each expense must have a category selected for it to export to Xero, and these categories need to be imported from Xero; manual creation isn't an option within Workspace settings. + +## Tracking Categories + +1. If you use Tracking categories in Xero, you can import them into Expensify as Tags, Report Fields, or the Xero contact default. +- Tags apply a tracking category per expense. +- Report Field applies a tracking category to the entire report. +- Xero contact default applies the default tracking category set for the submitter in Xero. + +## Tax + +Looking to track tax in Expensify? Make sure that you have tax rates enabled in Xero and we will automatically grab those rates from Xero to allow your employees to categorize expenses with the appropriate tax rate. As an admin, you have the ability to set a default rate and also hide rates that are not applicable to the Workspace members. + +Tax tracking allows you to apply a tax rate and tax amount to each expense. +1. To set this up, enable Tax tracking in your Xero configuration. +2. After connecting, go to *Settings > Workspaces > Groups > [Workspace Name] > Tax to manage imported taxes from Xero.* +3. You can enable/disable taxes and set default tax rates for both Workspace currency expenses and foreign currency expenses. + +## Billable Expenses + +If you bill expenses to your customers, you can track and invoice them using Expensify and Xero. + +1. When enabled, Xero customer contacts are imported into Expensify as Tags for expense tracking. +- Note: In Xero, a Contact isn't a 'Customer' until they've had a bill raised against them. If you don't see your Customer imported as a tag, try raising a dummy invoice in Xero and then deleting/voiding it. +2. After exporting to Xero, tagged billable expenses can be included on a sales invoice to your customer. + +Please ensure that you meet the following requirements for expenses to be placed on a sales invoice: +1. Billable Expenses must be enabled in the Xero configuration settings. +2. The expense must be marked as billable. +3. The expense must be tagged with a customer. + +These steps should help you seamlessly manage your Xero integration within Expensify. + +# How to Configure Xero’s Advanced Settings + +If you've already set up your integration, but want to make adjustments, simply follow these steps: + +1. Go to Settings. +2. Then, navigate to Workspaces within your designated group [Workspace Name]. +3. Click on Connections, and next, hit the Configure button. + +From there, you can dive into the "Advanced" tab to make any additional tweaks. + +## Auto Sync + +For non-reimbursable reports: Once a report has completed the approval workflow in Expensify, we'll automatically queue it for export to Xero. + +But, if you've added a business bank account for ACH reimbursement, any reimbursable expenses will be sent to Xero automatically when the report is marked as reimbursed or enabled for reimbursement. + +### Controlling Newly Imported Categories: + +You can decide how newly imported categories behave in Expensify: + +1. Enabling or disabling this control determines the status of new categories imported from Xero to Expensify. Enabled categories are visible for employees when they categorize expenses, while disabled categories remain hidden. + +These settings give you the flexibility to manage your expenses and Workspace in the way that best suits your needs! + +## Sync Reimbursed Reports + +This nifty setting lets you synchronize the status of your reports between Expensify and Xero. Utilizing this setting will make sure that there is no confusion or possibility that a reimbursable report is paid out twice by mistake or that a non-reimbursable report is double entered throwing off month-end reconciliation. Here's how it works: + +1. When you reimburse a report via ACH direct deposit within Expensify, the purchase bill will automatically be marked as paid in Xero, and Expensify will note it as reimbursed. +2. Don't forget to pick the Xero account where the corresponding bill payment should be recorded. +3. It's a simple way to keep everything in sync, especially when you're awaiting payment. + +# Deep Dive + +## An Automatic Export Fails + +Sometimes, reports may encounter issues during automatic export to Xero. Not to worry, though! Here's what happens: + +1. The Technical Contact, your go-to person for technical matters, will receive an email explaining the problem. +2. You'll also find specific error messages at the bottom of the report. +3. To get things back on track, the report will be placed in the preferred exporter’s Home. They can review it and resolve any issues. + +## Consider Enforcing Expense Workspace Workflows: + +For added control, you can adjust your Workspace settings to strictly enforce expense Workspace. This way, you guarantee that your Workspace’s workflow is always followed. By default this flow is in place, but employees can modify the person they submit their reports to if it's not strictly enforced. + +## Customize Purchase Bill Status (Optional): + +You have the flexibility to set the status of your purchase bills just the way you want. Choose from the following options: + +1. Draft: Keep bills in a draft state until you're ready to finalize them. +2. Awaiting Approval: If you need approval before processing bills, this option is here for you. + +## Multi-Currency + +### Handling Multi-Currency in Xero + +When dealing with multi-currency transactions in Xero and exporting reimbursable expenses from Expensify here's what you need to know: + +1. The bill created in Xero will adopt the output currency set in your Expensify Workspace, provided that it's enabled in Xero. +2. Your general ledger reports will automatically convert to your home currency in Xero, leveraging the currency exchange rates defined in your Xero settings. It ensures everything aligns seamlessly. + +Now, for non-reimbursable expenses, things work slightly differently: + +1. Bank transactions will use the currency specified in your bank account in Xero, regardless of the currency used in Expensify. +2. If these currencies don't match, no worries! We apply a 1:1 exchange rate to make things smooth. To ensure a hassle-free experience, just ensure that the output currency in Expensify matches the currency specified in your Xero bank account. + +## Tax + +### Enabling Tax Tracking for Seamless Integration: + +To simplify tax tracking, enable it in your Xero configuration. This action will automatically bring all your Xero tax settings into Expensify, turning them into usable Taxes. + +### After connecting your Xero account with Expensify: + +1. Head to Settings. +2. Navigate to Workspaces within your specific group [Workspace Name]. +3. Click on Tax to view the taxes that have been imported from Xero. + +Now, here's where you can take control: + +1. Use the enable/disable button to choose which taxes your employees can apply to their expenses. Customize it to fit your needs. +2. You can set a default tax rate for expenses in your Workspace currency. Additionally, if you deal with foreign currency expenses, you have the option to set another default tax (including exempt) that will automatically apply to all new expenses in foreign currencies. + +This setup streamlines your tax management, making it effortless for your team to handle taxes on their expenses. + +## Export Invoices to Xero + +You can effortlessly export your invoices from Expensify to Xero and even attribute them to the right Customer. Plus, when you mark an invoice as paid in Expensify, the same status will smoothly transfer to Xero and vice versa, keeping your invoice tracking hassle-free. Let's dive in: + +### Setting up Invoice Export to Xero: + +1. Navigate to Settings. +2. Go to Workspaces within your designated group [Workspace Name]. +3. Click on Connections, then select Configuration. +4. Now, click on the Advanced tab. + +### Selecting Your Xero Invoice Collection Account: + +1. Scroll down until you find "Xero invoice collection account." You'll see a dropdown list of your available Accounts Receivable accounts imported from Xero. +2. Simply choose the account where you'd like your invoices to be exported. + +Pro Tip: If you don't see any accounts in the dropdown, try syncing your Xero connection. To do this, go back to the Connections page and hit "Sync Now." + +### Exporting an Invoice to Xero: + +Invoices will automatically make their way to Xero when they're in the Processing or Paid state. This ensures consistent tracking of unpaid and paid invoices. However, if you have Auto Sync disabled, you'll need to manually export your invoices along with your expense reports. Here's how: + +1. Head to your Reports page. +2. Use the filters to locate the invoices you want to export. +3. Select the invoices you wish to export. +4. Click Export to > Xero on the top right-hand side. + +### Matching Customers and Emails: + +When exporting to Xero, we match the recipient's email address with a customer record in Xero. So, make sure each customer in Xero has their email listed in their profile. +If we can't find a match, we'll create a new customer record in Xero. + +### Updating Invoice Status: + +1. When you mark an invoice as Paid in Expensify, this status will automatically reflect in Xero. +2. Similarly, if you mark an invoice as Paid in Xero, it will update automatically in Expensify. +3. The payment will be recorded in the Collection account you've chosen in your Advanced Settings Configuration. + +And that's it! You've successfully set up and managed your invoice exports to Xero, making your tracking smooth and efficient. + +# FAQ + +## Will receipt images be exported to Xero? + +Yes! The receipt images will be exported to Xero. To see them in Xero click the 'paper' icon in the upper right corner of the expense details and view a PDF of the Expensify report including the receipt image. + +## How does Auto Sync work if your workspace was initially connected to Xero with Auto Sync disabled? + +You can safely switch it on without affecting existing reports that haven't been exported. + +## How does Auto Sync work if a report has already been exported to Xero and reimbursed through ACH or marked as reimbursed in Expensify? + +It will be automatically marked as paid in Xero during the next sync. You may either manually update by clicking Sync Now in the Connections tab or Expensify does this on your behalf overnight every day! + +## How does Auto Sync work if a report has been exported to Xero and marked as paid in Xero? + +It will be automatically marked as reimbursed in Expensify during the next sync. If you need it updated immediately please go to the Connections tab and click Sync Now or if you can wait just let Expensify do it for you overnight. + +## How does Auto Sync work if a report has been exported to Xero and marked as paid in Xero? + +Reports that haven't been exported to Xero won't be sent automatically. + diff --git a/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md index 9fd745838caf..a034d13dd143 100644 --- a/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md +++ b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md @@ -22,6 +22,7 @@ To enable Expensify for your Google Apps domain and add an β€œExpenses” link t 6. Click **Finish**. You can configure access for specific Organizational Units later if needed. 7. All account holders on your domain can now access Expensify from the Google Apps directory by clicking **More** and choosing **Expensify**. 8. Now, follow the steps below to sync your users with Expensify automatically. + # How to Sync Users from Google Apps to Expensify To sync your Google Apps users to your Expensify Workspace, follow these steps: 1. Follow the above steps to install Expensify in your Google Apps directory. diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Grab.md b/docs/articles/expensify-classic/integrations/travel-integrations/Grab.md deleted file mode 100644 index 3ee1c8656b4b..000000000000 --- a/docs/articles/expensify-classic/integrations/travel-integrations/Grab.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Coming Soon -description: Coming Soon ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/TravelPerk.md b/docs/articles/expensify-classic/integrations/travel-integrations/TravelPerk.md index 3ee1c8656b4b..51bf658db248 100644 --- a/docs/articles/expensify-classic/integrations/travel-integrations/TravelPerk.md +++ b/docs/articles/expensify-classic/integrations/travel-integrations/TravelPerk.md @@ -1,5 +1,71 @@ --- -title: Coming Soon -description: Coming Soon +title: Connecting TravelPerk to your Expensify Account +description: Help article that describes how to connect TravelPerk to your Expensify Account --- -## Resource Coming Soon! +# Connecting TravelPerk to your Expensify Account + +## Overview +Expensify and TravelPerk are two powerful tools that can streamline your expense management and travel booking processes. By integrating these two platforms, you can make tracking travel expenses even more efficient. This article will walk you through the steps to integrate Expensify with Travel Perk seamlessly. + +## How to Connect TravelPerk to your Expensify Account +**Prerequisites:** +Before you begin, ensure that you have the following: +- An active Expensify account. +- An active TravelPerk account. +- Administrative access to both Expensify and TravelPerk accounts. + +1. **Log in to your Expensify account (web)** + - Open your web browser and navigate to the Expensify login page. + - Enter your Expensify username and password. + - Click "Sign In" to access your Expensify account. + +2. **Access Your Expensify Account Settings** + - Once logged in, click on your profile icon or username in the upper-right corner. + - From the dropdown menu, select "Settings." + +3. **Navigate to Integrations** + - In the Settings menu, find and click on the "Integrations" option. + +4. **Search for TravelPerk Integration** + - In the Integrations section, locate the search bar. + - Type "TravelPerk" into the search bar and hit "Enter." + +5. **Connect TravelPerk to Expensify** + - Click on the Travel Perk integration option. + - You'll be prompted to log in to your Travel Perk account. Enter your TravelPerk credentials and log in. + +6. **Authorize the Integration** + - After logging in to TravelPerk, you'll be asked to authorize the integration. Review the permissions requested and click "Authorize" or "Allow." + +7. **Configure Integration Settings** + - Once the integration is authorized, you may have the option to configure settings such as expense categories and tags. + - Follow the on-screen prompts to customize the integration settings according to your preferences. + +8. **Save Integration Settings** + - After configuring the integration settings, click the "Save" or "Finish" button to confirm your choices. + +9. **Test the Integration** + - To ensure that the integration is working correctly, consider creating a test expense in TravelPerk. + - Wait for a few minutes and check your Expensify account to confirm that the expense has been automatically imported. + +10. **Regularly Review and Approve Expenses** + - With the integration in place, expenses from TravelPerk will be automatically synced to your Expensify account. + - Regularly review and approve these expenses in Expensify to keep your financial records up to date. + +## How to Book Travel +- From the Trips dashboard in TravelPerk, click Create Trip. +- Give your trip a unique name, then book your flights and hotels. +- Review your itinerary and click Confirm Payment, and your TravelPerk invoice and itinerary will automatically populate in Expensify! + +## Deep Dive on the TravelPerk Integration + +The integration between Expensify and TravelPerk enables a seamless flow of data between the two platforms. When employees book travel through TravelPerk, their travel expenses are automatically transferred to Expensify. + +## Key Benefits +- **Efficiency and accuracy:** The TravelPerk integration provides real-time data synchronization. Travel expenses are automatically input into Expensify, allowing for timely reporting and reimbursement. +- **Expense policy compliance:** TravelPerk helps enforce corporate travel policies by offering pre-approved travel options. Expenses generated from these bookings automatically adhere to company policies. +- **Visibility and control:** Finance teams gain greater visibility into travel expenses. They can track expenses in real-time, monitor spending trends, and enforce budget controls more effectively. +- **Streamlined approval workflows:** Expense approval workflows can be set up in Expensify. Managers can review and approve expenses with ease, ensuring adherence to company policies. + +Integrating Expensify with TravelPerk can significantly simplify your expense management process. By following these steps, you can ensure that your travel expenses are automatically imported into Expensify, making it easier to track and report expenses accurately. If you encounter any issues or have questions, don’t hesitate to reach out to your Account Manager or concierge@expensify.com with any questions. + diff --git a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approval-Workflows.md b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approval-Workflows.md index 3ee1c8656b4b..1f69c1eee8f4 100644 --- a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approval-Workflows.md +++ b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approval-Workflows.md @@ -1,5 +1,109 @@ --- -title: Coming Soon -description: Coming Soon +title: Managing employees and reports > Approval workflows +description: Set up the workflow that your employees reports should flow through. --- -## Resource Coming Soon! + + +# About +## Overview + + +This document explains how to manage employee expense reports and approval workflows in Expensify. + + +### Approval workflow modes + + +#### Submit and close +- This is a workflow where no approval occurs in Expensify. +- *What happens after submission?* The report state becomes Closed and is available to view by the member set in Submit reports to and any Workspace Admins. +- *Who should use this workflow?* This mode should be used where you don't require approvals in Expensify. + + +#### Submit and approve +- *Submit and approve* is a workflow where all reports are submitted to a single member for approval. New policies have Submit and Approve enabled by default. +- *What happens after submission?* The report state becomes Processing and it will be sent to the member indicated in Submit reports to for approval. When the member approves the report, the state will become Approved. +- *Who should use this workflow?* This mode should be used where the same person is responsible for approving all reports for your organization. If submitters have different approvers or multiple levels of approval are required, then you will need to use Advance Approval. + + +#### Advanced Approval +- This approval mode is used to handle more complex workflows, including: + - *Multiple levels of approval.* This is for companies that require more than one person to approve a report before it can be reimbursed. The most common scenario is when an employee needs to submit to their manager, and their manager needs to approve and forward that report to their finance department for final approval. + - *Varying approval workflows.* For example, if a company has Team A submitting reports to Manager A, and Team B to Manager B, use Advanced Approval. Group Workspace Admins can also set amount thresholds in the case that a report needs to go to a different approver based on the amount. +- *What happens after submission?* After the report is submitted, it will follow the set approval chain. The report state will be Processing until it is Final Approved. We have provided examples of how to set this up below. +- *Who should use this workflow?* Organizations with complex workflows or 2+ levels of approval. This could be based on manager approvals or where reports over a certain size require additional approvals. +- *For further automation:* use Concierge auto-approval for reports. You can set specific rules and guidelines in your Group Workspace for your team's expenses; if all expenses are below the Manual Approval Threshold and adhere to all the rules, then we will automatically approve these reports on behalf of the approver right after they are submitted. + + +### How to set an approval workflow + +- Step-by-step instructions on how to set this up at the Workspace level [here](link-to-instructions). + +# Deep Dive + +### Setting multiple levels of approval +- 'Submits to' is different than 'Approves to'. + - *Submits to* - is the person you are sending your reports to for 1st level approval + - *Approves to* - is the person you are sending the reports you've approved for higher-level approval +- In the example below, a report needs to be approved by multiple managers: *Submitter > Manager > Director > Finance/Accountant* + - *Submitter (aka. Employee):* This is the person listed under the member column of the People page. + - *First Approver (Manager):* This is the person listed under the Submits to column of the People Page. + - *Second Approver (Director):* This is the person listed as 'Approves to' in the Settings of the First Approver. + - *Final Approver (Finance/Accountant):* This is the person listed as the 'Approves to' in the Settings of the Second Approver. +- This is what this setup looks like in the Workspace Members table. + - Bryan submits his reports to Jim for 1st level approval. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + + - All of the reports Jim approves are submitted to Kevin. Kevin is the 'approves to' in Jim's Settings. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + + - All of the reports Kevin approves are submitted to Lucy. Lucy is the 'approves to' in Kevin's Settings. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + + + - Lucy is the final approver, so she doesn't submit her reports to anyone for review. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + + +- The final outcome: The member in the Submits To line is different than the person noted as the Approves To. +### Adding additional approver levels +- You can also set a specific approver for Reports Totals in Settings. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + +- An example: The submitter's manager can approve any report up to a certain limit, let's say $500, and forward it to accounting. However, if a report is over that $500 limit, it has to be also approved by the department head before being forwarded to accounting. +- To configure, click on Edit Settings next to the approving manager's email address and set the "If Report Total is Over" and "Then Approves to" fields. +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} +![Insert alt text for accessibility here](https://help.expensify.com/assets/images/image-name.png){:width="100%"} + + +### Setting category approvals +- If your expense reports should be reviewed by an additional approver based on specific categories or tags selected on the expenses within the report, set up category approvers and tag approvers. +- Category approvers can be set in the Category settings for each Workspace +- Tag approvers can be set in the Tag settings for each Workspace + + +#### Category approver +- A category approver is a member who is added to the approval workflow for any reports in your Expensify Workspace that contain expenses with a specific category. +- For example: Your HR director Jim may need to approve any relocation expenses submitted by employees. Set Jim up as the category approver for your Relocation category, then any reports containing Relocation expenses will first be routed to Jim before continuing through the approval workflow. +- Adding category approvers + - To add a category approver in your Workspace: + - Navigate to *Settings > Policies > Group > [Workspace Name] > Categories* + - Click *"Edit Settings"* next to the category that requires the additional approver + - Select an approver and click *β€œSave”* + + +#### Tag approver +- A tag approver is a member who is added to the approval workflow for any reports in your Expensify Workspace that contain expenses with a specific tag. +- For example: If employees must tag project-based expenses with the corresponding project tag. Pam, the project manager is set as the project approver for that project, then any reports containing expenses with that project tag will first be routed to Pam for approval before continuing through the approval workflow. +- Please note: Tag approvers are only supported for a single level of tags, not for multi-level tags. The order in which the report is sent to tag approvers relies on the date of the expense. +- Adding tag approvers + - To add a tag approver in your Workspace: + - Navigate to *Settings > Policies > Group > [Workspace Name] > Tags* + - Click in the "Approver" column next to the tag that requires an additional approver + + +Category and Tag approvers are inserted at the beginning of the approval workflow already set on the People page. This means the workflow will look something like: * *Submitter > Category Approver(s) > Tag Approver(s) > Submits To > Previous approver's Approves To.* + + +### Workflow enforcement +- If you want to ensure your employees cannot override the workflow you set - enable workflow enforcement by following the steps below. As a Workspace Admin, you can choose to enforce your approval workflow by going. \ No newline at end of file diff --git a/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md b/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md index 14ade143a35b..1a567dbe6fa3 100644 --- a/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md +++ b/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md @@ -6,7 +6,7 @@ description: A help article that covers Third Party Payment options including Pa Expensify offers convenient third party payment options that allow you to streamline the process of reimbursing expenses and managing your finances. With these options, you can pay your expenses and get reimbursed faster and more efficiently. In this guide, we'll walk you through the steps to set up and use Expensify's third party payment options. -## Overview +# Overview Expensify offers integration with various third party payment providers, making it easy to reimburse employees and manage your expenses seamlessly. Some of the key benefits of using third-party payment options in Expensify include: @@ -14,7 +14,7 @@ Expensify offers integration with various third party payment providers, making - Secure Transactions: Benefit from the security features and protocols provided by trusted payment providers. - Centralized Expense Management: Consolidate all your expenses and payments within Expensify for a more efficient financial workflow. -## Setting Up Third Party Payments +# Setting Up Third Party Payments To get started with third party payments in Expensify, follow these steps: @@ -30,7 +30,7 @@ To get started with third party payments in Expensify, follow these steps: 6. **Verify Your Account**: Confirm your linked account to ensure it's correctly integrated with Expensify. -## Using Third Party Payments +# Using Third Party Payments Once you've set up your third party payment option, you can start using it to reimburse expenses and manage payments: @@ -42,22 +42,18 @@ Once you've set up your third party payment option, you can start using it to re 4. **Track Payment Status**: You can track the status of payments and view transaction details within your Expensify account. -## FAQ’s +# FAQ’s -### Q: Are there any fees associated with using third party payment options in Expensify? +## Q: Are there any fees associated with using third party payment options in Expensify? A: The fees associated with third party payments may vary depending on the payment provider you choose. Be sure to review the terms and conditions of your chosen provider for details on any applicable fees. -### Q: Can I use multiple third party payment providers with Expensify? +## Q: Can I use multiple third party payment providers with Expensify? A: Expensify allows you to link multiple payment providers if needed. You can select the most suitable payment method for each expense report. -### Q: Is there a limit on the amount I can reimburse using third party payments? +## Q: Is there a limit on the amount I can reimburse using third party payments? A: The reimbursement limit may depend on the policies and settings configured within your Expensify account and the limits imposed by your chosen payment provider. With Expensify's third party payment options, you can simplify your expense management and reimbursement processes. By following the steps outlined in this guide, you can set up and use third party payments efficiently. - - - - diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Categories.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Categories.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Categories.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Categories.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Domains-Overview.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Domains-Overview.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Domains-Overview.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Domains-Overview.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Expenses.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Expenses.md similarity index 96% rename from docs/articles/expensify-classic/policy-and-domain-settings/Expenses.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Expenses.md index 424338120010..388bb5d5cbc9 100644 --- a/docs/articles/expensify-classic/policy-and-domain-settings/Expenses.md +++ b/docs/articles/expensify-classic/workspace-and-domain-settings/Expenses.md @@ -4,7 +4,7 @@ description: Expense Settings --- # Overview -Expensify offers multiple ways to customize how expenses are created in your workspace. In this doc, you’ll learn how to set up and expense basics, distance expenses, and time expenses. +Expensify offers multiple ways to customize how expenses are created in your workspace. In this doc, you’ll learn how to set up expense basics, distance expenses, and time expenses. Whether you’re flying solo with your Individual workspace or submitting with a team on your Group workspace, we have settings to support how you use Expensify. @@ -69,7 +69,7 @@ Preliminary setup steps include: 3. Click **Add A Mileage Rate** to add as many rates as you need, 4. Set the reimbursable amount per mile or kilometer. -Note: _If a rate is toggled off it is immediately disabled. This means that users are no longer able to select it when creating a new distance expense. If only one rate is available then this rate will be toggled on by default._ +Note: _If a rate is toggled off it is immediately disabled. This means that users are no longer able to select it when creating a new distance expense. If only one rate is available then that rate will be toggled on by default._ ## Set an hourly rate @@ -96,7 +96,7 @@ Note: _If a report has audit alerts on it, you'll need to Review the report and ## Tracking tax on mileage expenses -If you’re tracking tax in Expensify you can also track tax on distance expenses. The first step is to enable tax the workspace. You can do this by going to **Settings** > **Workspaces** > **Individual** or **Group** > [_Workspace Name_] > **Tax**. +If you’re tracking tax in Expensify you can also track tax on distance expenses. The first step is to enable tax in the workspace. You can do this by going to **Settings** > **Workspaces** > **Individual** or **Group** > [_Workspace Name_] > **Tax**. Once tax is enabled on a workspace level you will see a toggle to _Track Tax_ in the Distance section of the workspace settings. If tax is disabled on the workspace the Track Tax toggle will not display. diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Invoicing.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Invoicing.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Invoicing.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Invoicing.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Per-Diem.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Per-Diem.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Per-Diem.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Per-Diem.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Reimbursement.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Reimbursement.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Reimbursement.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Reimbursement.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md b/docs/articles/expensify-classic/workspace-and-domain-settings/SAML-SSO.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/SAML-SSO.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/Tags.md b/docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Tags.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Tags.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/reports/Currency.md b/docs/articles/expensify-classic/workspace-and-domain-settings/reports/Currency.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/reports/Currency.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/reports/Currency.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/reports/Report-Fields-And-Titles.md b/docs/articles/expensify-classic/workspace-and-domain-settings/reports/Report-Fields-And-Titles.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/reports/Report-Fields-And-Titles.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/reports/Report-Fields-And-Titles.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/reports/Scheduled-Submit.md b/docs/articles/expensify-classic/workspace-and-domain-settings/reports/Scheduled-Submit.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/reports/Scheduled-Submit.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/reports/Scheduled-Submit.md diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/tax-tracking.md b/docs/articles/expensify-classic/workspace-and-domain-settings/tax-tracking.md similarity index 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/tax-tracking.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/tax-tracking.md diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Hotel-Tonight.md b/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md similarity index 67% rename from docs/articles/expensify-classic/integrations/travel-integrations/Hotel-Tonight.md rename to docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md index 3ee1c8656b4b..6b85bb0364b5 100644 --- a/docs/articles/expensify-classic/integrations/travel-integrations/Hotel-Tonight.md +++ b/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md @@ -2,4 +2,3 @@ title: Coming Soon description: Coming Soon --- -## Resource Coming Soon! diff --git a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Admins.md b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Admins.md index 996d7896502f..17c7a60b8e5a 100644 --- a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Admins.md +++ b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Admins.md @@ -4,16 +4,16 @@ description: Best Practices for Admins settings up Expensify Chat redirect_from: articles/other/Expensify-Chat-For-Admins/ --- -## Overview +# Overview Expensify Chat is an incredible way to build a community and foster long-term relationships between event producers and attendees, or attendees with each other. Admins are a huge factor in the success of the connections built in Expensify Chat during the events, as they are generally the drivers of the conference schedule, and help ensure safety and respect is upheld by all attendees both on and offline. -## Getting Started +# Getting Started We’ve rounded up some resources to get you set up on Expensify Chat and ready to start connecting with your session attendees: - [How to get set up and start using Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-use-chat-in-expensify) - [How to format text in Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-format-text) - [How to flag content and/or users for moderation](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) -## Admin Best Practices +# Admin Best Practices In order to get the most out of Expensify Chat, we created a list of best practices for admins to review in order to use the tool to its fullest capabilities. **During the conference:** diff --git a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Attendees.md b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Attendees.md index 20e15aaa6c72..30eeb4158902 100644 --- a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Attendees.md +++ b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Attendees.md @@ -4,19 +4,19 @@ description: Best Practices for Conference Attendees redirect_from: articles/other/Expensify-Chat-For-Conference-Attendees/ --- -## Overview +# Overview Expensify Chat is the best way to meet and network with other event attendees. No more hunting down your contacts by walking the floor or trying to find someone in crowds at a party. Instead, you can use Expensify Chat to network and collaborate with others throughout the conference. To help get you set up for a great event, we’ve created a guide to help you get the most out of using Expensify Chat at the event you’re attending. -## Getting Started +# Getting Started We’ve rounded up some resources to get you set up on Expensify Chat and ready to start connecting with your fellow attendees: - [How to get set up and start using Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-use-chat-in-expensify) - [How to format text in Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-format-text) - [How to flag content and/or users for moderation](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) -## Chat Best Practices +# Chat Best Practices To get the most out of your experience at your conference and engage people in a meaningful conversation that will fulfill your goals instead of turning people off, here are some tips on what to do and not to do as an event attendee using Expensify Chat: **Do:** diff --git a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Speakers.md b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Speakers.md index 3e19cf6fe26a..652fc2ee4d2b 100644 --- a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Speakers.md +++ b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-For-Conference-Speakers.md @@ -4,17 +4,17 @@ description: Best Practices for Conference Speakers redirect_from: articles/other/Expensify-Chat-For-Conference-Speakers/ --- -## Overview +# Overview Are you a speaker at an event? Great! We're delighted to provide you with an extraordinary opportunity to connect with your session attendees using Expensify Chat β€” before, during, and after the event. Expensify Chat offers a powerful platform for introducing yourself and your topic, fostering engaging discussions about your presentation, and maintaining the conversation with attendees even after your session is over. -## Getting Started +# Getting Started We’ve rounded up some resources to get you set up on Expensify Chat and ready to start connecting with your session attendees: - [How to get set up and start using Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-use-chat-in-expensify) - [How to format text in Expensify Chat](https://help.expensify.com/articles/other/Everything-About-Chat#how-to-format-text) - [How to flag content and/or users for moderation](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) -## Setting Up a Chatroom for Your Session: Checklist +# Setting Up a Chatroom for Your Session: Checklist To make the most of Expensify Chat for your session, here's a handy checklist: - Confirm that your session has an Expensify Chat room, and have the URL link ready to share with attendees in advance. - You can find the link by clicking on the avatar for your chatroom > β€œShare Code” > β€œCopy URL to dashboard” @@ -22,7 +22,7 @@ To make the most of Expensify Chat for your session, here's a handy checklist: - Consider having a session moderator with you on the day to assist with questions and discussions while you're presenting. - Include the QR code for your session's chat room in your presentation slides. Displaying it prominently on every slide ensures that attendees can easily join the chat throughout your presentation. -## Tips to Enhance Engagement Around Your Session +# Tips to Enhance Engagement Around Your Session By following these steps and utilizing Expensify Chat, you can elevate your session to promote valuable interactions with your audience, and leave a lasting impact beyond the conference. We can't wait to see your sessions thrive with the power of Expensify Chat! **Before the event:** diff --git a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-Playbook-For-Conferences.md b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-Playbook-For-Conferences.md index a81aef2044a2..caeccd1920b1 100644 --- a/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-Playbook-For-Conferences.md +++ b/docs/articles/new-expensify/getting-started/chat/Expensify-Chat-Playbook-For-Conferences.md @@ -3,10 +3,10 @@ title: Expensify Chat Playbook for Conferences description: Best practices for how to deploy Expensify Chat for your conference redirect_from: articles/playbooks/Expensify-Chat-Playbook-for-Conferences/ --- -## Overview +# Overview To help make setting up Expensify Chat for your event and your attendees super simple, we’ve created a guide for all of the technical setup details. -## Who you are +# Who you are As a conference organizer, you’re expected to amaze and inspire attendees. You want attendees to get to the right place on time, engage with the speakers, and create relationships with each other that last long after the conference is done. Enter Expensify Chat, a free feature that allows attendees to interact with organizers and other attendees in realtime. With Expensify Chat, you can: - Communicate logistics and key information @@ -21,20 +21,20 @@ Sounds good? Great! In order to ensure your team, your speakers, and your attend *Let’s get started!* -## Support +# Support Connect with your dedicated account manager in any new.expensify.com #admins room. Your account manager is excited to brainstorm the best ways to make the most out of your event and work through any questions you have about the setup steps below. We also have a number of [moderation tools](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) available to admins to help make sure your event is seamless, safe, and fun! -## Step by step instructions for setting up your conference on Expensify Chat +# Step by step instructions for setting up your conference on Expensify Chat Based on our experience running conferences atop Expensify Chat, we recommend the following simple steps: -### Step 1: Create your event workspace in Expensify +## Step 1: Create your event workspace in Expensify To create your event workspace in Expensify: 1. In [new.expensify.com](https://new.expensify.com): β€œ+” > β€œNew workspace” 1. Name the workspace (e.g. β€œExpensiCon”) -### Step 2: Set up all the Expensify Chat rooms you want to feature at your event +## Step 2: Set up all the Expensify Chat rooms you want to feature at your event **Protip**: Your Expensify account manager can complete this step with you. Chat them in #admins on new.expensify.com to coordinate! To create a new chat room: @@ -54,7 +54,7 @@ For an easy-to-follow event, we recommend creating these chat rooms: **Protip** Check out our [moderation tools](https://help.expensify.com/articles/other/Everything-About-Chat#flagging-content-as-offensive) to help flag comments deemed to be spam, inconsiderate, intimidating, bullying, harassment, assault. On any comment just click the flag icon to moderate conversation. -### Step 3: Add chat room QR codes to the applicable session slide deck +## Step 3: Add chat room QR codes to the applicable session slide deck Gather QR codes: 1. Go to [new.expensify.com](https://new.expensify.com) 1. Click into a room and click the room name or avatar in the top header @@ -63,7 +63,7 @@ Gather QR codes: Add the QR code to every slide so that if folks forget to scan the QR code at the beginning of the presentation, they can still join the discussion. -### Step 4: Plan out your messaging and cadence before the event begins +## Step 4: Plan out your messaging and cadence before the event begins Expensify Chat is a great place to provide updates leading up to your event -- share news, get folks excited about speakers, and let attendees know of crucial event information like recommended attire, travel info, and more. For example, you might consider: **Prep your announcements:** @@ -80,15 +80,15 @@ Expensify Chat is a great place to provide updates leading up to your event -- s **Protip**: Your account manager can help you create this document, and would be happy to send each message at the appointed time for you. -### Step 5: Share Expensify Chat How-To Resources with Speakers, Attendees, Admins +## Step 5: Share Expensify Chat How-To Resources with Speakers, Attendees, Admins We’ve created a few helpful best practice docs for your speakers, admins, and attendees to help navigate using Expensify Chat at your event. Feel free to share the links below with them! - [Expensify Chat for Conference Attendees](https://help.expensify.com/articles/other/Expensify-Chat-For-Conference-Attendees) - [Expensify Chat for Conference Speakers](https://help.expensify.com/articles/other/Expensify-Chat-For-Conference-Speakers) - [Expensify Chat for Admins](https://help.expensify.com/articles/other/Expensify-Chat-For-Admins) -### Step 6: Follow up with attendees after the event +## Step 6: Follow up with attendees after the event Continue the connections by using Expensify Chat to keep your conference community connected. Encourage attendees to share photos, their favorite memories, funny stories, and more. -## Conclusion +# Conclusion Once you have completed the above steps you are ready to host your conference on Expensify Chat! Let your account manager know any questions you have over in your [new.expensify.com](https://new.expensify.com) #admins room and start driving activity in your Expensify Chat rooms. Once you’ve reviewed this doc you should have the foundations in place, so a great next step is to start training your speakers on how to use Expensify Chat for their sessions. Coordinate with your account manager to make sure everything goes smoothly! diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/TrainLine.md b/docs/articles/new-expensify/insights-and-custom-reporting/Coming-Soon.md similarity index 67% rename from docs/articles/expensify-classic/integrations/travel-integrations/TrainLine.md rename to docs/articles/new-expensify/insights-and-custom-reporting/Coming-Soon.md index 3ee1c8656b4b..6b85bb0364b5 100644 --- a/docs/articles/expensify-classic/integrations/travel-integrations/TrainLine.md +++ b/docs/articles/new-expensify/insights-and-custom-reporting/Coming-Soon.md @@ -2,4 +2,3 @@ title: Coming Soon description: Coming Soon --- -## Resource Coming Soon! diff --git a/docs/articles/new-expensify/integrations/accounting-integrations/Xero b/docs/articles/new-expensify/integrations/accounting-integrations/Xero deleted file mode 100644 index 45aec32fb708..000000000000 --- a/docs/articles/new-expensify/integrations/accounting-integrations/Xero +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: The Xero Integration -description: Everything you need to know about Expensify's direct integration with Xero ---- - - -# About - -The integration enables seamless import of expense accounts into Expensify and sends expense reports back to Xero as purchasing bills awaiting payment or "spend money" bank transactions. - -# How-to Connect to Xero - -## Prerequisites - -You must be a Workspace Admin in Expensify using a Collect or Control Workspace to connect your Xero account to Expensify. - -## Connect Expensify and Xero - -1. Let's get started by heading over to your Settings. You can find it by following this path: *Settings > Workspaces > Groups > [Workspace Name] > Connections > Xero.* -2. To connect Expensify to Xero, click on the "Connect to Xero” button, then choose "Create a new Xero connection." -3. Next, enter your Xero login details. After that, you'll need to select the Xero organization you want to link with Expensify. Remember, you can connect one organization for each Workspace. - -One important note: Starting in September 2021, there's a chance for Cashbook and Ledger-type organizations in Xero. Apps like Expensify won't be able to create invoices and bills for these accounts using the Xero API. So, if you're using a Cashbook or Ledger Xero account, please be aware that this might affect your Expensify integration. - -# How to Configure Export Settings for Xero - -When you integrate Expensify with Xero you gain control over several settings that determine how your reports will be displayed in Xero. To manage these settings simply follow this path: *Settings > Workspaces > Group > [Workspace Name] > Connections > Accounting Integrations > Xero > Configure > Export*. This is where you can fine-tune how your reports appear on the Xero side, making your expense management a breeze! - -## Xero Organization - -When you have multiple organizations set up in Xero you can choose which one you'd like to connect. Here are some essential things to keep in mind: - -1. Organization Selection: You'll see this option only if you have multiple organizations configured in Xero. -2. One Workspace, One Organization: Each Workspace can connect to just one organization at a time. It's a one-to-one connection. -3. Adding New Organizations: If you create a new organization in Xero after your initial connection, you'll need to disconnect and then reconnect it to Xero. Don't forget to take a screenshot of your current settings by clicking on "Configure" and checking the Export, Coding, and Advanced tabs. This way, you can easily set everything up again. - -Now you can seamlessly manage your connections with Xero while staying in control of your configurations! - -## Preferred Exporter - -Any Workspace admin can export to Xero, but only the preferred exporter will see reports that are ready for export in their Home. - -## Reimbursable Expenses - -Export to Xero as bills awaiting payment with the following additional settings: - -- Bill date β€” the bill is posted on the last day of the month in which expenses were incurred. - -To view the bills in Xero, navigate to *Business > Purchase Overview > Awaiting Payments*. Bills will be payable to the individual who created and reported the expense. - -## Non-reimbursable Expenses - -When you export non-reimbursable expenses, like company card transactions, to Xero they'll show up as bank transactions. Each expense is neatly listed as a separate line item in the bank account of your choice. Plus the transaction date matches the date on your bank statement for seamless tracking. - -To check out these expenses in Xero please follow these steps: - -1. Head over to your Dashboard. -2. Select your company card. -3. Locate the specific expense you're interested in. - -If you're managing company cards centrally, you can export expenses from each card to a designated account in Xero using Domains. This way, you have complete control and clarity over your company's finances! - -# How to Configure Coding for Xero - -The Coding tab in Expensify is where you configure Xero information to ensure accurate expense coding by your employees. Here's how you can access these settings: - -1. Navigate to Settings. -2. Go to Workspace within your specified group (Workspace Name). -3. Click on Connections, and then hit the Configure button. -4. Now, select the Coding tab. - -## Categories - -Xero expense accounts and those marked "Show In Expense Claims" will be automatically imported into Expensify as Categories. - -To manage these categories, follow these steps: - -1. After connecting, go to *Settings > Workspaces > Groups > [Workspace Name] > Categories*. -2. You can enable/disable categories using the checkbox. -3. For specific category rules (like default tax rate, maximum amount, receipts required, comments, and comment hints), click the settings cog. -4. Note that each expense must have a category selected for it to export to Xero, and these categories need to be imported from Xero; manual creation isn't an option within Workspace settings. - -## Tracking Categories - -1. If you use Tracking categories in Xero, you can import them into Expensify as Tags, Report Fields, or the Xero contact default. -- Tags apply a tracking category per expense. -- Report Field applies a tracking category to the entire report. -- Xero contact default applies the default tracking category set for the submitter in Xero. - -## Tax - -Looking to track tax in Expensify? Make sure that you have tax rates enabled in Xero and we will automatically grab those rates from Xero to allow your employees to categorize expenses with the appropriate tax rate. As an admin, you have the ability to set a default rate and also hide rates that are not applicable to the Workspace members. - -Tax tracking allows you to apply a tax rate and tax amount to each expense. -1. To set this up, enable Tax tracking in your Xero configuration. -2. After connecting, go to *Settings > Workspaces > Groups > [Workspace Name] > Tax to manage imported taxes from Xero.* -3. You can enable/disable taxes and set default tax rates for both Workspace currency expenses and foreign currency expenses. - -## Billable Expenses - -If you bill expenses to your customers, you can track and invoice them using Expensify and Xero. - -1. When enabled, Xero customer contacts are imported into Expensify as Tags for expense tracking. -- Note: In Xero, a Contact isn't a 'Customer' until they've had a bill raised against them. If you don't see your Customer imported as a tag, try raising a dummy invoice in Xero and then deleting/voiding it. -2. After exporting to Xero, tagged billable expenses can be included on a sales invoice to your customer. - -Please ensure that you meet the following requirements for expenses to be placed on a sales invoice: -1. Billable Expenses must be enabled in the Xero configuration settings. -2. The expense must be marked as billable. -3. The expense must be tagged with a customer. - -These steps should help you seamlessly manage your Xero integration within Expensify. - -# How to Configure Xero’s Advanced Settings - -If you've already set up your integration, but want to make adjustments, simply follow these steps: - -1. Go to Settings. -2. Then, navigate to Workspaces within your designated group [Workspace Name]. -3. Click on Connections, and next, hit the Configure button. - -From there, you can dive into the "Advanced" tab to make any additional tweaks. - -## Auto Sync - -For non-reimbursable reports: Once a report has completed the approval workflow in Expensify, we'll automatically queue it for export to Xero. - -But, if you've added a business bank account for ACH reimbursement, any reimbursable expenses will be sent to Xero automatically when the report is marked as reimbursed or enabled for reimbursement. - -### Controlling Newly Imported Categories: - -You can decide how newly imported categories behave in Expensify: - -1. Enabling or disabling this control determines the status of new categories imported from Xero to Expensify. Enabled categories are visible for employees when they categorize expenses, while disabled categories remain hidden. - -These settings give you the flexibility to manage your expenses and Workspace in the way that best suits your needs! - -## Sync Reimbursed Reports - -This nifty setting lets you synchronize the status of your reports between Expensify and Xero. Utilizing this setting will make sure that there is no confusion or possibility that a reimbursable report is paid out twice by mistake or that a non-reimbursable report is double entered throwing off month-end reconciliation. Here's how it works: - -1. When you reimburse a report via ACH direct deposit within Expensify, the purchase bill will automatically be marked as paid in Xero, and Expensify will note it as reimbursed. -2. Don't forget to pick the Xero account where the corresponding bill payment should be recorded. -3. It's a simple way to keep everything in sync, especially when you're awaiting payment. - -# Deep Dive - -## An Automatic Export Fails - -Sometimes, reports may encounter issues during automatic export to Xero. Not to worry, though! Here's what happens: - -1. The Technical Contact, your go-to person for technical matters, will receive an email explaining the problem. -2. You'll also find specific error messages at the bottom of the report. -3. To get things back on track, the report will be placed in the preferred exporter’s Home. They can review it and resolve any issues. - -## Consider Enforcing Expense Workspace Workflows: - -For added control, you can adjust your Workspace settings to strictly enforce expense Workspace. This way, you guarantee that your Workspace’s workflow is always followed. By default this flow is in place, but employees can modify the person they submit their reports to if it's not strictly enforced. - -## Customize Purchase Bill Status (Optional): - -You have the flexibility to set the status of your purchase bills just the way you want. Choose from the following options: - -1. Draft: Keep bills in a draft state until you're ready to finalize them. -2. Awaiting Approval: If you need approval before processing bills, this option is here for you. - -## Multi-Currency - -### Handling Multi-Currency in Xero - -When dealing with multi-currency transactions in Xero and exporting reimbursable expenses from Expensify here's what you need to know: - -1. The bill created in Xero will adopt the output currency set in your Expensify Workspace, provided that it's enabled in Xero. -2. Your general ledger reports will automatically convert to your home currency in Xero, leveraging the currency exchange rates defined in your Xero settings. It ensures everything aligns seamlessly. - -Now, for non-reimbursable expenses, things work slightly differently: - -1. Bank transactions will use the currency specified in your bank account in Xero, regardless of the currency used in Expensify. -2. If these currencies don't match, no worries! We apply a 1:1 exchange rate to make things smooth. To ensure a hassle-free experience, just ensure that the output currency in Expensify matches the currency specified in your Xero bank account. - -## Tax - -### Enabling Tax Tracking for Seamless Integration: - -To simplify tax tracking, enable it in your Xero configuration. This action will automatically bring all your Xero tax settings into Expensify, turning them into usable Taxes. - -### After connecting your Xero account with Expensify: - -1. Head to Settings. -2. Navigate to Workspaces within your specific group [Workspace Name]. -3. Click on Tax to view the taxes that have been imported from Xero. - -Now, here's where you can take control: - -1. Use the enable/disable button to choose which taxes your employees can apply to their expenses. Customize it to fit your needs. -2. You can set a default tax rate for expenses in your Workspace currency. Additionally, if you deal with foreign currency expenses, you have the option to set another default tax (including exempt) that will automatically apply to all new expenses in foreign currencies. - -This setup streamlines your tax management, making it effortless for your team to handle taxes on their expenses. - -## Export Invoices to Xero - -You can effortlessly export your invoices from Expensify to Xero and even attribute them to the right Customer. Plus, when you mark an invoice as paid in Expensify, the same status will smoothly transfer to Xero and vice versa, keeping your invoice tracking hassle-free. Let's dive in: - -### Setting up Invoice Export to Xero: - -1. Navigate to Settings. -2. Go to Workspaces within your designated group [Workspace Name]. -3. Click on Connections, then select Configuration. -4. Now, click on the Advanced tab. - -### Selecting Your Xero Invoice Collection Account: - -1. Scroll down until you find "Xero invoice collection account." You'll see a dropdown list of your available Accounts Receivable accounts imported from Xero. -2. Simply choose the account where you'd like your invoices to be exported. - -Pro Tip: If you don't see any accounts in the dropdown, try syncing your Xero connection. To do this, go back to the Connections page and hit "Sync Now." - -### Exporting an Invoice to Xero: - -Invoices will automatically make their way to Xero when they're in the Processing or Paid state. This ensures consistent tracking of unpaid and paid invoices. However, if you have Auto Sync disabled, you'll need to manually export your invoices along with your expense reports. Here's how: - -1. Head to your Reports page. -2. Use the filters to locate the invoices you want to export. -3. Select the invoices you wish to export. -4. Click Export to > Xero on the top right-hand side. - -### Matching Customers and Emails: - -When exporting to Xero, we match the recipient's email address with a customer record in Xero. So, make sure each customer in Xero has their email listed in their profile. -If we can't find a match, we'll create a new customer record in Xero. - -### Updating Invoice Status: - -1. When you mark an invoice as Paid in Expensify, this status will automatically reflect in Xero. -2. Similarly, if you mark an invoice as Paid in Xero, it will update automatically in Expensify. -3. The payment will be recorded in the Collection account you've chosen in your Advanced Settings Configuration. - -And that's it! You've successfully set up and managed your invoice exports to Xero, making your tracking smooth and efficient. - -# FAQ - -## Will receipt images be exported to Xero? - -Yes! The receipt images will be exported to Xero. To see them in Xero click the 'paper' icon in the upper right corner of the expense details and view a PDF of the Expensify report including the receipt image. - -## How does Auto Sync work if your workspace was initially connected to Xero with Auto Sync disabled? - -You can safely switch it on without affecting existing reports that haven't been exported. - -## How does Auto Sync work if a report has already been exported to Xero and reimbursed through ACH or marked as reimbursed in Expensify? - -It will be automatically marked as paid in Xero during the next sync. You may either manually update by clicking Sync Now in the Connections tab or Expensify does this on your behalf overnight every day! - -## How does Auto Sync work if a report has been exported to Xero and marked as paid in Xero? - -It will be automatically marked as reimbursed in Expensify during the next sync. If you need it updated immediately please go to the Connections tab and click Sync Now or if you can wait just let Expensify do it for you overnight. - -## How does Auto Sync work if a report has been exported to Xero and marked as paid in Xero? - -Reports that haven't been exported to Xero won't be sent automatically. ---> diff --git a/docs/assets/Files/Hosting b/docs/assets/Files/Hosting new file mode 100644 index 000000000000..ad2a361edc03 --- /dev/null +++ b/docs/assets/Files/Hosting @@ -0,0 +1 @@ +Holding tank for help.expensify.com support files diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_1.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_1.png new file mode 100644 index 000000000000..d4e73beb16b3 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_1.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_2.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_2.png new file mode 100644 index 000000000000..45956a586d98 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_2.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_3.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_3.png new file mode 100644 index 000000000000..32aae12d3687 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_3.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_4.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_4.png new file mode 100644 index 000000000000..ccd9335025bf Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_4.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_5.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_5.png new file mode 100644 index 000000000000..5363935f0ab5 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_5.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_6.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_6.png new file mode 100644 index 000000000000..739446de8383 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_6.png differ diff --git a/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_7.png b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_7.png new file mode 100644 index 000000000000..21a1d3416858 Binary files /dev/null and b/docs/assets/images/ManagingEmployeesAndReports_ApprovalWorkflows_7.png differ diff --git a/docs/assets/images/handshake.svg b/docs/assets/images/handshake.svg new file mode 100644 index 000000000000..04872bd3a88b --- /dev/null +++ b/docs/assets/images/handshake.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/expensify-classic/hubs/expensify-partner-program/index.html b/docs/expensify-classic/hubs/expensify-partner-program/index.html new file mode 100644 index 000000000000..c0a192c6e916 --- /dev/null +++ b/docs/expensify-classic/hubs/expensify-partner-program/index.html @@ -0,0 +1,6 @@ +--- +layout: default +title: Expensify Partner Program +--- + +{% include hub.html %} diff --git a/docs/expensify-classic/hubs/exports/index.html b/docs/expensify-classic/hubs/insights-and-custom-reporting/index.html similarity index 100% rename from docs/expensify-classic/hubs/exports/index.html rename to docs/expensify-classic/hubs/insights-and-custom-reporting/index.html diff --git a/docs/expensify-classic/hubs/policy-and-domain-settings/index.html b/docs/expensify-classic/hubs/workspace-and-domain-settings/index.html similarity index 100% rename from docs/expensify-classic/hubs/policy-and-domain-settings/index.html rename to docs/expensify-classic/hubs/workspace-and-domain-settings/index.html diff --git a/docs/expensify-classic/hubs/policy-and-domain-settings/reports.html b/docs/expensify-classic/hubs/workspace-and-domain-settings/reports.html similarity index 100% rename from docs/expensify-classic/hubs/policy-and-domain-settings/reports.html rename to docs/expensify-classic/hubs/workspace-and-domain-settings/reports.html diff --git a/docs/new-expensify/hubs/expensify-partner-program/index.html b/docs/new-expensify/hubs/expensify-partner-program/index.html new file mode 100644 index 000000000000..c0a192c6e916 --- /dev/null +++ b/docs/new-expensify/hubs/expensify-partner-program/index.html @@ -0,0 +1,6 @@ +--- +layout: default +title: Expensify Partner Program +--- + +{% include hub.html %} diff --git a/docs/new-expensify/hubs/exports/index.html b/docs/new-expensify/hubs/insights-and-custom-reporting/index.html similarity index 100% rename from docs/new-expensify/hubs/exports/index.html rename to docs/new-expensify/hubs/insights-and-custom-reporting/index.html diff --git a/fastlane/Fastfile b/fastlane/Fastfile index dac53193fdc6..78abf8074155 100644 --- a/fastlane/Fastfile +++ b/fastlane/Fastfile @@ -305,7 +305,10 @@ platform :ios do export_compliance_contains_proprietary_cryptography: false, # We do not show any third party content - content_rights_contains_third_party_content: false + content_rights_contains_third_party_content: false, + + # Indicate that our key has admin permissions + content_rights_has_rights: true }, release_notes: { 'en-US' => "Improvements and bug fixes" diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 32506cc25a89..95a9a26df7f6 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.3.84 + 1.3.87 CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +40,7 @@ CFBundleVersion - 1.3.84.0 + 1.3.87.8 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 8e2c10ee1c71..d41b75440036 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.3.84 + 1.3.87 CFBundleSignature ???? CFBundleVersion - 1.3.84.0 + 1.3.87.8 diff --git a/package-lock.json b/package-lock.json index 4030bc26bf7e..65c2be0529e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.3.84-0", + "version": "1.3.87-8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.3.84-0", + "version": "1.3.87-8", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -43,7 +43,6 @@ "@types/node": "^18.14.0", "@ua/react-native-airship": "^15.2.6", "awesome-phonenumber": "^5.4.0", - "babel-plugin-transform-remove-console": "^6.9.4", "babel-polyfill": "^6.26.0", "canvas-size": "^1.2.6", "core-js": "^3.32.0", @@ -51,7 +50,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#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b", + "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#bdbdf44825658500ba581d3e86237d7b8996cc2e", "fbjs": "^3.0.2", "htmlparser2": "^7.2.0", "idb-keyval": "^6.2.1", @@ -138,8 +137,6 @@ "@babel/runtime": "^7.20.0", "@electron/notarize": "^1.2.3", "@jest/globals": "^29.5.0", - "@kie/act-js": "^2.0.1", - "@kie/mock-github": "^1.0.0", "@octokit/core": "4.0.4", "@octokit/plugin-paginate-rest": "3.1.0", "@octokit/plugin-throttling": "4.1.0", @@ -171,7 +168,7 @@ "@types/react-dom": "^18.2.4", "@types/react-pdf": "^5.7.2", "@types/react-test-renderer": "^18.0.0", - "@types/semver": "^7.5.0", + "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", "@typescript-eslint/eslint-plugin": "^6.2.1", @@ -222,7 +219,7 @@ "react-native-performance-flipper-reporter": "^2.0.0", "react-native-svg-transformer": "^1.0.0", "react-test-renderer": "18.2.0", - "reassure": "^0.9.0", + "reassure": "^0.10.1", "setimmediate": "^1.0.5", "shellcheck": "^1.1.0", "style-loader": "^2.0.0", @@ -2539,16 +2536,21 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.22.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz", - "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/@babel/template": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", @@ -2623,13 +2625,13 @@ "license": "Apache-2.0" }, "node_modules/@callstack/reassure-cli": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-cli/-/reassure-cli-0.9.0.tgz", - "integrity": "sha512-auoxqyilxkT5mDdEPJqRRY+ZGlrihJjFQpopcFd/15ng76OPVka3L48RMEY2wXkFXLaOOs6enNGb596jYPuEtQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-cli/-/reassure-cli-0.10.0.tgz", + "integrity": "sha512-CYgOGOAWcFgA2GrJw6RJAvImCpHCpPbtPoYMDol7esjlRCX2QwIKG7/9byq47hML57w94fhFAa76KD84YlgMBg==", "dev": true, "dependencies": { - "@callstack/reassure-compare": "0.5.0", - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-compare": "0.6.0", + "@callstack/reassure-logger": "0.3.1", "chalk": "4.1.2", "simple-git": "^3.16.0", "yargs": "^17.6.2" @@ -2759,12 +2761,12 @@ } }, "node_modules/@callstack/reassure-compare": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-compare/-/reassure-compare-0.5.0.tgz", - "integrity": "sha512-3sBeJ/+Hxjdb01KVb8LszO1kcJ8TXcrVnerUj+LYn2dkBOohAMqGYaOvCeoWsVEHJ+MIOzmvAGBJQRu69RoJdQ==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-compare/-/reassure-compare-0.6.0.tgz", + "integrity": "sha512-P3nmv36CJrQSXg0+z6EuEV/0xAbvxWbAZ7diQHnkbvqk2z8PKRXpkcthrRUpe02wLewa0MLxBUJwLenFnhxIRg==", "dev": true, "dependencies": { - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-logger": "0.3.1", "markdown-builder": "^0.9.0", "markdown-table": "^2.0.0", "zod": "^3.20.2" @@ -2777,9 +2779,9 @@ "dev": true }, "node_modules/@callstack/reassure-logger": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-logger/-/reassure-logger-0.3.0.tgz", - "integrity": "sha512-JX5o+8qkIbIRL+cQn9XlQYdv9p/3L6J70zZX6NYi9j0VrSS9PZIRfo8ujMdLSqUNV6HZN1ay59RzuncLjVu0aQ==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@callstack/reassure-logger/-/reassure-logger-0.3.1.tgz", + "integrity": "sha512-IUsNrxVMdt0zgD2IN2snGVGUG8Yc6F3SWaPF8RXUn8qi7XZuYC6WevEL+mIKmlbTTa7qlX9brkn0pJoXAjfcPQ==", "dev": true, "dependencies": { "chalk": "4.1.2" @@ -2856,12 +2858,12 @@ } }, "node_modules/@callstack/reassure-measure": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-measure/-/reassure-measure-0.5.0.tgz", - "integrity": "sha512-KwlmNYcspBOp7FIw6XOz5O9mnKB4cWCCyM6vG4nFUPHSWQ6yVdRkawVvoPIV5qJ2hw7zCzdtqRrLWQSTF4eKlg==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-measure/-/reassure-measure-0.6.0.tgz", + "integrity": "sha512-phXY5DAtKhnu8dA2pmnl+pqFOfrVEFFDJOi4AnObwIcpDSn3IUXgNSe7rSi+JP/mXNWMLoUS8rnH4iIFDyf7qQ==", "dev": true, "dependencies": { - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-logger": "0.3.1", "mathjs": "^11.5.0" }, "peerDependencies": { @@ -5460,7 +5462,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/@kie/act-js/-/act-js-2.3.0.tgz", "integrity": "sha512-Q9k0b05uA46jXKWmVfoGDW+0xsCcE7QPiHi8IH7h41P36DujHKBj4k28RCeIEx3IwUCxYHKwubN8DH4Vzc9XcA==", - "dev": true, "hasInstallScript": true, "dependencies": { "@kie/mock-github": "^2.0.0", @@ -5480,7 +5481,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@kie/mock-github/-/mock-github-2.0.0.tgz", "integrity": "sha512-od6UyICJYKMnz9HgEWCQAFT/JsCpKkLp+JQH8fV23tf+ZmmQI1dK3C20k6aO5uJhAHA0yOcFtbKFVF4+8i3DTg==", - "dev": true, "dependencies": { "@octokit/openapi-types-ghec": "^18.0.0", "ajv": "^8.11.0", @@ -5495,14 +5495,12 @@ "node_modules/@kie/act-js/node_modules/@octokit/openapi-types-ghec": { "version": "18.1.1", "resolved": "https://registry.npmjs.org/@octokit/openapi-types-ghec/-/openapi-types-ghec-18.1.1.tgz", - "integrity": "sha512-5Ri7FLYX4gJSdG+G0Q8QDca/gOLfkPN4YR2hkbVg6hEL+0N62MIsJPTyNaT9pGEXCLd1KbYV6Lh3T2ggsmyBJw==", - "dev": true + "integrity": "sha512-5Ri7FLYX4gJSdG+G0Q8QDca/gOLfkPN4YR2hkbVg6hEL+0N62MIsJPTyNaT9pGEXCLd1KbYV6Lh3T2ggsmyBJw==" }, "node_modules/@kie/act-js/node_modules/fs-extra": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -5516,7 +5514,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", - "dev": true, "engines": { "node": ">=6" } @@ -5525,7 +5522,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@kie/mock-github/-/mock-github-1.1.0.tgz", "integrity": "sha512-fD+utlOiyZSOutOcXL0G9jfjbtvOO44PLUyTfgfkrm1+575R/dbvU6AcJfjc1DtHeRv7FC7f4ebyU+a1wgL6CA==", - "dev": true, "dependencies": { "@octokit/openapi-types-ghec": "^14.0.0", "ajv": "^8.11.0", @@ -5541,7 +5537,6 @@ "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -5555,7 +5550,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", - "dev": true, "engines": { "node": ">=6" } @@ -5564,7 +5558,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz", "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==", - "dev": true, "dependencies": { "debug": "^4.1.1" } @@ -5572,8 +5565,7 @@ "node_modules/@kwsites/promise-deferred": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz", - "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==", - "dev": true + "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==" }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", @@ -5952,7 +5944,6 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.stat": "2.0.5", @@ -5966,7 +5957,6 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", - "dev": true, "license": "MIT", "engines": { "node": ">= 8" @@ -5976,7 +5966,6 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", - "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.scandir": "2.1.5", @@ -6107,8 +6096,7 @@ "node_modules/@octokit/openapi-types-ghec": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types-ghec/-/openapi-types-ghec-14.0.0.tgz", - "integrity": "sha512-xhd9oEvn2aroGn+sk09Ptx/76Y7aKU0EIgHukHPCU1+rGJreO36baEEk6k8ZPblieHNM39FcykJQmtDrETm0KA==", - "dev": true + "integrity": "sha512-xhd9oEvn2aroGn+sk09Ptx/76Y7aKU0EIgHukHPCU1+rGJreO36baEEk6k8ZPblieHNM39FcykJQmtDrETm0KA==" }, "node_modules/@octokit/plugin-paginate-rest": { "version": "3.1.0", @@ -19888,9 +19876,9 @@ "license": "MIT" }, "node_modules/@types/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==", "dev": true }, "node_modules/@types/serve-index": { @@ -21213,7 +21201,6 @@ "version": "0.5.10", "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz", "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==", - "dev": true, "engines": { "node": ">=6.0" } @@ -21844,7 +21831,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", - "dev": true, "license": "MIT" }, "node_modules/array-includes": { @@ -23287,7 +23273,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-4.0.2.tgz", "integrity": "sha512-jxJ0PbXR8eQyPlExCvCs3JFnikvs1Yp4gUJt6nmgathdOwvur+q22KWC3h20gvWl4T/14DXKj2IlkJwwZkZPOw==", - "dev": true, "dependencies": { "cmd-shim": "^6.0.0", "npm-normalize-package-bin": "^3.0.0", @@ -23302,7 +23287,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true, "engines": { "node": ">=14" }, @@ -23314,7 +23298,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", - "dev": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" @@ -23397,7 +23380,6 @@ }, "node_modules/body-parser": { "version": "1.20.0", - "dev": true, "license": "MIT", "dependencies": { "bytes": "3.1.2", @@ -23422,7 +23404,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.8" @@ -23432,7 +23413,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "license": "MIT", "dependencies": { "ms": "2.0.0" @@ -23442,7 +23422,6 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, "license": "MIT", "dependencies": { "safer-buffer": ">= 2.1.2 < 3" @@ -23455,7 +23434,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true, "license": "MIT" }, "node_modules/bonjour-service": { @@ -24531,7 +24509,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "dev": true, "license": "ISC", "engines": { "node": ">=10" @@ -24960,7 +24937,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz", "integrity": "sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==", - "dev": true, "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } @@ -25403,7 +25379,6 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", - "dev": true, "license": "MIT", "dependencies": { "safe-buffer": "5.2.1" @@ -25416,7 +25391,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true, "funding": [ { "type": "github", @@ -25435,7 +25409,6 @@ }, "node_modules/content-type": { "version": "1.0.4", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -25450,7 +25423,6 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -25460,7 +25432,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", - "dev": true, "license": "MIT" }, "node_modules/copy-concurrently": { @@ -30218,8 +30189,8 @@ }, "node_modules/expensify-common": { "version": "1.0.0", - "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b", - "integrity": "sha512-mD9p6Qj8FfvLdb6JLXvF0UNqLN6ymssUU67Fm37zmK18hd1Abw+vR/pQkNpHR2iv+KRs8HdcyuZ0vaOec4VrFQ==", + "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#bdbdf44825658500ba581d3e86237d7b8996cc2e", + "integrity": "sha512-/kXD/18YQJY/iWB5MOSN0ixB1mpxUA+NXEYgKjac1tJd+DoY3K6+bDeu++Qfqg26LCNfvjTkjkDGZVdGsJQ7Hw==", "license": "MIT", "dependencies": { "classnames": "2.3.1", @@ -30315,7 +30286,6 @@ }, "node_modules/express": { "version": "4.18.1", - "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", @@ -30358,7 +30328,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "license": "MIT", "dependencies": { "ms": "2.0.0" @@ -30368,14 +30337,12 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true, "license": "MIT" }, "node_modules/express/node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true, "funding": [ { "type": "github", @@ -30577,7 +30544,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", - "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -30662,7 +30628,6 @@ }, "node_modules/fastq": { "version": "1.13.0", - "dev": true, "license": "ISC", "dependencies": { "reusify": "^1.0.4" @@ -30896,7 +30861,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", - "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", @@ -30915,7 +30879,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "license": "MIT", "dependencies": { "ms": "2.0.0" @@ -30925,7 +30888,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true, "license": "MIT" }, "node_modules/find-babel-config": { @@ -31112,7 +31074,6 @@ "version": "1.15.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", - "dev": true, "funding": [ { "type": "individual", @@ -31373,23 +31334,22 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.4.tgz", + "integrity": "sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==", "dev": true, "engines": { "node": "*" }, "funding": { "type": "patreon", - "url": "https://www.patreon.com/infusion" + "url": "https://github.com/sponsors/rawify" } }, "node_modules/fragment-cache": { @@ -31450,7 +31410,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "dev": true, "license": "ISC", "dependencies": { "minipass": "^3.0.0" @@ -31715,7 +31674,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "devOptional": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -33535,7 +33493,6 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.10" @@ -33860,7 +33817,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "devOptional": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -33936,7 +33892,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "devOptional": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -37363,7 +37318,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==", - "dev": true, "license": "ISC" }, "node_modules/json5": { @@ -38283,20 +38237,20 @@ } }, "node_modules/mathjs": { - "version": "11.8.0", - "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.8.0.tgz", - "integrity": "sha512-I7r8HCoqUGyEiHQdeOCF2m2k9N+tcOHO3cZQ3tyJkMMBQMFqMR7dMQEboBMJAiFW2Um3PEItGPwcOc4P6KRqwg==", + "version": "11.11.2", + "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.11.2.tgz", + "integrity": "sha512-SL4/0Fxm9X4sgovUpJTeyVeZ2Ifnk4tzLPTYWDyR3AIx9SabnXYqtCkyJtmoF3vZrDPKGkLvrhbIL4YN2YbXLQ==", "dev": true, "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.23.1", "complex.js": "^2.1.1", "decimal.js": "^10.4.3", "escape-latex": "^1.2.0", - "fraction.js": "^4.2.0", + "fraction.js": "4.3.4", "javascript-natural-sort": "^0.7.1", "seedrandom": "^3.0.5", "tiny-emitter": "^2.1.0", - "typed-function": "^4.1.0" + "typed-function": "^4.1.1" }, "bin": { "mathjs": "bin/cli.js" @@ -38879,7 +38833,6 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -39119,7 +39072,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", - "dev": true, "license": "MIT" }, "node_modules/merge-options": { @@ -39155,7 +39107,6 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "dev": true, "license": "MIT", "engines": { "node": ">= 8" @@ -39165,7 +39116,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -41062,7 +41012,6 @@ "version": "3.3.6", "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -41113,7 +41062,6 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "dev": true, "license": "MIT", "dependencies": { "minipass": "^3.0.0", @@ -41210,7 +41158,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "dev": true, "license": "MIT", "bin": { "mkdirp": "bin/cmd.js" @@ -41446,7 +41393,6 @@ "version": "13.3.3", "resolved": "https://registry.npmjs.org/nock/-/nock-13.3.3.tgz", "integrity": "sha512-z+KUlILy9SK/RjpeXDiDUEAq4T94ADPHE3qaRkf66mpEhzc/ytOMm3Bwdrbq6k1tMWkbdujiKim3G2tfQARuJw==", - "dev": true, "dependencies": { "debug": "^4.1.0", "json-stringify-safe": "^5.0.1", @@ -41676,7 +41622,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz", "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==", - "dev": true, "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } @@ -42888,7 +42833,6 @@ "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", - "dev": true, "license": "MIT" }, "node_modules/path-type": { @@ -43605,7 +43549,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/propagate/-/propagate-2.0.1.tgz", "integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==", - "dev": true, "engines": { "node": ">= 8" } @@ -43633,7 +43576,6 @@ "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", - "dev": true, "license": "MIT", "dependencies": { "forwarded": "0.2.0", @@ -43921,7 +43863,6 @@ "version": "6.10.3", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz", "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==", - "dev": true, "dependencies": { "side-channel": "^1.0.4" }, @@ -43982,7 +43923,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true, "funding": [ { "type": "github", @@ -44064,7 +44004,6 @@ "version": "2.5.1", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", - "dev": true, "license": "MIT", "dependencies": { "bytes": "3.1.2", @@ -44080,7 +44019,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.8" @@ -44090,7 +44028,6 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, "license": "MIT", "dependencies": { "safer-buffer": ">= 2.1.2 < 3" @@ -45942,7 +45879,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz", "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==", - "dev": true, "engines": { "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } @@ -46189,14 +46125,14 @@ "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==" }, "node_modules/reassure": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/reassure/-/reassure-0.9.0.tgz", - "integrity": "sha512-FIf0GPchyPGItsrW5Wwff/NWVrfOcCUuJJSs4Nur6iRdQt8yvmCpcba4UyemdZ1KaFTIW1gKbAV3u2tuA7zmtQ==", + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/reassure/-/reassure-0.10.1.tgz", + "integrity": "sha512-+GANr5ojh32NZu1YGfa6W8vIJm3iOIZJUvXT5Gc9fQyre7okYsCzyBq9WsHbnAQDjNq1g9SsM/4bwcVET9OIqA==", "dev": true, "dependencies": { - "@callstack/reassure-cli": "0.9.0", + "@callstack/reassure-cli": "0.10.0", "@callstack/reassure-danger": "0.1.1", - "@callstack/reassure-measure": "0.5.0" + "@callstack/reassure-measure": "0.6.0" } }, "node_modules/recast": { @@ -47097,7 +47033,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", - "dev": true, "license": "MIT", "engines": { "iojs": ">=1.0.0", @@ -47192,7 +47127,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "dev": true, "funding": [ { "type": "github", @@ -47927,7 +47861,6 @@ "version": "3.19.0", "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.19.0.tgz", "integrity": "sha512-hyH2p9Ptxjf/xPuL7HfXbpYt9gKhC1yWDh3KYIAYJJePAKV7AEjLN4xhp7lozOdNiaJ9jlVvAbBymVlcS2jRiA==", - "dev": true, "dependencies": { "@kwsites/file-exists": "^1.1.1", "@kwsites/promise-deferred": "^1.1.1", @@ -49131,7 +49064,6 @@ "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==", "dev": true, - "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -49470,7 +49402,6 @@ "version": "6.1.15", "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", - "dev": true, "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", @@ -49487,7 +49418,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", - "dev": true, "engines": { "node": ">=8" } @@ -50319,7 +50249,6 @@ "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", - "dev": true, "license": "MIT", "dependencies": { "media-typer": "0.3.0", @@ -50391,9 +50320,9 @@ } }, "node_modules/typed-function": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.0.tgz", - "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.1.tgz", + "integrity": "sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ==", "dev": true, "engines": { "node": ">= 14" @@ -53266,9 +53195,9 @@ } }, "node_modules/zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", "dev": true, "funding": { "url": "https://github.com/sponsors/colinhacks" @@ -54803,11 +54732,18 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "@babel/runtime": { - "version": "7.22.3", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz", - "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", + "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", "requires": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + } } }, "@babel/template": { @@ -54871,13 +54807,13 @@ "dev": true }, "@callstack/reassure-cli": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-cli/-/reassure-cli-0.9.0.tgz", - "integrity": "sha512-auoxqyilxkT5mDdEPJqRRY+ZGlrihJjFQpopcFd/15ng76OPVka3L48RMEY2wXkFXLaOOs6enNGb596jYPuEtQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-cli/-/reassure-cli-0.10.0.tgz", + "integrity": "sha512-CYgOGOAWcFgA2GrJw6RJAvImCpHCpPbtPoYMDol7esjlRCX2QwIKG7/9byq47hML57w94fhFAa76KD84YlgMBg==", "dev": true, "requires": { - "@callstack/reassure-compare": "0.5.0", - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-compare": "0.6.0", + "@callstack/reassure-logger": "0.3.1", "chalk": "4.1.2", "simple-git": "^3.16.0", "yargs": "^17.6.2" @@ -54973,12 +54909,12 @@ } }, "@callstack/reassure-compare": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-compare/-/reassure-compare-0.5.0.tgz", - "integrity": "sha512-3sBeJ/+Hxjdb01KVb8LszO1kcJ8TXcrVnerUj+LYn2dkBOohAMqGYaOvCeoWsVEHJ+MIOzmvAGBJQRu69RoJdQ==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-compare/-/reassure-compare-0.6.0.tgz", + "integrity": "sha512-P3nmv36CJrQSXg0+z6EuEV/0xAbvxWbAZ7diQHnkbvqk2z8PKRXpkcthrRUpe02wLewa0MLxBUJwLenFnhxIRg==", "dev": true, "requires": { - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-logger": "0.3.1", "markdown-builder": "^0.9.0", "markdown-table": "^2.0.0", "zod": "^3.20.2" @@ -54991,9 +54927,9 @@ "dev": true }, "@callstack/reassure-logger": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-logger/-/reassure-logger-0.3.0.tgz", - "integrity": "sha512-JX5o+8qkIbIRL+cQn9XlQYdv9p/3L6J70zZX6NYi9j0VrSS9PZIRfo8ujMdLSqUNV6HZN1ay59RzuncLjVu0aQ==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@callstack/reassure-logger/-/reassure-logger-0.3.1.tgz", + "integrity": "sha512-IUsNrxVMdt0zgD2IN2snGVGUG8Yc6F3SWaPF8RXUn8qi7XZuYC6WevEL+mIKmlbTTa7qlX9brkn0pJoXAjfcPQ==", "dev": true, "requires": { "chalk": "4.1.2" @@ -55051,12 +54987,12 @@ } }, "@callstack/reassure-measure": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@callstack/reassure-measure/-/reassure-measure-0.5.0.tgz", - "integrity": "sha512-KwlmNYcspBOp7FIw6XOz5O9mnKB4cWCCyM6vG4nFUPHSWQ6yVdRkawVvoPIV5qJ2hw7zCzdtqRrLWQSTF4eKlg==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@callstack/reassure-measure/-/reassure-measure-0.6.0.tgz", + "integrity": "sha512-phXY5DAtKhnu8dA2pmnl+pqFOfrVEFFDJOi4AnObwIcpDSn3IUXgNSe7rSi+JP/mXNWMLoUS8rnH4iIFDyf7qQ==", "dev": true, "requires": { - "@callstack/reassure-logger": "0.3.0", + "@callstack/reassure-logger": "0.3.1", "mathjs": "^11.5.0" } }, @@ -56877,7 +56813,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/@kie/act-js/-/act-js-2.3.0.tgz", "integrity": "sha512-Q9k0b05uA46jXKWmVfoGDW+0xsCcE7QPiHi8IH7h41P36DujHKBj4k28RCeIEx3IwUCxYHKwubN8DH4Vzc9XcA==", - "dev": true, "requires": { "@kie/mock-github": "^2.0.0", "adm-zip": "^0.5.10", @@ -56893,7 +56828,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@kie/mock-github/-/mock-github-2.0.0.tgz", "integrity": "sha512-od6UyICJYKMnz9HgEWCQAFT/JsCpKkLp+JQH8fV23tf+ZmmQI1dK3C20k6aO5uJhAHA0yOcFtbKFVF4+8i3DTg==", - "dev": true, "requires": { "@octokit/openapi-types-ghec": "^18.0.0", "ajv": "^8.11.0", @@ -56908,14 +56842,12 @@ "@octokit/openapi-types-ghec": { "version": "18.1.1", "resolved": "https://registry.npmjs.org/@octokit/openapi-types-ghec/-/openapi-types-ghec-18.1.1.tgz", - "integrity": "sha512-5Ri7FLYX4gJSdG+G0Q8QDca/gOLfkPN4YR2hkbVg6hEL+0N62MIsJPTyNaT9pGEXCLd1KbYV6Lh3T2ggsmyBJw==", - "dev": true + "integrity": "sha512-5Ri7FLYX4gJSdG+G0Q8QDca/gOLfkPN4YR2hkbVg6hEL+0N62MIsJPTyNaT9pGEXCLd1KbYV6Lh3T2ggsmyBJw==" }, "fs-extra": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, "requires": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -56925,8 +56857,7 @@ "totalist": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", - "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", - "dev": true + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==" } } }, @@ -56934,7 +56865,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@kie/mock-github/-/mock-github-1.1.0.tgz", "integrity": "sha512-fD+utlOiyZSOutOcXL0G9jfjbtvOO44PLUyTfgfkrm1+575R/dbvU6AcJfjc1DtHeRv7FC7f4ebyU+a1wgL6CA==", - "dev": true, "requires": { "@octokit/openapi-types-ghec": "^14.0.0", "ajv": "^8.11.0", @@ -56950,7 +56880,6 @@ "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", - "dev": true, "requires": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -56960,8 +56889,7 @@ "totalist": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", - "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", - "dev": true + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==" } } }, @@ -56969,7 +56897,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz", "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==", - "dev": true, "requires": { "debug": "^4.1.1" } @@ -56977,8 +56904,7 @@ "@kwsites/promise-deferred": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz", - "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==", - "dev": true + "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==" }, "@leichtgewicht/ip-codec": { "version": "2.0.4", @@ -57260,7 +57186,6 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "dev": true, "requires": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" @@ -57269,14 +57194,12 @@ "@nodelib/fs.stat": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", - "dev": true + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==" }, "@nodelib/fs.walk": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", - "dev": true, "requires": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" @@ -57388,8 +57311,7 @@ "@octokit/openapi-types-ghec": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types-ghec/-/openapi-types-ghec-14.0.0.tgz", - "integrity": "sha512-xhd9oEvn2aroGn+sk09Ptx/76Y7aKU0EIgHukHPCU1+rGJreO36baEEk6k8ZPblieHNM39FcykJQmtDrETm0KA==", - "dev": true + "integrity": "sha512-xhd9oEvn2aroGn+sk09Ptx/76Y7aKU0EIgHukHPCU1+rGJreO36baEEk6k8ZPblieHNM39FcykJQmtDrETm0KA==" }, "@octokit/plugin-paginate-rest": { "version": "3.1.0", @@ -67333,9 +67255,9 @@ "integrity": "sha512-AnxLHewubLVzoF/A4qdxBGHCKifw8cY32iro3DQX9TPcetE95zBeVt3jnsvtvAUf1vwzMfwzp4t/L2yqPlnjkQ==" }, "@types/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==", "dev": true }, "@types/serve-index": { @@ -68302,8 +68224,7 @@ "adm-zip": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz", - "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==", - "dev": true + "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==" }, "agent-base": { "version": "6.0.2", @@ -68781,8 +68702,7 @@ "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", - "dev": true + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, "array-includes": { "version": "3.1.6", @@ -69838,7 +69758,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-4.0.2.tgz", "integrity": "sha512-jxJ0PbXR8eQyPlExCvCs3JFnikvs1Yp4gUJt6nmgathdOwvur+q22KWC3h20gvWl4T/14DXKj2IlkJwwZkZPOw==", - "dev": true, "requires": { "cmd-shim": "^6.0.0", "npm-normalize-package-bin": "^3.0.0", @@ -69849,14 +69768,12 @@ "signal-exit": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", - "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", - "dev": true + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" }, "write-file-atomic": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", - "dev": true, "requires": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" @@ -69929,7 +69846,6 @@ }, "body-parser": { "version": "1.20.0", - "dev": true, "requires": { "bytes": "3.1.2", "content-type": "~1.0.4", @@ -69948,14 +69864,12 @@ "bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==" }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -69964,7 +69878,6 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" } @@ -69972,8 +69885,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" } } }, @@ -70740,8 +70652,7 @@ "chownr": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", - "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", - "dev": true + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==" }, "chrome-trace-event": { "version": "1.0.3", @@ -71042,8 +70953,7 @@ "cmd-shim": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz", - "integrity": "sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==", - "dev": true + "integrity": "sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==" }, "co": { "version": "4.6.0", @@ -71377,7 +71287,6 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", - "dev": true, "requires": { "safe-buffer": "5.2.1" }, @@ -71385,14 +71294,12 @@ "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" } } }, "content-type": { - "version": "1.0.4", - "dev": true + "version": "1.0.4" }, "convert-source-map": { "version": "1.9.0", @@ -71402,14 +71309,12 @@ "cookie": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", - "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", - "dev": true + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==" }, "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", - "dev": true + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, "copy-concurrently": { "version": "1.0.5", @@ -74869,9 +74774,9 @@ } }, "expensify-common": { - "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", + "version": "git+ssh://git@github.com/Expensify/expensify-common.git#bdbdf44825658500ba581d3e86237d7b8996cc2e", + "integrity": "sha512-/kXD/18YQJY/iWB5MOSN0ixB1mpxUA+NXEYgKjac1tJd+DoY3K6+bDeu++Qfqg26LCNfvjTkjkDGZVdGsJQ7Hw==", + "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#bdbdf44825658500ba581d3e86237d7b8996cc2e", "requires": { "classnames": "2.3.1", "clipboard": "2.0.4", @@ -74943,7 +74848,6 @@ }, "express": { "version": "4.18.1", - "dev": true, "requires": { "accepts": "~1.3.8", "array-flatten": "1.1.1", @@ -74982,7 +74886,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -74990,14 +74893,12 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, "safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" } } }, @@ -75137,7 +75038,6 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", - "dev": true, "requires": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -75196,7 +75096,6 @@ }, "fastq": { "version": "1.13.0", - "dev": true, "requires": { "reusify": "^1.0.4" } @@ -75375,7 +75274,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==", - "dev": true, "requires": { "debug": "2.6.9", "encodeurl": "~1.0.2", @@ -75390,7 +75288,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -75398,8 +75295,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", - "dev": true + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" } } }, @@ -75537,8 +75433,7 @@ "follow-redirects": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", - "dev": true + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==" }, "for-each": { "version": "0.3.3", @@ -75704,13 +75599,12 @@ "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", - "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", - "dev": true + "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==" }, "fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.4.tgz", + "integrity": "sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==", "dev": true }, "fragment-cache": { @@ -75757,7 +75651,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "dev": true, "requires": { "minipass": "^3.0.0" } @@ -75940,7 +75833,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "devOptional": true, "requires": { "is-glob": "^4.0.1" } @@ -77230,8 +77122,7 @@ "ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", - "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", - "dev": true + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" }, "is-absolute-url": { "version": "3.0.3", @@ -77426,8 +77317,7 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "devOptional": true + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" }, "is-finalizationregistry": { "version": "1.0.2", @@ -77474,7 +77364,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "devOptional": true, "requires": { "is-extglob": "^2.1.1" } @@ -79885,8 +79774,7 @@ "json-stringify-safe": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==", - "dev": true + "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==" }, "json5": { "version": "2.2.3", @@ -80554,20 +80442,20 @@ } }, "mathjs": { - "version": "11.8.0", - "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.8.0.tgz", - "integrity": "sha512-I7r8HCoqUGyEiHQdeOCF2m2k9N+tcOHO3cZQ3tyJkMMBQMFqMR7dMQEboBMJAiFW2Um3PEItGPwcOc4P6KRqwg==", + "version": "11.11.2", + "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-11.11.2.tgz", + "integrity": "sha512-SL4/0Fxm9X4sgovUpJTeyVeZ2Ifnk4tzLPTYWDyR3AIx9SabnXYqtCkyJtmoF3vZrDPKGkLvrhbIL4YN2YbXLQ==", "dev": true, "requires": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.23.1", "complex.js": "^2.1.1", "decimal.js": "^10.4.3", "escape-latex": "^1.2.0", - "fraction.js": "^4.2.0", + "fraction.js": "4.3.4", "javascript-natural-sort": "^0.7.1", "seedrandom": "^3.0.5", "tiny-emitter": "^2.1.0", - "typed-function": "^4.1.0" + "typed-function": "^4.1.1" } }, "md5.js": { @@ -81009,8 +80897,7 @@ "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", - "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", - "dev": true + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==" }, "mem": { "version": "8.1.1", @@ -81185,8 +81072,7 @@ "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", - "dev": true + "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==" }, "merge-options": { "version": "3.0.4", @@ -81212,14 +81098,12 @@ "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "dev": true + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==" }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", - "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", - "dev": true + "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==" }, "metro": { "version": "0.76.8", @@ -82582,7 +82466,6 @@ "version": "3.3.6", "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", - "dev": true, "requires": { "yallist": "^4.0.0" } @@ -82618,7 +82501,6 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "dev": true, "requires": { "minipass": "^3.0.0", "yallist": "^4.0.0" @@ -82692,8 +82574,7 @@ "mkdirp": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", - "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", - "dev": true + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==" }, "mock-fs": { "version": "4.14.0", @@ -82865,7 +82746,6 @@ "version": "13.3.3", "resolved": "https://registry.npmjs.org/nock/-/nock-13.3.3.tgz", "integrity": "sha512-z+KUlILy9SK/RjpeXDiDUEAq4T94ADPHE3qaRkf66mpEhzc/ytOMm3Bwdrbq6k1tMWkbdujiKim3G2tfQARuJw==", - "dev": true, "requires": { "debug": "^4.1.0", "json-stringify-safe": "^5.0.1", @@ -83041,8 +82921,7 @@ "npm-normalize-package-bin": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz", - "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==", - "dev": true + "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==" }, "npm-run-path": { "version": "4.0.1", @@ -83888,8 +83767,7 @@ "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==", - "dev": true + "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==" }, "path-type": { "version": "4.0.0", @@ -84394,8 +84272,7 @@ "propagate": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/propagate/-/propagate-2.0.1.tgz", - "integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==", - "dev": true + "integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==" }, "property-information": { "version": "5.6.0", @@ -84415,7 +84292,6 @@ "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", - "dev": true, "requires": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" @@ -84632,7 +84508,6 @@ "version": "6.10.3", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz", "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==", - "dev": true, "requires": { "side-channel": "^1.0.4" } @@ -84673,8 +84548,7 @@ "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", - "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" }, "quick-lru": { "version": "5.1.1", @@ -84724,7 +84598,6 @@ "version": "2.5.1", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", - "dev": true, "requires": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -84735,14 +84608,12 @@ "bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==" }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dev": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" } @@ -85993,8 +85864,7 @@ "read-cmd-shim": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz", - "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==", - "dev": true + "integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==" }, "read-config-file": { "version": "6.3.2", @@ -86180,14 +86050,14 @@ "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==" }, "reassure": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/reassure/-/reassure-0.9.0.tgz", - "integrity": "sha512-FIf0GPchyPGItsrW5Wwff/NWVrfOcCUuJJSs4Nur6iRdQt8yvmCpcba4UyemdZ1KaFTIW1gKbAV3u2tuA7zmtQ==", + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/reassure/-/reassure-0.10.1.tgz", + "integrity": "sha512-+GANr5ojh32NZu1YGfa6W8vIJm3iOIZJUvXT5Gc9fQyre7okYsCzyBq9WsHbnAQDjNq1g9SsM/4bwcVET9OIqA==", "dev": true, "requires": { - "@callstack/reassure-cli": "0.9.0", + "@callstack/reassure-cli": "0.10.0", "@callstack/reassure-danger": "0.1.1", - "@callstack/reassure-measure": "0.5.0" + "@callstack/reassure-measure": "0.6.0" } }, "recast": { @@ -86849,8 +86719,7 @@ "reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", - "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", - "dev": true + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" }, "right-align": { "version": "0.1.3", @@ -86915,7 +86784,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "dev": true, "requires": { "queue-microtask": "^1.2.2" } @@ -87461,7 +87329,6 @@ "version": "3.19.0", "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.19.0.tgz", "integrity": "sha512-hyH2p9Ptxjf/xPuL7HfXbpYt9gKhC1yWDh3KYIAYJJePAKV7AEjLN4xhp7lozOdNiaJ9jlVvAbBymVlcS2jRiA==", - "dev": true, "requires": { "@kwsites/file-exists": "^1.1.1", "@kwsites/promise-deferred": "^1.1.1", @@ -88612,7 +88479,6 @@ "version": "6.1.15", "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", - "dev": true, "requires": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", @@ -88625,8 +88491,7 @@ "minipass": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", - "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", - "dev": true + "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==" } } }, @@ -89223,7 +89088,6 @@ "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", - "dev": true, "requires": { "media-typer": "0.3.0", "mime-types": "~2.1.24" @@ -89273,9 +89137,9 @@ } }, "typed-function": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.0.tgz", - "integrity": "sha512-DGwUl6cioBW5gw2L+6SMupGwH/kZOqivy17E4nsh1JI9fKF87orMmlQx3KISQPmg3sfnOUGlwVkroosvgddrlg==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.1.1.tgz", + "integrity": "sha512-Pq1DVubcvibmm8bYcMowjVnnMwPVMeh0DIdA8ad8NZY2sJgapANJmiigSUwlt+EgXxpfIv8MWrQXTIzkfYZLYQ==", "dev": true }, "typedarray": { @@ -91301,9 +91165,9 @@ "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" }, "zod": { - "version": "3.21.4", - "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz", - "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==", + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", "dev": true }, "zwitch": { diff --git a/package.json b/package.json index aa0875865393..aca3dc508c41 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.3.84-0", + "version": "1.3.87-8", "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.", @@ -88,7 +88,6 @@ "@types/node": "^18.14.0", "@ua/react-native-airship": "^15.2.6", "awesome-phonenumber": "^5.4.0", - "babel-plugin-transform-remove-console": "^6.9.4", "babel-polyfill": "^6.26.0", "canvas-size": "^1.2.6", "core-js": "^3.32.0", @@ -96,7 +95,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#009c2ab79bf7ddeab0eea7a3a4c0d9cc4277c34b", + "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#bdbdf44825658500ba581d3e86237d7b8996cc2e", "fbjs": "^3.0.2", "htmlparser2": "^7.2.0", "idb-keyval": "^6.2.1", @@ -183,8 +182,6 @@ "@babel/runtime": "^7.20.0", "@electron/notarize": "^1.2.3", "@jest/globals": "^29.5.0", - "@kie/act-js": "^2.0.1", - "@kie/mock-github": "^1.0.0", "@octokit/core": "4.0.4", "@octokit/plugin-paginate-rest": "3.1.0", "@octokit/plugin-throttling": "4.1.0", @@ -216,7 +213,7 @@ "@types/react-dom": "^18.2.4", "@types/react-pdf": "^5.7.2", "@types/react-test-renderer": "^18.0.0", - "@types/semver": "^7.5.0", + "@types/semver": "^7.5.4", "@types/setimmediate": "^1.0.2", "@types/underscore": "^1.11.5", "@typescript-eslint/eslint-plugin": "^6.2.1", @@ -267,7 +264,7 @@ "react-native-performance-flipper-reporter": "^2.0.0", "react-native-svg-transformer": "^1.0.0", "react-test-renderer": "18.2.0", - "reassure": "^0.9.0", + "reassure": "^0.10.1", "setimmediate": "^1.0.5", "shellcheck": "^1.1.0", "style-loader": "^2.0.0", diff --git a/src/CONFIG.ts b/src/CONFIG.ts index c02ed8065836..8b1dab5b3d71 100644 --- a/src/CONFIG.ts +++ b/src/CONFIG.ts @@ -64,6 +64,7 @@ export default { CONCIERGE_URL_PATHNAME: 'concierge/', DEVPORTAL_URL_PATHNAME: '_devportal/', CONCIERGE_URL: `${expensifyURL}concierge/`, + SAML_URL: `${expensifyURL}authentication/saml/login`, }, IS_IN_PRODUCTION: Platform.OS === 'web' ? process.env.NODE_ENV === 'production' : !__DEV__, IS_IN_STAGING: ENVIRONMENT === CONST.ENVIRONMENT.STAGING, diff --git a/src/CONST.ts b/src/CONST.ts index 0a86aaf7648a..048c2dee5bab 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -79,6 +79,10 @@ const CONST = { RESERVED_FIRST_NAMES: ['Expensify', 'Concierge'], }, + LEGAL_NAME: { + MAX_LENGTH: 40, + }, + PULL_REQUEST_NUMBER, MERCHANT_NAME_MAX_LENGTH: 255, @@ -243,6 +247,7 @@ const CONST = { CUSTOM_STATUS: 'customStatus', NEW_DOT_CATEGORIES: 'newDotCategories', NEW_DOT_TAGS: 'newDotTags', + NEW_DOT_SAML: 'newDotSAML', }, BUTTON_STATES: { DEFAULT: 'default', @@ -472,6 +477,7 @@ const CONST = { HAND_ICON_HEIGHT: 152, HAND_ICON_WIDTH: 200, SHUTTER_SIZE: 90, + MAX_REPORT_PREVIEW_RECEIPTS: 3, }, REPORT: { MAXIMUM_PARTICIPANTS: 8, @@ -515,6 +521,8 @@ const CONST = { DELETE_TAG: 'POLICYCHANGELOG_DELETE_TAG', IMPORT_CUSTOM_UNIT_RATES: 'POLICYCHANGELOG_IMPORT_CUSTOM_UNIT_RATES', IMPORT_TAGS: 'POLICYCHANGELOG_IMPORT_TAGS', + INVITE_TO_ROOM: 'POLICYCHANGELOG_INVITETOROOM', + REMOVE_FROM_ROOM: 'POLICYCHANGELOG_REMOVEFROMROOM', SET_AUTOREIMBURSEMENT: 'POLICYCHANGELOG_SET_AUTOREIMBURSEMENT', SET_AUTO_JOIN: 'POLICYCHANGELOG_SET_AUTO_JOIN', SET_CATEGORY_NAME: 'POLICYCHANGELOG_SET_CATEGORY_NAME', @@ -549,6 +557,11 @@ const CONST = { UPDATE_TIME_ENABLED: 'POLICYCHANGELOG_UPDATE_TIME_ENABLED', UPDATE_TIME_RATE: 'POLICYCHANGELOG_UPDATE_TIME_RATE', }, + ROOMCHANGELOG: { + INVITE_TO_ROOM: 'INVITETOROOM', + REMOVE_FROM_ROOM: 'REMOVEFROMROOM', + JOIN_ROOM: 'JOINROOM', + }, }, }, ARCHIVE_REASON: { @@ -1015,8 +1028,10 @@ const CONST = { ACTIVATE: 'ActivateStep', }, TIER_NAME: { + PLATINUM: 'PLATINUM', GOLD: 'GOLD', SILVER: 'SILVER', + BRONZE: 'BRONZE', }, WEB_MESSAGE_TYPE: { STATEMENT: 'STATEMENT_NAVIGATE', @@ -1058,6 +1073,12 @@ const CONST = { }, }, + KYC_WALL_SOURCE: { + REPORT: 'REPORT', // The user attempted to pay a money request + ENABLE_WALLET: 'ENABLE_WALLET', // The user clicked on the `Enable wallet` button on the Wallet page + TRANSFER_BALANCE: 'TRANSFER_BALANCE', // The user attempted to transfer their wallet balance to their bank account or debit card + }, + OS: { WINDOWS: 'Windows', MAC_OS: PLATFORM_OS_MACOS, @@ -1095,7 +1116,7 @@ const CONST = { EXPENSIFY: 'Expensify', VBBA: 'ACH', }, - MONEY_REQUEST_TYPE: { + TYPE: { SEND: 'send', SPLIT: 'split', REQUEST: 'request', @@ -1237,6 +1258,7 @@ const CONST = { NONE: 'none', }, STATE: { + STATE_NOT_ISSUED: 2, OPEN: 3, NOT_ACTIVATED: 4, STATE_DEACTIVATED: 5, @@ -1271,6 +1293,8 @@ const CONST = { CARD_EXPIRATION_DATE: /^(0[1-9]|1[0-2])([^0-9])?([0-9]{4}|([0-9]{2}))$/, ROOM_NAME: /^#[\p{Ll}0-9-]{1,80}$/u, + // eslint-disable-next-line max-len, no-misleading-character-class + EMOJI: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu, // 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, @@ -1289,18 +1313,26 @@ const CONST = { HAS_COLON_ONLY_AT_THE_BEGINNING: /^:[^:]+$/, HAS_AT_MOST_TWO_AT_SIGNS: /^@[^@]*@?[^@]*$/, - SPECIAL_CHAR_OR_EMOJI: - // eslint-disable-next-line no-misleading-character-class - /[\n\s,/?"{}[\]()&_~^%\\;`$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu, + SPECIAL_CHAR: /[,/?"{}[\]()&^%;`$=#<>!*]/g, - SPACE_OR_EMOJI: - // eslint-disable-next-line no-misleading-character-class - /(\s+|(?:[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3)+)/gu, + get SPECIAL_CHAR_OR_EMOJI() { + return new RegExp(`[~\\n\\s]|(_\\b(?!$))|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu'); + }, + + get SPACE_OR_EMOJI() { + return new RegExp(`(\\s+|(?:${this.EMOJI.source})+)`, 'gu'); + }, + + // Define the regular expression pattern to find a potential end of a mention suggestion: + // It might be a space, a newline character, an emoji, or a special character (excluding underscores & tildes, which might be used in usernames) + get MENTION_BREAKER() { + return new RegExp(`[\\n\\s]|${this.SPECIAL_CHAR.source}|${this.EMOJI.source}`, 'gu'); + }, // Define the regular expression pattern to match a string starting with an at sign and ending with a space or newline character - MENTION_REPLACER: - // eslint-disable-next-line no-misleading-character-class - /^@[^\n\r]*?(?=$|[\s,/?"{}[\]()&^%\\;`$=#<>!*\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3)/u, + get MENTION_REPLACER() { + return new RegExp(`^@[^\\n\\r]*?(?=$|\\s|${this.SPECIAL_CHAR.source}|${this.EMOJI.source})`, 'u'); + }, MERGED_ACCOUNT_PREFIX: /^(MERGED_\d+@)/, @@ -1410,6 +1442,7 @@ const CONST = { REPORT_DETAILS_MENU_ITEM: { SHARE_CODE: 'shareCode', MEMBERS: 'member', + INVITE: 'invite', SETTINGS: 'settings', LEAVE_ROOM: 'leaveRoom', WELCOME_MESSAGE: 'welcomeMessage', @@ -2718,6 +2751,7 @@ const CONST = { DEMO_PAGES: { SAASTR: 'SaaStrDemoSetup', SBE: 'SbeDemoSetup', + MONEY2020: 'Money2020DemoSetup', }, MAPBOX: { diff --git a/src/Expensify.js b/src/Expensify.js index 642b8ceb456c..6010824cf275 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -29,6 +29,7 @@ import SplashScreenHider from './components/SplashScreenHider'; import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper'; import EmojiPicker from './components/EmojiPicker/EmojiPicker'; import * as EmojiPickerAction from './libs/actions/EmojiPickerAction'; +import * as DemoActions from './libs/actions/DemoActions'; import DeeplinkWrapper from './components/DeeplinkWrapper'; // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection @@ -167,11 +168,13 @@ function Expensify(props) { // If the app is opened from a deep link, get the reportID (if exists) from the deep link and navigate to the chat report Linking.getInitialURL().then((url) => { + DemoActions.runDemoByURL(url); Report.openReportFromDeepLink(url, isAuthenticated); }); // Open chat report from a deep link (only mobile native) Linking.addEventListener('url', (state) => { + DemoActions.runDemoByURL(state.url); Report.openReportFromDeepLink(state.url, isAuthenticated); }); diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index d9ea3488f85f..68b3bd047ad8 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -1,4 +1,5 @@ import {ValueOf} from 'type-fest'; +import {OnyxEntry} from 'react-native-onyx/lib/types'; import DeepValueOf from './types/utils/DeepValueOf'; import * as OnyxTypes from './types/onyx'; import CONST from './CONST'; @@ -235,6 +236,8 @@ const ONYXKEYS = { DOWNLOAD: 'download_', POLICY: 'policy_', POLICY_MEMBERS: 'policyMembers_', + POLICY_DRAFTS: 'policyDrafts_', + POLICY_MEMBERS_DRAFTS: 'policyMembersDrafts_', POLICY_CATEGORIES: 'policyCategories_', POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_', POLICY_TAGS: 'policyTags_', @@ -257,6 +260,7 @@ const ONYXKEYS = { TRANSACTION: 'transactions_', SPLIT_TRANSACTION_DRAFT: 'splitTransactionDraft_', PRIVATE_NOTES_DRAFT: 'privateNotesDraft_', + NEXT_STEP: 'reportNextStep_', // Manual request tab selector SELECTED_TAB: 'selectedTab_', @@ -296,6 +300,7 @@ const ONYXKEYS = { PRIVATE_NOTES_FORM: 'privateNotesForm', I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm', INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm', + REPORT_PHYSICAL_CARD_FORM: 'requestPhysicalCardForm', REPORT_VIRTUAL_CARD_FRAUD: 'reportVirtualCardFraudForm', }, } as const; @@ -386,7 +391,7 @@ type OnyxValues = { [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record; [ONYXKEYS.COLLECTION.REPORT]: OnyxTypes.Report; [ONYXKEYS.COLLECTION.REPORT_METADATA]: OnyxTypes.ReportMetadata; - [ONYXKEYS.COLLECTION.REPORT_ACTIONS]: OnyxTypes.ReportAction; + [ONYXKEYS.COLLECTION.REPORT_ACTIONS]: OnyxTypes.ReportActions; [ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS]: string; [ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS]: OnyxTypes.ReportActionReactions; [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT]: string; @@ -427,7 +432,10 @@ type OnyxValues = { [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_CLEAR_AFTER_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.SETTINGS_STATUS_SET_CLEAR_AFTER_FORM]: OnyxTypes.Form; + [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM]: OnyxTypes.Form; }; +type OnyxKeyValue = OnyxEntry; + export default ONYXKEYS; -export type {OnyxKey, OnyxCollectionKey, OnyxValues}; +export type {OnyxKey, OnyxCollectionKey, OnyxValues, OnyxKeyValue}; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 7127c1483c26..b5ceb8fc557d 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -36,6 +36,8 @@ export default { APPLE_SIGN_IN: 'sign-in-with-apple', GOOGLE_SIGN_IN: 'sign-in-with-google', DESKTOP_SIGN_IN_REDIRECT: 'desktop-signin-redirect', + SAML_SIGN_IN: 'sign-in-with-saml', + // This is a special validation URL that will take the user to /workspace/new after validation. This is used // when linking users from e.com in order to share a session in this app. ENABLE_PAYMENTS: 'enable-payments', @@ -71,22 +73,30 @@ export default { SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', SETTINGS_WALLET: 'settings/wallet', - SETTINGS_WALLET_DOMAINCARDS: { + SETTINGS_WALLET_DOMAINCARD: { 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`, + route: '/settings/wallet/card/:domain/report-virtual-fraud', + getRoute: (domain: string) => `/settings/wallet/card/${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_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: { + route: 'settings/wallet/card/:domain/digital-details/update-address', + getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address`, + }, SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance', SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account', + SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: { + route: '/settings/wallet/card/:domain/report-card-lost-or-damaged', + getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-card-lost-or-damaged`, + }, SETTINGS_WALLET_CARD_ACTIVATE: { - route: 'settings/wallet/cards/:domain/activate', - getRoute: (domain: string) => `settings/wallet/cards/${domain}/activate`, + route: 'settings/wallet/card/:domain/activate', + getRoute: (domain: string) => `settings/wallet/card/${domain}/activate`, }, SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', @@ -203,8 +213,16 @@ export default { route: 'r/:reportID/notes/:accountID/edit', getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`, }, + ROOM_MEMBERS: { + route: 'r/:reportID/members', + getRoute: (reportID: string) => `r/${reportID}/members`, + }, + ROOM_INVITE: { + route: 'r/:reportID/invite', + getRoute: (reportID: string) => `r/${reportID}/invite`, + }, - // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE + // To see the available iouType, please refer to CONST.IOU.TYPE MONEY_REQUEST: { route: ':iouType/new/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}`, @@ -286,6 +304,11 @@ export default { I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher', INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal', + ERECEIPT: { + route: 'eReceipt/:transactionID', + getRoute: (transactionID: string) => `eReceipt/${transactionID}`, + }, + WORKSPACE_NEW: 'workspace/new', WORKSPACE_NEW_ROOM: 'workspace/new-room', WORKSPACE_INITIAL: { @@ -337,9 +360,10 @@ export default { getRoute: (policyID: string) => `workspace/${policyID}/members`, }, - // These are some on-off routes that will be removed once they're no longer needed (see GH issues for details) + // These are some one-off routes that will be removed once they're no longer needed (see GH issues for details) SAASTR: 'saastr', SBE: 'sbe', + MONEY2020: 'money2020', // Iframe screens from olddot HOME_OLDDOT: 'home', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 69f905e4a7a3..8ef787edec2e 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -2,17 +2,15 @@ * This is a file containing constants for all of the screen names. In most cases, we should use the routes for * navigation. But there are situations where we may need to access screen names directly. */ -const PROTECTED_SCREENS = { - HOME: 'Home', - CONCIERGE: 'Concierge', - REPORT_ATTACHMENTS: 'ReportAttachments', -} as const; - export default { - ...PROTECTED_SCREENS, + HOME: 'Home', LOADING: 'Loading', REPORT: 'Report', + REPORT_ATTACHMENTS: 'ReportAttachments', NOT_FOUND: 'not-found', + TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps', + VALIDATE_LOGIN: 'ValidateLogin', + CONCIERGE: 'Concierge', SETTINGS: { ROOT: 'Settings_Root', PREFERENCES: 'Settings_Preferences', @@ -25,11 +23,10 @@ export default { SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', }, - TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps', SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', - VALIDATE_LOGIN: 'ValidateLogin', + SAML_SIGN_IN: 'SAMLSignIn', // Iframe screens from olddot HOME_OLDDOT: 'Home_OLDDOT', @@ -44,5 +41,3 @@ export default { GROUPS_WORKSPACES_OLDDOT: 'GroupWorkspaces_OLDDOT', CARDS_AND_DOMAINS_OLDDOT: 'CardsAndDomains_OLDDOT', } as const; - -export {PROTECTED_SCREENS}; diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js new file mode 100644 index 000000000000..893ec031ab7f --- /dev/null +++ b/src/components/AddressSearch/CurrentLocationButton.js @@ -0,0 +1,52 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {Text} from 'react-native'; +import colors from '../../styles/colors'; +import styles from '../../styles/styles'; +import Icon from '../Icon'; +import * as Expensicons from '../Icon/Expensicons'; +import PressableWithFeedback from '../Pressable/PressableWithFeedback'; +import getButtonState from '../../libs/getButtonState'; +import * as StyleUtils from '../../styles/StyleUtils'; +import useLocalize from '../../hooks/useLocalize'; + +const propTypes = { + /** Callback that runs when location button is clicked */ + onPress: PropTypes.func, + + /** Boolean to indicate if the button is clickable */ + isDisabled: PropTypes.bool, +}; + +const defaultProps = { + isDisabled: false, + onPress: () => {}, +}; + +function CurrentLocationButton({onPress, isDisabled}) { + const {translate} = useLocalize(); + + return ( + e.preventDefault()} + onTouchStart={(e) => e.preventDefault()} + > + + {translate('location.useCurrent')} + + ); +} + +CurrentLocationButton.displayName = 'CurrentLocationButton'; +CurrentLocationButton.propTypes = propTypes; +CurrentLocationButton.defaultProps = defaultProps; + +export default CurrentLocationButton; diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index fe220d442674..3e676b811c16 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -1,7 +1,7 @@ import _ from 'underscore'; -import React, {useMemo, useRef, useState} from 'react'; +import React, {useEffect, useMemo, useRef, useState} from 'react'; import PropTypes from 'prop-types'; -import {LogBox, ScrollView, View, Text, ActivityIndicator} from 'react-native'; +import {Keyboard, LogBox, ScrollView, View, Text, ActivityIndicator} from 'react-native'; import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete'; import lodashGet from 'lodash/get'; import compose from '../../libs/compose'; @@ -11,12 +11,16 @@ import themeColors from '../../styles/themes/default'; import TextInput from '../TextInput'; import * as ApiUtils from '../../libs/ApiUtils'; import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils'; +import getCurrentPosition from '../../libs/getCurrentPosition'; import CONST from '../../CONST'; import * as StyleUtils from '../../styles/StyleUtils'; -import resetDisplayListViewBorderOnBlur from './resetDisplayListViewBorderOnBlur'; +import isCurrentTargetInsideContainer from './isCurrentTargetInsideContainer'; import variables from '../../styles/variables'; +import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; +import LocationErrorMessage from '../LocationErrorMessage'; import {withNetwork} from '../OnyxProvider'; import networkPropTypes from '../networkPropTypes'; +import CurrentLocationButton from './CurrentLocationButton'; // The error that's being thrown below will be ignored until we fork the // react-native-google-places-autocomplete repo and replace the @@ -61,6 +65,9 @@ const propTypes = { /** Should address search be limited to results in the USA */ isLimitedToUSA: PropTypes.bool, + /** Shows a current location button in suggestion list */ + canUseCurrentLocation: PropTypes.bool, + /** A list of predefined places that can be shown when the user isn't searching for something */ predefinedPlaces: PropTypes.arrayOf( PropTypes.shape({ @@ -115,6 +122,7 @@ const defaultProps = { defaultValue: undefined, containerStyles: [], isLimitedToUSA: false, + canUseCurrentLocation: false, renamedInputKeys: { street: 'addressStreet', street2: 'addressStreet2', @@ -135,6 +143,11 @@ const defaultProps = { function AddressSearch(props) { const [displayListViewBorder, setDisplayListViewBorder] = useState(false); const [isTyping, setIsTyping] = useState(false); + const [isFocused, setIsFocused] = useState(false); + const [searchValue, setSearchValue] = useState(props.value || props.defaultValue || ''); + const [locationErrorCode, setLocationErrorCode] = useState(null); + const [isFetchingCurrentLocation, setIsFetchingCurrentLocation] = useState(false); + const shouldTriggerGeolocationCallbacks = useRef(true); const containerRef = useRef(); const query = useMemo( () => ({ @@ -144,6 +157,7 @@ function AddressSearch(props) { }), [props.preferredLocale, props.resultTypes, props.isLimitedToUSA], ); + const shouldShowCurrentLocationButton = props.canUseCurrentLocation && searchValue.trim().length === 0 && isFocused; const saveLocationDetails = (autocompleteData, details) => { const addressComponents = details.address_components; @@ -262,6 +276,72 @@ function AddressSearch(props) { props.onPress(values); }; + /** Gets the user's current location and registers success/error callbacks */ + const getCurrentLocation = () => { + if (isFetchingCurrentLocation) { + return; + } + + setIsTyping(false); + setIsFocused(false); + setDisplayListViewBorder(false); + setIsFetchingCurrentLocation(true); + + Keyboard.dismiss(); + + getCurrentPosition( + (successData) => { + if (!shouldTriggerGeolocationCallbacks.current) { + return; + } + + setIsFetchingCurrentLocation(false); + setLocationErrorCode(null); + + const location = { + lat: successData.coords.latitude, + lng: successData.coords.longitude, + address: CONST.YOUR_LOCATION_TEXT, + }; + props.onPress(location); + }, + (errorData) => { + if (!shouldTriggerGeolocationCallbacks.current) { + return; + } + + setIsFetchingCurrentLocation(false); + setLocationErrorCode(errorData.code); + }, + { + maximumAge: 0, // No cache, always get fresh location info + timeout: 5000, + }, + ); + }; + + const renderHeaderComponent = () => + props.predefinedPlaces.length > 0 && ( + <> + {/* This will show current location button in list if there are some recent destinations */} + {shouldShowCurrentLocationButton && ( + + )} + {!props.value && {props.translate('common.recentDestinations')}} + + ); + + // eslint-disable-next-line arrow-body-style + useEffect(() => { + return () => { + // If the component unmounts we don't want any of the callback for geolocation to run. + shouldTriggerGeolocationCallbacks.current = false; + }; + }, []); + return ( /* * The GooglePlacesAutocomplete component uses a VirtualizedList internally, @@ -269,119 +349,149 @@ function AddressSearch(props) { * To work around this, we wrap the GooglePlacesAutocomplete component with a horizontal ScrollView * that has scrolling disabled and would otherwise not be needed */ - - + - {props.translate('common.noResultsFound')} - ) - } - listLoaderComponent={ - - - - } - renderHeaderComponent={() => - !props.value && - props.predefinedPlaces && ( - {props.translate('common.recentDestinations')} - ) - } - onPress={(data, details) => { - saveLocationDetails(data, details); - setIsTyping(false); - - // After we select an option, we set displayListViewBorder to false to prevent UI flickering - setDisplayListViewBorder(false); - }} - query={query} - requestUrl={{ - useOnPlatform: 'all', - url: props.network.isOffline ? null : ApiUtils.getCommandURL({command: 'Proxy_GooglePlaces&proxyUrl='}), - }} - textInputProps={{ - InputComp: TextInput, - ref: (node) => { - if (!props.innerRef) { - return; - } - - if (_.isFunction(props.innerRef)) { - props.innerRef(node); - return; - } - - // eslint-disable-next-line no-param-reassign - props.innerRef.current = node; - }, - label: props.label, - containerStyles: props.containerStyles, - errorText: props.errorText, - hint: displayListViewBorder ? undefined : props.hint, - value: props.value, - defaultValue: props.defaultValue, - inputID: props.inputID, - shouldSaveDraft: props.shouldSaveDraft, - onBlur: (event) => { - resetDisplayListViewBorderOnBlur(setDisplayListViewBorder, event, containerRef); - props.onBlur(); - }, - autoComplete: 'off', - onInputChange: (text) => { - setIsTyping(true); - if (props.inputID) { - props.onInputChange(text); - } else { - props.onInputChange({street: text}); - } - - // If the text is empty and we have no predefined places, we set displayListViewBorder to false to prevent UI flickering - if (_.isEmpty(text) && _.isEmpty(props.predefinedPlaces)) { - setDisplayListViewBorder(false); - } - }, - maxLength: props.maxInputLength, - spellCheck: false, - }} - styles={{ - textInputContainer: [styles.flexColumn], - listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight], - row: [styles.pv4, styles.ph3, styles.overflowAuto], - description: [styles.googleSearchText], - separator: [styles.googleSearchSeparator], - }} - numberOfLines={2} - isRowScrollable={false} - listHoverColor={themeColors.border} - listUnderlayColor={themeColors.buttonPressedBG} - onLayout={(event) => { - // We use the height of the element to determine if we should hide the border of the listView dropdown - // to prevent a lingering border when there are no address suggestions. - setDisplayListViewBorder(event.nativeEvent.layout.height > variables.googleEmptyListViewHeight); - }} - /> - - + + {props.translate('common.noResultsFound')} + ) + } + listLoaderComponent={ + + + + } + renderHeaderComponent={renderHeaderComponent} + onPress={(data, details) => { + saveLocationDetails(data, details); + setIsTyping(false); + + // After we select an option, we set displayListViewBorder to false to prevent UI flickering + setDisplayListViewBorder(false); + setIsFocused(false); + + // Clear location error code after address is selected + setLocationErrorCode(null); + }} + query={query} + requestUrl={{ + useOnPlatform: 'all', + url: props.network.isOffline ? null : ApiUtils.getCommandURL({command: 'Proxy_GooglePlaces&proxyUrl='}), + }} + textInputProps={{ + InputComp: TextInput, + ref: (node) => { + if (!props.innerRef) { + return; + } + + if (_.isFunction(props.innerRef)) { + props.innerRef(node); + return; + } + + // eslint-disable-next-line no-param-reassign + props.innerRef.current = node; + }, + label: props.label, + containerStyles: props.containerStyles, + errorText: props.errorText, + hint: + displayListViewBorder || (props.predefinedPlaces.length === 0 && shouldShowCurrentLocationButton) || (props.canUseCurrentLocation && isTyping) + ? undefined + : props.hint, + value: props.value, + defaultValue: props.defaultValue, + inputID: props.inputID, + shouldSaveDraft: props.shouldSaveDraft, + onFocus: () => { + setIsFocused(true); + }, + onBlur: (event) => { + if (!isCurrentTargetInsideContainer(event, containerRef)) { + setDisplayListViewBorder(false); + setIsFocused(false); + setIsTyping(false); + } + props.onBlur(); + }, + autoComplete: 'off', + onInputChange: (text) => { + setSearchValue(text); + setIsTyping(true); + if (props.inputID) { + props.onInputChange(text); + } else { + props.onInputChange({street: text}); + } + + // If the text is empty and we have no predefined places, we set displayListViewBorder to false to prevent UI flickering + if (_.isEmpty(text) && _.isEmpty(props.predefinedPlaces)) { + setDisplayListViewBorder(false); + } + }, + maxLength: props.maxInputLength, + spellCheck: false, + }} + styles={{ + textInputContainer: [styles.flexColumn], + listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight, !isFocused && {height: 0}], + row: [styles.pv4, styles.ph3, styles.overflowAuto], + description: [styles.googleSearchText], + separator: [styles.googleSearchSeparator], + }} + numberOfLines={2} + isRowScrollable={false} + listHoverColor={themeColors.border} + listUnderlayColor={themeColors.buttonPressedBG} + onLayout={(event) => { + // We use the height of the element to determine if we should hide the border of the listView dropdown + // to prevent a lingering border when there are no address suggestions. + setDisplayListViewBorder(event.nativeEvent.layout.height > variables.googleEmptyListViewHeight); + }} + inbetweenCompo={ + // We want to show the current location button even if there are no recent destinations + props.predefinedPlaces.length === 0 && shouldShowCurrentLocationButton ? ( + + + + ) : ( + <> + ) + } + /> + setLocationErrorCode(null)} + locationErrorCode={locationErrorCode} + /> + + + {isFetchingCurrentLocation && } + ); } diff --git a/src/components/AddressSearch/isCurrentTargetInsideContainer.js b/src/components/AddressSearch/isCurrentTargetInsideContainer.js new file mode 100644 index 000000000000..18bfc10a8dcb --- /dev/null +++ b/src/components/AddressSearch/isCurrentTargetInsideContainer.js @@ -0,0 +1,8 @@ +function isCurrentTargetInsideContainer(event, containerRef) { + // The related target check is required here + // because without it when we select an option, the onBlur will still trigger setting displayListViewBorder to false + // it will make the auto complete component re-render before onPress is called making selecting an option not working. + return containerRef.current && event.target && containerRef.current.contains(event.relatedTarget); +} + +export default isCurrentTargetInsideContainer; diff --git a/src/components/AddressSearch/isCurrentTargetInsideContainer.native.js b/src/components/AddressSearch/isCurrentTargetInsideContainer.native.js new file mode 100644 index 000000000000..dbf0004b08d9 --- /dev/null +++ b/src/components/AddressSearch/isCurrentTargetInsideContainer.native.js @@ -0,0 +1,6 @@ +function isCurrentTargetInsideContainer() { + // The related target check is not required here because in native there is no race condition rendering like on the web + return false; +} + +export default isCurrentTargetInsideContainer; diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js deleted file mode 100644 index def4da13a9a2..000000000000 --- a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js +++ /dev/null @@ -1,11 +0,0 @@ -function resetDisplayListViewBorderOnBlur(setDisplayListViewBorder, event, containerRef) { - // The related target check is required here - // because without it when we select an option, the onBlur will still trigger setting displayListViewBorder to false - // it will make the auto complete component re-render before onPress is called making selecting an option not working. - if (containerRef.current && event.target && containerRef.current.contains(event.relatedTarget)) { - return; - } - setDisplayListViewBorder(false); -} - -export default resetDisplayListViewBorderOnBlur; diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js deleted file mode 100644 index 7ae5a44cae71..000000000000 --- a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js +++ /dev/null @@ -1,7 +0,0 @@ -function resetDisplayListViewBorderOnBlur(setDisplayListViewBorder) { - // The related target check is not required here because in native there is no race condition rendering like on the web - // onPress still called when cliking the option - setDisplayListViewBorder(false); -} - -export default resetDisplayListViewBorderOnBlur; diff --git a/src/components/AnimatedStep/AnimatedStepProvider.js b/src/components/AnimatedStep/AnimatedStepProvider.js index 280fbd1a2776..86d40b5bddeb 100644 --- a/src/components/AnimatedStep/AnimatedStepProvider.js +++ b/src/components/AnimatedStep/AnimatedStepProvider.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useMemo, useState} from 'react'; import PropTypes from 'prop-types'; import AnimatedStepContext from './AnimatedStepContext'; import CONST from '../../CONST'; @@ -9,8 +9,9 @@ const propTypes = { function AnimatedStepProvider({children}) { const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN); + const contextValue = useMemo(() => ({animationDirection, setAnimationDirection}), [animationDirection, setAnimationDirection]); - return {children}; + return {children}; } AnimatedStepProvider.propTypes = propTypes; diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js index dd1a0864b0cf..43933210dc0b 100644 --- a/src/components/AnonymousReportFooter.js +++ b/src/components/AnonymousReportFooter.js @@ -36,6 +36,7 @@ function AnonymousReportFooter(props) { report={props.report} personalDetails={props.personalDetails} isAnonymous + shouldEnableDetailPageNavigation /> diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js index 9779963dfc4a..d10a5abad6b7 100644 --- a/src/components/Attachments/AttachmentCarousel/Pager/index.js +++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js @@ -1,5 +1,5 @@ /* eslint-disable es/no-optional-chaining */ -import React, {useRef, useState, useImperativeHandle} from 'react'; +import React, {useRef, useState, useImperativeHandle, useMemo} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {GestureHandlerRootView, createNativeWrapper} from 'react-native-gesture-handler'; @@ -126,22 +126,25 @@ function AttachmentCarouselPager({ scrollEnabled: shouldPagerScroll.value, })); + const contextValue = useMemo( + () => ({ + canvasWidth: containerWidth, + canvasHeight: containerHeight, + isScrolling, + pagerRef, + shouldPagerScroll, + onPinchGestureChange, + onTap, + onSwipe, + onSwipeSuccess, + onSwipeDown, + }), + [containerWidth, containerHeight, isScrolling, pagerRef, shouldPagerScroll, onPinchGestureChange, onTap, onSwipe, onSwipeSuccess, onSwipeDown], + ); + return ( - + ( + ({item, isActive}) => ( setShouldShowArrows(!shouldShowArrows)} /> ), diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index a1b07fb99dd8..34ff45160ce9 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -1,5 +1,5 @@ import React, {memo, useState} from 'react'; -import {View, ActivityIndicator} from 'react-native'; +import {View, ScrollView, ActivityIndicator} from 'react-native'; import _ from 'underscore'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; @@ -22,6 +22,7 @@ import * as TransactionUtils from '../../../libs/TransactionUtils'; import DistanceEReceipt from '../../DistanceEReceipt'; import useNetwork from '../../../hooks/useNetwork'; import ONYXKEYS from '../../../ONYXKEYS'; +import EReceipt from '../../EReceipt'; const propTypes = { ...attachmentViewPropTypes, @@ -101,6 +102,19 @@ function AttachmentView({ ); } + if (TransactionUtils.hasEReceipt(transaction)) { + return ( + + + + + + ); + } + // Check both source and file.name since PDFs dragged into the text field // will appear with a source that is a blob if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) { diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 13abf057e4b1..e7f68e7011fc 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -63,7 +63,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC return categoryInitialFocusedIndex; }, [selectedCategory, searchValue, isCategoriesCountBelowThreshold, sections]); - const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue); + const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue); const shouldShowTextInput = !isCategoriesCountBelowThreshold; return ( diff --git a/src/components/ComposeProviders.js b/src/components/ComposeProviders.js deleted file mode 100644 index edcc0a917c51..000000000000 --- a/src/components/ComposeProviders.js +++ /dev/null @@ -1,29 +0,0 @@ -import _ from 'underscore'; -import React from 'react'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** Provider components go here */ - components: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.func])).isRequired, - - /** Rendered child component */ - children: PropTypes.node.isRequired, -}; - -function ComposeProviders(props) { - return ( - <> - {_.reduceRight( - props.components, - (memo, Component) => ( - {memo} - ), - props.children, - )} - - ); -} - -ComposeProviders.propTypes = propTypes; -ComposeProviders.displayName = 'ComposeProviders'; -export default ComposeProviders; diff --git a/src/components/ComposeProviders.tsx b/src/components/ComposeProviders.tsx new file mode 100644 index 000000000000..bff36db25533 --- /dev/null +++ b/src/components/ComposeProviders.tsx @@ -0,0 +1,14 @@ +import React, {ComponentType, ReactNode} from 'react'; +import ChildrenProps from '../types/utils/ChildrenProps'; + +type ComposeProvidersProps = ChildrenProps & { + /** Provider components go here */ + components: Array>; +}; + +function ComposeProviders(props: ComposeProvidersProps): ReactNode { + return props.components.reduceRight((memo, Component) => {memo}, props.children); +} + +ComposeProviders.displayName = 'ComposeProviders'; +export default ComposeProviders; diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js index dab30e60ca55..8544de62eeb9 100644 --- a/src/components/ConfirmedRoute.js +++ b/src/components/ConfirmedRoute.js @@ -97,7 +97,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) { location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE), }} directionCoordinates={coordinates} - style={styles.mapView} + style={[styles.mapView, styles.br4]} waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} /> diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js index 5d87636a9365..ef40aecb6f8c 100644 --- a/src/components/DatePicker/index.ios.js +++ b/src/components/DatePicker/index.ios.js @@ -1,147 +1,136 @@ -import React from 'react'; -// eslint-disable-next-line no-restricted-imports +import React, {useState, useRef, useCallback, useEffect} from 'react'; import {Button, View, Keyboard} from 'react-native'; import RNDatePicker from '@react-native-community/datetimepicker'; import moment from 'moment'; -import _ from 'underscore'; -import compose from '../../libs/compose'; +import isFunction from 'lodash/isFunction'; import TextInput from '../TextInput'; -import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import Popover from '../Popover'; import CONST from '../../CONST'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; import {propTypes, defaultProps} from './datepickerPropTypes'; -import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; +import useKeyboardState from '../../hooks/useKeyboardState'; +import useLocalize from '../../hooks/useLocalize'; -const datepickerPropTypes = { - ...propTypes, - ...withLocalizePropTypes, - ...keyboardStatePropTypes, -}; +function DatePicker({value, defaultValue, innerRef, onInputChange, preferredLocale, minDate, maxDate, label, disabled, onBlur, placeholder, containerStyles, errorText}) { + const [isPickerVisible, setIsPickerVisible] = useState(false); + const [selectedDate, setSelectedDate] = useState(moment(value || defaultValue).toDate()); + const {isKeyboardShown} = useKeyboardState(); + const {translate} = useLocalize(); + const initialValue = useRef(null); + const inputRef = useRef(null); -class DatePicker extends React.Component { - constructor(props) { - super(props); - - this.state = { - isPickerVisible: false, - selectedDate: props.value || props.defaultValue ? moment(props.value || props.defaultValue).toDate() : new Date(), - }; - - this.showPicker = this.showPicker.bind(this); - this.reset = this.reset.bind(this); - this.selectDate = this.selectDate.bind(this); - this.updateLocalDate = this.updateLocalDate.bind(this); - } - - showPicker() { - this.initialValue = this.state.selectedDate; + const showPicker = useCallback(() => { + initialValue.current = selectedDate; // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS // See https://github.com/Expensify/App/issues/14084 for more context - if (!this.props.isKeyboardShown) { - this.setState({isPickerVisible: true}); + if (!isKeyboardShown) { + setIsPickerVisible(true); return; } + const listener = Keyboard.addListener('keyboardDidHide', () => { - this.setState({isPickerVisible: true}); + setIsPickerVisible(true); listener.remove(); }); Keyboard.dismiss(); - } + }, [isKeyboardShown, selectedDate]); + + useEffect(() => { + if (!isFunction(innerRef)) { + return; + } + + const input = inputRef.current; + + if (input && input.focus && isFunction(input.focus)) { + innerRef({...input, focus: showPicker}); + return; + } + + innerRef(input); + }, [innerRef, showPicker]); /** * Reset the date spinner to the initial value */ - reset() { - this.setState({selectedDate: this.initialValue}); - } + const reset = () => { + setSelectedDate(initialValue.current); + }; /** * Accept the current spinner changes, close the spinner and propagate the change - * to the parent component (props.onInputChange) + * to the parent component (onInputChange) */ - selectDate() { - this.setState({isPickerVisible: false}); - const asMoment = moment(this.state.selectedDate, true); - this.props.onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); - } + const selectDate = () => { + setIsPickerVisible(false); + const asMoment = moment(selectedDate, true); + onInputChange(asMoment.format(CONST.DATE.MOMENT_FORMAT_STRING)); + }; /** * @param {Event} event - * @param {Date} selectedDate + * @param {Date} date */ - updateLocalDate(event, selectedDate) { - this.setState({selectedDate}); - } + const updateLocalDate = (event, date) => { + setSelectedDate(date); + }; - render() { - const dateAsText = this.props.value || this.props.defaultValue ? moment(this.props.value || this.props.defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; - return ( - <> - { - if (!_.isFunction(this.props.innerRef)) { - return; - } - if (el && el.focus && typeof el.focus === 'function') { - let inputRef = {...el}; - inputRef = {...inputRef, focus: this.showPicker}; - this.props.innerRef(inputRef); - return; - } + const dateAsText = value || defaultValue ? moment(value || defaultValue).format(CONST.DATE.MOMENT_FORMAT_STRING) : ''; - this.props.innerRef(el); - }} - /> - - - - - - + + + + + - - - ); - } + + + + + ); } -DatePicker.propTypes = datepickerPropTypes; +DatePicker.propTypes = propTypes; DatePicker.defaultProps = defaultProps; +DatePicker.displayName = 'DatePicker'; /** * We're applying localization here because we present a modal (with buttons) ourselves @@ -149,15 +138,10 @@ DatePicker.defaultProps = defaultProps; * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens * that the modal buttons are in one locale (app) while the (spinner) month names are another (system) */ -export default compose( - withLocalize, - withKeyboardState, -)( - React.forwardRef((props, ref) => ( - - )), -); +export default React.forwardRef((props, ref) => ( + +)); diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js index 7c7837b8413d..f866de0b885e 100644 --- a/src/components/DistanceEReceipt.js +++ b/src/components/DistanceEReceipt.js @@ -31,7 +31,7 @@ const defaultProps = { function DistanceEReceipt({transaction}) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename) : {}; + const {thumbnail} = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction) : {}; const {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant, created: transactionDate} = ReportUtils.getTransactionDetails(transaction); const formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : translate('common.tbd'); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || ''); diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js index c96adfee9ba0..d8214774d2c1 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.js +++ b/src/components/DistanceRequest/DistanceRequestFooter.js @@ -115,18 +115,19 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig pitchEnabled={false} initialState={{ zoom: CONST.MAPBOX.DEFAULT_ZOOM, - location: CONST.MAPBOX.DEFAULT_COORDINATE, + location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE), }} directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])} - style={styles.mapView} + style={[styles.mapView, styles.mapEditView]} waypoints={waypointMarkers} styleURL={CONST.MAPBOX.STYLE_URL} - overlayStyle={styles.m4} + overlayStyle={styles.mapEditView} /> ) : ( )} diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js index 416fefc5af89..bd35678273ec 100644 --- a/src/components/DistanceRequest/index.js +++ b/src/components/DistanceRequest/index.js @@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useState, useRef} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; -import lodashIsEmpty from 'lodash/isEmpty'; import PropTypes from 'prop-types'; import _ from 'underscore'; import ROUTES from '../../ROUTES'; @@ -169,8 +168,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe const newWaypoints = {}; _.each(data, (waypoint, index) => { - const newWaypoint = lodashGet(waypoints, waypoint, {}); - newWaypoints[`waypoint${index}`] = lodashIsEmpty(newWaypoint) ? null : newWaypoint; + newWaypoints[`waypoint${index}`] = lodashGet(waypoints, waypoint, {}); }); setOptimisticWaypoints(newWaypoints); @@ -276,7 +274,4 @@ export default withOnyx({ transaction: { key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID || 0}`, }, - mapboxAccessToken: { - key: ONYXKEYS.MAPBOX_ACCESS_TOKEN, - }, })(DistanceRequest); diff --git a/src/components/DragAndDrop/Provider/index.js b/src/components/DragAndDrop/Provider/index.js index 6408f6dbfbfa..f76bf13c99fd 100644 --- a/src/components/DragAndDrop/Provider/index.js +++ b/src/components/DragAndDrop/Provider/index.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useRef, useCallback, useEffect} from 'react'; +import React, {useRef, useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import {PortalHost} from '@gorhom/portal'; import Str from 'expensify-common/lib/str'; @@ -37,8 +37,9 @@ function DragAndDropProvider({children, isDisabled = false, setIsDraggingOver = setIsDraggingOver(isDraggingOver); }, [isDraggingOver, setIsDraggingOver]); + const contextValue = useMemo(() => ({isDraggingOver, setOnDropHandler, dropZoneID: dropZoneID.current}), [isDraggingOver, setOnDropHandler]); return ( - + (dropZone.current = e)} style={[styles.flex1, styles.w100, styles.h100]} diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx index 9f180ba35b2e..e3b7558c1e21 100644 --- a/src/components/DraggableList/index.native.tsx +++ b/src/components/DraggableList/index.native.tsx @@ -2,11 +2,15 @@ import React from 'react'; import DraggableFlatList from 'react-native-draggable-flatlist'; import {FlatList} from 'react-native-gesture-handler'; import type {DraggableListProps} from './types'; +import styles from '../../styles/styles'; function DraggableList({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps, ref: React.ForwardedRef>) { return ( diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx index 674a95179e5d..ea9ac548e850 100644 --- a/src/components/DraggableList/index.tsx +++ b/src/components/DraggableList/index.tsx @@ -73,6 +73,7 @@ function DraggableList( - + {currency} diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js index 3023a9abf95c..0dc967d257d2 100644 --- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js +++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js @@ -28,12 +28,18 @@ function EmojiPickerButtonDropdown(props) { const emojiPopoverAnchor = useRef(null); useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []); - const onPress = () => + const onPress = () => { + if (EmojiPickerAction.isEmojiPickerVisible()) { + EmojiPickerAction.hideEmojiPicker(); + return; + } + EmojiPickerAction.showEmojiPicker(props.onModalHide, (emoji) => props.onInputChange(emoji), emojiPopoverAnchor.current, { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, shiftVertical: 4, }); + }; return ( @@ -44,7 +50,7 @@ function EmojiPickerButtonDropdown(props) { onPress={onPress} nativeID="emojiDropdownButton" accessibilityLabel="statusEmoji" - accessibilityRole="text" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {({hovered, pressed}) => ( diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 3dfc5f59bb38..ee6bcd5df47b 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View, FlatList} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -8,7 +8,7 @@ import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; -import emojis from '../../../../assets/emojis'; +import emojiAssets from '../../../../assets/emojis'; import EmojiPickerMenuItem from '../EmojiPickerMenuItem'; import Text from '../../Text'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../withWindowDimensions'; @@ -18,6 +18,7 @@ import getOperatingSystem from '../../../libs/getOperatingSystem'; import * as User from '../../../libs/actions/User'; import EmojiSkinToneList from '../EmojiSkinToneList'; import * as EmojiUtils from '../../../libs/EmojiUtils'; +import * as Browser from '../../../libs/Browser'; import CategoryShortcutBar from '../CategoryShortcutBar'; import TextInput from '../../TextInput'; import isEnterWhileComposition from '../../../libs/KeyboardShortcut/isEnterWhileComposition'; @@ -32,7 +33,6 @@ const propTypes = { /** Stores user's preferred skin tone */ preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** Stores user's frequently used emojis */ // eslint-disable-next-line react/forbid-prop-types frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.object), @@ -49,105 +49,35 @@ const defaultProps = { frequentlyUsedEmojis: [], }; -class EmojiPickerMenu extends Component { - constructor(props) { - super(props); - - // Ref for the emoji search input - this.searchInput = undefined; - - // Ref for emoji FlatList - this.emojiList = undefined; - - // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will - // prevent auto focus when open picker for mobile device - this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); - - this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300); - this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this); - this.setupEventHandlers = this.setupEventHandlers.bind(this); - this.cleanupEventHandlers = this.cleanupEventHandlers.bind(this); - this.renderItem = this.renderItem.bind(this); - this.isMobileLandscape = this.isMobileLandscape.bind(this); - this.onSelectionChange = this.onSelectionChange.bind(this); - this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this); - this.setFirstNonHeaderIndex = this.setFirstNonHeaderIndex.bind(this); - this.getItemLayout = this.getItemLayout.bind(this); - this.scrollToHeader = this.scrollToHeader.bind(this); - - this.firstNonHeaderIndex = 0; - - const {filteredEmojis, headerEmojis, headerRowIndices} = this.getEmojisAndHeaderRowIndices(); - this.emojis = filteredEmojis; - this.headerEmojis = headerEmojis; - this.headerRowIndices = headerRowIndices; - - this.state = { - filteredEmojis: this.emojis, - headerIndices: this.headerRowIndices, - highlightedIndex: -1, - arePointerEventsDisabled: false, - selection: { - start: 0, - end: 0, - }, - isFocused: false, - isUsingKeyboardMovement: false, - }; - } +const throttleTime = Browser.isMobile() ? 200 : 50; - componentDidMount() { - // This callback prop is used by the parent component using the constructor to - // get a ref to the inner textInput element e.g. if we do - // this.textInput = el} /> this will not - // return a ref to the component, but rather the HTML element by default - if (this.shouldFocusInputOnScreenFocus && this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) { - this.props.forwardedRef(this.searchInput); - } - this.setupEventHandlers(); - this.setFirstNonHeaderIndex(this.emojis); - } +function EmojiPickerMenu(props) { + const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, isSmallScreenWidth, windowHeight, translate} = props; - componentDidUpdate(prevProps) { - if (prevProps.frequentlyUsedEmojis === this.props.frequentlyUsedEmojis) { - return; - } + // Ref for the emoji search input + const searchInputRef = useRef(null); - const {filteredEmojis, headerEmojis, headerRowIndices} = this.getEmojisAndHeaderRowIndices(); - this.emojis = filteredEmojis; - this.headerEmojis = headerEmojis; - this.headerRowIndices = headerRowIndices; - this.setState({ - filteredEmojis: this.emojis, - headerIndices: this.headerRowIndices, - }); - } + // Ref for emoji FlatList + const emojiListRef = useRef(null); - componentWillUnmount() { - this.cleanupEventHandlers(); - } + // We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will + // prevent auto focus when open picker for mobile device + const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); - /** - * On text input selection change - * - * @param {Event} event - */ - onSelectionChange(event) { - this.setState({selection: event.nativeEvent.selection}); - } + const firstNonHeaderIndex = useRef(0); /** * Calculate the filtered + header emojis and header row indices * @returns {Object} */ - getEmojisAndHeaderRowIndices() { + function getEmojisAndHeaderRowIndices() { // If we're on Windows, don't display the flag emojis (the last category), // since Windows doesn't support them - const flagHeaderIndex = _.findIndex(emojis, (emoji) => emoji.header && emoji.code === 'flags'); + const flagHeaderIndex = _.findIndex(emojiAssets, (emoji) => emoji.header && emoji.code === 'flags'); const filteredEmojis = getOperatingSystem() === CONST.OS.WINDOWS - ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex)) - : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis); + ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojiAssets.slice(0, flagHeaderIndex)) + : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojiAssets); // Get the header emojis along with the code, index and icon. // index is the actual header index starting at the first emoji and counting each one @@ -161,76 +91,56 @@ class EmojiPickerMenu extends Component { return {filteredEmojis, headerEmojis, headerRowIndices}; } + const emojis = useRef([]); + if (emojis.current.length === 0) { + emojis.current = getEmojisAndHeaderRowIndices().filteredEmojis; + } + const headerRowIndices = useRef([]); + if (headerRowIndices.current.length === 0) { + headerRowIndices.current = getEmojisAndHeaderRowIndices().headerRowIndices; + } + const [headerEmojis, setHeaderEmojis] = useState(() => getEmojisAndHeaderRowIndices().headerEmojis); + + const [filteredEmojis, setFilteredEmojis] = useState(emojis.current); + const [headerIndices, setHeaderIndices] = useState(headerRowIndices.current); + const [highlightedIndex, setHighlightedIndex] = useState(-1); + const [arePointerEventsDisabled, setArePointerEventsDisabled] = useState(false); + const [selection, setSelection] = useState({start: 0, end: 0}); + const [isFocused, setIsFocused] = useState(false); + const [isUsingKeyboardMovement, setIsUsingKeyboardMovement] = useState(false); + + useEffect(() => { + const emojisAndHeaderRowIndices = getEmojisAndHeaderRowIndices(); + emojis.current = emojisAndHeaderRowIndices.filteredEmojis; + headerRowIndices.current = emojisAndHeaderRowIndices.headerRowIndices; + setHeaderEmojis(emojisAndHeaderRowIndices.headerEmojis); + setFilteredEmojis(emojis.current); + setHeaderIndices(headerRowIndices.current); + }, [frequentlyUsedEmojis]); + /** - * Find and store index of the first emoji item - * @param {Array} filteredEmojis + * On text input selection change + * + * @param {Event} event */ - setFirstNonHeaderIndex(filteredEmojis) { - this.firstNonHeaderIndex = _.findIndex(filteredEmojis, (item) => !item.spacer && !item.header); - } + const onSelectionChange = useCallback((event) => { + setSelection(event.nativeEvent.selection); + }, []); /** - * Setup and attach keypress/mouse handlers for highlight navigation. + * Find and store index of the first emoji item + * @param {Array} filteredEmojisArr */ - setupEventHandlers() { - if (!document) { + function updateFirstNonHeaderIndex(filteredEmojisArr) { + firstNonHeaderIndex.current = _.findIndex(filteredEmojisArr, (item) => !item.spacer && !item.header); + } + + const mouseMoveHandler = useCallback(() => { + if (!arePointerEventsDisabled) { return; } - - this.keyDownHandler = (keyBoardEvent) => { - if (keyBoardEvent.key.startsWith('Arrow')) { - if (!this.state.isFocused || keyBoardEvent.key === 'ArrowUp' || keyBoardEvent.key === 'ArrowDown') { - keyBoardEvent.preventDefault(); - } - - // Move the highlight when arrow keys are pressed - this.highlightAdjacentEmoji(keyBoardEvent.key); - return; - } - - // Select the currently highlighted emoji if enter is pressed - if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && this.state.highlightedIndex !== -1) { - const item = this.state.filteredEmojis[this.state.highlightedIndex]; - if (!item) { - return; - } - const emoji = lodashGet(item, ['types', this.props.preferredSkinTone], item.code); - this.props.onEmojiSelected(emoji, item); - return; - } - - // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input - // is not focused, so that the navigation and tab cycling can be done using the keyboard without - // interfering with the input behaviour. - if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && this.searchInput && !this.searchInput.isFocused())) { - this.setState({isUsingKeyboardMovement: true}); - return; - } - - // We allow typing in the search box if any key is pressed apart from Arrow keys. - if (this.searchInput && !this.searchInput.isFocused()) { - this.setState({selectTextOnFocus: false}); - this.searchInput.focus(); - - // Re-enable selection on the searchInput - this.setState({selectTextOnFocus: true}); - } - }; - - // Keyboard events are not bubbling on TextInput in RN-Web, Bubbling was needed for this event to trigger - // event handler attached to document root. To fix this, trigger event handler in Capture phase. - document.addEventListener('keydown', this.keyDownHandler, true); - - // Re-enable pointer events and hovering over EmojiPickerItems when the mouse moves - this.mouseMoveHandler = () => { - if (!this.state.arePointerEventsDisabled) { - return; - } - - this.setState({arePointerEventsDisabled: false}); - }; - document.addEventListener('mousemove', this.mouseMoveHandler); - } + setArePointerEventsDisabled(false); + }, [arePointerEventsDisabled]); /** * This function will be used with FlatList getItemLayout property for optimization purpose that allows skipping @@ -242,179 +152,248 @@ class EmojiPickerMenu extends Component { * @param {Number} index row index * @returns {Object} */ - getItemLayout(data, index) { - return {length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}; - } + const getItemLayout = useCallback((data, index) => ({length: CONST.EMOJI_PICKER_ITEM_HEIGHT, offset: CONST.EMOJI_PICKER_ITEM_HEIGHT * index, index}), []); /** - * Cleanup all mouse/keydown event listeners that we've set up + * Focuses the search Input and has the text selected */ - cleanupEventHandlers() { - if (!document) { + function focusInputWithTextSelect() { + if (!searchInputRef.current) { return; } - - document.removeEventListener('keydown', this.keyDownHandler, true); - document.removeEventListener('mousemove', this.mouseMoveHandler); + searchInputRef.current.focus(); } - /** - * Focuses the search Input and has the text selected - */ - focusInputWithTextSelect() { - if (!this.searchInput) { + const filterEmojis = _.throttle((searchTerm) => { + const normalizedSearchTerm = searchTerm.toLowerCase().trim().replaceAll(':', ''); + if (emojiListRef.current) { + emojiListRef.current.scrollToOffset({offset: 0, animated: false}); + } + if (normalizedSearchTerm === '') { + // There are no headers when searching, so we need to re-make them sticky when there is no search term + setFilteredEmojis(emojis.current); + setHeaderIndices(headerRowIndices.current); + setHighlightedIndex(-1); + updateFirstNonHeaderIndex(emojis.current); return; } + const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, preferredLocale, emojis.current.length); - this.setState({selectTextOnFocus: true}); - this.searchInput.focus(); - } + // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky + setFilteredEmojis(newFilteredEmojiList); + setHeaderIndices([]); + setHighlightedIndex(0); + updateFirstNonHeaderIndex(newFilteredEmojiList); + }, throttleTime); /** * Highlights emojis adjacent to the currently highlighted emoji depending on the arrowKey * @param {String} arrowKey */ - highlightAdjacentEmoji(arrowKey) { - if (this.state.filteredEmojis.length === 0) { - return; - } - - // Arrow Down and Arrow Right enable arrow navigation when search is focused - if (this.searchInput && this.searchInput.isFocused()) { - if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { + const highlightAdjacentEmoji = useCallback( + (arrowKey) => { + if (filteredEmojis.length === 0) { return; } - if (arrowKey === 'ArrowRight' && !(this.searchInput.value.length === this.state.selection.start && this.state.selection.start === this.state.selection.end)) { + // Arrow Down and Arrow Right enable arrow navigation when search is focused + if (searchInputRef.current && searchInputRef.current.isFocused()) { + if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { + return; + } + + if (arrowKey === 'ArrowRight' && !(searchInputRef.current.value.length === selection.start && selection.start === selection.end)) { + return; + } + + // Blur the input, change the highlight type to keyboard, and disable pointer events + searchInputRef.current.blur(); + setArePointerEventsDisabled(true); + setIsUsingKeyboardMovement(true); + + // We only want to hightlight the Emoji if none was highlighted already + // If we already have a highlighted Emoji, lets just skip the first navigation + if (highlightedIndex !== -1) { + return; + } + } + + // If nothing is highlighted and an arrow key is pressed + // select the first emoji, apply keyboard movement styles, and disable pointer events + if (highlightedIndex === -1) { + setHighlightedIndex(firstNonHeaderIndex.current); + setArePointerEventsDisabled(true); + setIsUsingKeyboardMovement(true); return; } - // Blur the input, change the highlight type to keyboard, and disable pointer events - this.searchInput.blur(); - this.setState({isUsingKeyboardMovement: true, arePointerEventsDisabled: true}); + let newIndex = highlightedIndex; + const move = (steps, boundsCheck, onBoundReached = () => {}) => { + if (boundsCheck()) { + onBoundReached(); + return; + } - // We only want to hightlight the Emoji if none was highlighted already - // If we already have a highlighted Emoji, lets just skip the first navigation - if (this.state.highlightedIndex !== -1) { - return; + // Move in the prescribed direction until we reach an element that isn't a header + const isHeader = (e) => e.header || e.spacer; + do { + newIndex += steps; + if (newIndex < 0) { + break; + } + } while (isHeader(filteredEmojis[newIndex])); + }; + + switch (arrowKey) { + case 'ArrowDown': + move(CONST.EMOJI_NUM_PER_ROW, () => highlightedIndex + CONST.EMOJI_NUM_PER_ROW > filteredEmojis.length - 1); + break; + case 'ArrowLeft': + move( + -1, + () => highlightedIndex - 1 < firstNonHeaderIndex.current, + () => { + // Reaching start of the list, arrow left set the focus to searchInput. + focusInputWithTextSelect(); + newIndex = -1; + }, + ); + break; + case 'ArrowRight': + move(1, () => highlightedIndex + 1 > filteredEmojis.length - 1); + break; + case 'ArrowUp': + move( + -CONST.EMOJI_NUM_PER_ROW, + () => highlightedIndex - CONST.EMOJI_NUM_PER_ROW < firstNonHeaderIndex.current, + () => { + // Reaching start of the list, arrow up set the focus to searchInput. + focusInputWithTextSelect(); + newIndex = -1; + }, + ); + break; + default: + break; } - } - // If nothing is highlighted and an arrow key is pressed - // select the first emoji, apply keyboard movement styles, and disable pointer events - if (this.state.highlightedIndex === -1) { - this.setState({highlightedIndex: this.firstNonHeaderIndex, isUsingKeyboardMovement: true, arePointerEventsDisabled: true}); - return; - } + // Actually highlight the new emoji, apply keyboard movement styles, and disable pointer events + if (newIndex !== highlightedIndex) { + setHighlightedIndex(newIndex); + setArePointerEventsDisabled(true); + setIsUsingKeyboardMovement(true); + } + }, + [filteredEmojis, highlightedIndex, selection.end, selection.start], + ); - let newIndex = this.state.highlightedIndex; - const move = (steps, boundsCheck, onBoundReached = () => {}) => { - if (boundsCheck()) { - onBoundReached(); + const keyDownHandler = useCallback( + (keyBoardEvent) => { + if (keyBoardEvent.key.startsWith('Arrow')) { + if (!isFocused || keyBoardEvent.key === 'ArrowUp' || keyBoardEvent.key === 'ArrowDown') { + keyBoardEvent.preventDefault(); + } + + // Move the highlight when arrow keys are pressed + highlightAdjacentEmoji(keyBoardEvent.key); return; } - // Move in the prescribed direction until we reach an element that isn't a header - const isHeader = (e) => e.header || e.spacer; - do { - newIndex += steps; - if (newIndex < 0) { - break; + // Select the currently highlighted emoji if enter is pressed + if (!isEnterWhileComposition(keyBoardEvent) && keyBoardEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && highlightedIndex !== -1) { + const item = filteredEmojis[highlightedIndex]; + if (!item) { + return; } - } while (isHeader(this.state.filteredEmojis[newIndex])); - }; - - switch (arrowKey) { - case 'ArrowDown': - move(CONST.EMOJI_NUM_PER_ROW, () => this.state.highlightedIndex + CONST.EMOJI_NUM_PER_ROW > this.state.filteredEmojis.length - 1); - break; - case 'ArrowLeft': - move( - -1, - () => this.state.highlightedIndex - 1 < this.firstNonHeaderIndex, - () => { - // Reaching start of the list, arrow left set the focus to searchInput. - this.focusInputWithTextSelect(); - newIndex = -1; - }, - ); - break; - case 'ArrowRight': - move(1, () => this.state.highlightedIndex + 1 > this.state.filteredEmojis.length - 1); - break; - case 'ArrowUp': - move( - -CONST.EMOJI_NUM_PER_ROW, - () => this.state.highlightedIndex - CONST.EMOJI_NUM_PER_ROW < this.firstNonHeaderIndex, - () => { - // Reaching start of the list, arrow up set the focus to searchInput. - this.focusInputWithTextSelect(); - newIndex = -1; - }, - ); - break; - default: - break; - } + const emoji = lodashGet(item, ['types', preferredSkinTone], item.code); + onEmojiSelected(emoji, item); + return; + } - // Actually highlight the new emoji, apply keyboard movement styles, and disable pointer events - if (newIndex !== this.state.highlightedIndex) { - this.setState({highlightedIndex: newIndex, isUsingKeyboardMovement: true, arePointerEventsDisabled: true}); - } - } + // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input + // is not focused, so that the navigation and tab cycling can be done using the keyboard without + // interfering with the input behaviour. + if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !searchInputRef.current.isFocused())) { + setIsUsingKeyboardMovement(true); + return; + } - scrollToHeader(headerIndex) { - const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT; - this.emojiList.flashScrollIndicators(); - this.emojiList.scrollToOffset({offset: calculatedOffset, animated: true}); - } + // We allow typing in the search box if any key is pressed apart from Arrow keys. + if (searchInputRef.current && !searchInputRef.current.isFocused()) { + searchInputRef.current.focus(); + } + }, + [filteredEmojis, highlightAdjacentEmoji, highlightedIndex, isFocused, onEmojiSelected, preferredSkinTone], + ); /** - * Filter the entire list of emojis to only emojis that have the search term in their keywords - * - * @param {String} searchTerm + * Setup and attach keypress/mouse handlers for highlight navigation. */ - filterEmojis(searchTerm) { - const normalizedSearchTerm = searchTerm.toLowerCase().trim().replaceAll(':', ''); - if (this.emojiList) { - this.emojiList.scrollToOffset({offset: 0, animated: false}); - } - if (normalizedSearchTerm === '') { - // There are no headers when searching, so we need to re-make them sticky when there is no search term - this.setState({ - filteredEmojis: this.emojis, - headerIndices: this.headerRowIndices, - highlightedIndex: -1, - }); - this.setFirstNonHeaderIndex(this.emojis); + const setupEventHandlers = useCallback(() => { + if (!document) { return; } - const newFilteredEmojiList = EmojiUtils.suggestEmojis(`:${normalizedSearchTerm}`, this.props.preferredLocale, this.emojis.length); - // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky - this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: [], highlightedIndex: 0}); - this.setFirstNonHeaderIndex(newFilteredEmojiList); - } + // Keyboard events are not bubbling on TextInput in RN-Web, Bubbling was needed for this event to trigger + // event handler attached to document root. To fix this, trigger event handler in Capture phase. + document.addEventListener('keydown', keyDownHandler, true); + + // Re-enable pointer events and hovering over EmojiPickerItems when the mouse moves + document.addEventListener('mousemove', mouseMoveHandler); + }, [keyDownHandler, mouseMoveHandler]); /** - * Check if its a landscape mode of mobile device - * - * @returns {Boolean} + * Cleanup all mouse/keydown event listeners that we've set up */ - isMobileLandscape() { - return this.props.isSmallScreenWidth && this.props.windowWidth >= this.props.windowHeight; - } + const cleanupEventHandlers = useCallback(() => { + if (!document) { + return; + } + + document.removeEventListener('keydown', keyDownHandler, true); + document.removeEventListener('mousemove', mouseMoveHandler); + }, [keyDownHandler, mouseMoveHandler]); + + useEffect(() => { + // This callback prop is used by the parent component using the constructor to + // get a ref to the inner textInput element e.g. if we do + // this.textInput = el} /> this will not + // return a ref to the component, but rather the HTML element by default + if (shouldFocusInputOnScreenFocus && forwardedRef && _.isFunction(forwardedRef)) { + forwardedRef(searchInputRef.current); + } + + setupEventHandlers(); + updateFirstNonHeaderIndex(emojis.current); + + return () => { + cleanupEventHandlers(); + }; + }, [forwardedRef, shouldFocusInputOnScreenFocus, cleanupEventHandlers, setupEventHandlers]); + + const scrollToHeader = useCallback((headerIndex) => { + if (!emojiListRef.current) { + return; + } + + const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT; + emojiListRef.current.flashScrollIndicators(); + emojiListRef.current.scrollToOffset({offset: calculatedOffset, animated: true}); + }, []); /** * @param {Number} skinTone */ - updatePreferredSkinTone(skinTone) { - if (this.props.preferredSkinTone === skinTone) { - return; - } + const updatePreferredSkinTone = useCallback( + (skinTone) => { + if (Number(preferredSkinTone) === Number(skinTone)) { + return; + } - User.updatePreferredSkinTone(skinTone); - } + User.updatePreferredSkinTone(skinTone); + }, + [preferredSkinTone], + ); /** * Return a unique key for each emoji item @@ -423,9 +402,7 @@ class EmojiPickerMenu extends Component { * @param {Number} index * @returns {String} */ - keyExtractor(item, index) { - return `emoji_picker_${item.code}_${index}`; - } + const keyExtractor = useCallback((item, index) => `emoji_picker_${item.code}_${index}`, []); /** * Given an emoji item object, render a component based on its type. @@ -436,112 +413,111 @@ class EmojiPickerMenu extends Component { * @param {Number} index * @returns {*} */ - renderItem({item, index}) { - const {code, header, types} = item; - if (item.spacer) { - return null; - } + const renderItem = useCallback( + ({item, index}) => { + const {code, header, types} = item; + if (item.spacer) { + return null; + } - if (header) { - return ( - - {this.props.translate(`emojiPicker.headers.${code}`)} - - ); - } + if (header) { + return ( + + {translate(`emojiPicker.headers.${code}`)} + + ); + } - const emojiCode = types && types[this.props.preferredSkinTone] ? types[this.props.preferredSkinTone] : code; + const emojiCode = types && types[preferredSkinTone] ? types[preferredSkinTone] : code; - const isEmojiFocused = index === this.state.highlightedIndex && this.state.isUsingKeyboardMovement; + const isEmojiFocused = index === highlightedIndex && isUsingKeyboardMovement; - return ( - this.props.onEmojiSelected(emoji, item)} - onHoverIn={() => this.setState({highlightedIndex: index, isUsingKeyboardMovement: false})} - onHoverOut={() => { - if (this.state.arePointerEventsDisabled) { - return; - } - this.setState({highlightedIndex: -1}); - }} - emoji={emojiCode} - onFocus={() => this.setState({highlightedIndex: index})} - onBlur={() => - this.setState((prevState) => ({ + return ( + onEmojiSelected(emoji, item)} + onHoverIn={() => { + if (!isUsingKeyboardMovement) { + return; + } + setIsUsingKeyboardMovement(false); + }} + emoji={emojiCode} + onFocus={() => setHighlightedIndex(index)} + onBlur={() => // Only clear the highlighted index if the highlighted index is the same, // meaning that the focus changed to an element that is not an emoji item. - highlightedIndex: prevState.highlightedIndex === index ? -1 : prevState.highlightedIndex, - })) - } - isFocused={isEmojiFocused} - isHighlighted={index === this.state.highlightedIndex} - isUsingKeyboardMovement={this.state.isUsingKeyboardMovement} - /> - ); - } - - render() { - const isFiltered = this.emojis.length !== this.state.filteredEmojis.length; - const listStyle = StyleUtils.getEmojiPickerListHeight(isFiltered, this.props.windowHeight); - const height = !listStyle.maxHeight || listStyle.height < listStyle.maxHeight ? listStyle.height : listStyle.maxHeight; - const overflowLimit = Math.floor(height / CONST.EMOJI_PICKER_ITEM_HEIGHT) * 8; - return ( - - - (this.searchInput = el)} - autoFocus={this.shouldFocusInputOnScreenFocus} - selectTextOnFocus={this.state.selectTextOnFocus} - onSelectionChange={this.onSelectionChange} - onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})} - onBlur={() => this.setState({isFocused: false})} - autoCorrect={false} - blurOnSubmit={this.state.filteredEmojis.length > 0} - /> - - {!isFiltered && ( - - )} - (this.emojiList = el)} - data={this.state.filteredEmojis} - renderItem={this.renderItem} - keyExtractor={this.keyExtractor} - numColumns={CONST.EMOJI_NUM_PER_ROW} - style={[ - listStyle, - // This prevents elastic scrolling when scroll reaches the start or end - {overscrollBehaviorY: 'contain'}, - // Set overflow to hidden to prevent elastic scrolling when there are not enough contents to scroll in FlatList - {overflowY: this.state.filteredEmojis.length > overflowLimit ? 'auto' : 'hidden'}, - // Set scrollPaddingTop to consider sticky headers while scrolling - {scrollPaddingTop: isFiltered ? 0 : CONST.EMOJI_PICKER_ITEM_HEIGHT}, - ]} - extraData={[this.state.filteredEmojis, this.state.highlightedIndex, this.props.preferredSkinTone]} - stickyHeaderIndices={this.state.headerIndices} - getItemLayout={this.getItemLayout} - contentContainerStyle={styles.flexGrow1} - ListEmptyComponent={{this.props.translate('common.noResultsFound')}} + setHighlightedIndex((prevState) => (prevState === index ? -1 : prevState)) + } + isFocused={isEmojiFocused} /> - + + { + setHighlightedIndex(-1); + setIsFocused(true); + setIsUsingKeyboardMovement(false); + }} + onBlur={() => setIsFocused(false)} + autoCorrect={false} + blurOnSubmit={filteredEmojis.length > 0} /> - ); - } + {!isFiltered && ( + + )} + + ); } EmojiPickerMenu.propTypes = propTypes; diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js index b51a8b07537c..c5ca5463aec4 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js @@ -27,14 +27,8 @@ const propTypes = { /** Handles what to do when the pressable is blurred */ onBlur: PropTypes.func, - /** Whether this menu item is currently highlighted or not */ - isHighlighted: PropTypes.bool, - /** Whether this menu item is currently focused or not */ isFocused: PropTypes.bool, - - /** Whether the emoji is highlighted by the keyboard/mouse */ - isUsingKeyboardMovement: PropTypes.bool, }; class EmojiPickerMenuItem extends PureComponent { @@ -43,6 +37,9 @@ class EmojiPickerMenuItem extends PureComponent { this.ref = null; this.focusAndScroll = this.focusAndScroll.bind(this); + this.state = { + isHovered: false, + }; } componentDidMount() { @@ -72,15 +69,29 @@ class EmojiPickerMenuItem extends PureComponent { this.props.onPress(this.props.emoji)} + // 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={Browser.isMobileChrome() ? () => {} : undefined} onPressOut={Browser.isMobile() ? this.props.onHoverOut : undefined} - onHoverIn={this.props.onHoverIn} - onHoverOut={this.props.onHoverOut} + onHoverIn={() => { + if (this.props.onHoverIn) { + this.props.onHoverIn(); + } + + this.setState({isHovered: true}); + }} + onHoverOut={() => { + if (this.props.onHoverOut) { + this.props.onHoverOut(); + } + + this.setState({isHovered: false}); + }} onFocus={this.props.onFocus} onBlur={this.props.onBlur} ref={(ref) => (this.ref = ref)} style={({pressed}) => [ - this.props.isHighlighted && this.props.isUsingKeyboardMovement ? styles.emojiItemKeyboardHighlighted : {}, - this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? styles.emojiItemHighlighted : {}, + this.props.isFocused ? styles.emojiItemKeyboardHighlighted : {}, + this.state.isHovered ? styles.emojiItemHighlighted : {}, Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.emojiItem, ]} @@ -95,9 +106,7 @@ class EmojiPickerMenuItem extends PureComponent { EmojiPickerMenuItem.propTypes = propTypes; EmojiPickerMenuItem.defaultProps = { - isHighlighted: false, isFocused: false, - isUsingKeyboardMovement: false, onHoverIn: () => {}, onHoverOut: () => {}, onFocus: () => {}, @@ -106,8 +115,4 @@ EmojiPickerMenuItem.defaultProps = { // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action. -export default React.memo( - EmojiPickerMenuItem, - (prevProps, nextProps) => - prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement, -); +export default React.memo(EmojiPickerMenuItem, (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.emoji === nextProps.emoji); diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 704d9b5a241c..67e031ce6ab6 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -66,7 +66,7 @@ function FormAlertWrapper(props) { ); } else if (props.isMessageHtml) { - children = ${props.message}`} />; + children = ${props.message}`} />; } return ( diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index c806bedc31c7..04759b89e5d0 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -29,9 +29,13 @@ const customHTMLElementModels = { edited: defaultHTMLElementModels.span.extend({ tagName: 'edited', }), + 'alert-text': defaultHTMLElementModels.div.extend({ + tagName: 'alert-text', + mixedUAStyles: {...styles.formError, ...styles.mb0}, + }), 'muted-text': defaultHTMLElementModels.div.extend({ tagName: 'muted-text', - mixedUAStyles: {...styles.formError, ...styles.mb0}, + mixedUAStyles: {...styles.colorMuted, ...styles.mb0}, }), comment: defaultHTMLElementModels.div.extend({ tagName: 'comment', diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 5cba52db5a7b..2ded0e52e94d 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -1,197 +1,216 @@ import _ from 'underscore'; -import React, {Component} from 'react'; +import React, {useEffect, useCallback, useState, useRef, useMemo, useImperativeHandle} from 'react'; import {DeviceEventEmitter} from 'react-native'; import {propTypes, defaultProps} from './hoverablePropTypes'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import CONST from '../../CONST'; +/** + * Maps the children of a Hoverable component to + * - a function that is called with the parameter + * - the child itself if it is the only child + * @param {Array|Function|ReactNode} children - The children to map. + * @param {Object} callbackParam - The parameter to pass to the children function. + * @returns {ReactNode} The mapped children. + */ +function mapChildren(children, callbackParam) { + if (_.isArray(children) && children.length === 1) { + return children[0]; + } + + if (_.isFunction(children)) { + return children(callbackParam); + } + + return children; +} + +/** + * Assigns a ref to an element, either by setting the current property of the ref object or by calling the ref function + * @param {Object|Function} ref - The ref object or function. + * @param {HTMLElement} el - The element to assign the ref to. + */ +function assignRef(ref, el) { + if (!ref) { + return; + } + + if (_.has(ref, 'current')) { + // eslint-disable-next-line no-param-reassign + ref.current = el; + } + + if (_.isFunction(ref)) { + ref(el); + } +} + /** * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state, * because nesting Pressables causes issues where the hovered state of the child cannot be easily propagated to the * parent. https://github.com/necolas/react-native-web/issues/1875 */ -class Hoverable extends Component { - constructor(props) { - super(props); - this.handleVisibilityChange = this.handleVisibilityChange.bind(this); - this.checkHover = this.checkHover.bind(this); +const Hoverable = React.forwardRef(({disabled, onHoverIn, onHoverOut, onMouseEnter, onMouseLeave, children, shouldHandleScroll}, outerRef) => { + const [isHovered, setIsHovered] = useState(false); - this.state = { - isHovered: false, - }; + const isScrolling = useRef(false); + const isHoveredRef = useRef(false); + const ref = useRef(null); - this.isHoveredRef = false; - this.isScrollingRef = false; - this.wrapperView = null; - } + const updateIsHoveredOnScrolling = useCallback( + (hovered) => { + if (disabled) { + return; + } - componentDidMount() { - document.addEventListener('visibilitychange', this.handleVisibilityChange); - document.addEventListener('mouseover', this.checkHover); + isHoveredRef.current = hovered; - /** - * Only add the scrolling listener if the shouldHandleScroll prop is true - * and the scrollingListener is not already set. - */ - if (!this.scrollingListener && this.props.shouldHandleScroll) { - this.scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => { - /** - * If user has stopped scrolling and the isHoveredRef is true, then we should update the hover state. - */ - if (!scrolling && this.isHoveredRef) { - this.setState({isHovered: this.isHoveredRef}, this.props.onHoverIn); - } else if (scrolling && this.isHoveredRef) { - /** - * If the user has started scrolling and the isHoveredRef is true, then we should set the hover state to false. - * This is to hide the existing hover and reaction bar. - */ - this.setState({isHovered: false}, this.props.onHoverOut); - } - this.isScrollingRef = scrolling; - }); - } - } + if (shouldHandleScroll && isScrolling.current) { + return; + } + setIsHovered(hovered); + }, + [disabled, shouldHandleScroll], + ); + + useEffect(() => { + const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false); + + document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); - componentDidUpdate(prevProps) { - if (prevProps.disabled === this.props.disabled) { + return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + }, []); + + useEffect(() => { + if (!shouldHandleScroll) { return; } - if (this.props.disabled && this.state.isHovered) { - this.setState({isHovered: false}); - } - } + const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => { + isScrolling.current = scrolling; + if (!scrolling) { + setIsHovered(isHoveredRef.current); + } + }); - componentWillUnmount() { - document.removeEventListener('visibilitychange', this.handleVisibilityChange); - document.removeEventListener('mouseover', this.checkHover); - if (this.scrollingListener) { - this.scrollingListener.remove(); - } - } + return () => scrollingListener.remove(); + }, [shouldHandleScroll]); - /** - * Sets the hover state of this component to true and execute the onHoverIn callback. - * - * @param {Boolean} isHovered - Whether or not this component is hovered. - */ - setIsHovered(isHovered) { - if (this.props.disabled) { + useEffect(() => { + if (!DeviceCapabilities.hasHoverSupport()) { return; } /** - * Capture whther or not the user is hovering over the component. - * We will use this to determine if we should update the hover state when the user has stopped scrolling. + * Checks the hover state of a component and updates it based on the event target. + * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger, + * such as when an element is removed before the mouseleave event is triggered. + * @param {Event} e - The hover event object. */ - this.isHoveredRef = isHovered; + const unsetHoveredIfOutside = (e) => { + if (!ref.current || !isHovered) { + return; + } - /** - * If the isScrollingRef is true, then the user is scrolling and we should not update the hover state. - */ - if (this.isScrollingRef && this.props.shouldHandleScroll && !this.state.isHovered) { - return; - } + if (ref.current.contains(e.target)) { + return; + } - if (isHovered !== this.state.isHovered) { - this.setState({isHovered}, isHovered ? this.props.onHoverIn : this.props.onHoverOut); - } - } + setIsHovered(false); + }; - /** - * Checks the hover state of a component and updates it based on the event target. - * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger, - * such as when an element is removed before the mouseleave event is triggered. - * @param {Event} e - The hover event object. - */ - checkHover(e) { - if (!this.wrapperView || !this.state.isHovered) { - return; - } + document.addEventListener('mouseover', unsetHoveredIfOutside); - if (this.wrapperView.contains(e.target)) { - return; - } - - this.setIsHovered(false); - } + return () => document.removeEventListener('mouseover', unsetHoveredIfOutside); + }, [isHovered]); - handleVisibilityChange() { - if (document.visibilityState !== 'hidden') { + useEffect(() => { + if (!disabled || !isHovered) { return; } + setIsHovered(false); + }, [disabled, isHovered]); - this.setIsHovered(false); - } - - render() { - let child = this.props.children; - if (_.isArray(this.props.children) && this.props.children.length === 1) { - child = this.props.children[0]; + useEffect(() => { + if (disabled) { + return; } - - if (_.isFunction(child)) { - child = child(this.state.isHovered); + if (onHoverIn && isHovered) { + return onHoverIn(); } - - if (!DeviceCapabilities.hasHoverSupport()) { - return child; + if (onHoverOut && !isHovered) { + return onHoverOut(); } - - return React.cloneElement(React.Children.only(child), { - ref: (el) => { - this.wrapperView = el; - - // Call the original ref, if any - const {ref} = child; - if (_.isFunction(ref)) { - ref(el); - return; - } - - if (_.isObject(ref)) { - ref.current = el; - } - }, - onMouseEnter: (el) => { - if (_.isFunction(this.props.onMouseEnter)) { - this.props.onMouseEnter(el); - } - - this.setIsHovered(true); - - if (_.isFunction(child.props.onMouseEnter)) { - child.props.onMouseEnter(el); - } - }, - onMouseLeave: (el) => { - if (_.isFunction(this.props.onMouseLeave)) { - this.props.onMouseLeave(el); - } - - this.setIsHovered(false); - - if (_.isFunction(child.props.onMouseLeave)) { - child.props.onMouseLeave(el); - } - }, - onBlur: (el) => { - // Check if the blur event occurred due to clicking outside the element - // and the wrapperView contains the element that caused the blur and reset isHovered - if (!this.wrapperView.contains(el.target) && !this.wrapperView.contains(el.relatedTarget)) { - this.setIsHovered(false); - } - - if (_.isFunction(child.props.onBlur)) { - child.props.onBlur(el); - } - }, - }); + }, [disabled, isHovered, onHoverIn, onHoverOut]); + + // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child. + useImperativeHandle(outerRef, () => ref.current, []); + + const child = useMemo(() => React.Children.only(mapChildren(children, isHovered)), [children, isHovered]); + + const enableHoveredOnMouseEnter = useCallback( + (el) => { + updateIsHoveredOnScrolling(true); + + if (_.isFunction(onMouseEnter)) { + onMouseEnter(el); + } + + if (_.isFunction(child.props.onMouseEnter)) { + child.props.onMouseEnter(el); + } + }, + [child.props, onMouseEnter, updateIsHoveredOnScrolling], + ); + + const disableHoveredOnMouseLeave = useCallback( + (el) => { + updateIsHoveredOnScrolling(false); + + if (_.isFunction(onMouseLeave)) { + onMouseLeave(el); + } + + if (_.isFunction(child.props.onMouseLeave)) { + child.props.onMouseLeave(el); + } + }, + [child.props, onMouseLeave, updateIsHoveredOnScrolling], + ); + + const disableHoveredOnBlur = useCallback( + (el) => { + // Check if the blur event occurred due to clicking outside the element + // and the wrapperView contains the element that caused the blur and reset isHovered + if (!ref.current.contains(el.target) && !ref.current.contains(el.relatedTarget)) { + setIsHovered(false); + } + + if (_.isFunction(child.props.onBlur)) { + child.props.onBlur(el); + } + }, + [child.props], + ); + + if (!DeviceCapabilities.hasHoverSupport()) { + return child; } -} + + return React.cloneElement(child, { + ref: (el) => { + ref.current = el; + assignRef(child.ref, el); + }, + onMouseEnter: enableHoveredOnMouseEnter, + onMouseLeave: disableHoveredOnMouseLeave, + onBlur: disableHoveredOnBlur, + }); +}); Hoverable.propTypes = propTypes; Hoverable.defaultProps = defaultProps; +Hoverable.displayName = 'Hoverable'; export default Hoverable; diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts index 3118eec56a6d..a30594d1ab3f 100644 --- a/src/components/Icon/BankIcons.ts +++ b/src/components/Icon/BankIcons.ts @@ -1,5 +1,6 @@ import {SvgProps} from 'react-native-svg'; -import * as Expensicons from './Expensicons'; +import {CSSProperties} from 'react'; +import {ViewStyle} from 'react-native'; import AmericanExpress from '../../../assets/images/bankicons/american-express.svg'; import BankOfAmerica from '../../../assets/images/bankicons/bank-of-america.svg'; import BB_T from '../../../assets/images/bankicons/bb-t.svg'; @@ -19,11 +20,36 @@ import SunTrust from '../../../assets/images/bankicons/suntrust.svg'; import TdBank from '../../../assets/images/bankicons/td-bank.svg'; import USBank from '../../../assets/images/bankicons/us-bank.svg'; import USAA from '../../../assets/images/bankicons/usaa.svg'; +// Card Icons +import AmericanExpressCard from '../../../assets/images/cardicons/american-express.svg'; +import BankOfAmericaCard from '../../../assets/images/cardicons/bank-of-america.svg'; +import BB_TCard from '../../../assets/images/cardicons/bb-t.svg'; +import CapitalOneCard from '../../../assets/images/cardicons/capital-one.svg'; +import CharlesSchwabCard from '../../../assets/images/cardicons/charles-schwab.svg'; +import ChaseCard from '../../../assets/images/cardicons/chase.svg'; +import CitiBankCard from '../../../assets/images/cardicons/citibank.svg'; +import CitizensBankCard from '../../../assets/images/cardicons/citizens.svg'; +import DiscoverCard from '../../../assets/images/cardicons/discover.svg'; +import FidelityCard from '../../../assets/images/cardicons/fidelity.svg'; +import HuntingtonBankCard from '../../../assets/images/cardicons/huntington-bank.svg'; +import GenericBankCard from '../../../assets/images/cardicons/generic-bank-card.svg'; +import NavyFederalCreditUnionCard from '../../../assets/images/cardicons/navy-federal-credit-union.svg'; +import PNCCard from '../../../assets/images/cardicons/pnc.svg'; +import RegionsBankCard from '../../../assets/images/cardicons/regions-bank.svg'; +import SunTrustCard from '../../../assets/images/cardicons/suntrust.svg'; +import TdBankCard from '../../../assets/images/cardicons/td-bank.svg'; +import USBankCard from '../../../assets/images/cardicons/us-bank.svg'; +import USAACard from '../../../assets/images/cardicons/usaa.svg'; +import ExpensifyCardImage from '../../../assets/images/cardicons/expensify-card-dark.svg'; +import styles from '../../styles/styles'; import variables from '../../styles/variables'; type BankIcon = { icon: React.FC; iconSize?: number; + iconHeight?: number; + iconWidth?: number; + iconStyles?: Array; }; /** @@ -31,79 +57,83 @@ type BankIcon = { */ function getAssetIcon(bankName: string, isCard: boolean): React.FC { + if (bankName.includes('expensify')) { + return ExpensifyCardImage; + } + if (bankName.includes('americanexpress')) { - return AmericanExpress; + return isCard ? AmericanExpressCard : AmericanExpress; } if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) { - return BankOfAmerica; + return isCard ? BankOfAmericaCard : BankOfAmerica; } if (bankName.startsWith('bbt')) { - return BB_T; + return isCard ? BB_TCard : BB_T; } if (bankName.startsWith('capital one') || bankName.includes('capitalone')) { - return CapitalOne; + return isCard ? CapitalOneCard : CapitalOne; } if (bankName.startsWith('chase') || bankName.includes('chase')) { - return Chase; + return isCard ? ChaseCard : Chase; } if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) { - return CharlesSchwab; + return isCard ? CharlesSchwabCard : CharlesSchwab; } if (bankName.startsWith('citibank') || bankName.includes('citibank')) { - return CitiBank; + return isCard ? CitiBankCard : CitiBank; } if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) { - return CitizensBank; + return isCard ? CitizensBankCard : CitizensBank; } if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') { - return Discover; + return isCard ? DiscoverCard : Discover; } if (bankName.startsWith('fidelity')) { - return Fidelity; + return isCard ? FidelityCard : Fidelity; } if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) { - return HuntingtonBank; + return isCard ? HuntingtonBankCard : HuntingtonBank; } if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) { - return NavyFederalCreditUnion; + return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion; } if (bankName.startsWith('pnc') || bankName.includes('pnc')) { - return PNC; + return isCard ? PNCCard : PNC; } if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) { - return RegionsBank; + return isCard ? RegionsBankCard : RegionsBank; } if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) { - return SunTrust; + return isCard ? SunTrustCard : SunTrust; } if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) { - return TdBank; + return isCard ? TdBankCard : TdBank; } if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) { - return USBank; + return isCard ? USBankCard : USBank; } if (bankName.includes('usaa')) { - return USAA; + return isCard ? USAACard : USAA; } - return isCard ? Expensicons.CreditCard : GenericBank; + return isCard ? GenericBankCard : GenericBank; } /** @@ -112,7 +142,7 @@ function getAssetIcon(bankName: string, isCard: boolean): React.FC { export default function getBankIcon(bankName: string, isCard = false): BankIcon { const bankIcon: BankIcon = { - icon: isCard ? Expensicons.CreditCard : GenericBank, + icon: isCard ? GenericBankCard : GenericBank, }; if (bankName) { @@ -120,8 +150,13 @@ export default function getBankIcon(bankName: string, isCard = false): BankIcon } // For default Credit Card icon the icon size should not be set. - if (![Expensicons.CreditCard].includes(bankIcon.icon)) { + if (!isCard) { bankIcon.iconSize = variables.iconSizeExtraLarge; + bankIcon.iconStyles = [styles.bankIconContainer]; + } else { + bankIcon.iconHeight = variables.bankCardHeight; + bankIcon.iconWidth = variables.bankCardWidth; + bankIcon.iconStyles = [styles.assignedCardsIconContainer]; } return bankIcon; diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index 1c1552d55844..ccee8bc4e6a0 100644 --- a/src/components/KYCWall/BaseKYCWall.js +++ b/src/components/KYCWall/BaseKYCWall.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {Dimensions} from 'react-native'; @@ -23,6 +24,7 @@ class KYCWall extends React.Component { this.continue = this.continue.bind(this); this.setMenuPosition = this.setMenuPosition.bind(this); + this.selectPaymentMethod = this.selectPaymentMethod.bind(this); this.anchorRef = React.createRef(null); this.state = { @@ -38,7 +40,6 @@ class KYCWall extends React.Component { if (this.props.shouldListenForResize) { this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition); } - Wallet.setKYCWallSourceChatReportID(this.props.chatReportID); } componentWillUnmount() { @@ -87,6 +88,18 @@ class KYCWall extends React.Component { }); } + /** + * @param {String} paymentMethod + */ + selectPaymentMethod(paymentMethod) { + this.props.onSelectPaymentMethod(paymentMethod); + if (paymentMethod === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { + Navigation.navigate(this.props.addBankAccountRoute); + } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) { + Navigation.navigate(this.props.addDebitCardRoute); + } + } + /** * Take the position of the button that calls this method and show the Add Payment method menu when the user has no valid payment method. * If they do have a valid payment method they are navigated to the "enable payments" route to complete KYC checks. @@ -96,6 +109,14 @@ class KYCWall extends React.Component { * @param {String} iouPaymentType */ continue(event, iouPaymentType) { + const currentSource = lodashGet(this.props.walletTerms, 'source', this.props.source); + + /** + * Set the source, so we can tailor the process according to how we got here. + * We do not want to set this on mount, as the source can change upon completing the flow, e.g. when upgrading the wallet to Gold. + */ + Wallet.setKYCWallSource(this.props.source, this.props.chatReportID); + if (this.state.shouldShowAddPaymentMenu) { this.setState({shouldShowAddPaymentMenu: false}); return; @@ -110,9 +131,13 @@ class KYCWall extends React.Component { // Check to see if user has a valid payment method on file and display the add payment popover if they don't if ( (isExpenseReport && lodashGet(this.props.reimbursementAccount, 'achData.state', '') !== CONST.BANK_ACCOUNT.STATE.OPEN) || - (!isExpenseReport && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, this.props.bankAccountList)) + (!isExpenseReport && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, this.props.bankAccountList, this.props.shouldIncludeDebitCard)) ) { Log.info('[KYC Wallet] User does not have valid payment method'); + if (!this.props.shouldIncludeDebitCard) { + this.selectPaymentMethod(CONST.PAYMENT_METHODS.BANK_ACCOUNT); + return; + } const clickedElementLocation = getClickedTargetLocation(targetElement); const position = this.getAnchorPosition(clickedElementLocation); this.setPositionAddPaymentMenu(position); @@ -123,15 +148,15 @@ class KYCWall extends React.Component { } if (!isExpenseReport) { // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks - const hasGoldWallet = this.props.userWallet.tierName && this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD; - if (!hasGoldWallet) { - Log.info('[KYC Wallet] User does not have gold wallet'); + const hasActivatedWallet = this.props.userWallet.tierName && _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], this.props.userWallet.tierName); + if (!hasActivatedWallet) { + Log.info('[KYC Wallet] User does not have active wallet'); Navigation.navigate(this.props.enablePaymentsRoute); return; } } Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them'); - this.props.onSuccessfulKYC(iouPaymentType); + this.props.onSuccessfulKYC(iouPaymentType, currentSource); } render() { @@ -148,11 +173,7 @@ class KYCWall extends React.Component { anchorAlignment={this.props.anchorAlignment} onItemSelected={(item) => { this.setState({shouldShowAddPaymentMenu: false}); - if (item === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { - Navigation.navigate(this.props.addBankAccountRoute); - } else if (item === CONST.PAYMENT_METHODS.DEBIT_CARD) { - Navigation.navigate(this.props.addDebitCardRoute); - } + this.selectPaymentMethod(item); }} /> {this.props.children(this.continue, this.anchorRef)} @@ -168,6 +189,9 @@ export default withOnyx({ userWallet: { key: ONYXKEYS.USER_WALLET, }, + walletTerms: { + key: ONYXKEYS.WALLET_TERMS, + }, fundList: { key: ONYXKEYS.FUND_LIST, }, diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js index 6c117eb67f5b..b585535784dc 100644 --- a/src/components/KYCWall/kycWallPropTypes.js +++ b/src/components/KYCWall/kycWallPropTypes.js @@ -5,6 +5,7 @@ import bankAccountPropTypes from '../bankAccountPropTypes'; import cardPropTypes from '../cardPropTypes'; import iouReportPropTypes from '../../pages/iouReportPropTypes'; import reimbursementAccountPropTypes from '../../pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes'; +import walletTermsPropTypes from '../../pages/EnablePayments/walletTermsPropTypes'; import CONST from '../../CONST'; const propTypes = { @@ -26,6 +27,12 @@ const propTypes = { /** The user's wallet */ userWallet: userWalletPropTypes, + /** Information related to the last step of the wallet activation flow */ + walletTerms: walletTermsPropTypes, + + /** The source that triggered the KYC wall */ + source: PropTypes.oneOf(_.values(CONST.KYC_WALL_SOURCE)).isRequired, + /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */ chatReportID: PropTypes.string, @@ -49,10 +56,17 @@ const propTypes = { horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), }), + + /** Whether the option to add a debit card should be included */ + shouldIncludeDebitCard: PropTypes.bool, + + /** Callback for when a payment method has been selected */ + onSelectPaymentMethod: PropTypes.func, }; const defaultProps = { userWallet: {}, + walletTerms: {}, shouldListenForResize: false, isDisabled: false, chatReportID: '', @@ -66,6 +80,8 @@ const defaultProps = { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }, + shouldIncludeDebitCard: true, + onSelectPaymentMethod: () => {}, }; export {propTypes, defaultProps}; diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 4e6564646cac..ba035c8b3baf 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -26,7 +26,9 @@ import * as ReportUtils from '../../libs/ReportUtils'; import useLocalize from '../../hooks/useLocalize'; import Permissions from '../../libs/Permissions'; import Tooltip from '../Tooltip'; +import DomUtils from '../../libs/DomUtils'; import useWindowDimensions from '../../hooks/useWindowDimensions'; +import ReportActionComposeFocusManager from '../../libs/ReportActionComposeFocusManager'; const propTypes = { /** Style for hovered state */ @@ -167,12 +169,13 @@ function OptionRowLHN(props) { if (e) { e.preventDefault(); } - + // Enable Composer to focus on clicking the same chat after opening the context menu. + ReportActionComposeFocusManager.focus(); props.onSelectRow(optionItem, popoverAnchor); }} onMouseDown={(e) => { // Allow composer blur on right click - if (!e || e.button === 2) { + if (!e) { return; } @@ -180,7 +183,13 @@ function OptionRowLHN(props) { e.preventDefault(); }} testID={optionItem.reportID} - onSecondaryInteraction={(e) => showPopover(e)} + onSecondaryInteraction={(e) => { + showPopover(e); + // Ensure that we blur the composer when opening context menu, so that only one component is focused at a time + if (DomUtils.getActiveElement()) { + DomUtils.getActiveElement().blur(); + } + }} withoutFocusOnSecondaryInteraction activeOpacity={0.8} style={[ diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index dcaa0273f96a..3a9cc6845194 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -103,6 +103,7 @@ function MagicCodeInput(props) { const [input, setInput] = useState(''); const [focusedIndex, setFocusedIndex] = useState(0); const [editIndex, setEditIndex] = useState(0); + const [wasSubmitted, setWasSubmitted] = useState(false); const blurMagicCodeInput = () => { inputRefs.current[editIndex].blur(); @@ -124,9 +125,12 @@ function MagicCodeInput(props) { const validateAndSubmit = () => { const numbers = decomposeString(props.value, props.maxLength); - if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { + if (wasSubmitted || !props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) { return; } + if (!wasSubmitted) { + setWasSubmitted(true); + } // Blurs the input and removes focus from the last input and, if it should submit // on complete, it will call the onFulfill callback. blurMagicCodeInput(); diff --git a/src/components/MapView/MapViewTypes.ts b/src/components/MapView/MapViewTypes.ts index dc56cb4642c4..6cc52ac91d18 100644 --- a/src/components/MapView/MapViewTypes.ts +++ b/src/components/MapView/MapViewTypes.ts @@ -33,6 +33,9 @@ type PendingMapViewProps = { /** Subtitle message below the title */ subtitle?: string; + + /** Style applied to PendingMapView */ + style?: StyleProp; }; // Initial state of the map diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx index 6a35d2a9c369..d97d4aaee16f 100644 --- a/src/components/MapView/PendingMapView.tsx +++ b/src/components/MapView/PendingMapView.tsx @@ -8,11 +8,11 @@ import {PendingMapViewProps} from './MapViewTypes'; import BlockingView from '../BlockingViews/BlockingView'; import * as Expensicons from '../Icon/Expensicons'; -function PendingMapView({title = '', subtitle = ''}: PendingMapViewProps) { +function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) { const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle); return ( - + {hasTextContent ? ( { @@ -117,39 +118,42 @@ const MenuItem = React.forwardRef((props, ref) => { return; } const parser = new ExpensiMark(); - setHtml(parser.replace(convertToLTR(props.title))); + setHtml(parser.replace(props.title)); titleRef.current = props.title; }, [props.title, props.shouldParseTitle]); const getProcessedTitle = useMemo(() => { + let title = ''; if (props.shouldRenderAsHTML) { - return convertToLTR(props.title); + title = convertToLTR(props.title); } if (props.shouldParseTitle) { - return html; + title = html; } - return ''; + return title ? `${title}` : ''; }, [props.title, props.shouldRenderAsHTML, props.shouldParseTitle, html]); const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); + const onPressAction = (e) => { + if (props.disabled || !props.interactive) { + return; + } + + if (e && e.type === 'click') { + e.currentTarget.blur(); + } + + props.onPress(e); + }; + return ( {(isHovered) => ( { - if (props.disabled || !props.interactive) { - return; - } - - if (e && e.type === 'click') { - e.currentTarget.blur(); - } - - props.onPress(e); - }, props.isAnonymousAction)} + onPress={props.shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, props.isAnonymousAction) : onPressAction} onPressIn={() => props.shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} onPressOut={ControlSelection.unblock} onSecondaryInteraction={props.onSecondaryInteraction} diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 6b2b4e16db65..8ae4672e758e 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -1,4 +1,5 @@ import React, {useMemo} from 'react'; +import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -15,11 +16,13 @@ import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; +import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; import SettlementButton from './SettlementButton'; import Button from './Button'; import * as IOU from '../libs/actions/IOU'; import * as CurrencyUtils from '../libs/CurrencyUtils'; import reportPropTypes from '../pages/reportPropTypes'; +import nextStepPropTypes from '../pages/nextStepPropTypes'; const propTypes = { /** The report currently being looked at */ @@ -40,6 +43,9 @@ const propTypes = { /** The chat report this report is linked to */ chatReport: reportPropTypes, + /** The next step for the report */ + nextStep: nextStepPropTypes, + /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, @@ -54,15 +60,16 @@ const propTypes = { const defaultProps = { chatReport: {}, + nextStep: {}, session: { email: null, }, policy: {}, }; -function MoneyReportHeader({session, personalDetails, policy, chatReport, report: moneyRequestReport, isSmallScreenWidth}) { +function MoneyReportHeader({session, personalDetails, policy, chatReport, nextStep, report: moneyRequestReport, isSmallScreenWidth}) { const {translate} = useLocalize(); - const reportTotal = ReportUtils.getMoneyRequestTotal(moneyRequestReport); + const reimbursableTotal = ReportUtils.getMoneyRequestReimbursableTotal(moneyRequestReport); const isApproved = ReportUtils.isReportApproved(moneyRequestReport); const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const policyType = lodashGet(policy, 'type'); @@ -71,8 +78,8 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report const isPayer = policyType === CONST.POLICY.TYPE.CORPORATE ? isPolicyAdmin && isApproved : isPolicyAdmin || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && isManager); const isDraft = ReportUtils.isReportDraft(moneyRequestReport); const shouldShowSettlementButton = useMemo( - () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reportTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport), - [isPayer, isDraft, isSettled, moneyRequestReport, reportTotal, chatReport], + () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reimbursableTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport), + [isPayer, isDraft, isSettled, moneyRequestReport, reimbursableTotal, chatReport], ); const shouldShowApproveButton = useMemo(() => { if (policyType !== CONST.POLICY.TYPE.CORPORATE) { @@ -80,10 +87,12 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report } return isManager && !isDraft && !isApproved && !isSettled; }, [policyType, isManager, isDraft, isApproved, isSettled]); - const shouldShowSubmitButton = isDraft && reportTotal !== 0; - const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton; + const shouldShowSubmitButton = isDraft && reimbursableTotal !== 0; + const shouldShowNextSteps = isDraft && nextStep && (!_.isEmpty(nextStep.message) || !_.isEmpty(nextStep.expenseMessage)); + const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextSteps; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); - const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, moneyRequestReport.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency); + const isMoreContentShown = shouldShowNextSteps || (shouldShowAnyButton && isSmallScreenWidth); return ( @@ -96,7 +105,8 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report personalDetails={personalDetails} shouldShowBackButton={isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} - shouldShowBorderBottom={!shouldShowAnyButton || !isSmallScreenWidth} + // Shows border if no buttons or next steps are showing below the header + shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextSteps && !isSmallScreenWidth)} > {shouldShowSettlementButton && !isSmallScreenWidth && ( @@ -141,43 +151,50 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report )} - {shouldShowSettlementButton && isSmallScreenWidth && ( - - IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)} - enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} - addBankAccountRoute={bankAccountRoute} - shouldShowPaymentOptions - formattedAmount={formattedAmount} - /> - - )} - {shouldShowApproveButton && isSmallScreenWidth && ( - - - )} - {shouldShowSubmitButton && isSmallScreenWidth && ( - - - )} + + {shouldShowNextSteps && ( + + + + )} + {shouldShowSettlementButton && isSmallScreenWidth && ( + + IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)} + enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} + addBankAccountRoute={bankAccountRoute} + shouldShowPaymentOptions + formattedAmount={formattedAmount} + /> + + )} + {shouldShowApproveButton && isSmallScreenWidth && ( + + + )} + {shouldShowSubmitButton && isSmallScreenWidth && ( + + + )} + ); } @@ -192,6 +209,9 @@ export default compose( chatReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`, }, + nextStep: { + key: ({report}) => `${ONYXKEYS.COLLECTION.NEXT_STEP}${report.reportID}`, + }, session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js new file mode 100644 index 000000000000..9c4362b620d1 --- /dev/null +++ b/src/components/MoneyReportHeaderStatusBar.js @@ -0,0 +1,43 @@ +import React, {useMemo} from 'react'; +import {Text, View} from 'react-native'; +import _ from 'underscore'; +import styles from '../styles/styles'; +import * as NextStepUtils from '../libs/NextStepUtils'; +import useLocalize from '../hooks/useLocalize'; +import nextStepPropTypes from '../pages/nextStepPropTypes'; +import RenderHTML from './RenderHTML'; + +const propTypes = { + /** The next step for the report */ + nextStep: nextStepPropTypes, +}; + +const defaultProps = { + nextStep: {}, +}; + +function MoneyReportHeaderStatusBar({nextStep}) { + const {translate} = useLocalize(); + + const messageContent = useMemo(() => { + const messageArray = _.isEmpty(nextStep.expenseMessage) ? nextStep.message : nextStep.expenseMessage; + return NextStepUtils.parseMessage(messageArray); + }, [nextStep.expenseMessage, nextStep.message]); + + return ( + + + {translate('iou.nextSteps')} + + + + + + ); +} + +MoneyReportHeaderStatusBar.displayName = 'MoneyReportHeaderStatusBar'; +MoneyReportHeaderStatusBar.propTypes = propTypes; +MoneyReportHeaderStatusBar.defaultProps = defaultProps; + +export default MoneyReportHeaderStatusBar; diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 2b9036d25881..5ca08bf82f89 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -150,6 +150,9 @@ const propTypes = { /** Whether the money request is a scan request */ isScanRequest: PropTypes.bool, + /** Whether we're editing a split bill */ + isEditingSplitBill: PropTypes.bool, + /** Whether we should show the amount, date, and merchant fields. */ shouldShowSmartScanFields: PropTypes.bool, @@ -168,7 +171,7 @@ const defaultProps = { onConfirm: () => {}, onSendMoney: () => {}, onSelectParticipant: () => {}, - iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + iouType: CONST.IOU.TYPE.REQUEST, iouCategory: '', iouTag: '', iouIsBillable: false, @@ -205,9 +208,9 @@ function MoneyRequestConfirmationList(props) { const {translate, toLocaleDigit} = useLocalize(); const transaction = props.isEditingSplitBill ? props.draftTransaction || props.transaction : props.transaction; - const isTypeRequest = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST; - const isSplitBill = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT; - const isTypeSend = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND; + const isTypeRequest = props.iouType === CONST.IOU.TYPE.REQUEST; + const isSplitBill = props.iouType === CONST.IOU.TYPE.SPLIT; + const isTypeSend = props.iouType === CONST.IOU.TYPE.SEND; const isSplitWithScan = isSplitBill && props.isScanRequest; @@ -442,7 +445,7 @@ function MoneyRequestConfirmationList(props) { return; } - if (props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND) { + if (props.iouType === CONST.IOU.TYPE.SEND) { if (!paymentMethod) { return; } @@ -488,7 +491,7 @@ function MoneyRequestConfirmationList(props) { return; } - const shouldShowSettlementButton = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND; + const shouldShowSettlementButton = props.iouType === CONST.IOU.TYPE.SEND; const shouldDisableButton = selectedParticipants.length === 0; const button = shouldShowSettlementButton ? ( @@ -534,7 +537,7 @@ 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) : {}; + props.receiptPath && props.receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, props.receiptPath, props.receiptFilename) : {}; return ( {props.isDistanceRequest && ( @@ -589,8 +593,8 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem, styles.mt2]} titleStyle={styles.moneyRequestConfirmationAmount} disabled={didConfirm} - brickRoadIndicator={shouldDisplayFieldError && !transaction.modifiedAmount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - error={shouldDisplayFieldError && !transaction.modifiedAmount ? translate('common.error.enterAmount') : ''} + brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''} /> )} )} {props.isDistanceRequest && ( @@ -676,16 +680,8 @@ function MoneyRequestConfirmationList(props) { }} disabled={didConfirm} interactive={!props.isReadOnly} - brickRoadIndicator={ - shouldDisplayFieldError && (transaction.modifiedMerchant === '' || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT) - ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR - : '' - } - error={ - shouldDisplayFieldError && (transaction.modifiedMerchant === '' || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT) - ? translate('common.error.enterMerchant') - : '' - } + brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction) ? translate('common.error.enterMerchant') : ''} /> )} {shouldShowCategories && ( diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index e35574486e21..086e1429baef 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -82,7 +82,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, }, [parentReportAction, setIsDeleteModalVisible]); const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); - const isPending = TransactionUtils.isPending(transaction); + const isPending = TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction); const canModifyRequest = isActionOwner && !isSettled && !isApproved && !ReportActionsUtils.isDeletedAction(parentReportAction); diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js index dae170dd1d5c..643e7b2f4a2f 100644 --- a/src/components/OfflineWithFeedback.js +++ b/src/components/OfflineWithFeedback.js @@ -58,6 +58,9 @@ const propTypes = { /** Whether to apply needsOffscreenAlphaCompositing prop to the children */ needsOffscreenAlphaCompositing: PropTypes.bool, + + /** Whether we can dismiss the error message */ + canDismissError: PropTypes.bool, }; const defaultProps = { @@ -72,6 +75,7 @@ const defaultProps = { errorRowStyles: [], shouldDisableStrikeThrough: false, needsOffscreenAlphaCompositing: false, + canDismissError: true, }; /** @@ -130,16 +134,18 @@ function OfflineWithFeedback(props) { messages={errorMessages} type="error" /> - - - - - + {props.canDismissError && ( + + + + + + )} )} diff --git a/src/components/Onfido/index.css b/src/components/Onfido/index.css index 5c76f42037a5..53f7888fc385 100644 --- a/src/components/Onfido/index.css +++ b/src/components/Onfido/index.css @@ -39,6 +39,15 @@ background-image: var(--back-icon-svg) !important; } +.onfido-sdk-ui-Theme-root .ods-button.-action--primary:disabled { + opacity: 0.5 !important; + background-color: var(--osdk-color-background-button-primary) !important; +} + +.onfido-sdk-ui-crossDevice-CrossDeviceLink-sending::before { + margin-left: 0 !important; +} + @media only screen and (max-width: 600px) { .onfido-sdk-ui-Modal-inner { /* This keeps the bottom of the Onfido window from being cut off on mobile web because the height was being diff --git a/src/components/OnyxProvider.js b/src/components/OnyxProvider.tsx similarity index 91% rename from src/components/OnyxProvider.js rename to src/components/OnyxProvider.tsx index 380328cf8137..3bd4ca52c3be 100644 --- a/src/components/OnyxProvider.js +++ b/src/components/OnyxProvider.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; import ONYXKEYS from '../ONYXKEYS'; import createOnyxContext from './createOnyxContext'; import ComposeProviders from './ComposeProviders'; // Set up any providers for individual keys. This should only be used in cases where many components will subscribe to // the same key (e.g. FlatList renderItem components) -const [withNetwork, NetworkProvider, NetworkContext] = createOnyxContext(ONYXKEYS.NETWORK, {}); +const [withNetwork, NetworkProvider, NetworkContext] = createOnyxContext(ONYXKEYS.NETWORK); const [withPersonalDetails, PersonalDetailsProvider] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST); const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURRENT_DATE); const [withReportActionsDrafts, ReportActionsDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS); @@ -15,12 +14,12 @@ const [withBetas, BetasProvider, BetasContext] = createOnyxContext(ONYXKEYS.BETA const [withReportCommentDrafts, ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT); const [withPreferredTheme, PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKEYS.PREFERRED_THEME); -const propTypes = { +type OnyxProviderProps = { /** Rendered child component */ - children: PropTypes.node.isRequired, + children: React.ReactNode; }; -function OnyxProvider(props) { +function OnyxProvider(props: OnyxProviderProps) { return ( )} diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js index dc716453b2a8..caabf39a41bb 100644 --- a/src/components/OptionsList/optionsListPropTypes.js +++ b/src/components/OptionsList/optionsListPropTypes.js @@ -90,6 +90,12 @@ const propTypes = { /** Whether we are loading new options */ isLoadingNewOptions: PropTypes.bool, + + /** Whether nested scroll of options is enabled, true by default */ + nestedScrollEnabled: PropTypes.bool, + + /** Whether the list should have a bounce effect on iOS */ + bounces: PropTypes.bool, }; const defaultProps = { @@ -117,6 +123,8 @@ const defaultProps = { showScrollIndicator: false, isRowMultilineSupported: false, isLoadingNewOptions: false, + nestedScrollEnabled: true, + bounces: true, }; export {propTypes, defaultProps}; diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 3c9d401cdbdb..4ffddd700359 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import Button from '../Button'; import FixedFooter from '../FixedFooter'; import OptionsList from '../OptionsList'; @@ -432,8 +432,21 @@ class BaseOptionsSelector extends Component { isRowMultilineSupported={this.props.isRowMultilineSupported} isLoadingNewOptions={this.props.isLoadingNewOptions} shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow} + nestedScrollEnabled={this.props.nestedScrollEnabled} + bounces={!this.props.shouldTextInputAppearBelowOptions || !this.props.shouldAllowScrollingChildren} /> ); + + const optionsAndInputsBelowThem = ( + <> + {optionsList} + + {this.props.children} + {this.props.shouldShowTextInput && textInput} + + + ); + return ( - {this.props.shouldTextInputAppearBelowOptions ? ( - <> - {optionsList} - - {this.props.children} - {this.props.shouldShowTextInput && textInput} - - - ) : ( + {/* + * The OptionsList component uses a SectionList which uses a VirtualizedList internally. + * VirtualizedList cannot be directly nested within ScrollViews of the same orientation. + * To work around this, we wrap the OptionsList component with a horizontal ScrollView. + */} + {this.props.shouldTextInputAppearBelowOptions && this.props.shouldAllowScrollingChildren && ( + + + {optionsAndInputsBelowThem} + + + )} + + {this.props.shouldTextInputAppearBelowOptions && !this.props.shouldAllowScrollingChildren && optionsAndInputsBelowThem} + + {!this.props.shouldTextInputAppearBelowOptions && ( <> {this.props.children} diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js index 9e028510e608..bfef8ca3a925 100644 --- a/src/components/OptionsSelector/optionsSelectorPropTypes.js +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -128,6 +128,12 @@ const propTypes = { /** Whether the text input should intercept swipes or not */ shouldTextInputInterceptSwipe: PropTypes.bool, + + /** Whether we should allow the view wrapping the nested children to be scrollable */ + shouldAllowScrollingChildren: PropTypes.bool, + + /** Whether nested scroll of options is enabled, true by default */ + nestedScrollEnabled: PropTypes.bool, }; const defaultProps = { @@ -165,6 +171,8 @@ const defaultProps = { isRowMultilineSupported: false, initialFocusedIndex: undefined, shouldTextInputInterceptSwipe: false, + shouldAllowScrollingChildren: false, + nestedScrollEnabled: true, }; export {propTypes, defaultProps}; diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js index 42d2202de8b7..6b6163992589 100644 --- a/src/components/PDFView/PDFPasswordForm.js +++ b/src/components/PDFView/PDFPasswordForm.js @@ -50,6 +50,8 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat const [shouldShowForm, setShouldShowForm] = useState(false); const textInputRef = useRef(null); + const focusTimeoutRef = useRef(null); + const errorText = useMemo(() => { if (isPasswordInvalid) { return translate('attachmentView.passwordIncorrect'); @@ -67,7 +69,19 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat if (!textInputRef.current) { return; } - textInputRef.current.focus(); + /** + * We recommend using setTimeout to wait for the animation to finish and then focus on the input + * Relevant thread: https://expensify.slack.com/archives/C01GTK53T8Q/p1694660990479979 + */ + focusTimeoutRef.current = setTimeout(() => { + textInputRef.current.focus(); + }, CONST.ANIMATED_TRANSITION); + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; }, [isFocused]); const updatePassword = (newPassword) => { @@ -117,7 +131,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat autoCorrect={false} textContentType="password" onChangeText={updatePassword} - returnKeyType="done" + returnKeyType="go" onSubmitEditing={submitPassword} errorText={errorText} onFocus={() => onPasswordFieldFocused(true)} diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 4cdc7a5a4f47..c4e9587bb667 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -34,6 +34,9 @@ const propTypes = { }), withoutOverlay: PropTypes.bool, + + /** Should we announce the Modal visibility changes? */ + shouldSetModalVisibility: PropTypes.bool, }; const defaultProps = { @@ -44,6 +47,7 @@ const defaultProps = { }, anchorRef: () => {}, withoutOverlay: false, + shouldSetModalVisibility: true, }; function PopoverMenu(props) { @@ -89,6 +93,7 @@ function PopoverMenu(props) { disableAnimation={props.disableAnimation} fromSidebarMediumScreen={props.fromSidebarMediumScreen} withoutOverlay={props.withoutOverlay} + shouldSetModalVisibility={props.shouldSetModalVisibility} > {!_.isEmpty(props.headerText) && {props.headerText}} @@ -100,6 +105,7 @@ function PopoverMenu(props) { iconHeight={item.iconHeight} iconFill={item.iconFill} title={item.text} + shouldCheckActionAllowedOnPress={false} description={item.description} onPress={() => selectItem(menuIndex)} focused={focusedIndex === menuIndex} diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js index efa230d920d5..86f09579a758 100644 --- a/src/components/PopoverProvider/index.js +++ b/src/components/PopoverProvider/index.js @@ -22,7 +22,11 @@ function PopoverContextProvider(props) { if (!activePopoverRef.current || (anchorRef && anchorRef !== activePopoverRef.current.anchorRef)) { return; } + activePopoverRef.current.close(); + if (activePopoverRef.current.onCloseCallback) { + activePopoverRef.current.onCloseCallback(); + } activePopoverRef.current = null; setIsOpen(false); }, []); @@ -106,23 +110,25 @@ function PopoverContextProvider(props) { closePopover(activePopoverRef.current.anchorRef); } activePopoverRef.current = popoverParams; + if (popoverParams && popoverParams.onOpenCallback) { + popoverParams.onOpenCallback(); + } setIsOpen(true); }, [closePopover], ); - return ( - - {props.children} - + const contextValue = React.useMemo( + () => ({ + onOpen, + close: closePopover, + popover: activePopoverRef.current, + isOpen, + }), + [onOpen, closePopover, isOpen], ); + + return {props.children}; } PopoverContextProvider.defaultProps = defaultProps; diff --git a/src/components/PopoverProvider/index.native.js b/src/components/PopoverProvider/index.native.js index f34abcb1fa62..e4da13752b6d 100644 --- a/src/components/PopoverProvider/index.native.js +++ b/src/components/PopoverProvider/index.native.js @@ -15,18 +15,17 @@ const PopoverContext = React.createContext({ }); function PopoverContextProvider(props) { - return ( - {}, - close: () => {}, - popover: {}, - isOpen: false, - }} - > - {props.children} - + const contextValue = React.useMemo( + () => ({ + onOpen: () => {}, + close: () => {}, + popover: {}, + isOpen: false, + }), + [], ); + + return {props.children}; } PopoverContextProvider.defaultProps = defaultProps; diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 3b194ad4b9cf..2036807e0df0 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React from 'react'; import {View} from 'react-native'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import {PopoverContext} from '../PopoverProvider'; @@ -11,7 +11,6 @@ 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', { @@ -31,6 +30,8 @@ function Popover(props) { ref: props.withoutOverlayRef, close: props.onClose, anchorRef: props.anchorRef, + onCloseCallback: () => Modal.setCloseModal(null), + onOpenCallback: () => Modal.setCloseModal(() => props.onClose(props.anchorRef)), }); } else { props.onModalHide(); @@ -39,14 +40,6 @@ function Popover(props) { } 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 // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.isVisible]); diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 79ce5629c9e9..24d81f59f4f8 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -5,7 +5,6 @@ import _ from 'underscore'; import Accessibility from '../../../libs/Accessibility'; import HapticFeedback from '../../../libs/HapticFeedback'; import KeyboardShortcut from '../../../libs/KeyboardShortcut'; -import * as Browser from '../../../libs/Browser'; import styles from '../../../styles/styles'; import genericPressablePropTypes from './PropTypes'; import CONST from '../../../CONST'; @@ -129,15 +128,13 @@ const GenericPressable = forwardRef((props, ref) => { return KeyboardShortcut.subscribe(shortcutKey, onPressHandler, descriptionKey, modifiers, true, false, 0, false); }, [keyboardShortcut, onPressHandler]); - const defaultLongPressHandler = Browser.isMobileChrome() ? () => {} : undefined; return ( { - // Since the emojiName is only stored as the object key, when _.sortBy() runs, the object is converted to an array and the - // keys are lost. To keep from losing the emojiName, it's copied to the emojiReaction object. - // eslint-disable-next-line no-param-reassign - emojiReaction.emojiName = emojiName; - const oldestUserReactionTimestamp = _.chain(emojiReaction.users) - .reduce((allTimestampsArray, userData) => { - if (!userData) { - return allTimestampsArray; - } - _.each(userData.skinTones, (createdAt) => { - allTimestampsArray.push(createdAt); - }); - return allTimestampsArray; - }, []) - .sort() - .first() - .value(); - - // Just in case two emojis have the same timestamp, also combine the timestamp with the - // emojiName so that the order will always be the same. Without this, the order can be pretty random - // and shift around a little bit. - return (oldestUserReactionTimestamp || emojiReaction.createdAt) + emojiName; - }); - - const formattedReactions = _.map(sortedReactions, (reaction) => { - const reactionEmojiName = reaction.emojiName; - const usersWithReactions = _.pick(reaction.users, _.identity); - let reactionCount = 0; - - // Loop through the users who have reacted and see how many skintones they reacted with so that we get the total count - _.forEach(usersWithReactions, (user) => { - reactionCount += _.size(user.skinTones); - }); - if (!reactionCount) { - return null; - } - totalReactionCount += reactionCount; - const emojiAsset = EmojiUtils.findEmojiByName(reactionEmojiName); - const emojiCodes = EmojiUtils.getUniqueEmojiCodes(emojiAsset, reaction.users); - const hasUserReacted = Report.hasAccountIDEmojiReacted(props.currentUserPersonalDetails.accountID, reaction.users); - const reactionUsers = _.keys(usersWithReactions); - const reactionUserAccountIDs = _.map(reactionUsers, Number); - - const onPress = () => { - props.toggleReaction(emojiAsset); - }; - - const onReactionListOpen = (event) => { - reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[reactionEmojiName], reactionEmojiName, reportActionID); - }; - - return { - reactionEmojiName, - emojiCodes, - reactionUserAccountIDs, - onPress, - reactionUsers, - reactionCount, - hasUserReacted, - onReactionListOpen, - pendingAction: reaction.pendingAction, - }; - }); + const formattedReactions = _.chain(props.emojiReactions) + .map((emojiReaction, emojiName) => { + const {emoji, emojiCodes, reactionCount, hasUserReacted, userAccountIDs, oldestTimestamp} = EmojiUtils.getEmojiReactionDetails( + emojiName, + emojiReaction, + props.currentUserPersonalDetails.accountID, + ); + + if (reactionCount === 0) { + return null; + } + totalReactionCount += reactionCount; + + const onPress = () => { + props.toggleReaction(emoji); + }; + + const onReactionListOpen = (event) => { + reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[emojiName], emojiName, reportActionID); + }; + + return { + emojiCodes, + userAccountIDs, + reactionCount, + hasUserReacted, + oldestTimestamp, + onPress, + onReactionListOpen, + reactionEmojiName: emojiName, + pendingAction: emojiReaction.pendingAction, + }; + }) + // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone + .sortBy('oldestTimestamp') + .value(); return ( totalReactionCount > 0 && ( @@ -131,11 +101,11 @@ function ReportActionItemEmojiReactions(props) { )} - renderTooltipContentKey={[..._.map(reaction.reactionUsers, (user) => user.toString()), ...reaction.emojiCodes]} + renderTooltipContentKey={[..._.map(reaction.userAccountIDs, String), ...reaction.emojiCodes]} key={reaction.reactionEmojiName} > @@ -148,7 +118,6 @@ function ReportActionItemEmojiReactions(props) { count={reaction.reactionCount} emojiCodes={reaction.emojiCodes} onPress={reaction.onPress} - reactionUsers={reaction.reactionUsers} hasUserReacted={reaction.hasUserReacted} onReactionListOpen={reaction.onReactionListOpen} shouldBlockReactions={props.shouldBlockReactions} diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index bfdcc59bf89f..2ffd0359d9d6 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -28,41 +28,89 @@ const propTypes = { }; function MoneyReportView(props) { - const formattedAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.report), props.report.currency); - const isSettled = ReportUtils.isSettled(props.report.reportID); const {translate} = useLocalize(); + const isSettled = ReportUtils.isSettled(props.report.reportID); + + const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.report); + + const shouldShowBreakdown = nonReimbursableSpend && reimbursableSpend; + const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.report.currency, ReportUtils.hasOnlyDistanceRequestTransactions(props.report.reportID)); + const formattedOutOfPocketAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, props.report.currency); + const formattedCompanySpendAmount = CurrencyUtils.convertToDisplayString(nonReimbursableSpend, props.report.currency); + + const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)]; return ( - - - - - - - - {translate('common.total')} - - - - {isSettled && ( - - - - )} - - {formattedAmount} - + + + + + + + {translate('common.total')} + + + + {isSettled && ( + + + + )} + + {formattedTotalAmount} + + + {shouldShowBreakdown ? ( + <> + + + + {translate('cardTransactions.outOfPocket')} + + + + + {formattedOutOfPocketAmount} + + + + + + + {translate('cardTransactions.companySpend')} + + + + + {formattedCompanySpendAmount} + + + + + ) : undefined} { if (isExpensifyCardTransaction) { diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 289cd70c3332..ab95fb749ac1 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -151,7 +151,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should let receiptURIs; let hasErrors = false; if (hasReceipt) { - receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename); + receiptURIs = ReceiptUtils.getThumbnailAndImageURIs(transaction); hasErrors = canEdit && TransactionUtils.hasMissingSmartscanFields(transaction); } @@ -159,130 +159,130 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction; return ( - - - - - - {hasReceipt && ( - - - - - - )} - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''} - /> - - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - numberOfLinesTitle={0} - /> - - {isDistanceRequest ? ( - + + + + {hasReceipt && ( + + + + + + )} + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''} /> - ) : ( - + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))} - brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''} + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))} + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + numberOfLinesTitle={0} /> - )} - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} - brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} - error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''} - /> - - {shouldShowCategory && ( - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))} - /> - - )} - {shouldShowTag && ( - + {isDistanceRequest ? ( + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} + /> + + ) : ( + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))} + brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''} + /> + + )} + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))} + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))} + brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''} /> - )} - {isExpensifyCardTransaction ? ( - - - - ) : null} - {shouldShowBillable && ( - - {translate('common.billable')} - IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})} - /> - - )} + {shouldShowCategory && ( + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))} + /> + + )} + {shouldShowTag && ( + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))} + /> + + )} + {isExpensifyCardTransaction && ( + + + + )} + {shouldShowBillable && ( + + {translate('common.billable')} + IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})} + /> + + )} + - ) : ( - - ); + if (isEReceipt) { + receiptImageComponent = ( + + + + ); + } else if (thumbnail) { + receiptImageComponent = ( + + ); + } else { + receiptImageComponent = ( + + ); + } if (enablePreviewModal) { return ( diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js index ce49f519df66..bd1ee6d45a07 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.js +++ b/src/components/ReportActionItem/ReportActionItemImages.js @@ -7,6 +7,7 @@ import Text from '../Text'; import ReportActionItemImage from './ReportActionItemImage'; import * as StyleUtils from '../../styles/StyleUtils'; import variables from '../../styles/variables'; +import transactionPropTypes from '../transactionPropTypes'; const propTypes = { /** array of image and thumbnail URIs */ @@ -14,6 +15,7 @@ const propTypes = { PropTypes.shape({ thumbnail: PropTypes.string, image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + transaction: transactionPropTypes, }), ).isRequired, @@ -47,8 +49,10 @@ const defaultProps = { */ function ReportActionItemImages({images, size, total, isHovered}) { - const numberOfShownImages = size || images.length; - const shownImages = images.slice(0, size); + // Calculate the number of images to be shown, limited by the value of 'size' (if defined) + // or the total number of images. + const numberOfShownImages = Math.min(size || images.length, images.length); + const shownImages = images.slice(0, numberOfShownImages); const remaining = (total || images.length) - size; const MAX_REMAINING = 9; @@ -66,7 +70,7 @@ function ReportActionItemImages({images, size, total, isHovered}) { return ( - {_.map(shownImages, ({thumbnail, image}, index) => { + {_.map(shownImages, ({thumbnail, image, transaction}, index) => { const isLastImage = index === numberOfShownImages - 1; // Show a border to separate multiple images. Shown to the right for each except the last. @@ -80,6 +84,7 @@ function ReportActionItemImages({images, size, total, isHovered}) { {isLastImage && remaining > 0 && ( diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 0ddd8098f460..ef70502f30f7 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -111,7 +111,7 @@ function ReportPreview(props) { const managerID = props.iouReport.managerID || 0; const isCurrentUserManager = managerID === lodashGet(props.session, 'accountID'); - const reportTotal = ReportUtils.getMoneyRequestTotal(props.iouReport); + const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(props.iouReport); const iouSettled = ReportUtils.isSettled(props.iouReportID); const iouCanceled = ReportUtils.isArchivedRoom(props.chatReport); @@ -123,10 +123,11 @@ function ReportPreview(props) { const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(props.iouReportID); const numberOfScanningReceipts = _.filter(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length; const hasReceipts = transactionsWithReceipts.length > 0; + const hasOnlyDistanceRequests = ReportUtils.hasOnlyDistanceRequestTransactions(props.iouReportID); const isScanning = hasReceipts && ReportUtils.areAllRequestsBeingSmartScanned(props.iouReportID, props.action); const hasErrors = hasReceipts && ReportUtils.hasMissingSmartscanFields(props.iouReportID); - const lastThreeTransactionsWithReceipts = ReportUtils.getReportPreviewDisplayTransactions(props.action); - const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, ({receipt, filename}) => ReceiptUtils.getThumbnailAndImageURIs(receipt.source, filename || '')); + const lastThreeTransactionsWithReceipts = transactionsWithReceipts.slice(-3); + const lastThreeReceipts = _.map(lastThreeTransactionsWithReceipts, (transaction) => ReceiptUtils.getThumbnailAndImageURIs(transaction)); const hasNonReimbursableTransactions = ReportUtils.hasNonReimbursableTransactions(props.iouReportID); const hasOnlyOneReceiptRequest = numberOfRequests === 1 && hasReceipts; const previewSubtitle = hasOnlyOneReceiptRequest @@ -136,15 +137,18 @@ function ReportPreview(props) { scanningReceipts: numberOfScanningReceipts, }); - const shouldShowSubmitButton = isReportDraft && reportTotal !== 0; + const shouldShowSubmitButton = isReportDraft && reimbursableSpend !== 0; const getDisplayAmount = () => { - if (reportTotal) { - return CurrencyUtils.convertToDisplayString(reportTotal, props.iouReport.currency); + if (totalDisplaySpend) { + return CurrencyUtils.convertToDisplayString(totalDisplaySpend, props.iouReport.currency); } if (isScanning) { return props.translate('iou.receiptScanning'); } + if (hasOnlyDistanceRequests) { + return props.translate('common.tbd'); + } // If iouReport is not available, get amount from the action message (Ex: "Domain20821's Workspace owes $33.00" or "paid β‚«60" or "paid -β‚«60 elsewhere") let displayAmount = ''; @@ -176,7 +180,7 @@ function ReportPreview(props) { const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport); const shouldShowSettlementButton = ReportUtils.isControlPolicyExpenseChat(props.chatReport) ? props.policy.role === CONST.POLICY.ROLE.ADMIN && ReportUtils.isReportApproved(props.iouReport) && !iouSettled && !iouCanceled - : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reportTotal !== 0; + : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0; return ( @@ -195,9 +199,9 @@ function ReportPreview(props) { {hasReceipts && ( )} @@ -241,9 +245,10 @@ function ReportPreview(props) { onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} - style={[styles.requestPreviewBox]} + style={[styles.mt3]} + shouldShowPaymentOptions anchorAlignment={{ - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }} /> @@ -253,7 +258,7 @@ function ReportPreview(props) { medium success={props.chatReport.isOwnPolicyExpenseChat} text={translate('common.submit')} - style={styles.requestPreviewBox} + style={styles.mt3} onPress={() => IOU.submitReport(props.iouReport)} /> )} diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 7c8444a5d5b9..23a27682a7d4 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -133,7 +133,7 @@ function ReportWelcomeText(props) { ))} )} - {(moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)) && ( + {(moneyRequestOptions.includes(CONST.IOU.TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.TYPE.REQUEST)) && ( {props.translate('reportActionsView.usePlusButton')} )} diff --git a/src/components/ScrollViewWithContext.js b/src/components/ScrollViewWithContext.js index bf0e7c6d62e8..1d183e250767 100644 --- a/src/components/ScrollViewWithContext.js +++ b/src/components/ScrollViewWithContext.js @@ -1,4 +1,4 @@ -import React, {useState, useRef} from 'react'; +import React, {useState, useRef, useMemo} from 'react'; import {ScrollView} from 'react-native'; const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16; @@ -27,6 +27,14 @@ function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRe setContentOffsetY(event.nativeEvent.contentOffset.y); }; + const contextValue = useMemo( + () => ({ + scrollViewRef, + contentOffsetY, + }), + [scrollViewRef, contentOffsetY], + ); + return ( - - {children} - + {children} ); } diff --git a/src/components/SelectCircle.js b/src/components/SelectCircle.js index 93cf285eab59..55e410f8baa1 100644 --- a/src/components/SelectCircle.js +++ b/src/components/SelectCircle.js @@ -9,15 +9,20 @@ import themeColors from '../styles/themes/default'; const propTypes = { /** Should we show the checkmark inside the circle */ isChecked: PropTypes.bool, + + /** Additional styles to pass to SelectCircle */ + // eslint-disable-next-line react/forbid-prop-types + styles: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { isChecked: false, + styles: [], }; function SelectCircle(props) { return ( - + {props.isChecked && ( { if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) { triggerKYCFlow(event, iouPaymentType); + BankAccounts.setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS); return; } @@ -204,6 +207,7 @@ function SettlementButton({ addBankAccountRoute={addBankAccountRoute} addDebitCardRoute={addDebitCardRoute} isDisabled={isOffline} + source={CONST.KYC_WALL_SOURCE.REPORT} chatReportID={chatReportID} iouReport={iouReport} anchorAlignment={anchorAlignment} diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js new file mode 100644 index 000000000000..889b6a7d1f96 --- /dev/null +++ b/src/components/SingleOptionSelector.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import {View} from 'react-native'; +import SelectCircle from './SelectCircle'; +import styles from '../styles/styles'; +import CONST from '../CONST'; +import Text from './Text'; +import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; + +const propTypes = { + /** Array of options for the selector, key is a unique identifier, label is a localize key that will be translated and displayed */ + options: PropTypes.arrayOf( + PropTypes.shape({ + key: PropTypes.string, + label: PropTypes.string, + }), + ), + + /** Key of the option that is currently selected */ + selectedOptionKey: PropTypes.string, + + /** Function to be called when an option is selected */ + onSelectOption: PropTypes.func, + ...withLocalizePropTypes, +}; + +const defaultProps = { + options: [], + selectedOptionKey: undefined, + onSelectOption: () => {}, +}; + +function SingleOptionSelector({options, selectedOptionKey, onSelectOption, translate}) { + return ( + + {_.map(options, (option) => ( + + onSelectOption(option)} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + accessibilityState={{checked: selectedOptionKey === option.key}} + aria-checked={selectedOptionKey === option.key} + accessibilityLabel={option.label} + > + + {translate(option.label)} + + + ))} + + ); +} + +SingleOptionSelector.propTypes = propTypes; +SingleOptionSelector.defaultProps = defaultProps; +SingleOptionSelector.displayName = 'SingleOptionSelector'; + +export default withLocalize(SingleOptionSelector); diff --git a/src/components/SplashScreenHider/index.native.js b/src/components/SplashScreenHider/index.native.js index f4c234bb877d..dbfac3331484 100644 --- a/src/components/SplashScreenHider/index.native.js +++ b/src/components/SplashScreenHider/index.native.js @@ -18,6 +18,9 @@ const defaultProps = { function SplashScreenHider(props) { const {onHide} = props; + const logoSizeRatio = BootSplash.logoSizeRatio || 1; + const navigationBarHeight = BootSplash.navigationBarHeight || 0; + const opacity = useSharedValue(1); const scale = useSharedValue(1); @@ -64,15 +67,15 @@ function SplashScreenHider(props) { opacityStyle, { // Apply negative margins to center the logo on window (instead of screen) - marginBottom: -(BootSplash.navigationBarHeight || 0), + marginBottom: -navigationBarHeight, }, ]} > diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 4efa033c60d0..3483ec10f804 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -1,5 +1,5 @@ import {View} from 'react-native'; -import React from 'react'; +import React, {useMemo, useState} from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; import * as Expensicons from '../Icon/Expensicons'; @@ -53,7 +53,7 @@ const getIconAndTitle = (route, translate) => { } }; -const getOpacity = (position, routesLength, tabIndex, active) => { +const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => { const activeValue = active ? 1 : 0; const inactiveValue = active ? 0 : 1; @@ -62,19 +62,19 @@ const getOpacity = (position, routesLength, tabIndex, active) => { return position.interpolate({ inputRange, - outputRange: _.map(inputRange, (i) => (i === tabIndex ? activeValue : inactiveValue)), + outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)), }); } return activeValue; }; -const getBackgroundColor = (position, routesLength, tabIndex) => { +const getBackgroundColor = (position, routesLength, tabIndex, affectedTabs) => { if (routesLength > 1) { const inputRange = Array.from({length: routesLength}, (v, i) => i); return position.interpolate({ inputRange, - outputRange: _.map(inputRange, (i) => (i === tabIndex ? themeColors.border : themeColors.appBG)), + outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? themeColors.border : themeColors.appBG)), }); } return themeColors.border; @@ -82,12 +82,23 @@ const getBackgroundColor = (position, routesLength, tabIndex) => { function TabSelector({state, navigation, onTabPress, position}) { const {translate} = useLocalize(); + + const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]); + const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs); + + React.useEffect(() => { + // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition. + setTimeout(() => { + setAffectedAnimatedTabs(defaultAffectedAnimatedTabs); + }, CONST.ANIMATED_TRANSITION); + }, [defaultAffectedAnimatedTabs, state.index]); + return ( {_.map(state.routes, (route, index) => { - const activeOpacity = getOpacity(position, state.routes.length, index, true); - const inactiveOpacity = getOpacity(position, state.routes.length, index, false); - const backgroundColor = getBackgroundColor(position, state.routes.length, index); + const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs); + const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs); + const backgroundColor = getBackgroundColor(position, state.routes.length, index, affectedAnimatedTabs); const isFocused = index === state.index; const {icon, title} = getIconAndTitle(route.name, translate); @@ -96,6 +107,8 @@ function TabSelector({state, navigation, onTabPress, position}) { return; } + setAffectedAnimatedTabs([state.index, index]); + const event = navigation.emit({ type: 'tabPress', target: route.key, diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js index 6611b8acf914..04a576f9dbf0 100644 --- a/src/components/TabSelector/TabSelectorItem.js +++ b/src/components/TabSelector/TabSelectorItem.js @@ -54,13 +54,13 @@ function TabSelectorItem({icon, title, onPress, backgroundColor, activeOpacity, )} diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 8e7cf11f7e5a..05eca664bd0f 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -53,7 +53,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm [searchValue, selectedOptions, policyTagList, policyRecentlyUsedTagsList], ); - const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, ''); + const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, ''); return ( { + /* Keep the focus state on mWeb like we did on the native apps. */ + if (!Browser.isMobile()) { + return; + } + e.preventDefault(); + }} ref={buttonRef} style={[styles.touchableButtonImage, ...iconStyles]} accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} @@ -111,6 +123,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me onItemSelected={hidePopoverMenu} menuItems={menuItems} withoutOverlay={!shouldOverlay} + shouldSetModalVisibility={shouldSetModalVisibility} anchorRef={buttonRef} /> diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js index 50ade2026bae..1f60560be5ff 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -78,7 +78,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, const initialMousePosition = useRef({x: 0, y: 0}); const updateTargetAndMousePosition = useCallback((e) => { - target.current = e.target; + target.current = e.currentTarget; initialMousePosition.current = {x: e.clientX, y: e.clientY}; }, []); @@ -86,10 +86,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, * Display the tooltip in an animation. */ const showTooltip = useCallback(() => { - if (!isRendered) { - setIsRendered(true); - } - + setIsRendered(true); setIsVisible(true); animation.current.stopAnimation(); @@ -109,7 +106,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, }); } TooltipSense.activate(); - }, [isRendered]); + }, []); // eslint-disable-next-line rulesdir/prefer-early-return useEffect(() => { @@ -130,11 +127,17 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, if (bounds.width === 0) { setIsRendered(false); } + if (!target.current) { + return; + } // Choose a bounding box for the tooltip to target. // In the case when the target is a link that has wrapped onto // multiple lines, we want to show the tooltip over the part // of the link that the user is hovering over. const betterBounds = chooseBoundingBox(target.current, initialMousePosition.current.x, initialMousePosition.current.y); + if (!betterBounds) { + return; + } setWrapperWidth(betterBounds.width); setWrapperHeight(betterBounds.height); setXOffset(betterBounds.x); @@ -144,7 +147,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, /** * Hide the tooltip in an animation. */ - const hideTooltip = () => { + const hideTooltip = useCallback(() => { animation.current.stopAnimation(); if (TooltipSense.isActive() && !isTooltipSenseInitiator.current) { @@ -162,7 +165,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, TooltipSense.deactivate(); setIsVisible(false); - }; + }, []); // Skip the tooltip and return the children if the text is empty, // we don't have a render function or the device does not support hovering diff --git a/src/components/UserCurrentLocationButton.js b/src/components/UserCurrentLocationButton.js deleted file mode 100644 index fa22eb602886..000000000000 --- a/src/components/UserCurrentLocationButton.js +++ /dev/null @@ -1,114 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useEffect, useRef, useState} from 'react'; -import {Text} from 'react-native'; -import getCurrentPosition from '../libs/getCurrentPosition'; -import styles from '../styles/styles'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import LocationErrorMessage from './LocationErrorMessage'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import colors from '../styles/colors'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; - -const propTypes = { - /** Callback that runs when location data is fetched */ - onLocationFetched: PropTypes.func.isRequired, - - /** Callback that runs when fetching location has errors */ - onLocationError: PropTypes.func, - - /** Callback that runs when location button is clicked */ - onClick: PropTypes.func, - - /** Boolean to indicate if the button is clickable */ - isDisabled: PropTypes.bool, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - isDisabled: false, - onLocationError: () => {}, - onClick: () => {}, -}; - -function UserCurrentLocationButton({onLocationFetched, onLocationError, onClick, isDisabled, translate}) { - const isFetchingLocation = useRef(false); - const shouldTriggerCallbacks = useRef(true); - const [locationErrorCode, setLocationErrorCode] = useState(null); - - /** Gets the user's current location and registers success/error callbacks */ - const getUserLocation = () => { - if (isFetchingLocation.current) { - return; - } - - isFetchingLocation.current = true; - - onClick(); - - getCurrentPosition( - (successData) => { - isFetchingLocation.current = false; - if (!shouldTriggerCallbacks.current) { - return; - } - - setLocationErrorCode(null); - onLocationFetched(successData); - }, - (errorData) => { - isFetchingLocation.current = false; - if (!shouldTriggerCallbacks.current) { - return; - } - - setLocationErrorCode(errorData.code); - onLocationError(errorData); - }, - { - maximumAge: 0, // No cache, always get fresh location info - timeout: 5000, - }, - ); - }; - - // eslint-disable-next-line arrow-body-style - useEffect(() => { - return () => { - // If the component unmounts we don't want any of the callback for geolocation to run. - shouldTriggerCallbacks.current = false; - }; - }, []); - - return ( - <> - e.preventDefault()} - onTouchStart={(e) => e.preventDefault()} - > - - {translate('location.useCurrent')} - - setLocationErrorCode(null)} - locationErrorCode={locationErrorCode} - /> - - ); -} - -UserCurrentLocationButton.displayName = 'UserCurrentLocationButton'; -UserCurrentLocationButton.propTypes = propTypes; -UserCurrentLocationButton.defaultProps = defaultProps; - -// This components gets used inside
, we are using an HOC (withLocalize) as function components with -// hooks give hook errors when nested inside
. -export default withLocalize(UserCurrentLocationButton); diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index f052116697b3..d89c9bc7a953 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -118,7 +118,6 @@ function BaseVideoChatButtonAndMenu(props) { left: videoChatIconPosition.x - 150, top: videoChatIconPosition.y + 40, }} - shouldSetModalVisibility={false} withoutOverlay anchorRef={videoChatButtonRef} > diff --git a/src/components/createOnyxContext.js b/src/components/createOnyxContext.js deleted file mode 100644 index 3dbc07a7032e..000000000000 --- a/src/components/createOnyxContext.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, {createContext, forwardRef} from 'react'; -import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; -import Str from 'expensify-common/lib/str'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; - -const propTypes = { - /** Rendered child component */ - children: PropTypes.node.isRequired, -}; - -export default (onyxKeyName, defaultValue) => { - const Context = createContext(); - function Provider(props) { - return {props.children}; - } - - Provider.propTypes = propTypes; - Provider.displayName = `${Str.UCFirst(onyxKeyName)}Provider`; - - // eslint-disable-next-line rulesdir/onyx-props-must-have-default - const ProviderWithOnyx = withOnyx({ - [onyxKeyName]: { - key: onyxKeyName, - }, - })(Provider); - - const withOnyxKey = - ({propName = onyxKeyName, transformValue} = {}) => - (WrappedComponent) => { - const Consumer = forwardRef((props, ref) => ( - - {(value) => { - const propsToPass = { - ...props, - [propName]: transformValue ? transformValue(value, props) : value, - }; - - if (propsToPass[propName] === undefined && defaultValue) { - propsToPass[propName] = defaultValue; - } - return ( - - ); - }} - - )); - - Consumer.displayName = `with${Str.UCFirst(onyxKeyName)}(${getComponentDisplayName(WrappedComponent)})`; - return Consumer; - }; - - return [withOnyxKey, ProviderWithOnyx, Context]; -}; diff --git a/src/components/createOnyxContext.tsx b/src/components/createOnyxContext.tsx new file mode 100644 index 000000000000..d142e551012f --- /dev/null +++ b/src/components/createOnyxContext.tsx @@ -0,0 +1,81 @@ +import React, {ComponentType, ForwardRefExoticComponent, ForwardedRef, PropsWithoutRef, ReactNode, RefAttributes, createContext, forwardRef} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import Str from 'expensify-common/lib/str'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; +import {OnyxCollectionKey, OnyxKey, OnyxKeyValue, OnyxValues} from '../ONYXKEYS'; +import ChildrenProps from '../types/utils/ChildrenProps'; + +type OnyxKeys = (OnyxKey | OnyxCollectionKey) & keyof OnyxValues; + +// Provider types +type ProviderOnyxProps = Record>; + +type ProviderPropsWithOnyx = ChildrenProps & ProviderOnyxProps; + +// withOnyxKey types +type WithOnyxKeyProps = { + propName?: TOnyxKey | TNewOnyxKey; + // It's not possible to infer the type of props of the wrapped component, so we have to use `any` here + // eslint-disable-next-line @typescript-eslint/no-explicit-any + transformValue?: (value: OnyxKeyValue, props: any) => TTransformedValue; +}; + +type WrapComponentWithConsumer = , TRef>( + WrappedComponent: ComponentType>, +) => ForwardRefExoticComponent> & RefAttributes>; + +type WithOnyxKey = >( + props?: WithOnyxKeyProps, +) => WrapComponentWithConsumer; + +// createOnyxContext return type +type CreateOnyxContext = [WithOnyxKey, ComponentType, TOnyxKey>>, React.Context>]; + +export default (onyxKeyName: TOnyxKey): CreateOnyxContext => { + const Context = createContext>(null); + function Provider(props: ProviderPropsWithOnyx): ReactNode { + return {props.children}; + } + + Provider.displayName = `${Str.UCFirst(onyxKeyName)}Provider`; + + const ProviderWithOnyx = withOnyx, ProviderOnyxProps>({ + [onyxKeyName]: { + key: onyxKeyName, + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as Record)(Provider); + + function withOnyxKey>({ + propName, + transformValue, + }: WithOnyxKeyProps = {}) { + return , TRef>(WrappedComponent: ComponentType>) => { + function Consumer(props: Omit, ref: ForwardedRef): ReactNode { + return ( + + {(value) => { + const propsToPass = { + ...props, + [propName ?? onyxKeyName]: transformValue ? transformValue(value, props) : value, + } as TProps; + + return ( + + ); + }} + + ); + } + + Consumer.displayName = `with${Str.UCFirst(onyxKeyName)}(${getComponentDisplayName(WrappedComponent)})`; + return forwardRef(Consumer); + }; + } + + return [withOnyxKey, ProviderWithOnyx, Context]; +}; diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index e33170ac67f4..a5b5b3a8eba8 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -153,6 +153,9 @@ const propTypes = { /** Should render component on the right */ shouldShowRightComponent: PropTypes.bool, + + /** Should check anonymous user in onPress function */ + shouldCheckActionAllowedOnPress: PropTypes.bool, }; export default propTypes; diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js index 8ddf667b4e30..3154f7e98d67 100755 --- a/src/components/withKeyboardState.js +++ b/src/components/withKeyboardState.js @@ -1,4 +1,4 @@ -import React, {forwardRef, createContext, useEffect, useState} from 'react'; +import React, {forwardRef, createContext, useEffect, useState, useMemo} from 'react'; import {Keyboard} from 'react-native'; import PropTypes from 'prop-types'; import getComponentDisplayName from '../libs/getComponentDisplayName'; @@ -31,7 +31,13 @@ function KeyboardStateProvider(props) { }; }, []); - return {children}; + const contextValue = useMemo( + () => ({ + isKeyboardShown, + }), + [isKeyboardShown], + ); + return {children}; } KeyboardStateProvider.propTypes = keyboardStateProviderPropTypes; diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js deleted file mode 100644 index ef0f599dc982..000000000000 --- a/src/components/withNavigation.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {useNavigation} from '@react-navigation/native'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; -import refPropTypes from './refPropTypes'; - -const withNavigationPropTypes = { - navigation: PropTypes.object.isRequired, -}; - -export default function withNavigation(WrappedComponent) { - function WithNavigation(props) { - const navigation = useNavigation(); - return ( - - ); - } - - WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`; - WithNavigation.propTypes = { - forwardedRef: refPropTypes, - }; - WithNavigation.defaultProps = { - forwardedRef: () => {}, - }; - return React.forwardRef((props, ref) => ( - - )); -} - -export {withNavigationPropTypes}; diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx new file mode 100644 index 000000000000..c5842fdacc44 --- /dev/null +++ b/src/components/withNavigation.tsx @@ -0,0 +1,26 @@ +import React, {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import {NavigationProp, useNavigation} from '@react-navigation/native'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; + +type WithNavigationProps = { + navigation: NavigationProp; +}; + +export default function withNavigation( + WrappedComponent: ComponentType>, +): (props: Omit, ref: ForwardedRef) => React.JSX.Element | null { + function WithNavigation(props: Omit, ref: ForwardedRef) { + const navigation = useNavigation(); + return ( + + ); + } + + WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`; + return React.forwardRef(WithNavigation); +} diff --git a/src/components/withWindowDimensions/index.js b/src/components/withWindowDimensions/index.js index 37d5c94688a2..16e5985e0985 100644 --- a/src/components/withWindowDimensions/index.js +++ b/src/components/withWindowDimensions/index.js @@ -1,8 +1,8 @@ -import React, {forwardRef, createContext, useState, useEffect} from 'react'; +import React, {forwardRef, createContext, useState, useEffect, useMemo} from 'react'; import PropTypes from 'prop-types'; import lodashDebounce from 'lodash/debounce'; import {Dimensions} from 'react-native'; -import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import getComponentDisplayName from '../../libs/getComponentDisplayName'; import variables from '../../styles/variables'; import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment'; @@ -62,31 +62,23 @@ function WindowDimensionsProvider(props) { dimensionsEventListener.remove(); }; }, []); - - return ( - - {(insets) => { - const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; - const isSmallScreenWidth = windowDimension.windowWidth <= variables.mobileResponsiveWidthBreakpoint; - const isMediumScreenWidth = !isSmallScreenWidth && windowDimension.windowWidth <= variables.tabletResponsiveWidthBreakpoint; - const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth; - return ( - - {props.children} - - ); - }} - - ); + const insets = useSafeAreaInsets(); + const adjustment = getWindowHeightAdjustment(insets); + const contextValue = useMemo(() => { + const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; + const isSmallScreenWidth = windowDimension.windowWidth <= variables.mobileResponsiveWidthBreakpoint; + const isMediumScreenWidth = !isSmallScreenWidth && windowDimension.windowWidth <= variables.tabletResponsiveWidthBreakpoint; + const isLargeScreenWidth = !isSmallScreenWidth && !isMediumScreenWidth; + return { + windowHeight: windowDimension.windowHeight + adjustment, + windowWidth: windowDimension.windowWidth, + isExtraSmallScreenWidth, + isSmallScreenWidth, + isMediumScreenWidth, + isLargeScreenWidth, + }; + }, [windowDimension.windowHeight, windowDimension.windowWidth, adjustment]); + return {props.children}; } WindowDimensionsProvider.propTypes = windowDimensionsProviderPropTypes; diff --git a/src/components/withWindowDimensions/index.native.js b/src/components/withWindowDimensions/index.native.js index e147a20c9f4e..363196b3fd4d 100644 --- a/src/components/withWindowDimensions/index.native.js +++ b/src/components/withWindowDimensions/index.native.js @@ -1,7 +1,7 @@ -import React, {forwardRef, createContext, useState, useEffect} from 'react'; +import React, {forwardRef, createContext, useState, useEffect, useMemo} from 'react'; import PropTypes from 'prop-types'; import {Dimensions} from 'react-native'; -import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import getComponentDisplayName from '../../libs/getComponentDisplayName'; import variables from '../../styles/variables'; import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment'; @@ -60,31 +60,20 @@ function WindowDimensionsProvider(props) { dimensionsEventListener.remove(); }; }, []); - - return ( - - {(insets) => { - const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; - const isSmallScreenWidth = true; - const isMediumScreenWidth = false; - const isLargeScreenWidth = false; - return ( - - {props.children} - - ); - }} - - ); + const insets = useSafeAreaInsets(); + const adjustment = getWindowHeightAdjustment(insets); + const contextValue = useMemo(() => { + const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; + return { + windowHeight: windowDimension.windowHeight + adjustment, + windowWidth: windowDimension.windowWidth, + isExtraSmallScreenWidth, + isSmallScreenWidth: true, + isMediumScreenWidth: false, + isLargeScreenWidth: false, + }; + }, [windowDimension.windowHeight, windowDimension.windowWidth, adjustment]); + return {props.children}; } WindowDimensionsProvider.propTypes = windowDimensionsProviderPropTypes; diff --git a/src/hooks/useNetwork.js b/src/hooks/useNetwork.ts similarity index 74% rename from src/hooks/useNetwork.js rename to src/hooks/useNetwork.ts index a4e973d0194d..4405dd7126a5 100644 --- a/src/hooks/useNetwork.js +++ b/src/hooks/useNetwork.ts @@ -1,16 +1,17 @@ import {useRef, useContext, useEffect} from 'react'; import {NetworkContext} from '../components/OnyxProvider'; -/** - * @param {Object} [options] - * @param {Function} [options.onReconnect] - * @returns {Object} - */ -export default function useNetwork({onReconnect = () => {}} = {}) { +type UseNetworkProps = { + onReconnect?: () => void; +}; + +type UseNetwork = {isOffline?: boolean}; + +export default function useNetwork({onReconnect = () => {}}: UseNetworkProps = {}): UseNetwork { const callback = useRef(onReconnect); callback.current = onReconnect; - const {isOffline} = useContext(NetworkContext); + const {isOffline} = useContext(NetworkContext) ?? {}; const prevOfflineStatusRef = useRef(isOffline); useEffect(() => { // If we were offline before and now we are not offline then we just reconnected diff --git a/src/hooks/useWindowDimensions/index.native.js b/src/hooks/useWindowDimensions/index.native.ts similarity index 89% rename from src/hooks/useWindowDimensions/index.native.js rename to src/hooks/useWindowDimensions/index.native.ts index 358e43f1b75d..5b0ec2002201 100644 --- a/src/hooks/useWindowDimensions/index.native.js +++ b/src/hooks/useWindowDimensions/index.native.ts @@ -1,17 +1,18 @@ // eslint-disable-next-line no-restricted-imports import {useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; +import WindowDimensions from './types'; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. - * @returns {Object} */ -export default function () { +export default function (): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; const isSmallScreenWidth = true; const isMediumScreenWidth = false; const isLargeScreenWidth = false; + return { windowWidth, windowHeight, diff --git a/src/hooks/useWindowDimensions/index.js b/src/hooks/useWindowDimensions/index.ts similarity index 93% rename from src/hooks/useWindowDimensions/index.js rename to src/hooks/useWindowDimensions/index.ts index 1a1f7eed5a67..f9fee6301d06 100644 --- a/src/hooks/useWindowDimensions/index.js +++ b/src/hooks/useWindowDimensions/index.ts @@ -1,12 +1,12 @@ // eslint-disable-next-line no-restricted-imports import {Dimensions, useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; +import WindowDimensions from './types'; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. - * @returns {Object} */ -export default function () { +export default function (): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight. const screenHeight = Dimensions.get('screen').height; @@ -14,6 +14,7 @@ export default function () { const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint; + return { windowWidth, windowHeight, diff --git a/src/hooks/useWindowDimensions/types.ts b/src/hooks/useWindowDimensions/types.ts new file mode 100644 index 000000000000..9b59d4968935 --- /dev/null +++ b/src/hooks/useWindowDimensions/types.ts @@ -0,0 +1,10 @@ +type WindowDimensions = { + windowWidth: number; + windowHeight: number; + isExtraSmallScreenHeight: boolean; + isSmallScreenWidth: boolean; + isMediumScreenWidth: boolean; + isLargeScreenWidth: boolean; +}; + +export default WindowDimensions; diff --git a/src/languages/en.ts b/src/languages/en.ts index 4f96314c4efa..11637846130a 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -57,7 +57,7 @@ import type { ConfirmThatParams, UntilTimeParams, StepCounterParams, - UserIsAlreadyMemberOfWorkspaceParams, + UserIsAlreadyMemberParams, GoToRoomParams, WelcomeNoteParams, RoomNameReservedErrorParams, @@ -381,6 +381,14 @@ export default { termsOfService: 'Terms of Service', privacy: 'Privacy', }, + samlSignIn: { + welcomeSAMLEnabled: 'Continue logging in with single sign-on:', + orContinueWithMagicCode: 'Or optionally, your company allows signing in with a magic code', + useSingleSignOn: 'Use single sign-on', + useMagicCode: 'Use magic code', + launching: 'Launching...', + oneMoment: "One moment while we redirect you to your company's single sign-on portal.", + }, reportActionCompose: { addAction: 'Actions', dropToUpload: 'Drop to upload', @@ -479,8 +487,8 @@ export default { sidebarScreen: { buttonSearch: 'Search', buttonMySettings: 'My settings', - fabNewChat: 'Send message', - fabNewChatExplained: 'Send message (Floating action)', + fabNewChat: 'Start chat', + fabNewChatExplained: 'Start chat (Floating action)', chatPinned: 'Chat pinned', draftedMessage: 'Drafted message', listOfChatMessages: 'List of chat messages', @@ -544,6 +552,7 @@ export default { settledElsewhere: 'Paid elsewhere', settleExpensify: ({formattedAmount}: SettleExpensifyCardParams) => `Pay ${formattedAmount} with Expensify`, payElsewhere: 'Pay elsewhere', + nextSteps: 'Next Steps', requestAmount: ({amount}: RequestAmountParams) => `request ${amount}`, requestedAmount: ({formattedAmount, comment}: RequestedAmountMessageParams) => `requested ${formattedAmount}${comment ? ` for ${comment}` : ''}`, splitAmount: ({amount}: SplitAmountParams) => `split ${amount}`, @@ -586,6 +595,8 @@ export default { duplicateWaypointsErrorMessage: 'Please remove duplicate waypoints', emptyWaypointsErrorMessage: 'Please enter at least two waypoints', }, + waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `Started settling up, payment is held until ${submitterDisplayName} enables their Wallet`, + enableWallet: 'Enable Wallet', }, notificationPreferencesPage: { header: 'Notification preferences', @@ -849,6 +860,8 @@ export default { receiveMoney: 'Receive money in your local currency', expensifyWallet: 'Expensify Wallet', sendAndReceiveMoney: 'Send and receive money from your Expensify Wallet.', + enableWalletToSendAndReceiveMoney: 'Enable your Expensify Wallet to start sending and receiving money with friends!', + enableWallet: 'Enable wallet', bankAccounts: 'Bank accounts', addBankAccountToSendAndReceive: 'Add a bank account to send and receive payments directly in the app.', addBankAccount: 'Add bank account', @@ -869,6 +882,7 @@ export default { address: 'Address', revealDetails: 'Reveal details', copyCardNumber: 'Copy card number', + updateAddress: 'Update address', }, }, reportFraudPage: { @@ -1035,7 +1049,7 @@ export default { legalName: 'Legal name', legalFirstName: 'Legal first name', legalLastName: 'Legal last name', - homeAddress: 'Home address', + address: 'Address', error: { dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `Date should be before ${dateString}.`, dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `Date should be after ${dateString}.`, @@ -1191,7 +1205,7 @@ export default { messages: { errorMessageInvalidPhone: `Please enter a valid phone number without brackets or dashes. If you're outside the US please include your country code (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`, errorMessageInvalidEmail: 'Invalid email', - userIsAlreadyMemberOfWorkspace: ({login, workspace}: UserIsAlreadyMemberOfWorkspaceParams) => `${login} is already a member of ${workspace}`, + userIsAlreadyMember: ({login, name}: UserIsAlreadyMemberParams) => `${login} is already a member of ${name}`, }, onfidoStep: { acceptTerms: 'By continuing with the request to activate your Expensify wallet, you confirm that you have read, understand and accept ', @@ -1210,7 +1224,7 @@ export default { }, additionalDetailsStep: { headerTitle: 'Additional details', - helpText: 'We need to confirm the following information before we can process this payment.', + helpText: 'We need to confirm the following information before you can send and receive money from your Wallet.', helpTextIdologyQuestions: 'We need to ask you just a few more questions to finish validating your identity.', helpLink: 'Learn more about why we need this.', legalFirstNameLabel: 'Legal first name', @@ -1581,13 +1595,18 @@ export default { selectAWorkspace: 'Select a workspace', growlMessageOnRenameError: 'Unable to rename policy room, please check your connection and try again.', visibilityOptions: { - restricted: 'Restricted', + restricted: 'Workspace', // the translation for "restricted" visibility is actually workspace. This is so we can display restricted visibility rooms as "workspace" without having to change what's stored. private: 'Private', public: 'Public', // eslint-disable-next-line @typescript-eslint/naming-convention public_announce: 'Public Announce', }, }, + roomMembersPage: { + memberNotFound: 'Member not found. To invite a new member to the room, please use the Invite button above.', + notAuthorized: `You do not have access to this page. Are you trying to join the room? Please reach out to a member of this room so they can add you as a member! Something else? Reach out to ${CONST.EMAIL.CONCIERGE}`, + removeMembersPrompt: 'Are you sure you want to remove the selected members from the room?', + }, newTaskPage: { assignTask: 'Assign task', assignMe: 'Assign to me', @@ -1843,7 +1862,7 @@ export default { }, cardTransactions: { notActivated: 'Not activated', - outOfPocketSpend: 'Out-of-pocket spend', + outOfPocket: 'Out of pocket', companySpend: 'Company spend', }, distance: { @@ -1865,6 +1884,20 @@ export default { selectSuggestedAddress: 'Please select a suggested address or use current location', }, }, + reportCardLostOrDamaged: { + report: 'Report physical card loss / damage', + screenTitle: 'Report card lost or damaged', + nextButtonLabel: 'Next', + reasonTitle: 'Why do you need a new card?', + cardDamaged: 'My card was damaged', + cardLostOrStolen: 'My card was lost or stolen', + confirmAddressTitle: "Please confirm the address below is where you'd like us to send your new card.", + currentCardInfo: 'Your current card will be permanently deactivated as soon as your order is placed. Most cards arrive in a few business days.', + address: 'Address', + deactivateCardButton: 'Deactivate card', + addressError: 'Address is required', + reasonError: 'Reason is required', + }, eReceipt: { guaranteed: 'Guaranteed eReceipt', transactionDate: 'Transaction date', diff --git a/src/languages/es.ts b/src/languages/es.ts index cd585ae88e7e..e4a5c37241f2 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -57,7 +57,7 @@ import type { ConfirmThatParams, UntilTimeParams, StepCounterParams, - UserIsAlreadyMemberOfWorkspaceParams, + UserIsAlreadyMemberParams, GoToRoomParams, WelcomeNoteParams, RoomNameReservedErrorParams, @@ -372,6 +372,14 @@ export default { termsOfService: 'TΓ©rminos de servicio', privacy: 'Privacidad', }, + samlSignIn: { + welcomeSAMLEnabled: 'Continua iniciando sesiΓ³n con el inicio de sesiΓ³n ΓΊnico:', + orContinueWithMagicCode: 'O, opcionalmente, tu empresa te permite iniciar sesiΓ³n con un cΓ³digo mΓ‘gico', + useSingleSignOn: 'Usar el inicio de sesiΓ³n ΓΊnico', + useMagicCode: 'Usar cΓ³digo mΓ‘gico', + launching: 'Cargando...', + oneMoment: 'Un momento mientras te redirigimos al portal de inicio de sesiΓ³n ΓΊnico de tu empresa.', + }, reportActionCompose: { addAction: 'AcciΓ³n', dropToUpload: 'Suelta el archivo aquΓ­ para compartirlo', @@ -471,8 +479,8 @@ export default { sidebarScreen: { buttonSearch: 'Buscar', buttonMySettings: 'Mi configuraciΓ³n', - fabNewChat: 'Enviar mensaje', - fabNewChatExplained: 'Enviar mensaje', + fabNewChat: 'Iniciar chat', + fabNewChatExplained: 'Iniciar chat', chatPinned: 'Chat fijado', draftedMessage: 'Mensaje borrador', listOfChatMessages: 'Lista de mensajes del chat', @@ -536,6 +544,7 @@ export default { settledElsewhere: 'Pagado de otra forma', settleExpensify: ({formattedAmount}: SettleExpensifyCardParams) => `Pagar ${formattedAmount} con Expensify`, payElsewhere: 'Pagar de otra forma', + nextSteps: 'Pasos Siguientes', requestAmount: ({amount}: RequestAmountParams) => `solicitar ${amount}`, requestedAmount: ({formattedAmount, comment}: RequestedAmountMessageParams) => `solicitΓ© ${formattedAmount}${comment ? ` para ${comment}` : ''}`, splitAmount: ({amount}: SplitAmountParams) => `dividir ${amount}`, @@ -580,6 +589,8 @@ export default { duplicateWaypointsErrorMessage: 'Por favor elimina los puntos de ruta duplicados', emptyWaypointsErrorMessage: 'Por favor introduce al menos dos puntos de ruta', }, + waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `nicio el pago, pero no se procesarΓ‘ hasta que ${submitterDisplayName} active su Billetera`, + enableWallet: 'Habilitar Billetera', }, notificationPreferencesPage: { header: 'Preferencias de avisos', @@ -800,7 +811,7 @@ export default { sharedNoteMessage: 'Guarda notas sobre este chat aquΓ­. Los empleados de Expensify y otros usuarios del dominio team.expensify.com pueden ver estas notas.', notesUnavailable: 'No se han encontrado notas para el usuario', composerLabel: 'Notas', - myNote: 'Mi notas', + myNote: 'Mi nota', }, addDebitCardPage: { addADebitCard: 'AΓ±adir una tarjeta de dΓ©bito', @@ -845,6 +856,8 @@ export default { receiveMoney: 'Recibe dinero en tu moneda local', expensifyWallet: 'Billetera Expensify', sendAndReceiveMoney: 'EnvΓ­a y recibe dinero desde tu Billetera Expensify.', + enableWalletToSendAndReceiveMoney: 'Habilita tu Billetera Expensify para comenzar a enviar y recibir dinero con amigos', + enableWallet: 'Habilitar Billetera', bankAccounts: 'Cuentas bancarias', addBankAccountToSendAndReceive: 'AΓ±ade una cuenta bancaria para enviar y recibir pagos directamente en la aplicaciΓ³n.', addBankAccount: 'Agregar cuenta bancaria', @@ -865,6 +878,7 @@ export default { address: 'DirecciΓ³n', revealDetails: 'Revelar detalles', copyCardNumber: 'Copiar nΓΊmero de la tarjeta', + updateAddress: 'Actualizar direcciΓ³n', }, }, reportFraudPage: { @@ -1033,7 +1047,7 @@ export default { legalName: 'Nombre completo', legalFirstName: 'Nombre legal', legalLastName: 'Apellidos legales', - homeAddress: 'Domicilio', + address: 'DirecciΓ³n', error: { dateShouldBeBefore: ({dateString}: DateShouldBeBeforeParams) => `La fecha debe ser anterior a ${dateString}.`, dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `La fecha debe ser posterior a ${dateString}.`, @@ -1209,7 +1223,7 @@ export default { messages: { errorMessageInvalidPhone: `Por favor, introduce un nΓΊmero de telΓ©fono vΓ‘lido sin parΓ©ntesis o guiones. Si reside fuera de Estados Unidos, por favor incluye el prefijo internacional (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`, errorMessageInvalidEmail: 'Email invΓ‘lido', - userIsAlreadyMemberOfWorkspace: ({login, workspace}: UserIsAlreadyMemberOfWorkspaceParams) => `${login} ya es miembro de ${workspace}`, + userIsAlreadyMember: ({login, name}: UserIsAlreadyMemberParams) => `${login} ya es miembro de ${name}`, }, onfidoStep: { acceptTerms: 'Al continuar con la solicitud para activar su billetera Expensify, confirma que ha leΓ­do, comprende y acepta ', @@ -1229,7 +1243,7 @@ export default { }, additionalDetailsStep: { headerTitle: 'Detalles adicionales', - helpText: 'Necesitamos confirmar la siguiente informaciΓ³n antes de que podamos procesar el pago.', + helpText: 'Necesitamos confirmar la siguiente informaciΓ³n antes de que puedas enviar y recibir dinero desde tu Billetera.', helpTextIdologyQuestions: 'Tenemos que preguntarte unas preguntas mΓ‘s para terminar de verificar tu identidad', helpLink: 'ObtΓ©n mΓ‘s informaciΓ³n sobre por quΓ© necesitamos esto.', legalFirstNameLabel: 'Primer nombre legal', @@ -1605,13 +1619,18 @@ export default { selectAWorkspace: 'Seleccionar un espacio de trabajo', growlMessageOnRenameError: 'No se ha podido cambiar el nombre del espacio de trabajo, por favor, comprueba tu conexiΓ³n e intΓ©ntalo de nuevo.', visibilityOptions: { - restricted: 'Restringida', + restricted: 'Espacio de trabajo', // the translation for "restricted" visibility is actually workspace. This is so we can display restricted visibility rooms as "workspace" without having to change what's stored. private: 'Privada', public: 'PΓΊblico', // eslint-disable-next-line @typescript-eslint/naming-convention public_announce: 'Anuncio PΓΊblico', }, }, + roomMembersPage: { + memberNotFound: 'Miembro no encontrado. Para invitar a un nuevo miembro a la sala de chat, por favor, utiliza el botΓ³n Invitar que estΓ‘ mΓ‘s arriba.', + notAuthorized: `No tienes acceso a esta pΓ‘gina. ΒΏEstΓ‘s tratando de unirte a la sala de chat? ComunΓ­cate con el propietario de esta sala de chat para que pueda aΓ±adirte como miembro. ΒΏNecesitas algo mΓ‘s? ComunΓ­cate con ${CONST.EMAIL.CONCIERGE}`, + removeMembersPrompt: 'ΒΏEstΓ‘s seguro de que quieres eliminar a los miembros seleccionados de la sala de chat?', + }, newTaskPage: { assignTask: 'Asignar tarea', assignMe: 'Asignar a mΓ­ mismo', @@ -2328,7 +2347,7 @@ export default { }, cardTransactions: { notActivated: 'No activado', - outOfPocketSpend: 'Gastos por cuenta propia', + outOfPocket: 'Por cuenta propia', companySpend: 'Gastos de empresa', }, distance: { @@ -2350,11 +2369,25 @@ export default { selectSuggestedAddress: 'Por favor, selecciona una direcciΓ³n sugerida o usa la ubicaciΓ³n actual.', }, }, + reportCardLostOrDamaged: { + report: 'Notificar la pΓ©rdida / daΓ±o de la tarjeta fΓ­sica', + screenTitle: 'Notificar la pΓ©rdida o deterioro de la tarjeta', + nextButtonLabel: 'Siguiente', + reasonTitle: 'ΒΏPor quΓ© necesitas una tarjeta nueva?', + cardDamaged: 'Mi tarjeta estΓ‘ daΓ±ada', + cardLostOrStolen: 'He perdido o me han robado la tarjeta', + confirmAddressTitle: 'Confirma que la direcciΓ³n que aparece a continuaciΓ³n es a la que deseas que te enviemos tu nueva tarjeta.', + currentCardInfo: 'La tarjeta actual se desactivarΓ‘ permanentemente en cuanto se realice el pedido. La mayorΓ­a de las tarjetas llegan en unos pocos dΓ­as laborables.', + address: 'DirecciΓ³n', + deactivateCardButton: 'Desactivar tarjeta', + addressError: 'La direcciΓ³n es obligatoria', + reasonError: 'Se requiere justificaciΓ³n', + }, eReceipt: { guaranteed: 'eRecibo garantizado', transactionDate: 'Fecha de transacciΓ³n', }, globalNavigationOptions: { - chats: 'Chats', + chats: 'Chats', // "Chats" is the accepted term colloqially in Spanish, this is not a bug!! }, } satisfies EnglishTranslation; diff --git a/src/languages/types.ts b/src/languages/types.ts index 9560cd41b25f..5a1847e31e71 100644 --- a/src/languages/types.ts +++ b/src/languages/types.ts @@ -1,3 +1,4 @@ +import {ReportAction} from '../types/onyx'; import en from './en'; type AddressLineParams = { @@ -42,15 +43,15 @@ type LocalTimeParams = { }; type EditActionParams = { - action: NonNullable; + action: ReportAction | null; }; type DeleteActionParams = { - action: NonNullable; + action: ReportAction | null; }; type DeleteConfirmationParams = { - action: NonNullable; + action: ReportAction | null; }; type BeginningOfChatHistoryDomainRoomPartOneParams = { @@ -168,7 +169,7 @@ type UntilTimeParams = {time: string}; type StepCounterParams = {step: number; total?: number; text?: string}; -type UserIsAlreadyMemberOfWorkspaceParams = {login: string; workspace: string}; +type UserIsAlreadyMemberParams = {login: string; name: string}; type GoToRoomParams = {roomName: string}; @@ -302,7 +303,7 @@ export type { ConfirmThatParams, UntilTimeParams, StepCounterParams, - UserIsAlreadyMemberOfWorkspaceParams, + UserIsAlreadyMemberParams, GoToRoomParams, WelcomeNoteParams, RoomNameReservedErrorParams, diff --git a/src/libs/API.js b/src/libs/API.ts similarity index 64% rename from src/libs/API.js rename to src/libs/API.ts index 2ad1f32347d9..ce3d6bab19bc 100644 --- a/src/libs/API.js +++ b/src/libs/API.ts @@ -1,5 +1,5 @@ -import _ from 'underscore'; -import Onyx from 'react-native-onyx'; +import Onyx, {OnyxUpdate} from 'react-native-onyx'; +import {ValueOf} from 'type-fest'; import Log from './Log'; import * as Request from './Request'; import * as Middleware from './Middleware'; @@ -7,6 +7,8 @@ import * as SequentialQueue from './Network/SequentialQueue'; import pkg from '../../package.json'; import CONST from '../CONST'; import * as Pusher from './Pusher/pusher'; +import OnyxRequest from '../types/onyx/Request'; +import Response from '../types/onyx/Response'; // Setup API middlewares. Each request made will pass through a series of middleware functions that will get called in sequence (each one passing the result of the previous to the next). // Note: The ordering here is intentional as we want to Log, Recheck Connection, Reauthenticate, and Save the Response in Onyx. Errors thrown in one middleware will bubble to the next. @@ -28,25 +30,34 @@ Request.use(Middleware.HandleUnusedOptimisticID); // middlewares after this, because the SequentialQueue depends on the result of this middleware to pause the queue (if needed) to bring the app to an up-to-date state. Request.use(Middleware.SaveResponseInOnyx); +type OnyxData = { + optimisticData?: OnyxUpdate[]; + successData?: OnyxUpdate[]; + failureData?: OnyxUpdate[]; +}; + +type ApiRequestType = ValueOf; + /** * All calls to API.write() will be persisted to disk as JSON with the params, successData, and failureData. * This is so that if the network is unavailable or the app is closed, we can send the WRITE request later. * - * @param {String} command - Name of API command to call. - * @param {Object} apiCommandParameters - Parameters to send to the API. - * @param {Object} onyxData - Object containing errors, loading states, and optimistic UI data that will be merged + * @param command - Name of API command to call. + * @param apiCommandParameters - Parameters to send to the API. + * @param onyxData - Object containing errors, loading states, and optimistic UI data that will be merged * into Onyx before and after a request is made. Each nested object will be formatted in * the same way as an API response. - * @param {Object} [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. - * @param {Object} [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. - * @param {Object} [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. + * @param [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. + * @param [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. + * @param [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. */ -function write(command, apiCommandParameters = {}, onyxData = {}) { +function write(command: string, apiCommandParameters: Record = {}, onyxData: OnyxData = {}) { Log.info('Called API write', false, {command, ...apiCommandParameters}); + const {optimisticData, ...onyxDataWithoutOptimisticData} = onyxData; // Optimistically update Onyx - if (onyxData.optimisticData) { - Onyx.update(onyxData.optimisticData); + if (optimisticData) { + Onyx.update(optimisticData); } // Assemble the data we'll send to the API @@ -61,7 +72,7 @@ function write(command, apiCommandParameters = {}, onyxData = {}) { }; // Assemble all the request data we'll be storing in the queue - const request = { + const request: OnyxRequest = { command, data: { ...data, @@ -70,7 +81,7 @@ function write(command, apiCommandParameters = {}, onyxData = {}) { shouldRetry: true, canCancel: true, }, - ..._.omit(onyxData, 'optimisticData'), + ...onyxDataWithoutOptimisticData, }; // Write commands can be saved and retried, so push it to the SequentialQueue @@ -85,24 +96,30 @@ function write(command, apiCommandParameters = {}, onyxData = {}) { * Using this method is discouraged and will throw an ESLint error. Use it sparingly and only when all other alternatives have been exhausted. * It is best to discuss it in Slack anytime you are tempted to use this method. * - * @param {String} command - Name of API command to call. - * @param {Object} apiCommandParameters - Parameters to send to the API. - * @param {Object} onyxData - Object containing errors, loading states, and optimistic UI data that will be merged + * @param command - Name of API command to call. + * @param apiCommandParameters - Parameters to send to the API. + * @param onyxData - Object containing errors, loading states, and optimistic UI data that will be merged * into Onyx before and after a request is made. Each nested object will be formatted in * the same way as an API response. - * @param {Object} [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. - * @param {Object} [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. - * @param {Object} [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. - * @param {String} [apiRequestType] - Can be either 'read', 'write', or 'makeRequestWithSideEffects'. We use this to either return the chained + * @param [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. + * @param [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. + * @param [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. + * @param [apiRequestType] - Can be either 'read', 'write', or 'makeRequestWithSideEffects'. We use this to either return the chained * response back to the caller or to trigger reconnection callbacks when re-authentication is required. - * @returns {Promise} + * @returns */ -function makeRequestWithSideEffects(command, apiCommandParameters = {}, onyxData = {}, apiRequestType = CONST.API_REQUEST_TYPE.MAKE_REQUEST_WITH_SIDE_EFFECTS) { +function makeRequestWithSideEffects( + command: string, + apiCommandParameters = {}, + onyxData: OnyxData = {}, + apiRequestType: ApiRequestType = CONST.API_REQUEST_TYPE.MAKE_REQUEST_WITH_SIDE_EFFECTS, +): Promise { Log.info('Called API makeRequestWithSideEffects', false, {command, ...apiCommandParameters}); + const {optimisticData, ...onyxDataWithoutOptimisticData} = onyxData; // Optimistically update Onyx - if (onyxData.optimisticData) { - Onyx.update(onyxData.optimisticData); + if (optimisticData) { + Onyx.update(optimisticData); } // Assemble the data we'll send to the API @@ -113,10 +130,10 @@ function makeRequestWithSideEffects(command, apiCommandParameters = {}, onyxData }; // Assemble all the request data we'll be storing - const request = { + const request: OnyxRequest = { command, data, - ..._.omit(onyxData, 'optimisticData'), + ...onyxDataWithoutOptimisticData, }; // Return a promise containing the response from HTTPS @@ -126,16 +143,16 @@ function makeRequestWithSideEffects(command, apiCommandParameters = {}, onyxData /** * Requests made with this method are not be persisted to disk. If there is no network connectivity, the request is ignored and discarded. * - * @param {String} command - Name of API command to call. - * @param {Object} apiCommandParameters - Parameters to send to the API. - * @param {Object} onyxData - Object containing errors, loading states, and optimistic UI data that will be merged + * @param command - Name of API command to call. + * @param apiCommandParameters - Parameters to send to the API. + * @param onyxData - Object containing errors, loading states, and optimistic UI data that will be merged * into Onyx before and after a request is made. Each nested object will be formatted in * the same way as an API response. - * @param {Object} [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. - * @param {Object} [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. - * @param {Object} [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. + * @param [onyxData.optimisticData] - Onyx instructions that will be passed to Onyx.update() before the request is made. + * @param [onyxData.successData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode === 200. + * @param [onyxData.failureData] - Onyx instructions that will be passed to Onyx.update() when the response has jsonCode !== 200. */ -function read(command, apiCommandParameters, onyxData) { +function read(command: string, apiCommandParameters: Record, onyxData: OnyxData = {}) { // Ensure all write requests on the sequential queue have finished responding before running read requests. // Responses from read requests can overwrite the optimistic data inserted by // write requests that use the same Onyx keys and haven't responded yet. diff --git a/src/libs/Authentication.js b/src/libs/Authentication.ts similarity index 83% rename from src/libs/Authentication.js rename to src/libs/Authentication.ts index 9f1967ecf0d8..cec20504dd04 100644 --- a/src/libs/Authentication.js +++ b/src/libs/Authentication.ts @@ -7,20 +7,20 @@ import redirectToSignIn from './actions/SignInRedirect'; import CONST from '../CONST'; import Log from './Log'; import * as ErrorUtils from './ErrorUtils'; +import Response from '../types/onyx/Response'; -/** - * @param {Object} parameters - * @param {Boolean} [parameters.useExpensifyLogin] - * @param {String} parameters.partnerName - * @param {String} parameters.partnerPassword - * @param {String} parameters.partnerUserID - * @param {String} parameters.partnerUserSecret - * @param {String} [parameters.twoFactorAuthCode] - * @param {String} [parameters.email] - * @param {String} [parameters.authToken] - * @returns {Promise} - */ -function Authenticate(parameters) { +type Parameters = { + useExpensifyLogin?: boolean; + partnerName: string; + partnerPassword: string; + partnerUserID?: string; + partnerUserSecret?: string; + twoFactorAuthCode?: string; + email?: string; + authToken?: string; +}; + +function Authenticate(parameters: Parameters): Promise { const commandName = 'Authenticate'; requireParameters(['partnerName', 'partnerPassword', 'partnerUserID', 'partnerUserSecret'], parameters, commandName); @@ -48,11 +48,9 @@ function Authenticate(parameters) { /** * Reauthenticate using the stored credentials and redirect to the sign in page if unable to do so. - * - * @param {String} [command] command name for logging purposes - * @returns {Promise} + * @param [command] command name for logging purposes */ -function reauthenticate(command = '') { +function reauthenticate(command = ''): Promise { // Prevent any more requests from being processed while authentication happens NetworkStore.setIsAuthenticating(true); @@ -61,8 +59,8 @@ function reauthenticate(command = '') { useExpensifyLogin: false, partnerName: CONFIG.EXPENSIFY.PARTNER_NAME, partnerPassword: CONFIG.EXPENSIFY.PARTNER_PASSWORD, - partnerUserID: credentials.autoGeneratedLogin, - partnerUserSecret: credentials.autoGeneratedPassword, + partnerUserID: credentials?.autoGeneratedLogin, + partnerUserSecret: credentials?.autoGeneratedPassword, }).then((response) => { if (response.jsonCode === CONST.JSON_CODE.UNABLE_TO_RETRY) { // If authentication fails, then the network can be unpaused @@ -92,7 +90,7 @@ function reauthenticate(command = '') { // Note: It is important to manually set the authToken that is in the store here since any requests that are hooked into // reauthenticate .then() will immediate post and use the local authToken. Onyx updates subscribers lately so it is not // enough to do the updateSessionAuthTokens() call above. - NetworkStore.setAuthToken(response.authToken); + NetworkStore.setAuthToken(response.authToken ?? null); // The authentication process is finished so the network can be unpaused to continue processing requests NetworkStore.setIsAuthenticating(false); diff --git a/src/libs/BootSplash/index.native.ts b/src/libs/BootSplash/index.native.ts index 0790b4de89bc..307d0d62c8dd 100644 --- a/src/libs/BootSplash/index.native.ts +++ b/src/libs/BootSplash/index.native.ts @@ -11,5 +11,6 @@ function hide(): Promise { export default { hide, getVisibilityStatus: BootSplash.getVisibilityStatus, + logoSizeRatio: BootSplash.logoSizeRatio || 1, navigationBarHeight: BootSplash.navigationBarHeight || 0, }; diff --git a/src/libs/BootSplash/index.ts b/src/libs/BootSplash/index.ts index 24842fe631f4..e58763039129 100644 --- a/src/libs/BootSplash/index.ts +++ b/src/libs/BootSplash/index.ts @@ -30,5 +30,6 @@ function getVisibilityStatus(): Promise { export default { hide, getVisibilityStatus, + logoSizeRatio: 1, navigationBarHeight: 0, }; diff --git a/src/libs/BootSplash/types.ts b/src/libs/BootSplash/types.ts index 2329d5315817..b50b5a3397aa 100644 --- a/src/libs/BootSplash/types.ts +++ b/src/libs/BootSplash/types.ts @@ -1,6 +1,7 @@ type VisibilityStatus = 'visible' | 'hidden'; type BootSplashModule = { + logoSizeRatio: number; navigationBarHeight: number; hide: () => Promise; getVisibilityStatus: () => Promise; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 8df554dd4dbf..52c4f7067acf 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -1,10 +1,10 @@ import lodash from 'lodash'; import Onyx from 'react-native-onyx'; -import {Card} from '../types/onyx'; import CONST from '../CONST'; import * as Localize from './Localize'; import * as OnyxTypes from '../types/onyx'; import ONYXKEYS, {OnyxValues} from '../ONYXKEYS'; +import {Card} from '../types/onyx'; let allCards: OnyxValues[typeof ONYXKEYS.CARD_LIST] = {}; Onyx.connect({ @@ -47,7 +47,7 @@ function getCardDescription(cardID: number) { return ''; } const cardDescriptor = card.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED ? Localize.translateLocal('cardTransactions.notActivated') : card.lastFourPAN; - return `${card.bank} - ${cardDescriptor}`; + return cardDescriptor ? `${card.bank} - ${cardDescriptor}` : `${card.bank}`; } /** @@ -60,20 +60,14 @@ function getYearFromExpirationDateString(expirationDateString: string) { return cardYear.length === 2 ? `20${cardYear}` : cardYear; } -function getCompanyCards(cardList: {string: Card}) { - if (!cardList) { - return []; - } - return Object.values(cardList).filter((card) => card.bank !== CONST.EXPENSIFY_CARD.BANK); -} - /** * @param cardList - collection of assigned cards * @returns collection of assigned cards grouped by domain */ function getDomainCards(cardList: Record) { + // Check for domainName to filter out personal credit cards. // eslint-disable-next-line you-dont-need-lodash-underscore/filter - const activeCards = lodash.filter(cardList, (card) => (CONST.EXPENSIFY_CARD.ACTIVE_STATES as ReadonlyArray).includes(card.state)); + const activeCards = lodash.filter(cardList, (card) => !!card.domainName && (CONST.EXPENSIFY_CARD.ACTIVE_STATES as ReadonlyArray).includes(card.state)); return lodash.groupBy(activeCards, (card) => card.domainName); } @@ -96,4 +90,13 @@ function maskCard(lastFour = ''): string { return maskedString.replace(/(.{4})/g, '$1 ').trim(); } -export {isExpensifyCard, getDomainCards, getCompanyCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription}; +/** + * Finds physical card in a list of cards + * + * @returns a physical card object (or undefined if none is found) + */ +function findPhysicalCard(cards: Card[]) { + return cards.find((card) => !card.isVirtual); +} + +export {isExpensifyCard, getDomainCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription, findPhysicalCard}; diff --git a/src/libs/CurrencyUtils.ts b/src/libs/CurrencyUtils.ts index 21784d450a07..85ba8340c13e 100644 --- a/src/libs/CurrencyUtils.ts +++ b/src/libs/CurrencyUtils.ts @@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx'; import ONYXKEYS, {OnyxValues} from '../ONYXKEYS'; import CONST from '../CONST'; import BaseLocaleListener from './Localize/LocaleListener/BaseLocaleListener'; +import * as Localize from './Localize'; import * as NumberFormatUtils from './NumberFormatUtils'; let currencyList: OnyxValues[typeof ONYXKEYS.CURRENCY_LIST] = {}; @@ -96,8 +97,13 @@ function convertToFrontendAmount(amountAsInt: number): number { * * @param amountInCents – should be an integer. Anything after a decimal place will be dropped. * @param currency - IOU currency + * @param shouldFallbackToTbd - whether to return 'TBD' instead of a falsy value (e.g. 0.00) */ -function convertToDisplayString(amountInCents: number, currency: string = CONST.CURRENCY.USD): string { +function convertToDisplayString(amountInCents: number, currency: string = CONST.CURRENCY.USD, shouldFallbackToTbd = false): string { + if (shouldFallbackToTbd && !amountInCents) { + return Localize.translateLocal('common.tbd'); + } + const convertedAmount = convertToFrontendAmount(amountInCents); return NumberFormatUtils.format(BaseLocaleListener.getPreferredLocale(), convertedAmount, { style: 'currency', diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index a44a69f087ab..05ad1bd3c2ce 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -3,6 +3,8 @@ import {getUnixTime} from 'date-fns'; import Str from 'expensify-common/lib/str'; import Onyx from 'react-native-onyx'; import lodashGet from 'lodash/get'; +import lodashMin from 'lodash/min'; +import lodashSum from 'lodash/sum'; import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; import emojisTrie from './EmojiTrie'; @@ -80,7 +82,7 @@ const getEmojiUnicode = _.memoize((input) => { const pairs = []; - // Some Emojis in UTF-16 are stored as pair of 2 Unicode characters (eg Flags) + // Some Emojis in UTF-16 are stored as a pair of 2 Unicode characters (e.g. Flags) // The first char is generally between the range U+D800 to U+DBFF called High surrogate // & the second char between the range U+DC00 to U+DFFF called low surrogate // More info in the following links: @@ -110,6 +112,23 @@ function trimEmojiUnicode(emojiCode) { return emojiCode.replace(/(fe0f|1f3fb|1f3fc|1f3fd|1f3fe|1f3ff)$/, '').trim(); } +/** + * Validates first character is emoji in text string + * + * @param {String} message + * @returns {Boolean} + */ +function isFirstLetterEmoji(message) { + const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', ''); + const match = trimmedMessage.match(CONST.REGEX.EMOJIS); + + if (!match) { + return false; + } + + return trimmedMessage.indexOf(match[0]) === 0; +} + /** * Validates that this message contains only emojis * @@ -457,7 +476,7 @@ const getPreferredEmojiCode = (emoji, preferredSkinTone) => { /** * Given an emoji object and a list of senders it will return an * array of emoji codes, that represents all used variations of the - * emoji. + * emoji, sorted by the reaction timestamp. * @param {Object} emojiAsset * @param {String} emojiAsset.name * @param {String} emojiAsset.code @@ -466,16 +485,110 @@ const getPreferredEmojiCode = (emoji, preferredSkinTone) => { * @return {string[]} * */ const getUniqueEmojiCodes = (emojiAsset, users) => { - const uniqueEmojiCodes = []; - _.each(users, (userSkinTones) => { - _.each(lodashGet(userSkinTones, 'skinTones'), (createdAt, skinTone) => { - const emojiCode = getPreferredEmojiCode(emojiAsset, skinTone); - if (emojiCode && !uniqueEmojiCodes.includes(emojiCode)) { - uniqueEmojiCodes.push(emojiCode); + const emojiCodes = _.reduce( + users, + (result, userSkinTones) => { + _.each(lodashGet(userSkinTones, 'skinTones'), (createdAt, skinTone) => { + const emojiCode = getPreferredEmojiCode(emojiAsset, skinTone); + if (!!emojiCode && (!result[emojiCode] || createdAt < result[emojiCode])) { + // eslint-disable-next-line no-param-reassign + result[emojiCode] = createdAt; + } + }); + return result; + }, + {}, + ); + + return _.chain(emojiCodes) + .pairs() + .sortBy((entry) => new Date(entry[1])) // Sort by values (timestamps) + .map((entry) => entry[0]) // Extract keys (emoji codes) + .value(); +}; + +/** + * Given an emoji reaction object and its name, it populates it with the oldest reaction timestamps. + * @param {Object} emoji + * @param {String} emojiName + * @returns {Object} + */ +const enrichEmojiReactionWithTimestamps = (emoji, emojiName) => { + let oldestEmojiTimestamp = null; + + const usersWithTimestamps = _.chain(emoji.users) + .pick(_.identity) + .mapObject((user, id) => { + const oldestUserTimestamp = lodashMin(_.values(user.skinTones)); + + if (!oldestEmojiTimestamp || oldestUserTimestamp < oldestEmojiTimestamp) { + oldestEmojiTimestamp = oldestUserTimestamp; } - }); - }); - return uniqueEmojiCodes; + + return { + ...user, + id, + oldestTimestamp: oldestUserTimestamp, + }; + }) + .value(); + + return { + ...emoji, + users: usersWithTimestamps, + // Just in case two emojis have the same timestamp, also combine the timestamp with the + // emojiName so that the order will always be the same. Without this, the order can be pretty random + // and shift around a little bit. + oldestTimestamp: (oldestEmojiTimestamp || emoji.createdAt) + emojiName, + }; +}; + +/** + * Returns true if the accountID has reacted to the report action (with the given skin tone). + * Uses the NEW FORMAT for "emojiReactions" + * @param {String} accountID + * @param {Array} usersReactions - all the users reactions + * @param {Number} [skinTone] + * @returns {boolean} + */ +function hasAccountIDEmojiReacted(accountID, usersReactions, skinTone) { + if (_.isUndefined(skinTone)) { + return Boolean(usersReactions[accountID]); + } + const userReaction = usersReactions[accountID]; + if (!userReaction || !userReaction.skinTones || !_.size(userReaction.skinTones)) { + return false; + } + return Boolean(userReaction.skinTones[skinTone]); +} + +/** + * Given an emoji reaction and current user's account ID, it returns the reusable details of the emoji reaction. + * @param {String} emojiName + * @param {Object} reaction + * @param {String} currentUserAccountID + * @returns {Object} + */ +const getEmojiReactionDetails = (emojiName, reaction, currentUserAccountID) => { + const {users, oldestTimestamp} = enrichEmojiReactionWithTimestamps(reaction, emojiName); + + const emoji = findEmojiByName(emojiName); + const emojiCodes = getUniqueEmojiCodes(emoji, users); + const reactionCount = lodashSum(_.map(users, (user) => _.size(user.skinTones))); + const hasUserReacted = hasAccountIDEmojiReacted(currentUserAccountID, users); + const userAccountIDs = _.chain(users) + .sortBy('oldestTimestamp') + .map((user) => Number(user.id)) + .value(); + + return { + emoji, + emojiCodes, + reactionCount, + hasUserReacted, + userAccountIDs, + oldestTimestamp, + }; }; export { @@ -494,7 +607,10 @@ export { getPreferredSkinToneIndex, getPreferredEmojiCode, getUniqueEmojiCodes, + getEmojiReactionDetails, replaceAndExtractEmojis, extractEmojis, getAddedEmojis, + isFirstLetterEmoji, + hasAccountIDEmojiReacted, }; diff --git a/src/libs/HeaderUtils.js b/src/libs/HeaderUtils.js index ccc7bac3f571..16d375ea1124 100644 --- a/src/libs/HeaderUtils.js +++ b/src/libs/HeaderUtils.js @@ -1,5 +1,4 @@ import * as Localize from './Localize'; -import themeColors from '../styles/themes/default'; import * as Session from './actions/Session'; import * as Report from './actions/Report'; import * as Expensicons from '../components/Icon/Expensicons'; @@ -12,14 +11,12 @@ function getPinMenuItem(report) { if (!report.isPinned) { return { icon: Expensicons.Pin, - iconFill: themeColors.icon, text: Localize.translateLocal('common.pin'), onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), }; } return { icon: Expensicons.Pin, - iconFill: themeColors.icon, text: Localize.translateLocal('common.unPin'), onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), }; diff --git a/src/libs/IOUUtils.ts b/src/libs/IOUUtils.ts index 2425211d16bc..d8a916d0dfb0 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.IOU.MONEY_REQUEST_TYPE.SEND]; + const moneyRequestType: string[] = [CONST.IOU.TYPE.REQUEST, CONST.IOU.TYPE.SPLIT, CONST.IOU.TYPE.SEND]; return moneyRequestType.includes(iouType); } diff --git a/src/libs/Middleware/Logging.js b/src/libs/Middleware/Logging.ts similarity index 82% rename from src/libs/Middleware/Logging.js rename to src/libs/Middleware/Logging.ts index fdc9f0083abb..171cb4b9ab4c 100644 --- a/src/libs/Middleware/Logging.js +++ b/src/libs/Middleware/Logging.ts @@ -1,30 +1,26 @@ -import _ from 'underscore'; -import lodashGet from 'lodash/get'; import Log from '../Log'; import CONST from '../../CONST'; +import Request from '../../types/onyx/Request'; +import Response from '../../types/onyx/Response'; +import Middleware from './types'; -/** - * @param {String} message - * @param {Object} request - * @param {Object} [response] - */ -function logRequestDetails(message, request, response = {}) { +function logRequestDetails(message: string, request: Request, response?: Response | void) { // Don't log about log or else we'd cause an infinite loop if (request.command === 'Log') { return; } - const logParams = { + const logParams: Record = { command: request.command, shouldUseSecure: request.shouldUseSecure, }; - const returnValueList = lodashGet(request, 'data.returnValueList'); + const returnValueList = request?.data?.returnValueList; if (returnValueList) { logParams.returnValueList = returnValueList; } - const nvpNames = lodashGet(request, 'data.nvpNames'); + const nvpNames = request?.data?.nvpNames; if (nvpNames) { logParams.nvpNames = nvpNames; } @@ -37,14 +33,7 @@ function logRequestDetails(message, request, response = {}) { Log.info(message, false, logParams); } -/** - * Logging middleware - * - * @param {Promise} response - * @param {Object} request - * @returns {Promise} - */ -function Logging(response, request) { +const Logging: Middleware = (response, request) => { logRequestDetails('Making API request', request); return response .then((data) => { @@ -52,7 +41,7 @@ function Logging(response, request) { return data; }) .catch((error) => { - const logParams = { + const logParams: Record = { message: error.message, status: error.status, title: error.title, @@ -73,21 +62,18 @@ function Logging(response, request) { // incorrect url, bad cors headers returned by the server, DNS lookup failure etc. Log.hmmm('[Network] API request error: Failed to fetch', logParams); } else if ( - _.contains( - [ - CONST.ERROR.IOS_NETWORK_CONNECTION_LOST, - CONST.ERROR.NETWORK_REQUEST_FAILED, - CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_RUSSIAN, - CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_SWEDISH, - CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_SPANISH, - ], - error.message, - ) + [ + CONST.ERROR.IOS_NETWORK_CONNECTION_LOST, + CONST.ERROR.NETWORK_REQUEST_FAILED, + CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_RUSSIAN, + CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_SWEDISH, + CONST.ERROR.IOS_NETWORK_CONNECTION_LOST_SPANISH, + ].includes(error.message) ) { // These errors seem to happen for native devices with interrupted connections. Often we will see logs about Pusher disconnecting together with these. // This type of error may also indicate a problem with SSL certs. Log.hmmm('[Network] API request error: Connection interruption likely', logParams); - } else if (_.contains([CONST.ERROR.FIREFOX_DOCUMENT_LOAD_ABORTED, CONST.ERROR.SAFARI_DOCUMENT_LOAD_ABORTED], error.message)) { + } else if ([CONST.ERROR.FIREFOX_DOCUMENT_LOAD_ABORTED, CONST.ERROR.SAFARI_DOCUMENT_LOAD_ABORTED].includes(error.message)) { // This message can be observed page load is interrupted (closed or navigated away). Log.hmmm('[Network] API request error: User likely navigated away from or closed browser', logParams); } else if (error.message === CONST.ERROR.IOS_LOAD_FAILED) { @@ -123,6 +109,6 @@ function Logging(response, request) { // Re-throw this error so the next handler can manage it throw error; }); -} +}; export default Logging; diff --git a/src/libs/Middleware/Reauthentication.js b/src/libs/Middleware/Reauthentication.ts similarity index 86% rename from src/libs/Middleware/Reauthentication.js rename to src/libs/Middleware/Reauthentication.ts index dfe4e1b7fda8..aec09227e441 100644 --- a/src/libs/Middleware/Reauthentication.js +++ b/src/libs/Middleware/Reauthentication.ts @@ -1,4 +1,3 @@ -import lodashGet from 'lodash/get'; import CONST from '../../CONST'; import * as NetworkStore from '../Network/NetworkStore'; import * as MainQueue from '../Network/MainQueue'; @@ -6,15 +5,12 @@ import * as Authentication from '../Authentication'; import * as Request from '../Request'; import Log from '../Log'; import NetworkConnection from '../NetworkConnection'; +import Middleware from './types'; // We store a reference to the active authentication request so that we are only ever making one request to authenticate at a time. -let isAuthenticating = null; +let isAuthenticating: Promise | null = null; -/** - * @param {String} commandName - * @returns {Promise} - */ -function reauthenticate(commandName) { +function reauthenticate(commandName?: string): Promise { if (isAuthenticating) { return isAuthenticating; } @@ -32,16 +28,8 @@ function reauthenticate(commandName) { return isAuthenticating; } -/** - * Reauthentication middleware - * - * @param {Promise} response - * @param {Object} request - * @param {Boolean} isFromSequentialQueue - * @returns {Promise} - */ -function Reauthentication(response, request, isFromSequentialQueue) { - return response +const Reauthentication: Middleware = (response, request, isFromSequentialQueue) => + response .then((data) => { // If there is no data for some reason then we cannot reauthenticate if (!data) { @@ -58,13 +46,13 @@ function Reauthentication(response, request, isFromSequentialQueue) { // There are some API requests that should not be retried when there is an auth failure like // creating and deleting logins. In those cases, they should handle the original response instead // of the new response created by handleExpiredAuthToken. - const shouldRetry = lodashGet(request, 'data.shouldRetry'); - const apiRequestType = lodashGet(request, 'data.apiRequestType'); + const shouldRetry = request?.data?.shouldRetry; + const apiRequestType = request?.data?.apiRequestType; // For the SignInWithShortLivedAuthToken command, if the short token expires, the server returns a 407 error, // and credentials are still empty at this time, which causes reauthenticate to throw an error (requireParameters), // and the subsequent SaveResponseInOnyx also cannot be executed, so we need this parameter to skip the reauthentication logic. - const skipReauthentication = lodashGet(request, 'data.skipReauthentication'); + const skipReauthentication = request?.data?.skipReauthentication; if ((!shouldRetry && !apiRequestType) || skipReauthentication) { if (isFromSequentialQueue) { return data; @@ -82,7 +70,7 @@ function Reauthentication(response, request, isFromSequentialQueue) { return data; } - return reauthenticate(request.commandName) + return reauthenticate(request?.commandName) .then((authenticateResponse) => { if (isFromSequentialQueue || apiRequestType === CONST.API_REQUEST_TYPE.MAKE_REQUEST_WITH_SIDE_EFFECTS) { return Request.processWithMiddleware(request, isFromSequentialQueue); @@ -128,6 +116,5 @@ function Reauthentication(response, request, isFromSequentialQueue) { request.resolve({jsonCode: CONST.JSON_CODE.UNABLE_TO_RETRY}); } }); -} export default Reauthentication; diff --git a/src/libs/Middleware/RecheckConnection.js b/src/libs/Middleware/RecheckConnection.ts similarity index 83% rename from src/libs/Middleware/RecheckConnection.js rename to src/libs/Middleware/RecheckConnection.ts index 58f5cfa601c8..5a685d66fd02 100644 --- a/src/libs/Middleware/RecheckConnection.js +++ b/src/libs/Middleware/RecheckConnection.ts @@ -1,20 +1,17 @@ import CONST from '../../CONST'; import NetworkConnection from '../NetworkConnection'; +import Middleware from './types'; /** - * @returns {Function} cancel timer + * @returns cancel timer */ -function startRecheckTimeoutTimer() { +function startRecheckTimeoutTimer(): () => void { // If request is still in processing after this time, we might be offline const timerID = setTimeout(NetworkConnection.recheckNetworkConnection, CONST.NETWORK.MAX_PENDING_TIME_MS); return () => clearTimeout(timerID); } -/** - * @param {Promise} response - * @returns {Promise} - */ -function RecheckConnection(response) { +const RecheckConnection: Middleware = (response) => { // When the request goes past a certain amount of time we trigger a re-check of the connection const cancelRequestTimeoutTimer = startRecheckTimeoutTimer(); return response @@ -27,6 +24,6 @@ function RecheckConnection(response) { throw error; }) .finally(cancelRequestTimeoutTimer); -} +}; export default RecheckConnection; diff --git a/src/libs/Middleware/SaveResponseInOnyx.js b/src/libs/Middleware/SaveResponseInOnyx.ts similarity index 74% rename from src/libs/Middleware/SaveResponseInOnyx.js rename to src/libs/Middleware/SaveResponseInOnyx.ts index d8c47d4c01dd..0a279a7425b4 100644 --- a/src/libs/Middleware/SaveResponseInOnyx.js +++ b/src/libs/Middleware/SaveResponseInOnyx.ts @@ -1,21 +1,16 @@ -import _ from 'underscore'; import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; import * as MemoryOnlyKeys from '../actions/MemoryOnlyKeys/MemoryOnlyKeys'; import * as OnyxUpdates from '../actions/OnyxUpdates'; +import Middleware from './types'; // If we're executing any of these requests, we don't need to trigger our OnyxUpdates flow to update the current data even if our current value is out of // date because all these requests are updating the app to the most current state. const requestsToIgnoreLastUpdateID = ['OpenApp', 'ReconnectApp', 'GetMissingOnyxMessages']; -/** - * @param {Promise} requestResponse - * @param {Object} request - * @returns {Promise} - */ -function SaveResponseInOnyx(requestResponse, request) { - return requestResponse.then((response = {}) => { - const onyxUpdates = response.onyxData; +const SaveResponseInOnyx: Middleware = (requestResponse, request) => + 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. @@ -24,7 +19,7 @@ function SaveResponseInOnyx(requestResponse, request) { } // If there is an OnyxUpdate for using memory only keys, enable them - _.find(onyxUpdates, ({key, value}) => { + onyxUpdates?.find(({key, value}) => { if (key !== ONYXKEYS.IS_USING_MEMORY_ONLY_KEYS || !value) { return false; } @@ -35,13 +30,13 @@ function SaveResponseInOnyx(requestResponse, request) { const responseToApply = { type: CONST.ONYX_UPDATE_TYPES.HTTPS, - lastUpdateID: Number(response.lastUpdateID || 0), - previousUpdateID: Number(response.previousUpdateID || 0), + lastUpdateID: Number(response?.lastUpdateID ?? 0), + previousUpdateID: Number(response?.previousUpdateID ?? 0), request, - response, + response: response ?? {}, }; - if (_.includes(requestsToIgnoreLastUpdateID, request.command) || !OnyxUpdates.doesClientNeedToBeUpdated(Number(response.previousUpdateID || 0))) { + if (requestsToIgnoreLastUpdateID.includes(request.command) || !OnyxUpdates.doesClientNeedToBeUpdated(Number(response?.previousUpdateID ?? 0))) { return OnyxUpdates.apply(responseToApply); } @@ -54,6 +49,5 @@ function SaveResponseInOnyx(requestResponse, request) { shouldPauseQueue: true, }); }); -} export default SaveResponseInOnyx; diff --git a/src/libs/Middleware/index.js b/src/libs/Middleware/index.ts similarity index 100% rename from src/libs/Middleware/index.js rename to src/libs/Middleware/index.ts diff --git a/src/libs/Middleware/types.ts b/src/libs/Middleware/types.ts new file mode 100644 index 000000000000..ece210ffe2af --- /dev/null +++ b/src/libs/Middleware/types.ts @@ -0,0 +1,6 @@ +import Request from '../../types/onyx/Request'; +import Response from '../../types/onyx/Response'; + +type Middleware = (response: Promise, request: Request, isFromSequentialQueue: boolean) => Promise; + +export default Middleware; diff --git a/src/libs/MoneyRequestUtils.ts b/src/libs/MoneyRequestUtils.ts index ffa765621110..420184973a34 100644 --- a/src/libs/MoneyRequestUtils.ts +++ b/src/libs/MoneyRequestUtils.ts @@ -78,8 +78,8 @@ function replaceAllDigits(text: string, convertFn: (char: string) => string): st /** * Check if distance request or not */ -function isDistanceRequest(iouType: ValueOf, selectedTab: ValueOf): boolean { - return iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST && selectedTab === CONST.TAB.DISTANCE; +function isDistanceRequest(iouType: ValueOf, selectedTab: ValueOf): boolean { + return iouType === CONST.IOU.TYPE.REQUEST && selectedTab === CONST.TAB.DISTANCE; } /** diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 0869306bb491..dd7175dbc6f6 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -35,6 +35,7 @@ import * as SessionUtils from '../../SessionUtils'; import NotFoundPage from '../../../pages/ErrorPage/NotFoundPage'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import DemoSetupPage from '../../../pages/DemoSetupPage'; +import getCurrentUrl from '../currentUrl'; let timezone; let currentAccountID; @@ -117,6 +118,13 @@ const propTypes = { /** The last Onyx update ID was applied to the client */ lastUpdateIDAppliedToClient: PropTypes.number, + /** Information about any currently running demos */ + demoInfo: PropTypes.shape({ + money2020: PropTypes.shape({ + isBeginningDemo: PropTypes.bool, + }), + }), + ...windowDimensionsPropTypes, }; @@ -127,6 +135,7 @@ const defaultProps = { }, lastOpenedPublicRoomID: null, lastUpdateIDAppliedToClient: null, + demoInfo: {}, }; class AuthScreens extends React.Component { @@ -137,6 +146,15 @@ class AuthScreens extends React.Component { } componentDidMount() { + const currentUrl = getCurrentUrl(); + const isLoggingInAsNewUser = SessionUtils.isLoggingInAsNewUser(currentUrl, this.props.session.email); + // Sign out the current user if we're transitioning with a different user + const isTransitioning = currentUrl.includes(ROUTES.TRANSITION_BETWEEN_APPS); + if (isLoggingInAsNewUser && isTransitioning) { + Session.signOutAndRedirectToSignIn(); + return; + } + NetworkConnection.listenForReconnect(); NetworkConnection.onReconnect(() => { if (isLoadingApp) { @@ -169,6 +187,10 @@ class AuthScreens extends React.Component { App.setUpPoliciesAndNavigate(this.props.session, !this.props.isSmallScreenWidth); App.redirectThirdPartyDesktopSignIn(); + // Check if we should be running any demos immediately after signing in. + if (lodashGet(this.props.demoInfo, 'money2020.isBeginningDemo', false)) { + Navigation.navigate(ROUTES.MONEY2020, CONST.NAVIGATION.TYPE.FORCED_UP); + } if (this.props.lastOpenedPublicRoomID) { // Re-open the last opened public room if the user logged in from a public room link Report.openLastOpenedPublicRoom(this.props.lastOpenedPublicRoomID); @@ -299,6 +321,11 @@ class AuthScreens extends React.Component { options={defaultScreenOptions} component={DemoSetupPage} /> + require('../../../pages/ReportParticipantsPage').default, }); +const RoomMembersModalStackNavigator = createModalStackNavigator({ + RoomMembers_Root: () => require('../../../pages/RoomMembersPage').default, +}); + +const RoomInviteModalStackNavigator = createModalStackNavigator({ + RoomInvite_Root: () => require('../../../pages/RoomInvitePage').default, +}); + const SearchModalStackNavigator = createModalStackNavigator({ Search_Root: () => require('../../../pages/SearchPage').default, }); @@ -143,6 +151,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_App_Download_Links: () => require('../../../pages/settings/AppDownloadLinks').default, Settings_Lounge_Access: () => require('../../../pages/settings/Profile/LoungeAccessPage').default, Settings_Wallet: () => require('../../../pages/settings/Wallet/WalletPage').default, + Settings_Wallet_Cards_Digital_Details_Update_Address: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').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, @@ -168,6 +177,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ ReimbursementAccount: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default, GetAssistance: () => require('../../../pages/GetAssistancePage').default, Settings_TwoFactorAuth: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default, + Settings_ReportCardLostOrDamaged: () => require('../../../pages/settings/Wallet/ReportCardLostPage').default, KeyboardShortcuts: () => require('../../../pages/KeyboardShortcutsPage').default, }); @@ -229,4 +239,6 @@ export { PrivateNotesModalStackNavigator, NewTeachersUniteNavigator, SignInModalStackNavigator, + RoomMembersModalStackNavigator, + RoomInviteModalStackNavigator, }; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 27a15fa3d763..76203763bb0e 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -1,11 +1,11 @@ import React from 'react'; import {View} from 'react-native'; import {createStackNavigator} from '@react-navigation/stack'; +import PropTypes from 'prop-types'; import * as ModalStackNavigators from '../ModalStackNavigators'; import RHPScreenOptions from '../RHPScreenOptions'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; -import {withNavigationPropTypes} from '../../../../components/withNavigation'; import styles from '../../../../styles/styles'; import Overlay from './Overlay'; import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; @@ -13,7 +13,10 @@ import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; const Stack = createStackNavigator(); const propTypes = { - ...withNavigationPropTypes, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + goBack: PropTypes.func.isRequired, + }).isRequired, }; function RightModalNavigator(props) { @@ -64,6 +67,14 @@ function RightModalNavigator(props) { name="Participants" component={ModalStackNavigators.ReportParticipantsModalStackNavigator} /> + + + ); } diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js index 24f855645870..8cfef2439adb 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js @@ -5,10 +5,8 @@ import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../../../ONYXKEYS'; import * as ReportUtils from '../../ReportUtils'; import reportPropTypes from '../../../pages/reportPropTypes'; -import {withNavigationPropTypes} from '../../../components/withNavigation'; import * as App from '../../actions/App'; import usePermissions from '../../../hooks/usePermissions'; -import CONST from '../../../CONST'; import Navigation from '../Navigation'; const propTypes = { @@ -40,7 +38,10 @@ const propTypes = { }), }).isRequired, - ...withNavigationPropTypes, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + setParams: PropTypes.func.isRequired, + }).isRequired, }; const defaultProps = { @@ -60,16 +61,13 @@ const defaultProps = { * @returns {Number} */ const getLastAccessedReportID = (reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom) => { - // If deeplink url is of an attachment, we should show the report that the attachment comes from. + // If deeplink url contains reportID params, we should show the report that has this reportID. const currentRoute = Navigation.getActiveRoute(); - const matches = CONST.REGEX.ATTACHMENT_ROUTE.exec(currentRoute); - const reportID = lodashGet(matches, 1, null); + const {reportID} = ReportUtils.parseReportRouteParams(currentRoute); if (reportID) { return reportID; } - const lastReport = ReportUtils.findLastAccessedReport(reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom); - return lodashGet(lastReport, 'reportID'); }; diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js index 767bd9793ac2..542be8ed859e 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import {withNavigationPropTypes} from '../../../components/withNavigation'; import ReportScreen from '../../../pages/home/ReportScreen'; import ReportScreenIDSetter from './ReportScreenIDSetter'; @@ -17,7 +16,10 @@ const propTypes = { }), }).isRequired, - ...withNavigationPropTypes, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + setParams: PropTypes.func.isRequired, + }).isRequired, }; const defaultProps = {}; diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js index a3d8398a22b0..890db2b45ad4 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.js @@ -1,6 +1,8 @@ import _ from 'underscore'; import {StackRouter} from '@react-navigation/native'; +import lodashFindLast from 'lodash/findLast'; import NAVIGATORS from '../../../../NAVIGATORS'; +import SCREENS from '../../../../SCREENS'; /** * @param {Object} state - react-navigation state @@ -8,6 +10,30 @@ import NAVIGATORS from '../../../../NAVIGATORS'; */ const isAtLeastOneCentralPaneNavigatorInState = (state) => _.find(state.routes, (r) => r.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); +/** + * @param {Object} state - react-navigation state + * @returns {String|undefined} + */ +const getTopMostReportIDFromRHP = (state) => { + if (!state) { + return; + } + const topmostRightPane = lodashFindLast(state.routes, (route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); + + if (topmostRightPane) { + return getTopMostReportIDFromRHP(topmostRightPane.state); + } + + const topmostRoute = lodashFindLast(state.routes); + + if (topmostRoute.state) { + return getTopMostReportIDFromRHP(topmostRoute.state); + } + + if (topmostRoute.params && topmostRoute.params.reportID) { + return topmostRoute.params.reportID; + } +}; /** * Adds report route without any specific reportID to the state. * The report screen will self set proper reportID param based on the helper function findLastAccessedReport (look at ReportScreenWrapper for more info) @@ -15,7 +41,21 @@ const isAtLeastOneCentralPaneNavigatorInState = (state) => _.find(state.routes, * @param {Object} state - react-navigation state */ const addCentralPaneNavigatorRoute = (state) => { - state.routes.splice(1, 0, {name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR}); + const reportID = getTopMostReportIDFromRHP(state); + const centralPaneNavigatorRoute = { + name: NAVIGATORS.CENTRAL_PANE_NAVIGATOR, + state: { + routes: [ + { + name: SCREENS.REPORT, + params: { + reportID, + }, + }, + ], + }, + }; + state.routes.splice(1, 0, centralPaneNavigatorRoute); // eslint-disable-next-line no-param-reassign state.index = state.routes.length - 1; }; diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index 07b12486b8b2..6bbf53ffa6ea 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -12,7 +12,7 @@ import originalGetTopmostReportId from './getTopmostReportId'; import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import getStateFromPath from './getStateFromPath'; -import SCREENS, {PROTECTED_SCREENS} from '../../SCREENS'; +import SCREENS from '../../SCREENS'; import CONST from '../../CONST'; let resolveNavigationIsReadyPromise; @@ -80,7 +80,7 @@ const getActiveRouteIndex = function (route, index) { /** * Main navigation method for redirecting to a route. * @param {String} route - * @param {String} type - Type of action to perform. Currently UP is supported. + * @param {String} [type] - Type of action to perform. Currently UP is supported. */ function navigate(route = ROUTES.HOME, type) { if (!canNavigate('navigate', {route})) { @@ -262,61 +262,6 @@ function setIsNavigationReady() { resolveNavigationIsReadyPromise(); } -/** - * Checks if the navigation state contains routes that are protected (over the auth wall). - * - * @function - * @param {Object} state - react-navigation state object - * - * @returns {Boolean} - */ -function navContainsProtectedRoutes(state) { - if (!state || !state.routeNames || !_.isArray(state.routeNames)) { - return false; - } - const protectedScreensNames = _.values(PROTECTED_SCREENS); - const difference = _.difference(protectedScreensNames, state.routeNames); - - return !difference.length; -} - -/** - * Waits for the navigation state to contain protected routes specified in PROTECTED_SCREENS constant - * If the navigation is in a state, where protected routes are available, the promise will resolve immediately. - * - * @function - * @returns {Promise} A promise that resolves to `true` when the Concierge route is present. - * Rejects with an error if the navigation is not ready. - * - * @example - * waitForProtectedRoutes() - * .then(() => console.log('Protected routes are present!')) - * .catch(error => console.error(error.message)); - */ -function waitForProtectedRoutes() { - return new Promise((resolve, reject) => { - const isReady = navigationRef.current && navigationRef.current.isReady(); - if (!isReady) { - reject(new Error('[Navigation] is not ready yet!')); - return; - } - const currentState = navigationRef.current.getState(); - if (navContainsProtectedRoutes(currentState)) { - resolve(); - return; - } - let unsubscribe; - const handleStateChange = ({data}) => { - const state = lodashGet(data, 'state'); - if (navContainsProtectedRoutes(state)) { - unsubscribe(); - resolve(); - } - }; - unsubscribe = navigationRef.current.addListener('state', handleStateChange); - }); -} - export default { setShouldPopAllStateOnUP, canNavigate, @@ -330,7 +275,6 @@ export default { setIsNavigationReady, getTopmostReportId, getRouteNameFromStateEvent, - waitForProtectedRoutes, getTopMostCentralPaneRouteName, getTopmostReportActionId, }; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index fde5fe400c76..79609f551ee4 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -15,9 +15,13 @@ export default { [SCREENS.CONCIERGE]: ROUTES.CONCIERGE, AppleSignInDesktop: ROUTES.APPLE_SIGN_IN, GoogleSignInDesktop: ROUTES.GOOGLE_SIGN_IN, + SAMLSignIn: ROUTES.SAML_SIGN_IN, [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT, [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS.route, + // Demo routes + [CONST.DEMO_PAGES.MONEY2020]: ROUTES.MONEY2020, + // Sidebar [SCREENS.HOME]: { path: ROUTES.HOME, @@ -70,7 +74,7 @@ export default { exact: true, }, Settings_Wallet_DomainCards: { - path: ROUTES.SETTINGS_WALLET_DOMAINCARDS.route, + path: ROUTES.SETTINGS_WALLET_DOMAINCARD.route, exact: true, }, Settings_Wallet_ReportVirtualCardFraud: { @@ -89,10 +93,18 @@ export default { path: ROUTES.SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT, exact: true, }, + Settings_ReportCardLostOrDamaged: { + path: ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.route, + exact: true, + }, Settings_Wallet_Card_Activate: { path: ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.route, exact: true, }, + Settings_Wallet_Cards_Digital_Details_Update_Address: { + path: ROUTES.SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS.route, + exact: true, + }, Settings_Add_Debit_Card: { path: ROUTES.SETTINGS_ADD_DEBIT_CARD, exact: true, @@ -317,6 +329,16 @@ export default { ReportParticipants_Root: ROUTES.REPORT_PARTICIPANTS.route, }, }, + RoomInvite: { + screens: { + RoomInvite_Root: ROUTES.ROOM_INVITE.route, + }, + }, + RoomMembers: { + screens: { + RoomMembers_Root: ROUTES.ROOM_MEMBERS.route, + }, + }, MoneyRequest: { screens: { Money_Request: { diff --git a/src/libs/Network/MainQueue.js b/src/libs/Network/MainQueue.ts similarity index 71% rename from src/libs/Network/MainQueue.js rename to src/libs/Network/MainQueue.ts index 5b5b928d3284..5f069e2d0ed4 100644 --- a/src/libs/Network/MainQueue.js +++ b/src/libs/Network/MainQueue.ts @@ -1,42 +1,28 @@ -import _ from 'underscore'; -import lodashGet from 'lodash/get'; import * as NetworkStore from './NetworkStore'; import * as SequentialQueue from './SequentialQueue'; import * as Request from '../Request'; +import OnyxRequest from '../../types/onyx/Request'; // Queue for network requests so we don't lose actions done by the user while offline -let networkRequestQueue = []; +let networkRequestQueue: OnyxRequest[] = []; /** * Checks to see if a request can be made. - * - * @param {Object} request - * @param {String} request.type - * @param {String} request.command - * @param {Object} [request.data] - * @param {Boolean} request.data.forceNetworkRequest - * @return {Boolean} */ -function canMakeRequest(request) { +function canMakeRequest(request: OnyxRequest): boolean { // Some requests are always made even when we are in the process of authenticating (typically because they require no authToken e.g. Log, BeginSignIn) // However, if we are in the process of authenticating we always want to queue requests until we are no longer authenticating. - return request.data.forceNetworkRequest === true || (!NetworkStore.isAuthenticating() && !SequentialQueue.isRunning()); + return request.data?.forceNetworkRequest === true || (!NetworkStore.isAuthenticating() && !SequentialQueue.isRunning()); } -/** - * @param {Object} request - */ -function push(request) { +function push(request: OnyxRequest) { networkRequestQueue.push(request); } -/** - * @param {Object} request - */ -function replay(request) { +function replay(request: OnyxRequest) { push(request); - // eslint-disable-next-line no-use-before-define + // eslint-disable-next-line @typescript-eslint/no-use-before-define process(); } @@ -57,12 +43,12 @@ function process() { // - we are in the process of authenticating and the request is retryable (most are) // - the request does not have forceNetworkRequest === true (this will trigger it to process immediately) // - the request does not have shouldRetry === false (specified when we do not want to retry, defaults to true) - const requestsToProcessOnNextRun = []; + const requestsToProcessOnNextRun: OnyxRequest[] = []; - _.each(networkRequestQueue, (queuedRequest) => { + networkRequestQueue.forEach((queuedRequest) => { // Check if we can make this request at all and if we can't see if we should save it for the next run or chuck it into the ether if (!canMakeRequest(queuedRequest)) { - const shouldRetry = lodashGet(queuedRequest, 'data.shouldRetry'); + const shouldRetry = queuedRequest?.data?.shouldRetry; if (shouldRetry) { requestsToProcessOnNextRun.push(queuedRequest); } else { @@ -84,13 +70,10 @@ function process() { * Non-cancellable requests like Log would not be cleared */ function clear() { - networkRequestQueue = _.filter(networkRequestQueue, (request) => !request.data.canCancel); + networkRequestQueue = networkRequestQueue.filter((request) => !request.data?.canCancel); } -/** - * @returns {Array} - */ -function getAll() { +function getAll(): OnyxRequest[] { return networkRequestQueue; } diff --git a/src/libs/Network/NetworkStore.js b/src/libs/Network/NetworkStore.ts similarity index 61% rename from src/libs/Network/NetworkStore.js rename to src/libs/Network/NetworkStore.ts index 5ab46a4d65fa..0910031bdb63 100644 --- a/src/libs/Network/NetworkStore.js +++ b/src/libs/Network/NetworkStore.ts @@ -1,32 +1,28 @@ -import lodashGet from 'lodash/get'; import Onyx from 'react-native-onyx'; -import _ from 'underscore'; import ONYXKEYS from '../../ONYXKEYS'; +import Credentials from '../../types/onyx/Credentials'; -let credentials; -let authToken; -let supportAuthToken; -let currentUserEmail; +let credentials: Credentials | null = null; +let authToken: string | null = null; +let supportAuthToken: string | null = null; +let currentUserEmail: string | null = null; let offline = false; let authenticating = false; // Allow code that is outside of the network listen for when a reconnection happens so that it can execute any side-effects (like flushing the sequential network queue) -let reconnectCallback; +let reconnectCallback: () => void; function triggerReconnectCallback() { - if (!_.isFunction(reconnectCallback)) { + if (typeof reconnectCallback !== 'function') { return; } return reconnectCallback(); } -/** - * @param {Function} callbackFunction - */ -function onReconnection(callbackFunction) { +function onReconnection(callbackFunction: () => void) { reconnectCallback = callbackFunction; } -let resolveIsReadyPromise; +let resolveIsReadyPromise: (args?: unknown[]) => void; let isReadyPromise = new Promise((resolve) => { resolveIsReadyPromise = resolve; }); @@ -36,7 +32,7 @@ let isReadyPromise = new Promise((resolve) => { * If the values are undefined we haven't read them yet. If they are null or have a value then we have and the network is "ready". */ function checkRequiredData() { - if (_.isUndefined(authToken) || _.isUndefined(credentials)) { + if (authToken === undefined || credentials === undefined) { return; } @@ -53,9 +49,9 @@ function resetHasReadRequiredDataFromStorage() { Onyx.connect({ key: ONYXKEYS.SESSION, callback: (val) => { - authToken = lodashGet(val, 'authToken', null); - supportAuthToken = lodashGet(val, 'supportAuthToken', null); - currentUserEmail = lodashGet(val, 'email', null); + authToken = val?.authToken ?? null; + supportAuthToken = val?.supportAuthToken ?? null; + currentUserEmail = val?.email ?? null; checkRequiredData(); }, }); @@ -63,7 +59,7 @@ Onyx.connect({ Onyx.connect({ key: ONYXKEYS.CREDENTIALS, callback: (val) => { - credentials = val || {}; + credentials = val; checkRequiredData(); }, }); @@ -82,85 +78,51 @@ Onyx.connect({ triggerReconnectCallback(); } - offline = Boolean(network.shouldForceOffline) || network.isOffline; + offline = Boolean(network.shouldForceOffline) || !!network.isOffline; }, }); -/** - * @returns {Object} - */ -function getCredentials() { +function getCredentials(): Credentials | null { return credentials; } -/** - * @returns {Boolean} - */ -function isOffline() { +function isOffline(): boolean { return offline; } -/** - * @returns {String} - */ -function getAuthToken() { +function getAuthToken(): string | null { return authToken; } -/** - * @param {String} command - * @returns {[String]} - */ -function isSupportRequest(command) { - return _.contains(['OpenApp', 'ReconnectApp', 'OpenReport'], command); +function isSupportRequest(command: string): boolean { + return ['OpenApp', 'ReconnectApp', 'OpenReport'].includes(command); } -/** - * @returns {String} - */ -function getSupportAuthToken() { +function getSupportAuthToken(): string | null { return supportAuthToken; } -/** - * @param {String} newSupportAuthToken - */ -function setSupportAuthToken(newSupportAuthToken) { +function setSupportAuthToken(newSupportAuthToken: string) { supportAuthToken = newSupportAuthToken; } -/** - * @param {String} newAuthToken - */ -function setAuthToken(newAuthToken) { +function setAuthToken(newAuthToken: string | null) { authToken = newAuthToken; } -/** - * @returns {String} - */ -function getCurrentUserEmail() { +function getCurrentUserEmail(): string | null { return currentUserEmail; } -/** - * @returns {Promise} - */ -function hasReadRequiredDataFromStorage() { +function hasReadRequiredDataFromStorage(): Promise { return isReadyPromise; } -/** - * @returns {Boolean} - */ -function isAuthenticating() { +function isAuthenticating(): boolean { return authenticating; } -/** - * @param {Boolean} val - */ -function setIsAuthenticating(val) { +function setIsAuthenticating(val: boolean) { authenticating = val; } diff --git a/src/libs/Network/SequentialQueue.js b/src/libs/Network/SequentialQueue.ts similarity index 90% rename from src/libs/Network/SequentialQueue.js rename to src/libs/Network/SequentialQueue.ts index 5c74f791e073..980bbc0efc44 100644 --- a/src/libs/Network/SequentialQueue.js +++ b/src/libs/Network/SequentialQueue.ts @@ -1,4 +1,3 @@ -import _ from 'underscore'; import Onyx from 'react-native-onyx'; import * as PersistedRequests from '../actions/PersistedRequests'; import * as NetworkStore from './NetworkStore'; @@ -8,17 +7,18 @@ import * as Request from '../Request'; import * as RequestThrottle from '../RequestThrottle'; import CONST from '../../CONST'; import * as QueuedOnyxUpdates from '../actions/QueuedOnyxUpdates'; +import OnyxRequest from '../../types/onyx/Request'; -let resolveIsReadyPromise; +let resolveIsReadyPromise: ((args?: unknown[]) => void) | undefined; let isReadyPromise = new Promise((resolve) => { resolveIsReadyPromise = resolve; }); // Resolve the isReadyPromise immediately so that the queue starts working as soon as the page loads -resolveIsReadyPromise(); +resolveIsReadyPromise?.(); let isSequentialQueueRunning = false; -let currentRequest = null; +let currentRequest: Promise | null = null; let isQueuePaused = false; /** @@ -52,16 +52,15 @@ function flushOnyxUpdatesQueue() { * is successfully returned. The first time a request fails we set a random, small, initial wait time. After waiting, we retry the request. If there are subsequent failures the request wait * time is doubled creating an exponential back off in the frequency of requests hitting the server. Since the initial wait time is random and it increases exponentially, the load of * requests to our backend is evenly distributed and it gradually decreases with time, which helps the servers catch up. - * @returns {Promise} */ -function process() { +function process(): Promise { // When the queue is paused, return early. This prevents any new requests from happening. The queue will be flushed again when the queue is unpaused. if (isQueuePaused) { return Promise.resolve(); } const persistedRequests = PersistedRequests.getAll(); - if (_.isEmpty(persistedRequests) || NetworkStore.isOffline()) { + if (persistedRequests.length === 0 || NetworkStore.isOffline()) { return Promise.resolve(); } const requestToProcess = persistedRequests[0]; @@ -71,7 +70,7 @@ function process() { .then((response) => { // A response might indicate that the queue should be paused. This happens when a gap in onyx updates is detected between the client and the server and // that gap needs resolved before the queue can continue. - if (response.shouldPauseQueue) { + if (response?.shouldPauseQueue) { pause(); } PersistedRequests.remove(requestToProcess); @@ -89,12 +88,13 @@ function process() { return RequestThrottle.sleep() .then(process) .catch(() => { - Onyx.update(requestToProcess.failureData); + Onyx.update(requestToProcess.failureData ?? []); PersistedRequests.remove(requestToProcess); RequestThrottle.clear(); return process(); }); }); + return currentRequest; } @@ -104,7 +104,7 @@ function flush() { return; } - if (isSequentialQueueRunning || _.isEmpty(PersistedRequests.getAll())) { + if (isSequentialQueueRunning || PersistedRequests.getAll().length === 0) { return; } @@ -128,7 +128,7 @@ function flush() { Onyx.disconnect(connectionID); process().finally(() => { isSequentialQueueRunning = false; - resolveIsReadyPromise(); + resolveIsReadyPromise?.(); currentRequest = null; flushOnyxUpdatesQueue(); }); @@ -151,20 +151,14 @@ function unpause() { flush(); } -/** - * @returns {Boolean} - */ -function isRunning() { +function isRunning(): boolean { return isSequentialQueueRunning; } // Flush the queue when the connection resumes NetworkStore.onReconnection(flush); -/** - * @param {Object} request - */ -function push(request) { +function push(request: OnyxRequest) { // Add request to Persisted Requests so that it can be retried if it fails PersistedRequests.save([request]); @@ -182,10 +176,7 @@ function push(request) { flush(); } -/** - * @returns {Promise} - */ -function getCurrentRequest() { +function getCurrentRequest(): OnyxRequest | Promise { if (currentRequest === null) { return Promise.resolve(); } @@ -194,9 +185,8 @@ function getCurrentRequest() { /** * Returns a promise that resolves when the sequential queue is done processing all persisted write requests. - * @returns {Promise} */ -function waitForIdle() { +function waitForIdle(): Promise { return isReadyPromise; } diff --git a/src/libs/Network/enhanceParameters.js b/src/libs/Network/enhanceParameters.ts similarity index 72% rename from src/libs/Network/enhanceParameters.js rename to src/libs/Network/enhanceParameters.ts index 778be881cb98..54d72a7c6c99 100644 --- a/src/libs/Network/enhanceParameters.js +++ b/src/libs/Network/enhanceParameters.ts @@ -1,27 +1,18 @@ -import lodashGet from 'lodash/get'; -import _ from 'underscore'; import CONFIG from '../../CONFIG'; import getPlatform from '../getPlatform'; import * as NetworkStore from './NetworkStore'; /** * Does this command require an authToken? - * - * @param {String} command - * @return {Boolean} */ -function isAuthTokenRequired(command) { - return !_.contains(['Log', 'Authenticate', 'BeginSignIn', 'SetPassword'], command); +function isAuthTokenRequired(command: string): boolean { + return !['Log', 'Authenticate', 'BeginSignIn', 'SetPassword'].includes(command); } /** * Adds default values to our request data - * - * @param {String} command - * @param {Object} parameters - * @returns {Object} */ -export default function enhanceParameters(command, parameters) { +export default function enhanceParameters(command: string, parameters: Record): Record { const finalParameters = {...parameters}; if (isAuthTokenRequired(command)) { @@ -44,7 +35,7 @@ export default function enhanceParameters(command, parameters) { finalParameters.api_setCookie = false; // Include current user's email in every request and the server logs - finalParameters.email = lodashGet(parameters, 'email', NetworkStore.getCurrentUserEmail()); + finalParameters.email = parameters.email ?? NetworkStore.getCurrentUserEmail(); return finalParameters; } diff --git a/src/libs/Network/index.js b/src/libs/Network/index.ts similarity index 77% rename from src/libs/Network/index.js rename to src/libs/Network/index.ts index 2f5dc9460e60..bf38bc33e95a 100644 --- a/src/libs/Network/index.js +++ b/src/libs/Network/index.ts @@ -1,9 +1,10 @@ -import lodashGet from 'lodash/get'; import * as ActiveClientManager from '../ActiveClientManager'; import CONST from '../../CONST'; import * as MainQueue from './MainQueue'; import * as SequentialQueue from './SequentialQueue'; import pkg from '../../../package.json'; +import {Request} from '../../types/onyx'; +import Response from '../../types/onyx/Response'; // We must wait until the ActiveClientManager is ready so that we ensure only the "leader" tab processes any persisted requests ActiveClientManager.isReady().then(() => { @@ -15,16 +16,10 @@ ActiveClientManager.isReady().then(() => { /** * Perform a queued post request - * - * @param {String} command - * @param {*} [data] - * @param {String} [type] - * @param {Boolean} [shouldUseSecure] - Whether we should use the secure API - * @returns {Promise} */ -function post(command, data = {}, type = CONST.NETWORK.METHOD.POST, shouldUseSecure = false) { +function post(command: string, data: Record = {}, type = CONST.NETWORK.METHOD.POST, shouldUseSecure = false): Promise { return new Promise((resolve, reject) => { - const request = { + const request: Request = { command, data, type, @@ -35,8 +30,8 @@ function post(command, data = {}, type = CONST.NETWORK.METHOD.POST, shouldUseSec // (e.g. any requests currently happening when the user logs out are cancelled) request.data = { ...data, - shouldRetry: lodashGet(data, 'shouldRetry', true), - canCancel: lodashGet(data, 'canCancel', true), + shouldRetry: data?.shouldRetry ?? true, + canCancel: data?.canCancel ?? true, appversion: pkg.version, }; @@ -50,7 +45,7 @@ function post(command, data = {}, type = CONST.NETWORK.METHOD.POST, shouldUseSec // This check is mainly used to prevent API commands from triggering calls to MainQueue.process() from inside the context of a previous // call to MainQueue.process() e.g. calling a Log command without this would cause the requests in mainQueue to double process // since we call Log inside MainQueue.process(). - const shouldProcessImmediately = lodashGet(request, 'data.shouldProcessImmediately', true); + const shouldProcessImmediately = request?.data?.shouldProcessImmediately ?? true; if (!shouldProcessImmediately) { return; } diff --git a/src/libs/NextStepUtils.js b/src/libs/NextStepUtils.js new file mode 100644 index 000000000000..78214bac7df9 --- /dev/null +++ b/src/libs/NextStepUtils.js @@ -0,0 +1,19 @@ +import _ from 'underscore'; +import Str from 'expensify-common/lib/str'; + +function parseMessage(messageToParse) { + let nextStepHTML = ''; + + _.each(messageToParse, (part) => { + const tagType = part.type || 'span'; + nextStepHTML += `<${tagType}>${Str.safeEscape(part.text)}`; + }); + + return nextStepHTML + .replace(/%expenses/g, 'this expense') + .replace(/%Expenses/g, 'This expense') + .replace(/%tobe/g, 'is'); +} + +// eslint-disable-next-line import/prefer-default-export +export {parseMessage}; diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 051c19312f09..75806077daca 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -18,6 +18,7 @@ import * as UserUtils from './UserUtils'; import * as ReportActionUtils from './ReportActionsUtils'; import * as PersonalDetailsUtils from './PersonalDetailsUtils'; import * as ErrorUtils from './ErrorUtils'; +import * as TransactionUtils from './TransactionUtils'; /** * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can @@ -67,14 +68,16 @@ Onyx.connect({ const lastReportActions = {}; const allSortedReportActions = {}; +const allReportActions = {}; Onyx.connect({ key: ONYXKEYS.COLLECTION.REPORT_ACTIONS, callback: (actions, key) => { if (!key || !actions) { return; } - const sortedReportActions = ReportActionUtils.getSortedReportActions(_.toArray(actions), true); const reportID = CollectionUtils.extractCollectionItemID(key); + allReportActions[reportID] = actions; + const sortedReportActions = ReportActionUtils.getSortedReportActions(_.toArray(actions), true); allSortedReportActions[reportID] = sortedReportActions; lastReportActions[reportID] = _.first(sortedReportActions); }, @@ -91,6 +94,18 @@ Onyx.connect({ }, }); +let allTransactions = {}; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.TRANSACTION, + waitForCollectionCallback: true, + callback: (val) => { + if (!val) { + return; + } + allTransactions = _.pick(val, (transaction) => transaction); + }, +}); + /** * Adds expensify SMS domain (@expensify.sms) if login is a phone number and if it's not included yet * @@ -146,6 +161,9 @@ function getPersonalDetailsForAccountIDs(accountIDs, personalDetails) { } _.each(accountIDs, (accountID) => { const cleanAccountID = Number(accountID); + if (!cleanAccountID) { + return; + } let personalDetail = personalDetails[accountID]; if (!personalDetail) { personalDetail = { @@ -320,20 +338,25 @@ function getSearchText(report, reportName, personalDetailList, isChatRoomOrPolic function getAllReportErrors(report, reportActions) { const reportErrors = report.errors || {}; const reportErrorFields = report.errorFields || {}; - const reportActionErrors = {}; - _.each(reportActions, (action) => { - if (action && !_.isEmpty(action.errors)) { - _.extend(reportActionErrors, action.errors); - } else if (ReportActionUtils.isReportPreviewAction(action)) { - const iouReportID = ReportActionUtils.getIOUReportIDFromReportActionPreview(action); - - // Instead of adding all Smartscan errors, let's just add a generic error if there are any. This - // will be more performant and provide the same result in the UI - if (ReportUtils.hasMissingSmartscanFields(iouReportID)) { - _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')}); - } + const reportActionErrors = _.reduce( + reportActions, + (prevReportActionErrors, action) => (!action || _.isEmpty(action.errors) ? prevReportActionErrors : _.extend(prevReportActionErrors, action.errors)), + {}, + ); + + const parentReportAction = !report.parentReportID || !report.parentReportActionID ? {} : lodashGet(allReportActions, [report.parentReportID, report.parentReportActionID], {}); + + if (parentReportAction.actorAccountID === currentUserAccountID && ReportActionUtils.isTransactionThread(parentReportAction)) { + const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], ''); + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {}; + if (TransactionUtils.hasMissingSmartscanFields(transaction)) { + _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')}); } - }); + } else if ((ReportUtils.isIOUReport(report) || ReportUtils.isExpenseReport(report)) && report.ownerAccountID === currentUserAccountID) { + if (ReportUtils.hasMissingSmartscanFields(report.reportID)) { + _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')}); + } + } // All error objects related to the report. Each object in the sources contains error messages keyed by microtime const errorSources = { @@ -364,7 +387,8 @@ function getLastMessageTextForReport(report) { if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) { lastMessageTextFromReport = `[${Localize.translateLocal(report.lastMessageTranslationKey || 'common.attachment')}]`; } else if (ReportActionUtils.isMoneyRequestAction(lastReportAction)) { - lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(report, lastReportAction, true); + const properSchemaForMoneyRequestMessage = ReportUtils.getReportPreviewMessage(report, lastReportAction, true); + lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForMoneyRequestMessage); } else if (ReportActionUtils.isReportPreviewAction(lastReportAction)) { const iouReport = ReportUtils.getReport(ReportActionUtils.getIOUReportIDFromReportActionPreview(lastReportAction)); const lastIOUMoneyReport = _.find( @@ -375,6 +399,8 @@ function getLastMessageTextForReport(report) { ReportActionUtils.isMoneyRequestAction(reportAction), ); lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true); + } else if (ReportActionUtils.isDeletedParentAction(lastReportAction) && ReportUtils.isChatReport(report)) { + lastMessageTextFromReport = ReportUtils.getDeletedParentActionMessageForChatReport(lastReportAction); } else if (ReportActionUtils.isModifiedExpenseAction(lastReportAction)) { const properSchemaForModifiedExpenseMessage = ReportUtils.getModifiedExpenseMessage(lastReportAction); lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForModifiedExpenseMessage, true); @@ -521,7 +547,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { } result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result); - result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result); + result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result); if (!hasMultipleParticipants) { result.login = personalDetail.login; @@ -971,6 +997,7 @@ function getOptions( tags = {}, recentlyUsedTags = [], canInviteUser = true, + includeSelectedOptions = false, }, ) { if (includeCategories) { @@ -1107,8 +1134,15 @@ function getOptions( allPersonalDetailsOptions = lodashOrderBy(allPersonalDetailsOptions, [(personalDetail) => personalDetail.text && personalDetail.text.toLowerCase()], 'asc'); } - // Always exclude already selected options and the currently logged in user - const optionsToExclude = [...selectedOptions, {login: currentUserLogin}]; + // Exclude the current user from the personal details list + const optionsToExclude = [{login: currentUserLogin}]; + + // If we're including selected options from the search results, we only want to exclude them if the search input is empty + // This is because on certain pages, we show the selected options at the top when the search input is empty + // This prevents the issue of seeing the selected option twice if you have them as a recent chat and select them + if (!includeSelectedOptions || searchInputValue === '') { + optionsToExclude.push(...selectedOptions); + } _.each(excludeLogins, (login) => { optionsToExclude.push({login}); @@ -1354,6 +1388,7 @@ function getIOUConfirmationOptionsFromParticipants(participants, amountText) { * @param {Object} [tags] * @param {Array} [recentlyUsedTags] * @param {boolean} [canInviteUser] + * @param {boolean} [includeSelectedOptions] * @returns {Object} */ function getFilteredOptions( @@ -1372,6 +1407,7 @@ function getFilteredOptions( tags = {}, recentlyUsedTags = [], canInviteUser = true, + includeSelectedOptions = false, ) { return getOptions(reports, personalDetails, { betas, @@ -1390,6 +1426,7 @@ function getFilteredOptions( tags, recentlyUsedTags, canInviteUser, + includeSelectedOptions, }); } @@ -1525,6 +1562,20 @@ function getHeaderMessage(hasSelectableOptions, hasUserToInvite, searchValue, ma return ''; } +/** + * Helper method for non-user lists (eg. categories and tags) that returns the text to be used for the header's message and title (if any) + * + * @param {Boolean} hasSelectableOptions + * @param {String} searchValue + * @return {String} + */ +function getHeaderMessageForNonUserList(hasSelectableOptions, searchValue) { + if (searchValue && !hasSelectableOptions) { + return Localize.translate(preferredLocale, 'common.noResultsFound'); + } + return ''; +} + /** * Helper method to check whether an option can show tooltip or not * @param {Object} option @@ -1534,6 +1585,64 @@ function shouldOptionShowTooltip(option) { return (!option.isChatRoom || option.isThread) && !option.isArchivedRoom; } +/** + * Handles the logic for displaying selected participants from the search term + * @param {String} searchTerm + * @param {Array} selectedOptions + * @param {Array} filteredRecentReports + * @param {Array} filteredPersonalDetails + * @param {Object} personalDetails + * @param {Boolean} shouldGetOptionDetails + * @param {Number} indexOffset + * @returns {Object} + */ +function formatSectionsFromSearchTerm(searchTerm, selectedOptions, filteredRecentReports, filteredPersonalDetails, personalDetails = {}, shouldGetOptionDetails = false, indexOffset) { + // We show the selected participants at the top of the list when there is no search term + // However, if there is a search term we remove the selected participants from the top of the list unless they are part of the search results + // This clears up space on mobile views, where if you create a group with 4+ people you can't see the selected participants and the search results at the same time + if (searchTerm === '') { + return { + section: { + title: undefined, + data: shouldGetOptionDetails + ? _.map(selectedOptions, (participant) => { + const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false); + return isPolicyExpenseChat ? getPolicyExpenseReportOption(participant) : getParticipantsOption(participant, personalDetails); + }) + : selectedOptions, + shouldShow: !_.isEmpty(selectedOptions), + indexOffset, + }, + newIndexOffset: indexOffset + selectedOptions.length, + }; + } + + // If you select a new user you don't have a contact for, they won't get returned as part of a recent report or personal details + // This will add them to the list of options, deduping them if they already exist in the other lists + const selectedParticipantsWithoutDetails = _.filter(selectedOptions, (participant) => { + const accountID = lodashGet(participant, 'accountID', null); + const isPartOfSearchTerm = participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase()); + const isReportInRecentReports = _.some(filteredRecentReports, (report) => report.accountID === accountID); + const isReportInPersonalDetails = _.some(filteredPersonalDetails, (personalDetail) => personalDetail.accountID === accountID); + return isPartOfSearchTerm && !isReportInRecentReports && !isReportInPersonalDetails; + }); + + return { + section: { + title: undefined, + data: shouldGetOptionDetails + ? _.map(selectedParticipantsWithoutDetails, (participant) => { + const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false); + return isPolicyExpenseChat ? getPolicyExpenseReportOption(participant) : getParticipantsOption(participant, personalDetails); + }) + : selectedParticipantsWithoutDetails, + shouldShow: !_.isEmpty(selectedParticipantsWithoutDetails), + indexOffset, + }, + newIndexOffset: indexOffset + selectedParticipantsWithoutDetails.length, + }; +} + export { addSMSDomainIfPhoneNumber, getAvatarsForAccountIDs, @@ -1544,6 +1653,7 @@ export { getShareDestinationOptions, getMemberInviteOptions, getHeaderMessage, + getHeaderMessageForNonUserList, getPersonalDetailsForAccountIDs, getIOUConfirmationOptionsFromPayeePersonalDetail, getIOUConfirmationOptionsFromParticipants, @@ -1558,4 +1668,5 @@ export { hasEnabledOptions, getCategoryOptionTree, formatMemberForList, + formatSectionsFromSearchTerm, }; diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 64260569639e..380f10589b3f 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -1,32 +1,27 @@ -import {SvgProps} from 'react-native-svg'; import BankAccountModel from './models/BankAccount'; import getBankIcon from '../components/Icon/BankIcons'; import CONST from '../CONST'; import * as Localize from './Localize'; import Fund from '../types/onyx/Fund'; import BankAccount from '../types/onyx/BankAccount'; +import PaymentMethod from '../types/onyx/PaymentMethod'; type AccountType = BankAccount['accountType'] | Fund['accountType']; -type PaymentMethod = (BankAccount | Fund) & { - description: string; - icon: React.FC; - iconSize?: number; -}; - /** - * Check to see if user has either a debit card or personal bank account added + * Check to see if user has either a debit card or personal bank account added that can be used with a wallet. */ -function hasExpensifyPaymentMethod(fundList: Record, bankAccountList: Record): boolean { +function hasExpensifyPaymentMethod(fundList: Record, bankAccountList: Record, shouldIncludeDebitCard = true): boolean { const validBankAccount = Object.values(bankAccountList).some((bankAccountJSON) => { const bankAccount = new BankAccountModel(bankAccountJSON); - return bankAccount.isDefaultCredit(); + + return bankAccount.getPendingAction() !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && bankAccount.isOpen() && bankAccount.getType() === CONST.BANK_ACCOUNT.TYPE.PERSONAL; }); // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them const validDebitCard = Object.values(fundList).some((card) => card?.accountData?.additionalData?.isP2PDebitCard ?? false); - return validBankAccount || validDebitCard; + return validBankAccount || (shouldIncludeDebitCard && validDebitCard); } function getPaymentMethodDescription(accountType: AccountType, account: BankAccount['accountData'] | Fund['accountData']): string { @@ -53,22 +48,28 @@ function formatPaymentMethods(bankAccountList: Record, fund return; } - const {icon, iconSize} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false); combinedPaymentMethods.push({ ...bankAccount, description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData), icon, iconSize, + iconHeight, + iconWidth, + iconStyles, }); }); Object.values(fundList).forEach((card) => { - const {icon, iconSize} = getBankIcon(card?.accountData?.bank ?? '', true); + const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(card?.accountData?.bank ?? '', true); combinedPaymentMethods.push({ ...card, description: getPaymentMethodDescription(card?.accountType, card.accountData), icon, iconSize, + iconHeight, + iconWidth, + iconStyles, }); }); diff --git a/src/libs/Performance.js b/src/libs/Performance.tsx similarity index 52% rename from src/libs/Performance.js rename to src/libs/Performance.tsx index 0207fd20c564..cfb5e258c9f8 100644 --- a/src/libs/Performance.js +++ b/src/libs/Performance.tsx @@ -1,39 +1,73 @@ -import _ from 'underscore'; -import lodashTransform from 'lodash/transform'; import React, {Profiler, forwardRef} from 'react'; import {Alert, InteractionManager} from 'react-native'; +import lodashTransform from 'lodash/transform'; +import isObject from 'lodash/isObject'; +import isEqual from 'lodash/isEqual'; +import {Performance as RNPerformance, PerformanceEntry, PerformanceMark, PerformanceMeasure} from 'react-native-performance'; +import {PerformanceObserverEntryList} from 'react-native-performance/lib/typescript/performance-observer'; import * as Metrics from './Metrics'; import getComponentDisplayName from './getComponentDisplayName'; import CONST from '../CONST'; import isE2ETestSession from './E2E/isE2ETestSession'; -/** @type {import('react-native-performance').Performance} */ -let rnPerformance; +type WrappedComponentConfig = {id: string}; + +type PerformanceEntriesCallback = (entry: PerformanceEntry) => void; + +type Phase = 'mount' | 'update'; + +type WithRenderTraceHOC =

>(WrappedComponent: React.ComponentType

) => React.ComponentType

>; + +type BlankHOC =

>(Component: React.ComponentType

) => React.ComponentType

; + +type SetupPerformanceObserver = () => void; +type DiffObject = (object: Record, base: Record) => Record; +type GetPerformanceMetrics = () => PerformanceEntry[]; +type PrintPerformanceMetrics = () => void; +type MarkStart = (name: string, detail?: Record) => PerformanceMark | void; +type MarkEnd = (name: string, detail?: Record) => PerformanceMark | void; +type MeasureFailSafe = (measureName: string, startOrMeasureOptions: string, endMark: string) => void; +type MeasureTTI = (endMark: string) => void; +type TraceRender = (id: string, phase: Phase, actualDuration: number, baseDuration: number, startTime: number, commitTime: number, interactions: Set) => PerformanceMeasure | void; +type WithRenderTrace = ({id}: WrappedComponentConfig) => WithRenderTraceHOC | BlankHOC; +type SubscribeToMeasurements = (callback: PerformanceEntriesCallback) => void; + +type PerformanceModule = { + diffObject: DiffObject; + setupPerformanceObserver: SetupPerformanceObserver; + getPerformanceMetrics: GetPerformanceMetrics; + printPerformanceMetrics: PrintPerformanceMetrics; + markStart: MarkStart; + markEnd: MarkEnd; + measureFailSafe: MeasureFailSafe; + measureTTI: MeasureTTI; + traceRender: TraceRender; + withRenderTrace: WithRenderTrace; + subscribeToMeasurements: SubscribeToMeasurements; +}; + +let rnPerformance: RNPerformance; /** * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so * that state and props updates can be optimized. - * - * @param {Object} object - * @param {Object} base - * @return {Object} */ -function diffObject(object, base) { - function changes(obj, comparisonObject) { +function diffObject(object: Record, base: Record): Record { + function changes(obj: Record, comparisonObject: Record): Record { return lodashTransform(obj, (result, value, key) => { - if (_.isEqual(value, comparisonObject[key])) { + if (isEqual(value, comparisonObject[key])) { return; } // eslint-disable-next-line no-param-reassign - result[key] = _.isObject(value) && _.isObject(comparisonObject[key]) ? changes(value, comparisonObject[key]) : value; + result[key] = isObject(value) && isObject(comparisonObject[key]) ? changes(value as Record, comparisonObject[key] as Record) : value; }); } return changes(object, base); } -const Performance = { +const Performance: PerformanceModule = { // When performance monitoring is disabled the implementations are blank diffObject, setupPerformanceObserver: () => {}, @@ -44,7 +78,11 @@ const Performance = { measureFailSafe: () => {}, measureTTI: () => {}, traceRender: () => {}, - withRenderTrace: () => (Component) => Component, + withRenderTrace: + () => + // eslint-disable-next-line @typescript-eslint/naming-convention +

>(Component: React.ComponentType

): React.ComponentType

=> + Component, subscribeToMeasurements: () => {}, }; @@ -53,20 +91,21 @@ if (Metrics.canCapturePerformanceMetrics()) { perfModule.setResourceLoggingEnabled(true); rnPerformance = perfModule.default; - Performance.measureFailSafe = (measureName, startOrMeasureOptions, endMark) => { + Performance.measureFailSafe = (measureName: string, startOrMeasureOptions: string, endMark: string) => { try { rnPerformance.measure(measureName, startOrMeasureOptions, endMark); } catch (error) { // Sometimes there might be no start mark recorded and the measure will fail with an error - console.debug(error.message); + if (error instanceof Error) { + console.debug(error.message); + } } }; /** * Measures the TTI time. To be called when the app is considered to be interactive. - * @param {String} [endMark] Optional end mark name */ - Performance.measureTTI = (endMark) => { + Performance.measureTTI = (endMark: string) => { // Make sure TTI is captured when the app is really usable InteractionManager.runAfterInteractions(() => { requestAnimationFrame(() => { @@ -88,8 +127,8 @@ if (Metrics.canCapturePerformanceMetrics()) { performanceReported.setupDefaultFlipperReporter(); // Monitor some native marks that we want to put on the timeline - new perfModule.PerformanceObserver((list, observer) => { - list.getEntries().forEach((entry) => { + new perfModule.PerformanceObserver((list: PerformanceObserverEntryList, observer: PerformanceObserver) => { + list.getEntries().forEach((entry: PerformanceEntry) => { if (entry.name === 'nativeLaunchEnd') { Performance.measureFailSafe('nativeLaunch', 'nativeLaunchStart', 'nativeLaunchEnd'); } @@ -108,8 +147,8 @@ if (Metrics.canCapturePerformanceMetrics()) { }).observe({type: 'react-native-mark', buffered: true}); // Monitor for "_end" marks and capture "_start" to "_end" measures - new perfModule.PerformanceObserver((list) => { - list.getEntriesByType('mark').forEach((mark) => { + new perfModule.PerformanceObserver((list: PerformanceObserverEntryList) => { + list.getEntriesByType('mark').forEach((mark: PerformanceEntry) => { if (mark.name.endsWith('_end')) { const end = mark.name; const name = end.replace(/_end$/, ''); @@ -125,65 +164,64 @@ if (Metrics.canCapturePerformanceMetrics()) { }).observe({type: 'mark', buffered: true}); }; - Performance.getPerformanceMetrics = () => - _.chain([ + Performance.getPerformanceMetrics = (): PerformanceEntry[] => + [ ...rnPerformance.getEntriesByName('nativeLaunch'), ...rnPerformance.getEntriesByName('runJsBundle'), ...rnPerformance.getEntriesByName('jsBundleDownload'), ...rnPerformance.getEntriesByName('TTI'), ...rnPerformance.getEntriesByName('regularAppStart'), ...rnPerformance.getEntriesByName('appStartedToReady'), - ]) - .filter((entry) => entry.duration > 0) - .value(); + ].filter((entry) => entry.duration > 0); /** * Outputs performance stats. We alert these so that they are easy to access in release builds. */ Performance.printPerformanceMetrics = () => { const stats = Performance.getPerformanceMetrics(); - const statsAsText = _.map(stats, (entry) => `\u2022 ${entry.name}: ${entry.duration.toFixed(1)}ms`).join('\n'); + const statsAsText = stats.map((entry) => `\u2022 ${entry.name}: ${entry.duration.toFixed(1)}ms`).join('\n'); if (stats.length > 0) { Alert.alert('Performance', statsAsText); } }; - Performance.subscribeToMeasurements = (callback) => { - new perfModule.PerformanceObserver((list) => { + Performance.subscribeToMeasurements = (callback: PerformanceEntriesCallback) => { + new perfModule.PerformanceObserver((list: PerformanceObserverEntryList) => { list.getEntriesByType('measure').forEach(callback); }).observe({type: 'measure', buffered: true}); }; /** * Add a start mark to the performance entries - * @param {string} name - * @param {Object} [detail] - * @returns {PerformanceMark} */ - Performance.markStart = (name, detail) => rnPerformance.mark(`${name}_start`, {detail}); + Performance.markStart = (name: string, detail?: Record): PerformanceMark => rnPerformance.mark(`${name}_start`, {detail}); /** * Add an end mark to the performance entries * A measure between start and end is captured automatically - * @param {string} name - * @param {Object} [detail] - * @returns {PerformanceMark} */ - Performance.markEnd = (name, detail) => rnPerformance.mark(`${name}_end`, {detail}); + Performance.markEnd = (name: string, detail?: Record): PerformanceMark => rnPerformance.mark(`${name}_end`, {detail}); /** * Put data emitted by Profiler components on the timeline - * @param {string} id the "id" prop of the Profiler tree that has just committed - * @param {'mount'|'update'} phase either "mount" (if the tree just mounted) or "update" (if it re-rendered) - * @param {number} actualDuration time spent rendering the committed update - * @param {number} baseDuration estimated time to render the entire subtree without memoization - * @param {number} startTime when React began rendering this update - * @param {number} commitTime when React committed this update - * @param {Set} interactions the Set of interactions belonging to this update - * @returns {PerformanceMeasure} + * @param id the "id" prop of the Profiler tree that has just committed + * @param phase either "mount" (if the tree just mounted) or "update" (if it re-rendered) + * @param actualDuration time spent rendering the committed update + * @param baseDuration estimated time to render the entire subtree without memoization + * @param startTime when React began rendering this update + * @param commitTime when React committed this update + * @param interactions the Set of interactions belonging to this update */ - Performance.traceRender = (id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => + Performance.traceRender = ( + id: string, + phase: Phase, + actualDuration: number, + baseDuration: number, + startTime: number, + commitTime: number, + interactions: Set, + ): PerformanceMeasure => rnPerformance.measure(id, { start: startTime, duration: actualDuration, @@ -197,14 +235,12 @@ if (Metrics.canCapturePerformanceMetrics()) { /** * A HOC that captures render timings of the Wrapped component - * @param {object} config - * @param {string} config.id - * @returns {function(React.Component): React.FunctionComponent} */ Performance.withRenderTrace = - ({id}) => - (WrappedComponent) => { - const WithRenderTrace = forwardRef((props, ref) => ( + ({id}: WrappedComponentConfig) => + // eslint-disable-next-line @typescript-eslint/naming-convention +

>(WrappedComponent: React.ComponentType

): React.ComponentType

> => { + const WithRenderTrace: React.ComponentType

> = forwardRef((props: P, ref) => ( )); - WithRenderTrace.displayName = `withRenderTrace(${getComponentDisplayName(WrappedComponent)})`; + WithRenderTrace.displayName = `withRenderTrace(${getComponentDisplayName(WrappedComponent as React.ComponentType)})`; return WithRenderTrace; }; } diff --git a/src/libs/PersonalDetailsUtils.js b/src/libs/PersonalDetailsUtils.js index 6b9335ab263d..29c49427bc81 100644 --- a/src/libs/PersonalDetailsUtils.js +++ b/src/libs/PersonalDetailsUtils.js @@ -36,21 +36,21 @@ function getDisplayNameOrDefault(passedPersonalDetails, pathToDisplayName, defau * @returns {Array} - Array of personal detail objects */ function getPersonalDetailsByIDs(accountIDs, currentUserAccountID, shouldChangeUserDisplayName = false) { - const result = []; - _.each( - _.filter(personalDetails, (detail) => accountIDs.includes(detail.accountID)), - (detail) => { + return _.chain(accountIDs) + .filter((accountID) => !!allPersonalDetails[accountID]) + .map((accountID) => { + const detail = allPersonalDetails[accountID]; + if (shouldChangeUserDisplayName && currentUserAccountID === detail.accountID) { - result.push({ + return { ...detail, displayName: Localize.translateLocal('common.you'), - }); - } else { - result.push(detail); + }; } - }, - ); - return result; + + return detail; + }) + .value(); } /** diff --git a/src/libs/PolicyUtils.js b/src/libs/PolicyUtils.js index 347a825f59cc..de902b53a7a4 100644 --- a/src/libs/PolicyUtils.js +++ b/src/libs/PolicyUtils.js @@ -155,6 +155,14 @@ function isExpensifyGuideTeam(email) { */ const isPolicyAdmin = (policy) => lodashGet(policy, 'role') === CONST.POLICY.ROLE.ADMIN; +/** + * + * @param {String} policyID + * @param {Object} policies + * @returns {Boolean} + */ +const isPolicyMember = (policyID, policies) => _.some(policies, (policy) => policy.id === policyID); + /** * @param {Object} policyMembers * @param {Object} personalDetails @@ -174,7 +182,7 @@ function getMemberAccountIDsForWorkspace(policyMembers, personalDetails) { if (!personalDetail || !personalDetail.login) { return; } - memberEmailsToAccountIDs[personalDetail.login] = accountID; + memberEmailsToAccountIDs[personalDetail.login] = Number(accountID); }); return memberEmailsToAccountIDs; } @@ -276,6 +284,7 @@ export { isPolicyAdmin, getMemberAccountIDsForWorkspace, getIneligibleInvitees, + isPolicyMember, getTag, getTagListName, getTagList, diff --git a/src/libs/ReceiptUtils.ts b/src/libs/ReceiptUtils.ts index cdc45cb119d5..13e8a195cccb 100644 --- a/src/libs/ReceiptUtils.ts +++ b/src/libs/ReceiptUtils.ts @@ -6,10 +6,13 @@ import ReceiptHTML from '../../assets/images/receipt-html.png'; import ReceiptDoc from '../../assets/images/receipt-doc.png'; import ReceiptGeneric from '../../assets/images/receipt-generic.png'; import ReceiptSVG from '../../assets/images/receipt-svg.png'; +import {Transaction} from '../types/onyx'; +import ROUTES from '../ROUTES'; type ThumbnailAndImageURI = { image: ImageSourcePropType | string; thumbnail: string | null; + transaction?: Transaction; }; type FileNameAndExtension = { @@ -20,12 +23,23 @@ type FileNameAndExtension = { /** * Grab the appropriate receipt image and thumbnail URIs based on file type * - * @param path URI to image, i.e. blob:new.expensify.com/9ef3a018-4067-47c6-b29f-5f1bd35f213d or expensify.com/receipts/w_e616108497ef940b7210ec6beb5a462d01a878f4.jpg - * @param filename of uploaded image or last part of remote URI + * @param transaction + * @param receiptPath + * @param receiptFileName */ -function getThumbnailAndImageURIs(path: string, filename: string): ThumbnailAndImageURI { +function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string | null = null, receiptFileName: string | null = null): ThumbnailAndImageURI { + // URI to image, i.e. blob:new.expensify.com/9ef3a018-4067-47c6-b29f-5f1bd35f213d or expensify.com/receipts/w_e616108497ef940b7210ec6beb5a462d01a878f4.jpg + const path = transaction?.receipt?.source ?? receiptPath ?? ''; + // filename of uploaded image or last part of remote URI + const filename = transaction?.filename ?? receiptFileName ?? ''; const isReceiptImage = Str.isImage(filename); + const hasEReceipt = transaction?.hasEReceipt; + + if (hasEReceipt) { + return {thumbnail: null, image: ROUTES.ERECEIPT.getRoute(transaction.transactionID), transaction}; + } + // For local files, we won't have a thumbnail yet if (isReceiptImage && (path.startsWith('blob:') || path.startsWith('file:'))) { return {thumbnail: null, image: path}; diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js deleted file mode 100644 index fa1883dd9b98..000000000000 --- a/src/libs/ReportActionsUtils.js +++ /dev/null @@ -1,698 +0,0 @@ -/* eslint-disable rulesdir/prefer-underscore-method */ -import lodashGet from 'lodash/get'; -import _ from 'underscore'; -import {max, parseISO, isEqual} from 'date-fns'; -import lodashFindLast from 'lodash/findLast'; -import Onyx from 'react-native-onyx'; -import * as CollectionUtils from './CollectionUtils'; -import CONST from '../CONST'; -import ONYXKEYS from '../ONYXKEYS'; -import Log from './Log'; -import isReportMessageAttachment from './isReportMessageAttachment'; - -const allReports = {}; -Onyx.connect({ - key: ONYXKEYS.COLLECTION.REPORT, - callback: (report, key) => { - if (!key || !report) { - return; - } - - const reportID = CollectionUtils.extractCollectionItemID(key); - allReports[reportID] = report; - }, -}); - -const allReportActions = {}; -Onyx.connect({ - key: ONYXKEYS.COLLECTION.REPORT_ACTIONS, - callback: (actions, key) => { - if (!key || !actions) { - return; - } - - const reportID = CollectionUtils.extractCollectionItemID(key); - allReportActions[reportID] = actions; - }, -}); - -let isNetworkOffline = false; -Onyx.connect({ - key: ONYXKEYS.NETWORK, - callback: (val) => (isNetworkOffline = lodashGet(val, 'isOffline', false)), -}); - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isCreatedAction(reportAction) { - return lodashGet(reportAction, 'actionName') === CONST.REPORT.ACTIONS.TYPE.CREATED; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isDeletedAction(reportAction) { - // A deleted comment has either an empty array or an object with html field with empty string as value - const message = lodashGet(reportAction, 'message', []); - return message.length === 0 || lodashGet(message, [0, 'html']) === ''; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isDeletedParentAction(reportAction) { - return lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isReversedTransaction(reportAction) { - return lodashGet(reportAction, ['message', 0, 'isReversedTransaction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isPendingRemove(reportAction) { - return lodashGet(reportAction, 'message[0].moderationDecision.decision') === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isMoneyRequestAction(reportAction) { - return lodashGet(reportAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.IOU; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isReportPreviewAction(reportAction) { - return lodashGet(reportAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW; -} - -/** - * @param {Object} reportAction - * @returns {Boolean} - */ -function isModifiedExpenseAction(reportAction) { - return lodashGet(reportAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE; -} - -function isWhisperAction(action) { - return (action.whisperedToAccountIDs || []).length > 0; -} - -/** - * Returns whether the comment is a thread parent message/the first message in a thread - * - * @param {Object} reportAction - * @param {String} reportID - * @returns {Boolean} - */ -function isThreadParentMessage(reportAction = {}, reportID) { - const {childType, childVisibleActionCount = 0, childReportID} = reportAction; - return childType === CONST.REPORT.TYPE.CHAT && (childVisibleActionCount > 0 || String(childReportID) === reportID); -} - -/** - * Returns the parentReportAction if the given report is a thread/task. - * - * @param {Object} report - * @param {Object} [allReportActionsParam] - * @returns {Object} - * @deprecated Use Onyx.connect() or withOnyx() instead - */ -function getParentReportAction(report, allReportActionsParam = undefined) { - if (!report || !report.parentReportID || !report.parentReportActionID) { - return {}; - } - return lodashGet(allReportActionsParam || allReportActions, [report.parentReportID, report.parentReportActionID], {}); -} - -/** - * Determines if the given report action is sent money report action by checking for 'pay' type and presence of IOUDetails object. - * - * @param {Object} reportAction - * @returns {Boolean} - */ -function isSentMoneyReportAction(reportAction) { - return ( - reportAction && - reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && - lodashGet(reportAction, 'originalMessage.type') === CONST.IOU.REPORT_ACTION_TYPE.PAY && - _.has(reportAction.originalMessage, 'IOUDetails') - ); -} - -/** - * Returns whether the thread is a transaction thread, which is any thread with IOU parent - * report action from requesting money (type - create) or from sending money (type - pay with IOUDetails field) - * - * @param {Object} parentReportAction - * @returns {Boolean} - */ -function isTransactionThread(parentReportAction) { - const originalMessage = lodashGet(parentReportAction, 'originalMessage', {}); - return ( - parentReportAction && - parentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && - (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE || (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && _.has(originalMessage, 'IOUDetails'))) - ); -} - -/** - * Sort an array of reportActions by their created timestamp first, and reportActionID second - * This gives us a stable order even in the case of multiple reportActions created on the same millisecond - * - * @param {Array} reportActions - * @param {Boolean} shouldSortInDescendingOrder - * @returns {Array} - */ -function getSortedReportActions(reportActions, shouldSortInDescendingOrder = false) { - if (!_.isArray(reportActions)) { - throw new Error(`ReportActionsUtils.getSortedReportActions requires an array, received ${typeof reportActions}`); - } - - const invertedMultiplier = shouldSortInDescendingOrder ? -1 : 1; - return _.chain(reportActions) - .compact() - .sort((first, second) => { - // First sort by timestamp - if (first.created !== second.created) { - return (first.created < second.created ? -1 : 1) * invertedMultiplier; - } - - // Then by action type, ensuring that `CREATED` actions always come first if they have the same timestamp as another action type - if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED || second.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) && first.actionName !== second.actionName) { - return (first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED ? -1 : 1) * invertedMultiplier; - } - // Ensure that `REPORTPREVIEW` actions always come after if they have the same timestamp as another action type - if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW || second.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW) && first.actionName !== second.actionName) { - return (first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW ? 1 : -1) * invertedMultiplier; - } - - // Then fallback on reportActionID as the final sorting criteria. It is a random number, - // but using this will ensure that the order of reportActions with the same created time and action type - // will be consistent across all users and devices - return (first.reportActionID < second.reportActionID ? -1 : 1) * invertedMultiplier; - }) - .value(); -} - -/** - * Finds most recent IOU request action ID. - * - * @param {Array} reportActions - * @returns {String} - */ -function getMostRecentIOURequestActionID(reportActions) { - const iouRequestTypes = [CONST.IOU.REPORT_ACTION_TYPE.CREATE, CONST.IOU.REPORT_ACTION_TYPE.SPLIT]; - const iouRequestActions = _.filter(reportActions, (action) => iouRequestTypes.includes(lodashGet(action, 'originalMessage.type'))); - - if (_.isEmpty(iouRequestActions)) { - return null; - } - - const sortedReportActions = getSortedReportActions(iouRequestActions); - return _.last(sortedReportActions).reportActionID; -} - -/** - * Returns array of links inside a given report action - * - * @param {Object} reportAction - * @returns {Array} - */ -function extractLinksFromMessageHtml(reportAction) { - const htmlContent = lodashGet(reportAction, ['message', 0, 'html']); - - // Regex to get link in href prop inside of component - const regex = /]*?\s+)?href="([^"]*)"/gi; - - if (!htmlContent) { - return []; - } - - return _.map([...htmlContent.matchAll(regex)], (match) => match[1]); -} - -/** - * Returns the report action immediately before the specified index. - * @param {Array} reportActions - all actions - * @param {Number} actionIndex - index of the action - * @returns {Object|null} - */ -function findPreviousAction(reportActions, actionIndex) { - for (let i = actionIndex + 1; i < reportActions.length; i++) { - // Find the next non-pending deletion report action, as the pending delete action means that it is not displayed in the UI, but still is in the report actions list. - // If we are offline, all actions are pending but shown in the UI, so we take the previous action, even if it is a delete. - if (isNetworkOffline || reportActions[i].pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) { - return reportActions[i]; - } - } - return null; -} - -/** - * Returns true when the report action immediately before the specified index is a comment made by the same actor who who is leaving a comment in the action at the specified index. - * Also checks to ensure that the comment is not too old to be shown as a grouped comment. - * - * @param {Array} reportActions - * @param {Number} actionIndex - index of the comment item in state to check - * @returns {Boolean} - */ -function isConsecutiveActionMadeByPreviousActor(reportActions, actionIndex) { - const previousAction = findPreviousAction(reportActions, actionIndex); - const currentAction = reportActions[actionIndex]; - - // It's OK for there to be no previous action, and in that case, false will be returned - // so that the comment isn't grouped - if (!currentAction || !previousAction) { - return false; - } - - // Comments are only grouped if they happen within 5 minutes of each other - if (new Date(currentAction.created).getTime() - new Date(previousAction.created).getTime() > 300000) { - return false; - } - - // Do not group if previous action was a created action - if (previousAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { - return false; - } - - // Do not group if previous or current action was a renamed action - if (previousAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED || currentAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) { - return false; - } - - // Do not group if the delegate account ID is different - if (previousAction.delegateAccountID !== currentAction.delegateAccountID) { - return false; - } - - return currentAction.actorAccountID === previousAction.actorAccountID; -} - -/** - * Checks if a reportAction is deprecated. - * - * @param {Object} reportAction - * @param {String} key - * @returns {Boolean} - */ -function isReportActionDeprecated(reportAction, key) { - if (!reportAction) { - return true; - } - - // HACK ALERT: We're temporarily filtering out any reportActions keyed by sequenceNumber - // to prevent bugs during the migration from sequenceNumber -> reportActionID - if (String(reportAction.sequenceNumber) === key) { - Log.info('Front-end filtered out reportAction keyed by sequenceNumber!', false, reportAction); - return true; - } - - return false; -} - -/** - * Checks if a reportAction is fit for display, meaning that it's not deprecated, is of a valid - * and supported type, it's not deleted and also not closed. - * - * @param {Object} reportAction - * @param {String} key - * @returns {Boolean} - */ -function shouldReportActionBeVisible(reportAction, key) { - if (isReportActionDeprecated(reportAction, key)) { - return false; - } - - if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.TASKEDITED) { - return false; - } - - // Filter out any unsupported reportAction types - if (!Object.values(CONST.REPORT.ACTIONS.TYPE).includes(reportAction.actionName) && !Object.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG).includes(reportAction.actionName)) { - return false; - } - - // Ignore closed action here since we're already displaying a footer that explains why the report was closed - if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED) { - return false; - } - - if (isPendingRemove(reportAction)) { - return false; - } - - // All other actions are displayed except thread parents, deleted, or non-pending actions - const isDeleted = isDeletedAction(reportAction); - const isPending = !!reportAction.pendingAction; - return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction); -} - -/** - * Checks if a reportAction is fit for display as report last action, meaning that - * it satisfies shouldReportActionBeVisible, it's not whisper action and not deleted. - * - * @param {Object} reportAction - * @returns {Boolean} - */ -function shouldReportActionBeVisibleAsLastAction(reportAction) { - if (!reportAction) { - return false; - } - - if (!_.isEmpty(reportAction.errors)) { - return false; - } - - // If a whisper action is the REPORTPREVIEW action, we are displaying it. - return ( - shouldReportActionBeVisible(reportAction, reportAction.reportActionID) && - !(isWhisperAction(reportAction) && !isReportPreviewAction(reportAction) && !isMoneyRequestAction(reportAction)) && - !isDeletedAction(reportAction) - ); -} - -/** - * @param {String} reportID - * @param {Object} [actionsToMerge] - * @return {Object} - */ -function getLastVisibleAction(reportID, actionsToMerge = {}) { - const updatedActionsToMerge = {}; - if (actionsToMerge && Object.keys(actionsToMerge).length !== 0) { - Object.keys(actionsToMerge).forEach( - (actionToMergeID) => (updatedActionsToMerge[actionToMergeID] = {...allReportActions[reportID][actionToMergeID], ...actionsToMerge[actionToMergeID]}), - ); - } - const actions = Object.values({ - ...allReportActions[reportID], - ...updatedActionsToMerge, - }); - const visibleActions = actions.filter((action) => shouldReportActionBeVisibleAsLastAction(action)); - - if (visibleActions.length === 0) { - return {}; - } - const maxDate = max(visibleActions.map((action) => parseISO(action.created))); - const maxAction = visibleActions.find((action) => isEqual(parseISO(action.created), maxDate)); - return maxAction; -} - -/** - * @param {String} reportID - * @param {Object} [actionsToMerge] - * @return {Object} - */ -function getLastVisibleMessage(reportID, actionsToMerge = {}) { - const lastVisibleAction = getLastVisibleAction(reportID, actionsToMerge); - const message = lodashGet(lastVisibleAction, ['message', 0], {}); - - if (isReportMessageAttachment(message)) { - return { - lastMessageTranslationKey: CONST.TRANSLATION_KEYS.ATTACHMENT, - lastMessageText: CONST.ATTACHMENT_MESSAGE_TEXT, - lastMessageHtml: CONST.TRANSLATION_KEYS.ATTACHMENT, - }; - } - - if (isCreatedAction(lastVisibleAction)) { - return { - lastMessageText: '', - }; - } - - const messageText = lodashGet(message, 'text', ''); - return { - lastMessageText: String(messageText).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim(), - }; -} - -/** - * A helper method to filter out report actions keyed by sequenceNumbers. - * - * @param {Object} reportActions - * @returns {Array} - */ -function filterOutDeprecatedReportActions(reportActions) { - return _.filter(reportActions, (reportAction, key) => !isReportActionDeprecated(reportAction, key)); -} - -/** - * This method returns the report actions that are ready for display in the ReportActionsView. - * The report actions need to be sorted by created timestamp first, and reportActionID second - * to ensure they will always be displayed in the same order (in case multiple actions have the same timestamp). - * This is all handled with getSortedReportActions() which is used by several other methods to keep the code DRY. - * - * @param {Object} reportActions - * @returns {Array} - */ -function getSortedReportActionsForDisplay(reportActions) { - const filteredReportActions = _.filter(reportActions, (reportAction, key) => shouldReportActionBeVisible(reportAction, key)); - return getSortedReportActions(filteredReportActions, true); -} - -/** - * In some cases, there can be multiple closed report actions in a chat report. - * This method returns the last closed report action so we can always show the correct archived report reason. - * Additionally, archived #admins and #announce do not have the closed report action so we will return null if none is found. - * - * @param {Object} reportActions - * @returns {Object|null} - */ -function getLastClosedReportAction(reportActions) { - // If closed report action is not present, return early - if (!_.some(reportActions, (action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED)) { - return null; - } - const filteredReportActions = filterOutDeprecatedReportActions(reportActions); - const sortedReportActions = getSortedReportActions(filteredReportActions); - return lodashFindLast(sortedReportActions, (action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED); -} - -/** - * @param {Array} onyxData - * @returns {Object} The latest report action in the `onyxData` or `null` if one couldn't be found - */ -function getLatestReportActionFromOnyxData(onyxData) { - const reportActionUpdate = _.find(onyxData, (onyxUpdate) => onyxUpdate.key.startsWith(ONYXKEYS.COLLECTION.REPORT_ACTIONS)); - - if (!reportActionUpdate) { - return null; - } - - const reportActions = _.values(reportActionUpdate.value); - const sortedReportActions = getSortedReportActions(reportActions); - return _.last(sortedReportActions); -} - -/** - * Find the transaction associated with this reportAction, if one exists. - * - * @param {String} reportID - * @param {String} reportActionID - * @returns {String|null} - */ -function getLinkedTransactionID(reportID, reportActionID) { - const reportAction = lodashGet(allReportActions, [reportID, reportActionID]); - if (!reportAction || reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU) { - return null; - } - return reportAction.originalMessage.IOUTransactionID; -} - -/** - * - * @param {String} reportID - * @param {String} reportActionID - * @returns {Object} - */ -function getReportAction(reportID, reportActionID) { - return lodashGet(allReportActions, [reportID, reportActionID], {}); -} - -/** - * @returns {string} - */ -function getMostRecentReportActionLastModified() { - // Start with the oldest date possible - let mostRecentReportActionLastModified = new Date(0).toISOString(); - - // Flatten all the actions - // Loop over them all to find the one that is the most recent - const flatReportActions = _.flatten(_.map(allReportActions, (actions) => _.values(actions))); - _.each(flatReportActions, (action) => { - // Pending actions should not be counted here as a user could create a comment or some other action while offline and the server might know about - // messages they have not seen yet. - if (!_.isEmpty(action.pendingAction)) { - return; - } - - const lastModified = action.lastModified || action.created; - if (lastModified < mostRecentReportActionLastModified) { - return; - } - - mostRecentReportActionLastModified = lastModified; - }); - - // We might not have actions so we also look at the report objects to see if any have a lastVisibleActionLastModified that is more recent. We don't need to get - // any reports that have been updated before either a recently updated report or reportAction as we should be up to date on these - _.each(allReports, (report) => { - const reportLastVisibleActionLastModified = report.lastVisibleActionLastModified || report.lastVisibleActionCreated; - if (!reportLastVisibleActionLastModified || reportLastVisibleActionLastModified < mostRecentReportActionLastModified) { - return; - } - - mostRecentReportActionLastModified = reportLastVisibleActionLastModified; - }); - - return mostRecentReportActionLastModified; -} - -/** - * @param {*} chatReportID - * @param {*} iouReportID - * @returns {Object} The report preview action or `null` if one couldn't be found - */ -function getReportPreviewAction(chatReportID, iouReportID) { - return _.find( - allReportActions[chatReportID], - (reportAction) => reportAction && reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lodashGet(reportAction, 'originalMessage.linkedReportID') === iouReportID, - ); -} - -/** - * Get the iouReportID for a given report action. - * - * @param {Object} reportAction - * @returns {String} - */ -function getIOUReportIDFromReportActionPreview(reportAction) { - return lodashGet(reportAction, 'originalMessage.linkedReportID', ''); -} - -function isCreatedTaskReportAction(reportAction) { - return reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && _.has(reportAction.originalMessage, 'taskReportID'); -} - -/** - * A helper method to identify if the message is deleted or not. - * - * @param {Object} reportAction - * @returns {Boolean} - */ -function isMessageDeleted(reportAction) { - return lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false); -} - -/** - * Returns the number of money requests associated with a report preview - * - * @param {Object|null} reportPreviewAction - * @returns {Number} - */ -function getNumberOfMoneyRequests(reportPreviewAction) { - return lodashGet(reportPreviewAction, 'childMoneyRequestCount', 0); -} - -/** - * @param {*} reportAction - * @returns {Boolean} - */ -function isSplitBillAction(reportAction) { - return lodashGet(reportAction, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT; -} - -/** - * - * @param {*} reportAction - * @returns {Boolean} - */ -function isTaskAction(reportAction) { - const reportActionName = lodashGet(reportAction, 'actionName', ''); - return ( - reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED || - reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKCANCELLED || - reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED - ); -} - -/** - * @param {*} reportID - * @returns {[Object]} - */ -function getAllReportActions(reportID) { - return lodashGet(allReportActions, reportID, []); -} - -/** - * Check whether a report action is an attachment (a file, such as an image or a zip). - * - * @param {Object} reportAction report action - * @returns {Boolean} - */ -function isReportActionAttachment(reportAction) { - const message = _.first(lodashGet(reportAction, 'message', [{}])); - return _.has(reportAction, 'isAttachment') ? reportAction.isAttachment : isReportMessageAttachment(message); -} - -// eslint-disable-next-line rulesdir/no-negated-variables -function isNotifiableReportAction(reportAction) { - return reportAction && _.contains([CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT, CONST.REPORT.ACTIONS.TYPE.IOU, CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE], reportAction.actionName); -} - -export { - getSortedReportActions, - getLastVisibleAction, - getLastVisibleMessage, - getMostRecentIOURequestActionID, - extractLinksFromMessageHtml, - isCreatedAction, - isDeletedAction, - shouldReportActionBeVisible, - shouldReportActionBeVisibleAsLastAction, - isReportActionDeprecated, - isConsecutiveActionMadeByPreviousActor, - getSortedReportActionsForDisplay, - getLastClosedReportAction, - getLatestReportActionFromOnyxData, - isMoneyRequestAction, - isThreadParentMessage, - getLinkedTransactionID, - getMostRecentReportActionLastModified, - getReportPreviewAction, - isCreatedTaskReportAction, - getParentReportAction, - isTransactionThread, - isSentMoneyReportAction, - isDeletedParentAction, - isReversedTransaction, - isReportPreviewAction, - isModifiedExpenseAction, - getIOUReportIDFromReportActionPreview, - isMessageDeleted, - isWhisperAction, - isPendingRemove, - getReportAction, - getNumberOfMoneyRequests, - isSplitBillAction, - isTaskAction, - getAllReportActions, - isReportActionAttachment, - isNotifiableReportAction, -}; diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts new file mode 100644 index 000000000000..c795e5d1c3b1 --- /dev/null +++ b/src/libs/ReportActionsUtils.ts @@ -0,0 +1,647 @@ +import {isEqual, max} from 'date-fns'; +import _ from 'lodash'; +import lodashFindLast from 'lodash/findLast'; +import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx'; +import {ValueOf} from 'type-fest'; +import CONST from '../CONST'; +import ONYXKEYS from '../ONYXKEYS'; +import ReportAction, {ReportActions} from '../types/onyx/ReportAction'; +import Report from '../types/onyx/Report'; +import {ActionName} from '../types/onyx/OriginalMessage'; +import * as CollectionUtils from './CollectionUtils'; +import Log from './Log'; +import isReportMessageAttachment from './isReportMessageAttachment'; +import * as Environment from './Environment/Environment'; + +type LastVisibleMessage = { + lastMessageTranslationKey?: string; + lastMessageText: string; + lastMessageHtml?: string; +}; + +const allReports: OnyxCollection = {}; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.REPORT, + callback: (report, key) => { + if (!key || !report) { + return; + } + + const reportID = CollectionUtils.extractCollectionItemID(key); + allReports[reportID] = report; + }, +}); + +const allReportActions: OnyxCollection = {}; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.REPORT_ACTIONS, + callback: (actions, key) => { + if (!key || !actions) { + return; + } + + const reportID = CollectionUtils.extractCollectionItemID(key); + allReportActions[reportID] = actions; + }, +}); + +let isNetworkOffline = false; +Onyx.connect({ + key: ONYXKEYS.NETWORK, + callback: (val) => (isNetworkOffline = val?.isOffline ?? false), +}); + +let environmentURL: string; +Environment.getEnvironmentURL().then((url: string) => (environmentURL = url)); + +function isCreatedAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED; +} + +function isDeletedAction(reportAction: OnyxEntry): boolean { + // A deleted comment has either an empty array or an object with html field with empty string as value + const message = reportAction?.message ?? []; + return message.length === 0 || message[0]?.html === ''; +} + +function isDeletedParentAction(reportAction: OnyxEntry): boolean { + return (reportAction?.message?.[0]?.isDeletedParentAction ?? false) && (reportAction?.childVisibleActionCount ?? 0) > 0; +} + +function isReversedTransaction(reportAction: OnyxEntry) { + return (reportAction?.message?.[0].isReversedTransaction ?? false) && (reportAction?.childVisibleActionCount ?? 0) > 0; +} + +function isPendingRemove(reportAction: OnyxEntry): boolean { + return reportAction?.message?.[0]?.moderationDecision?.decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE; +} + +function isMoneyRequestAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU; +} + +function isReportPreviewAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW; +} + +function isModifiedExpenseAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE; +} + +function isWhisperAction(reportAction: OnyxEntry): boolean { + return (reportAction?.whisperedToAccountIDs ?? []).length > 0; +} + +/** + * Returns whether the comment is a thread parent message/the first message in a thread + */ +function isThreadParentMessage(reportAction: OnyxEntry, reportID: string): boolean { + const {childType, childVisibleActionCount = 0, childReportID} = reportAction ?? {}; + return childType === CONST.REPORT.TYPE.CHAT && (childVisibleActionCount > 0 || String(childReportID) === reportID); +} + +/** + * Returns the parentReportAction if the given report is a thread/task. + * + * @deprecated Use Onyx.connect() or withOnyx() instead + */ +function getParentReportAction(report: OnyxEntry, allReportActionsParam?: OnyxCollection): ReportAction | Record { + if (!report?.parentReportID || !report.parentReportActionID) { + return {}; + } + return (allReportActionsParam ?? allReportActions)?.[report.parentReportID]?.[report.parentReportActionID] ?? {}; +} + +/** + * Determines if the given report action is sent money report action by checking for 'pay' type and presence of IOUDetails object. + */ +function isSentMoneyReportAction(reportAction: OnyxEntry): boolean { + return ( + reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && reportAction?.originalMessage?.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && !!reportAction?.originalMessage?.IOUDetails + ); +} + +/** + * Returns whether the thread is a transaction thread, which is any thread with IOU parent + * report action from requesting money (type - create) or from sending money (type - pay with IOUDetails field) + */ +function isTransactionThread(parentReportAction: OnyxEntry): boolean { + return ( + parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && + (parentReportAction.originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE || + (parentReportAction.originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && !!parentReportAction.originalMessage.IOUDetails)) + ); +} + +/** + * Sort an array of reportActions by their created timestamp first, and reportActionID second + * This gives us a stable order even in the case of multiple reportActions created on the same millisecond + * + */ +function getSortedReportActions(reportActions: ReportAction[] | null, shouldSortInDescendingOrder = false): ReportAction[] { + if (!Array.isArray(reportActions)) { + throw new Error(`ReportActionsUtils.getSortedReportActions requires an array, received ${typeof reportActions}`); + } + + const invertedMultiplier = shouldSortInDescendingOrder ? -1 : 1; + + return reportActions?.filter(Boolean).sort((first, second) => { + // First sort by timestamp + if (first.created !== second.created) { + return (first.created < second.created ? -1 : 1) * invertedMultiplier; + } + + // Then by action type, ensuring that `CREATED` actions always come first if they have the same timestamp as another action type + if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED || second.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) && first.actionName !== second.actionName) { + return (first.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED ? -1 : 1) * invertedMultiplier; + } + // Ensure that `REPORTPREVIEW` actions always come after if they have the same timestamp as another action type + if ((first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW || second.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW) && first.actionName !== second.actionName) { + return (first.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW ? 1 : -1) * invertedMultiplier; + } + + // Then fallback on reportActionID as the final sorting criteria. It is a random number, + // but using this will ensure that the order of reportActions with the same created time and action type + // will be consistent across all users and devices + return (first.reportActionID < second.reportActionID ? -1 : 1) * invertedMultiplier; + }); +} + +/** + * Finds most recent IOU request action ID. + */ +function getMostRecentIOURequestActionID(reportActions: ReportAction[] | null): string | null { + if (!Array.isArray(reportActions)) { + return null; + } + const iouRequestTypes: Array> = [CONST.IOU.REPORT_ACTION_TYPE.CREATE, CONST.IOU.REPORT_ACTION_TYPE.SPLIT]; + const iouRequestActions = reportActions?.filter((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && iouRequestTypes.includes(action.originalMessage.type)) ?? []; + + if (iouRequestActions.length === 0) { + return null; + } + + const sortedReportActions = getSortedReportActions(iouRequestActions); + return sortedReportActions.at(-1)?.reportActionID ?? null; +} + +/** + * Returns array of links inside a given report action + */ +function extractLinksFromMessageHtml(reportAction: OnyxEntry): string[] { + const htmlContent = reportAction?.message?.[0]?.html; + + // Regex to get link in href prop inside of component + const regex = /]*?\s+)?href="([^"]*)"/gi; + + if (!htmlContent) { + return []; + } + + return [...htmlContent.matchAll(regex)].map((match) => match[1]); +} + +/** + * Returns the report action immediately before the specified index. + * @param reportActions - all actions + * @param actionIndex - index of the action + */ +function findPreviousAction(reportActions: ReportAction[] | null, actionIndex: number): OnyxEntry { + if (!reportActions) { + return null; + } + + for (let i = actionIndex + 1; i < reportActions.length; i++) { + // Find the next non-pending deletion report action, as the pending delete action means that it is not displayed in the UI, but still is in the report actions list. + // If we are offline, all actions are pending but shown in the UI, so we take the previous action, even if it is a delete. + if (isNetworkOffline || reportActions[i].pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) { + return reportActions[i]; + } + } + + return null; +} + +/** + * Returns true when the report action immediately before the specified index is a comment made by the same actor who who is leaving a comment in the action at the specified index. + * Also checks to ensure that the comment is not too old to be shown as a grouped comment. + * + * @param actionIndex - index of the comment item in state to check + */ +function isConsecutiveActionMadeByPreviousActor(reportActions: ReportAction[] | null, actionIndex: number): boolean { + const previousAction = findPreviousAction(reportActions, actionIndex); + const currentAction = reportActions?.[actionIndex]; + + // It's OK for there to be no previous action, and in that case, false will be returned + // so that the comment isn't grouped + if (!currentAction || !previousAction) { + return false; + } + + // Comments are only grouped if they happen within 5 minutes of each other + if (new Date(currentAction.created).getTime() - new Date(previousAction.created).getTime() > 300000) { + return false; + } + + // Do not group if previous action was a created action + if (previousAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { + return false; + } + + // Do not group if previous or current action was a renamed action + if (previousAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED || currentAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) { + return false; + } + + // Do not group if the delegate account ID is different + if (previousAction.delegateAccountID !== currentAction.delegateAccountID) { + return false; + } + + return currentAction.actorAccountID === previousAction.actorAccountID; +} + +/** + * Checks if a reportAction is deprecated. + */ +function isReportActionDeprecated(reportAction: OnyxEntry, key: string): boolean { + if (!reportAction) { + return true; + } + + // HACK ALERT: We're temporarily filtering out any reportActions keyed by sequenceNumber + // to prevent bugs during the migration from sequenceNumber -> reportActionID + if (String(reportAction.sequenceNumber) === key) { + Log.info('Front-end filtered out reportAction keyed by sequenceNumber!', false, reportAction); + return true; + } + + return false; +} + +const {POLICYCHANGELOG: policyChangelogTypes, ROOMCHANGELOG: roomChangeLogTypes, ...otherActionTypes} = CONST.REPORT.ACTIONS.TYPE; +const supportedActionTypes: ActionName[] = [...Object.values(otherActionTypes), ...Object.values(policyChangelogTypes), ...Object.values(roomChangeLogTypes)]; + +/** + * Checks if a reportAction is fit for display, meaning that it's not deprecated, is of a valid + * and supported type, it's not deleted and also not closed. + */ +function shouldReportActionBeVisible(reportAction: OnyxEntry, key: string): boolean { + if (!reportAction) { + return false; + } + + if (isReportActionDeprecated(reportAction, key)) { + return false; + } + + if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.TASKEDITED) { + return false; + } + + // Filter out any unsupported reportAction types + if (!supportedActionTypes.includes(reportAction.actionName)) { + return false; + } + + // Ignore closed action here since we're already displaying a footer that explains why the report was closed + if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED) { + return false; + } + + if (isPendingRemove(reportAction)) { + return false; + } + + // All other actions are displayed except thread parents, deleted, or non-pending actions + const isDeleted = isDeletedAction(reportAction); + const isPending = !!reportAction.pendingAction; + return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction); +} + +/** + * Checks if a reportAction is fit for display as report last action, meaning that + * it satisfies shouldReportActionBeVisible, it's not whisper action and not deleted. + */ +function shouldReportActionBeVisibleAsLastAction(reportAction: OnyxEntry): boolean { + if (!reportAction) { + return false; + } + + if (Object.keys(reportAction.errors ?? {}).length > 0) { + return false; + } + + // If a whisper action is the REPORTPREVIEW action, we are displaying it. + // If the action's message text is empty and it is not a deleted parent with visible child actions, hide it. Else, consider the action to be displayable. + return ( + shouldReportActionBeVisible(reportAction, reportAction.reportActionID) && + !(isWhisperAction(reportAction) && !isReportPreviewAction(reportAction) && !isMoneyRequestAction(reportAction)) && + !(isDeletedAction(reportAction) && !isDeletedParentAction(reportAction)) + ); +} + +/** + * For invite to room and remove from room policy change logs, report URLs are generated in the server, + * which includes a baseURL placeholder that's replaced in the client. + */ +function replaceBaseURL(reportAction: ReportAction): ReportAction { + if (!reportAction) { + return reportAction; + } + + if ( + !reportAction || + (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.REMOVE_FROM_ROOM) + ) { + return reportAction; + } + if (!reportAction.message) { + return reportAction; + } + const updatedReportAction = _.clone(reportAction); + if (!updatedReportAction.message) { + return updatedReportAction; + } + updatedReportAction.message[0].html = reportAction.message[0].html.replace('%baseURL', environmentURL); + return updatedReportAction; +} + +/** + */ +function getLastVisibleAction(reportID: string, actionsToMerge: ReportActions = {}): OnyxEntry { + const updatedActionsToMerge: ReportActions = {}; + if (actionsToMerge && Object.keys(actionsToMerge).length !== 0) { + Object.keys(actionsToMerge).forEach( + (actionToMergeID) => (updatedActionsToMerge[actionToMergeID] = {...allReportActions?.[reportID]?.[actionToMergeID], ...actionsToMerge[actionToMergeID]}), + ); + } + const actions = Object.values({ + ...allReportActions?.[reportID], + ...updatedActionsToMerge, + }); + const visibleActions = actions.filter((action) => shouldReportActionBeVisibleAsLastAction(action)); + + if (visibleActions.length === 0) { + return null; + } + const maxDate = max(visibleActions.map((action) => new Date(action.created))); + const maxAction = visibleActions.find((action) => isEqual(new Date(action.created), maxDate)); + return maxAction ?? null; +} + +function getLastVisibleMessage(reportID: string, actionsToMerge: ReportActions = {}): LastVisibleMessage { + const lastVisibleAction = getLastVisibleAction(reportID, actionsToMerge); + const message = lastVisibleAction?.message?.[0]; + + if (message && isReportMessageAttachment(message)) { + return { + lastMessageTranslationKey: CONST.TRANSLATION_KEYS.ATTACHMENT, + lastMessageText: CONST.ATTACHMENT_MESSAGE_TEXT, + lastMessageHtml: CONST.TRANSLATION_KEYS.ATTACHMENT, + }; + } + + if (isCreatedAction(lastVisibleAction)) { + return { + lastMessageText: '', + }; + } + + const messageText = message?.text ?? ''; + return { + lastMessageText: String(messageText).replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim(), + }; +} + +/** + * A helper method to filter out report actions keyed by sequenceNumbers. + */ +function filterOutDeprecatedReportActions(reportActions: ReportActions | null): ReportAction[] { + return Object.entries(reportActions ?? {}) + .filter(([key, reportAction]) => !isReportActionDeprecated(reportAction, key)) + .map((entry) => entry[1]); +} + +/** + * This method returns the report actions that are ready for display in the ReportActionsView. + * The report actions need to be sorted by created timestamp first, and reportActionID second + * to ensure they will always be displayed in the same order (in case multiple actions have the same timestamp). + * This is all handled with getSortedReportActions() which is used by several other methods to keep the code DRY. + */ +function getSortedReportActionsForDisplay(reportActions: ReportActions | null): ReportAction[] { + const filteredReportActions = Object.entries(reportActions ?? {}) + .filter(([key, reportAction]) => shouldReportActionBeVisible(reportAction, key)) + .map((entry) => entry[1]); + const baseURLAdjustedReportActions = filteredReportActions.map((reportAction) => replaceBaseURL(reportAction)); + return getSortedReportActions(baseURLAdjustedReportActions, true); +} + +/** + * In some cases, there can be multiple closed report actions in a chat report. + * This method returns the last closed report action so we can always show the correct archived report reason. + * Additionally, archived #admins and #announce do not have the closed report action so we will return null if none is found. + * + */ +function getLastClosedReportAction(reportActions: ReportActions | null): OnyxEntry { + // If closed report action is not present, return early + if (!Object.values(reportActions ?? {}).some((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED)) { + return null; + } + + const filteredReportActions = filterOutDeprecatedReportActions(reportActions); + const sortedReportActions = getSortedReportActions(filteredReportActions); + return lodashFindLast(sortedReportActions, (action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED) ?? null; +} + +/** + * @returns The latest report action in the `onyxData` or `null` if one couldn't be found + */ +function getLatestReportActionFromOnyxData(onyxData: OnyxUpdate[] | null): OnyxEntry { + const reportActionUpdate = onyxData?.find((onyxUpdate) => onyxUpdate.key.startsWith(ONYXKEYS.COLLECTION.REPORT_ACTIONS)); + + if (!reportActionUpdate) { + return null; + } + + const reportActions = Object.values((reportActionUpdate.value as ReportActions) ?? {}); + const sortedReportActions = getSortedReportActions(reportActions); + return sortedReportActions.at(-1) ?? null; +} + +/** + * Find the transaction associated with this reportAction, if one exists. + */ +function getLinkedTransactionID(reportID: string, reportActionID: string): string | null { + const reportAction = allReportActions?.[reportID]?.[reportActionID]; + if (!reportAction || reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU) { + return null; + } + return reportAction.originalMessage.IOUTransactionID ?? null; +} + +function getReportAction(reportID: string, reportActionID: string): OnyxEntry { + return allReportActions?.[reportID]?.[reportActionID] ?? null; +} + +function getMostRecentReportActionLastModified(): string { + // Start with the oldest date possible + let mostRecentReportActionLastModified = new Date(0).toISOString(); + + // Flatten all the actions + // Loop over them all to find the one that is the most recent + const flatReportActions = Object.values(allReportActions ?? {}) + .flatMap((actions) => (actions ? Object.values(actions) : [])) + .filter(Boolean); + flatReportActions.forEach((action) => { + // Pending actions should not be counted here as a user could create a comment or some other action while offline and the server might know about + // messages they have not seen yet. + if (action.pendingAction) { + return; + } + + const lastModified = action.lastModified ?? action.created; + + if (lastModified < mostRecentReportActionLastModified) { + return; + } + + mostRecentReportActionLastModified = lastModified; + }); + + // We might not have actions so we also look at the report objects to see if any have a lastVisibleActionLastModified that is more recent. We don't need to get + // any reports that have been updated before either a recently updated report or reportAction as we should be up to date on these + Object.values(allReports ?? {}).forEach((report) => { + const reportLastVisibleActionLastModified = report?.lastVisibleActionLastModified ?? report?.lastVisibleActionCreated; + if (!reportLastVisibleActionLastModified || reportLastVisibleActionLastModified < mostRecentReportActionLastModified) { + return; + } + + mostRecentReportActionLastModified = reportLastVisibleActionLastModified; + }); + + return mostRecentReportActionLastModified; +} + +/** + * @returns The report preview action or `null` if one couldn't be found + */ +function getReportPreviewAction(chatReportID: string, iouReportID: string): OnyxEntry { + return ( + Object.values(allReportActions?.[chatReportID] ?? {}).find( + (reportAction) => reportAction && reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && reportAction.originalMessage.linkedReportID === iouReportID, + ) ?? null + ); +} + +/** + * Get the iouReportID for a given report action. + */ +function getIOUReportIDFromReportActionPreview(reportAction: OnyxEntry): string { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW ? reportAction.originalMessage.linkedReportID : ''; +} + +function isCreatedTaskReportAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT && !!reportAction.originalMessage?.taskReportID; +} + +/** + * A helper method to identify if the message is deleted or not. + */ +function isMessageDeleted(reportAction: OnyxEntry): boolean { + return reportAction?.message?.[0]?.isDeletedParentAction ?? false; +} + +/** + * Returns the number of money requests associated with a report preview + */ +function getNumberOfMoneyRequests(reportPreviewAction: OnyxEntry): number { + return reportPreviewAction?.childMoneyRequestCount ?? 0; +} + +function isSplitBillAction(reportAction: OnyxEntry): boolean { + return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && reportAction.originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT; +} + +function isTaskAction(reportAction: OnyxEntry): boolean { + const reportActionName = reportAction?.actionName; + return ( + reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED || + reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKCANCELLED || + reportActionName === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED + ); +} + +function getAllReportActions(reportID: string): ReportActions { + return allReportActions?.[reportID] ?? {}; +} + +/** + * Check whether a report action is an attachment (a file, such as an image or a zip). + * + */ +function isReportActionAttachment(reportAction: OnyxEntry): boolean { + const message = reportAction?.message?.[0]; + + if (reportAction && 'isAttachment' in reportAction) { + return reportAction.isAttachment ?? false; + } + + if (message) { + return isReportMessageAttachment(message); + } + + return false; +} + +// eslint-disable-next-line rulesdir/no-negated-variables +function isNotifiableReportAction(reportAction: OnyxEntry): boolean { + if (!reportAction) { + return false; + } + + const actions: ActionName[] = [CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT, CONST.REPORT.ACTIONS.TYPE.IOU, CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE]; + + return actions.includes(reportAction.actionName); +} + +export { + extractLinksFromMessageHtml, + getAllReportActions, + getIOUReportIDFromReportActionPreview, + getLastClosedReportAction, + getLastVisibleAction, + getLastVisibleMessage, + getLatestReportActionFromOnyxData, + getLinkedTransactionID, + getMostRecentIOURequestActionID, + getMostRecentReportActionLastModified, + getNumberOfMoneyRequests, + getParentReportAction, + getReportAction, + getReportPreviewAction, + getSortedReportActions, + getSortedReportActionsForDisplay, + isConsecutiveActionMadeByPreviousActor, + isCreatedAction, + isCreatedTaskReportAction, + isDeletedAction, + isDeletedParentAction, + isMessageDeleted, + isModifiedExpenseAction, + isMoneyRequestAction, + isNotifiableReportAction, + isPendingRemove, + isReversedTransaction, + isReportActionAttachment, + isReportActionDeprecated, + isReportPreviewAction, + isSentMoneyReportAction, + isSplitBillAction, + isTaskAction, + isThreadParentMessage, + isTransactionThread, + isWhisperAction, + shouldReportActionBeVisible, + shouldReportActionBeVisibleAsLastAction, +}; diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 8c8f203f8f18..75ee6257caab 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1,6 +1,6 @@ /* eslint-disable rulesdir/prefer-underscore-method */ import _ from 'underscore'; -import {format, parseISO} from 'date-fns'; +import {format} from 'date-fns'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import lodashIntersection from 'lodash/intersection'; @@ -660,6 +660,17 @@ function hasSingleParticipant(report) { return report && report.participantAccountIDs && report.participantAccountIDs.length === 1; } +/** + * Checks whether all the transactions linked to the IOU report are of the Distance Request type + * + * @param {string|null} iouReportID + * @returns {boolean} + */ +function hasOnlyDistanceRequestTransactions(iouReportID) { + const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID); + return _.all(allTransactions, (transaction) => TransactionUtils.isDistanceRequest(transaction)); +} + /** * If the report is a thread and has a chat type set, it is a workspace chat. * @@ -1212,6 +1223,46 @@ function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantR }); } +/** + * For a deleted parent report action within a chat report, + * let us return the appropriate display message + * + * @param {Object} reportAction - The deleted report action of a chat report for which we need to return message. + * @return {String} + */ +function getDeletedParentActionMessageForChatReport(reportAction) { + // By default, let us display [Deleted message] + let deletedMessageText = Localize.translateLocal('parentReportAction.deletedMessage'); + if (ReportActionsUtils.isCreatedTaskReportAction(reportAction)) { + // For canceled task report, let us display [Deleted task] + deletedMessageText = Localize.translateLocal('parentReportAction.deletedTask'); + } + return deletedMessageText; +} + +/** + * Returns the last visible message for a given report after considering the given optimistic actions + * + * @param {String} reportID - the report for which last visible message has to be fetched + * @param {Object} [actionsToMerge] - the optimistic merge actions that needs to be considered while fetching last visible message + * @return {Object} + */ +function getLastVisibleMessage(reportID, actionsToMerge = {}) { + const report = getReport(reportID); + const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(reportID, actionsToMerge); + + // For Chat Report with deleted parent actions, let us fetch the correct message + if (ReportActionsUtils.isDeletedParentAction(lastVisibleAction) && isChatReport(report)) { + const lastMessageText = getDeletedParentActionMessageForChatReport(lastVisibleAction); + return { + lastMessageText, + }; + } + + // Fetch the last visible message for report represented by reportID and based on actions to merge. + return ReportActionsUtils.getLastVisibleMessage(reportID, actionsToMerge); +} + /** * Determines if a report has an IOU that is waiting for an action from the current user (either Pay or Add a credit bank account) * @@ -1283,7 +1334,7 @@ function hasNonReimbursableTransactions(iouReportID) { * @param {Object} allReportsDict * @returns {Number} */ -function getMoneyRequestTotal(report, allReportsDict = null) { +function getMoneyRequestReimbursableTotal(report, allReportsDict = null) { const allAvailableReports = allReportsDict || allReports; let moneyRequestReport; if (isMoneyRequestReport(report)) { @@ -1294,7 +1345,6 @@ function getMoneyRequestTotal(report, allReportsDict = null) { } if (moneyRequestReport) { const total = lodashGet(moneyRequestReport, 'total', 0); - if (total !== 0) { // There is a possibility that if the Expense report has a negative total. // This is because there are instances where you can get a credit back on your card, @@ -1305,6 +1355,45 @@ function getMoneyRequestTotal(report, allReportsDict = null) { return 0; } +/** + * @param {Object} report + * @param {Object} allReportsDict + * @returns {Object} + */ +function getMoneyRequestSpendBreakdown(report, allReportsDict = null) { + const allAvailableReports = allReportsDict || allReports; + let moneyRequestReport; + if (isMoneyRequestReport(report)) { + moneyRequestReport = report; + } + if (allAvailableReports && report.hasOutstandingIOU && report.iouReportID) { + moneyRequestReport = allAvailableReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`]; + } + if (moneyRequestReport) { + let nonReimbursableSpend = lodashGet(moneyRequestReport, 'nonReimbursableTotal', 0); + let reimbursableSpend = lodashGet(moneyRequestReport, 'total', 0); + + if (nonReimbursableSpend + reimbursableSpend !== 0) { + // There is a possibility that if the Expense report has a negative total. + // This is because there are instances where you can get a credit back on your card, + // or you enter a negative expense to β€œoffset” future expenses + nonReimbursableSpend = isExpenseReport(moneyRequestReport) ? nonReimbursableSpend * -1 : Math.abs(nonReimbursableSpend); + reimbursableSpend = isExpenseReport(moneyRequestReport) ? reimbursableSpend * -1 : Math.abs(reimbursableSpend); + const totalDisplaySpend = nonReimbursableSpend + reimbursableSpend; + return { + nonReimbursableSpend, + reimbursableSpend, + totalDisplaySpend, + }; + } + } + return { + nonReimbursableSpend: 0, + reimbursableSpend: 0, + totalDisplaySpend: 0, + }; +} + /** * Get the title for a policy expense chat which depends on the role of the policy member seeing this report * @@ -1337,33 +1426,34 @@ function getPolicyExpenseChatName(report, policy = undefined) { } /** - * Get the title for a IOU or expense chat which will be showing the payer and the amount + * Get the title for an IOU or expense chat which will be showing the payer and the amount * * @param {Object} report * @param {Object} [policy] * @returns {String} */ function getMoneyRequestReportName(report, policy = undefined) { - const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(report), report.currency); + const moneyRequestTotal = getMoneyRequestReimbursableTotal(report); + const formattedAmount = CurrencyUtils.convertToDisplayString(moneyRequestTotal, report.currency, hasOnlyDistanceRequestTransactions(report.reportID)); const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report.managerID); - const payerPaidAmountMesssage = Localize.translateLocal('iou.payerPaidAmount', { + const payerPaidAmountMessage = Localize.translateLocal('iou.payerPaidAmount', { payer: payerName, amount: formattedAmount, }); if (report.isWaitingOnBankAccount) { - return `${payerPaidAmountMesssage} β€’ ${Localize.translateLocal('iou.pending')}`; + return `${payerPaidAmountMessage} β€’ ${Localize.translateLocal('iou.pending')}`; } if (hasNonReimbursableTransactions(report.reportID)) { return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount}); } - if (report.hasOutstandingIOU) { + if (report.hasOutstandingIOU || moneyRequestTotal === 0) { return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount}); } - return payerPaidAmountMesssage; + return payerPaidAmountMessage; } /** @@ -1448,7 +1538,7 @@ function canEditReportAction(reportAction) { /** * Gets all transactions on an IOU report with a receipt * - * @param {Object|null} iouReportID + * @param {string|null} iouReportID * @returns {[Object]} */ function getTransactionsWithReceipts(iouReportID) { @@ -1514,7 +1604,7 @@ function getTransactionReportName(reportAction) { const {amount, currency, comment} = getTransactionDetails(transaction); return Localize.translateLocal(ReportActionsUtils.isSentMoneyReportAction(reportAction) ? 'iou.threadSentMoneyReportName' : 'iou.threadRequestReportName', { - formattedAmount: CurrencyUtils.convertToDisplayString(amount, currency), + formattedAmount: CurrencyUtils.convertToDisplayString(amount, currency, TransactionUtils.isDistanceRequest(transaction)), comment, }); } @@ -1542,12 +1632,15 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip if (_.isEmpty(linkedTransaction)) { return reportActionMessage; } + if (TransactionUtils.isReceiptBeingScanned(linkedTransaction)) { + return Localize.translateLocal('iou.receiptScanning'); + } const {amount, currency, comment} = getTransactionDetails(linkedTransaction); const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency); return Localize.translateLocal('iou.didSplitAmount', {formattedAmount, comment}); } - const totalAmount = getMoneyRequestTotal(report); + const totalAmount = getMoneyRequestReimbursableTotal(report); const payerName = isExpenseReport(report) ? getPolicyName(report) : getDisplayNameForParticipant(report.managerID, true); const formattedAmount = CurrencyUtils.convertToDisplayString(totalAmount, report.currency); @@ -1676,7 +1769,7 @@ function getModifiedExpenseMessage(reportAction) { const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created'); if (hasModifiedCreated) { // Take only the YYYY-MM-DD value as the original date includes timestamp - let formattedOldCreated = parseISO(reportActionOriginalMessage.oldCreated); + let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated); formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING); return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false); } @@ -2216,7 +2309,7 @@ function buildOptimisticExpenseReport(chatReportID, policyID, payeeAccountID, to function getIOUReportActionMessage(iouReportID, type, total, comment, currency, paymentType = '', isSettlingUp = false) { const amount = type === CONST.IOU.REPORT_ACTION_TYPE.PAY - ? CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(getReport(iouReportID)), currency) + ? CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(getReport(iouReportID)), currency) : CurrencyUtils.convertToDisplayString(total, currency); let paymentMethodMessage; @@ -3070,11 +3163,12 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas, if ( !report || !report.reportID || + !report.type || report.isHidden || (report.participantAccountIDs && report.participantAccountIDs.length === 0 && !isChatThread(report) && - !isPublicRoom(report) && + !isUserCreatedPolicyRoom(report) && !isArchivedRoom(report) && !isMoneyRequestReport(report) && !isTaskReport(report)) @@ -3432,19 +3526,23 @@ function getMoneyRequestOptions(report, reportParticipants) { // User created policy rooms and default rooms like #admins or #announce will always have the Split Bill option // unless there are no participants at all (e.g. #admins room for a policy with only 1 admin) // DM chats will have the Split Bill option only when there are at least 3 people in the chat. - // There is no Split Bill option for Workspace chats, IOU or Expense reports which are threads - if ((isChatRoom(report) && participants.length > 0) || (hasMultipleParticipants && !isPolicyExpenseChat(report) && !isMoneyRequestReport(report)) || isControlPolicyExpenseChat(report)) { - return [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]; + // There is no Split Bill option for IOU or Expense reports which are threads + if ( + (isChatRoom(report) && participants.length > 0) || + (hasMultipleParticipants && !isPolicyExpenseChat(report) && !isMoneyRequestReport(report)) || + (isControlPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) + ) { + return [CONST.IOU.TYPE.SPLIT]; } // DM chats that only have 2 people will see the Send / Request money options. // IOU and open or processing expense reports should show the Request option. // Workspace chats should only see the Request money option or Split option in case of Control policies return [ - ...(canRequestMoney(report, participants) ? [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST] : []), + ...(canRequestMoney(report, participants) ? [CONST.IOU.TYPE.REQUEST] : []), // Send money option should be visible only in DMs - ...(isChatReport(report) && !isPolicyExpenseChat(report) && hasSingleParticipantInReport ? [CONST.IOU.MONEY_REQUEST_TYPE.SEND] : []), + ...(isChatReport(report) && !isPolicyExpenseChat(report) && hasSingleParticipantInReport ? [CONST.IOU.TYPE.SEND] : []), ]; } @@ -3589,7 +3687,8 @@ function shouldDisableWriteActions(report) { * @returns {String} */ function getOriginalReportID(reportID, reportAction) { - return isThreadFirstChat(reportAction, reportID) ? lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, 'parentReportID']) : reportID; + const currentReportAction = ReportActionsUtils.getReportAction(reportID, reportAction.reportActionID); + return isThreadFirstChat(reportAction, reportID) && _.isEmpty(currentReportAction) ? lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, 'parentReportID']) : reportID; } /** @@ -3792,29 +3891,6 @@ function getParticipantsIDs(report) { return participants; } -/** - * Get the last 3 transactions with receipts of an IOU report that will be displayed on the report preview - * - * @param {Object} reportPreviewAction - * @returns {Object} - */ -function getReportPreviewDisplayTransactions(reportPreviewAction) { - const transactionIDs = lodashGet(reportPreviewAction, ['childRecentReceiptTransactionIDs']); - return _.reduce( - _.keys(transactionIDs), - (transactions, transactionID) => { - if (transactionIDs[transactionID] !== null) { - const transaction = TransactionUtils.getTransaction(transactionID); - if (TransactionUtils.hasReceipt(transaction)) { - transactions.push(transaction); - } - } - return transactions; - }, - [], - ); -} - /** * Return iou report action display message * @@ -3828,7 +3904,7 @@ function getIOUReportActionDisplayMessage(reportAction) { const {amount, currency, IOUReportID} = originalMessage; const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency); const iouReport = getReport(IOUReportID); - const payerName = isExpenseReport(iouReport) ? getPolicyName(iouReport) : getDisplayNameForParticipant(iouReport.managerID); + const payerName = isExpenseReport(iouReport) ? getPolicyName(iouReport) : getDisplayNameForParticipant(iouReport.managerID, true); let translationKey; switch (originalMessage.paymentType) { case CONST.IOU.PAYMENT_TYPE.ELSEWHERE: @@ -3863,6 +3939,14 @@ function isReportDraft(report) { return isExpenseReport(report) && lodashGet(report, 'stateNum') === CONST.REPORT.STATE_NUM.OPEN && lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.OPEN; } +/** + * @param {Object} report + * @returns {Boolean} + */ +function shouldUseFullTitleToDisplay(report) { + return isMoneyRequestReport(report) || isPolicyExpenseChat(report) || isChatRoom(report) || isChatThread(report) || isTaskReport(report); +} + export { getReportParticipantsTitle, isReportMessageAttachment, @@ -3895,7 +3979,8 @@ export { hasExpensifyGuidesEmails, isWaitingForIOUActionFromCurrentUser, isIOUOwnedByCurrentUser, - getMoneyRequestTotal, + getMoneyRequestReimbursableTotal, + getMoneyRequestSpendBreakdown, canShowReportRecipientLocalTime, formatReportLastMessageText, chatIncludesConcierge, @@ -3910,6 +3995,8 @@ export { getReport, getReportIDFromLink, getRouteFromLink, + getDeletedParentActionMessageForChatReport, + getLastVisibleMessage, navigateToDetailsPage, generateReportID, hasReportNameError, @@ -4002,11 +4089,13 @@ export { canEditMoneyRequest, buildTransactionThread, areAllRequestsBeingSmartScanned, - getReportPreviewDisplayTransactions, getTransactionsWithReceipts, + hasOnlyDistanceRequestTransactions, hasNonReimbursableTransactions, hasMissingSmartscanFields, getIOUReportActionDisplayMessage, isWaitingForTaskCompleteFromAssignee, isReportDraft, + shouldUseFullTitleToDisplay, + parseReportRouteParams, }; diff --git a/src/libs/Request.ts b/src/libs/Request.ts index 903e70358da9..9c4af4aa7e18 100644 --- a/src/libs/Request.ts +++ b/src/libs/Request.ts @@ -3,24 +3,24 @@ import enhanceParameters from './Network/enhanceParameters'; import * as NetworkStore from './Network/NetworkStore'; import Request from '../types/onyx/Request'; import Response from '../types/onyx/Response'; - -type Middleware = (response: Promise, request: Request, isFromSequentialQueue: boolean) => Promise; +import Middleware from './Middleware/types'; let middlewares: Middleware[] = []; -function makeXHR(request: Request): Promise { +function makeXHR(request: Request): Promise { const finalParameters = enhanceParameters(request.command, request?.data ?? {}); - return NetworkStore.hasReadRequiredDataFromStorage().then(() => { + return NetworkStore.hasReadRequiredDataFromStorage().then((): Promise => { // If we're using the Supportal token and this is not a Supportal request // let's just return a promise that will resolve itself. if (NetworkStore.getSupportAuthToken() && !NetworkStore.isSupportRequest(request.command)) { return new Promise((resolve) => resolve()); } - return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure); - }) as Promise; + + return HttpUtils.xhr(request.command, finalParameters, request.type, request.shouldUseSecure) as Promise; + }); } -function processWithMiddleware(request: Request, isFromSequentialQueue = false): Promise { +function processWithMiddleware(request: Request, isFromSequentialQueue = false): Promise { return middlewares.reduce((last, middleware) => middleware(last, request, isFromSequentialQueue), makeXHR(request)); } diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js index 7a32db660021..caa8fb384e56 100644 --- a/src/libs/SidebarUtils.js +++ b/src/libs/SidebarUtils.js @@ -158,7 +158,7 @@ function getOrderedReportIDs(currentReportId, allReportsDict, betas, policies, p report.displayName = ReportUtils.getReportName(report); // eslint-disable-next-line no-param-reassign - report.iouReportAmount = ReportUtils.getMoneyRequestTotal(report, allReportsDict); + report.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(report, allReportsDict); }); // The LHN is split into five distinct groups, and each group is sorted a little differently. The groups will ALWAYS be in this order: @@ -347,17 +347,45 @@ function getOptionData(report, reportActions, personalDetails, preferredLocale, if ((result.isChatRoom || result.isPolicyExpenseChat || result.isThread || result.isTaskReport) && !result.isArchivedRoom) { const lastAction = visibleReportActionItems[report.reportID]; - if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.RENAMED) { + if (lastAction && lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) { const newName = lodashGet(lastAction, 'originalMessage.newName', ''); result.alternateText = Localize.translate(preferredLocale, 'newRoomPage.roomRenamedTo', {newName}); - } else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED) { + } else if (lastAction && lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.TASKREOPENED) { result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.reopened')}`; - } else if (lodashGet(lastAction, 'actionName', '') === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED) { + } else if (lastAction && lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED) { result.alternateText = `${Localize.translate(preferredLocale, 'task.messages.completed')}`; - } else if (lodashGet(lastAction, 'actionName', '') !== CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lastActorDisplayName && lastMessageTextFromReport) { + } else if ( + lastAction && + _.includes( + [ + CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM, + CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.REMOVE_FROM_ROOM, + CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM, + CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.REMOVE_FROM_ROOM, + ], + lastAction.actionName, + ) + ) { + const targetAccountIDs = lodashGet(lastAction, 'originalMessage.targetAccountIDs', []); + const verb = + lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM + ? 'invited' + : 'removed'; + const users = targetAccountIDs.length > 1 ? 'users' : 'user'; + result.alternateText = `${verb} ${targetAccountIDs.length} ${users}`; + + const roomName = lodashGet(lastAction, 'originalMessage.roomName', ''); + if (roomName) { + const preposition = + lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || lastAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM + ? ' to' + : ' from'; + result.alternateText += `${preposition} ${roomName}`; + } + } else if (lastAction && lastAction.actionName !== CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && lastActorDisplayName && lastMessageTextFromReport) { result.alternateText = `${lastActorDisplayName}: ${lastMessageText}`; } else { - result.alternateText = lastMessageTextFromReport.length > 0 ? lastMessageText : Localize.translate(preferredLocale, 'report.noActivityYet'); + result.alternateText = lastAction && lastMessageTextFromReport.length > 0 ? lastMessageText : Localize.translate(preferredLocale, 'report.noActivityYet'); } } else { if (!lastMessageText) { @@ -384,7 +412,7 @@ function getOptionData(report, reportActions, personalDetails, preferredLocale, } result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result); - result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result); + result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result); if (!hasMultipleParticipants) { result.accountID = personalDetail.accountID; diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index 393de4e0d6e3..44f8094ca13d 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -1,12 +1,12 @@ import Onyx, {OnyxCollection} from 'react-native-onyx'; -import {format, parseISO, isValid} from 'date-fns'; +import {format, isValid} from 'date-fns'; import CONST from '../CONST'; import ONYXKEYS from '../ONYXKEYS'; import DateUtils from './DateUtils'; import {isExpensifyCard} from './CardUtils'; import * as NumberUtils from './NumberUtils'; import {RecentWaypoint, ReportAction, Transaction} from '../types/onyx'; -import {Receipt, Comment, WaypointCollection} from '../types/onyx/Transaction'; +import {Receipt, Comment, WaypointCollection, Waypoint} from '../types/onyx/Transaction'; type AdditionalTransactionChanges = {comment?: string; waypoints?: WaypointCollection}; @@ -76,11 +76,18 @@ function buildOptimisticTransaction( }; } +/** + * Check if the transaction has an Ereceipt + */ +function hasEReceipt(transaction: Transaction | undefined | null): boolean { + return !!transaction?.hasEReceipt; +} + function hasReceipt(transaction: Transaction | undefined | null): boolean { - return !!transaction?.receipt?.state; + return !!transaction?.receipt?.state || hasEReceipt(transaction); } -function areRequiredFieldsEmpty(transaction: Transaction): boolean { +function isMerchantMissing(transaction: Transaction) { const isMerchantEmpty = transaction.merchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === ''; @@ -90,10 +97,19 @@ function areRequiredFieldsEmpty(transaction: Transaction): boolean { transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.modifiedMerchant === ''; - const isModifiedAmountEmpty = !transaction.modifiedAmount || transaction.modifiedAmount === 0; - const isModifiedCreatedEmpty = !transaction.modifiedCreated || transaction.modifiedCreated === ''; + return isMerchantEmpty && isModifiedMerchantEmpty; +} + +function isAmountMissing(transaction: Transaction) { + return transaction.amount === 0 && (!transaction.modifiedAmount || transaction.modifiedAmount === 0); +} - return (isModifiedMerchantEmpty && isMerchantEmpty) || (isModifiedAmountEmpty && transaction.amount === 0) || (isModifiedCreatedEmpty && transaction.created === ''); +function isCreatedMissing(transaction: Transaction) { + return transaction.created === '' && (!transaction.created || transaction.modifiedCreated === ''); +} + +function areRequiredFieldsEmpty(transaction: Transaction): boolean { + return isMerchantMissing(transaction) || isAmountMissing(transaction) || isCreatedMissing(transaction); } /** @@ -294,7 +310,7 @@ function getTag(transaction: Transaction): string { */ function getCreated(transaction: Transaction, dateFormat: string = CONST.DATE.FNS_FORMAT_STRING): string { const created = transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || ''; - const createdDate = parseISO(created); + const createdDate = new Date(created); if (isValid(createdDate)) { return format(createdDate, dateFormat); } @@ -356,13 +372,6 @@ function hasRoute(transaction: Transaction): boolean { return !!transaction?.routes?.route0?.geometry?.coordinates; } -/** - * Check if the transaction has an Ereceipt - */ -function hasEreceipt(transaction: Transaction): boolean { - return !!transaction?.hasEReceipt; -} - /** * Get the transactions related to a report preview with receipts * Get the details linked to the IOU reportAction @@ -390,7 +399,7 @@ function getAllReportTransactions(reportID?: string): Transaction[] { /** * Checks if a waypoint has a valid address */ -function waypointHasValidAddress(waypoint: RecentWaypoint | null): boolean { +function waypointHasValidAddress(waypoint: RecentWaypoint | Waypoint): boolean { return !!waypoint?.address?.trim(); } @@ -405,7 +414,9 @@ function getWaypointIndex(key: string): number { * Filters the waypoints which are valid and returns those */ function getValidWaypoints(waypoints: WaypointCollection, reArrangeIndexes = false): WaypointCollection { - const sortedIndexes = Object.keys(waypoints).map(getWaypointIndex).sort(); + const sortedIndexes = Object.keys(waypoints) + .map(getWaypointIndex) + .sort((a, b) => a - b); const waypointValues = sortedIndexes.map((index) => waypoints[`waypoint${index}`]); // Ensure the number of waypoints is between 2 and 25 if (waypointValues.length < 2 || waypointValues.length > 25) { @@ -414,7 +425,7 @@ function getValidWaypoints(waypoints: WaypointCollection, reArrangeIndexes = fal let lastWaypointIndex = -1; - return waypointValues.reduce((acc, currentWaypoint, index) => { + return waypointValues.reduce((acc, currentWaypoint, index) => { const previousWaypoint = waypointValues[lastWaypointIndex]; // Check if the waypoint has a valid address @@ -463,7 +474,7 @@ export { getLinkedTransaction, getAllReportTransactions, hasReceipt, - hasEreceipt, + hasEReceipt, hasRoute, isReceiptBeingScanned, getValidWaypoints, @@ -472,6 +483,9 @@ export { isPending, isPosted, getWaypoints, + isAmountMissing, + isMerchantMissing, + isCreatedMissing, areRequiredFieldsEmpty, hasMissingSmartscanFields, getWaypointIndex, diff --git a/src/libs/UpdateMultilineInputRange/index.ios.js b/src/libs/UpdateMultilineInputRange/index.ios.js index 85ed529a33bc..4c10f768a2a2 100644 --- a/src/libs/UpdateMultilineInputRange/index.ios.js +++ b/src/libs/UpdateMultilineInputRange/index.ios.js @@ -8,8 +8,9 @@ * See https://github.com/Expensify/App/issues/20836 for more details. * * @param {Object} input the input element + * @param {boolean} shouldAutoFocus */ -export default function updateMultilineInputRange(input) { +export default function updateMultilineInputRange(input, shouldAutoFocus = true) { if (!input) { return; } @@ -19,5 +20,7 @@ export default function updateMultilineInputRange(input) { * Issue: does not scroll multiline input when text exceeds the maximum number of lines * For more details: https://github.com/Expensify/App/pull/27702#issuecomment-1728651132 */ - input.focus(); + if (shouldAutoFocus) { + input.focus(); + } } diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js index 179d30dc611d..66fb1889be21 100644 --- a/src/libs/UpdateMultilineInputRange/index.js +++ b/src/libs/UpdateMultilineInputRange/index.js @@ -8,8 +8,10 @@ * See https://github.com/Expensify/App/issues/20836 for more details. * * @param {Object} input the input element + * @param {boolean} shouldAutoFocus */ -export default function updateMultilineInputRange(input) { +// eslint-disable-next-line no-unused-vars +export default function updateMultilineInputRange(input, shouldAutoFocus = true) { if (!input) { return; } diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index a1d64154906c..75520d483f98 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -350,6 +350,40 @@ function createWorkspaceAndNavigateToIt(policyOwnerEmail = '', makeMeAdmin = fal .then(endSignOnTransition); } +/** + * Create a new draft workspace and navigate to it + * + * @param {String} [policyOwnerEmail] Optional, the email of the account to make the owner of the policy + * @param {String} [policyName] Optional, custom policy name we will use for created workspace + * @param {Boolean} [transitionFromOldDot] Optional, if the user is transitioning from old dot + */ +function createWorkspaceWithPolicyDraftAndNavigateToIt(policyOwnerEmail = '', policyName = '', transitionFromOldDot = false) { + const policyID = Policy.generatePolicyID(); + Policy.createDraftInitialWorkspace(policyOwnerEmail, policyName, policyID); + + Navigation.isNavigationReady() + .then(() => { + if (transitionFromOldDot) { + // We must call goBack() to remove the /transition route from history + Navigation.goBack(ROUTES.HOME); + } + Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID)); + }) + .then(endSignOnTransition); +} + +/** + * Create a new workspace and delete the draft + * + * @param {String} [policyID] the ID of the policy to use + * @param {String} [policyName] custom policy name we will use for created workspace + * @param {String} [policyOwnerEmail] Optional, the email of the account to make the owner of the policy + * @param {Boolean} [makeMeAdmin] Optional, leave the calling account as an admin on the policy + */ +function savePolicyDraftByNewWorkspace(policyID, policyName, policyOwnerEmail = '', makeMeAdmin = false) { + Policy.createWorkspace(policyOwnerEmail, makeMeAdmin, policyName, policyID); +} + /** * This action runs when the Navigator is ready and the current route changes * @@ -389,9 +423,6 @@ function setUpPoliciesAndNavigate(session, shouldNavigateToAdminChat) { // Sign out the current user if we're transitioning with a different user const isTransitioning = Str.startsWith(url.pathname, Str.normalizeUrl(ROUTES.TRANSITION_BETWEEN_APPS)); - if (isLoggingInAsNewUser && isTransitioning) { - Session.signOut(); - } const shouldCreateFreePolicy = !isLoggingInAsNewUser && isTransitioning && exitTo === ROUTES.WORKSPACE_NEW; if (shouldCreateFreePolicy) { @@ -527,4 +558,6 @@ export { createWorkspaceAndNavigateToIt, getMissingOnyxUpdates, finalReconnectAppAfterActivatingReliableUpdates, + savePolicyDraftByNewWorkspace, + createWorkspaceWithPolicyDraftAndNavigateToIt, }; diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.ts similarity index 54% rename from src/libs/actions/BankAccounts.js rename to src/libs/actions/BankAccounts.ts index 4d3c880b5983..bf4f170f1ba7 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.ts @@ -7,6 +7,10 @@ import * as PlaidDataProps from '../../pages/ReimbursementAccount/plaidDataPropT import Navigation from '../Navigation/Navigation'; import ROUTES from '../../ROUTES'; import * as ReimbursementAccount from './ReimbursementAccount'; +import type PlaidBankAccount from '../../types/onyx/PlaidBankAccount'; +import type {ACHContractStepProps, BankAccountStepProps, CompanyStepProps, OnfidoData, ReimbursementAccountProps, RequestorStepProps} from '../../types/onyx/ReimbursementAccountDraft'; +import type {OnyxData} from '../../types/onyx/Request'; +import type {BankAccountStep, BankAccountSubStep} from '../../types/onyx/ReimbursementAccount'; export { goToWithdrawalAccountSetupStep, @@ -23,7 +27,13 @@ export { export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid'; export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet'; -function clearPlaid() { +type BankAccountCompanyInformation = BankAccountStepProps & CompanyStepProps & ReimbursementAccountProps; + +type ReimbursementAccountStep = BankAccountStep | ''; + +type ReimbursementAccountSubStep = BankAccountSubStep | ''; + +function clearPlaid(): Promise { Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, ''); return Onyx.set(ONYXKEYS.PLAID_DATA, PlaidDataProps.plaidDataDefaultProps); @@ -35,9 +45,8 @@ function openPlaidView() { /** * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished. - * @param {String} exitReportID */ -function openPersonalBankAccountSetupView(exitReportID) { +function openPersonalBankAccountSetupView(exitReportID: string) { clearPlaid().then(() => { if (exitReportID) { Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID}); @@ -46,6 +55,13 @@ function openPersonalBankAccountSetupView(exitReportID) { }); } +/** + * Whether after adding a bank account we should continue with the KYC flow. If so, we must specify the fallback route. + */ +function setPersonalBankAccountContinueKYCOnSuccess(onSuccessFallbackRoute: string) { + Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {onSuccessFallbackRoute}); +} + function clearPersonalBankAccount() { clearPlaid(); Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {}); @@ -57,10 +73,8 @@ function clearOnfidoToken() { /** * Helper method to build the Onyx data required during setup of a Verified Business Bank Account - * @param {String | undefined} currentStep The name of the bank account setup step for which we will update the draft value when we receive the response from the API. - * @returns {Object} */ -function getVBBADataForOnyx(currentStep = undefined) { +function getVBBADataForOnyx(currentStep?: BankAccountStep): OnyxData { return { optimisticData: [ { @@ -103,14 +117,20 @@ function getVBBADataForOnyx(currentStep = undefined) { /** * Submit Bank Account step with Plaid data so php can perform some checks. - * - * @param {Number} bankAccountID - * @param {Object} selectedPlaidBankAccount */ -function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) { +function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAccount: PlaidBankAccount) { const commandName = 'ConnectBankAccountWithPlaid'; - const parameters = { + type ConnectBankAccountWithPlaidParams = { + bankAccountID: number; + routingNumber: string; + accountNumber: string; + bank?: string; + plaidAccountID: string; + plaidAccessToken: string; + }; + + const parameters: ConnectBankAccountWithPlaidParams = { bankAccountID, routingNumber: selectedPlaidBankAccount.routingNumber, accountNumber: selectedPlaidBankAccount.accountNumber, @@ -125,13 +145,23 @@ function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) { /** * Adds a bank account via Plaid * - * @param {Object} account * @TODO offline pattern for this command will have to be added later once the pattern B design doc is complete */ -function addPersonalBankAccount(account) { +function addPersonalBankAccount(account: PlaidBankAccount) { const commandName = 'AddPersonalBankAccount'; - const parameters = { + type AddPersonalBankAccountParams = { + addressName: string; + routingNumber: string; + accountNumber: string; + isSavings: boolean; + setupType: string; + bank?: string; + plaidAccountID: string; + plaidAccessToken: string; + }; + + const parameters: AddPersonalBankAccountParams = { addressName: account.addressName, routingNumber: account.routingNumber, accountNumber: account.accountNumber, @@ -142,7 +172,7 @@ function addPersonalBankAccount(account) { plaidAccessToken: account.plaidAccessToken, }; - const onyxData = { + const onyxData: OnyxData = { optimisticData: [ { onyxMethod: Onyx.METHOD.MERGE, @@ -180,107 +210,94 @@ function addPersonalBankAccount(account) { API.write(commandName, parameters, onyxData); } -function deletePaymentBankAccount(bankAccountID) { - API.write( - 'DeletePaymentBankAccount', - { - bankAccountID, - }, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`, - value: {[bankAccountID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}}, - }, - ], - - // Sometimes pusher updates aren't received when we close the App while still offline, - // so we are setting the bankAccount to null here to ensure that it gets cleared out once we come back online. - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`, - value: {[bankAccountID]: null}, - }, - ], - }, - ); +function deletePaymentBankAccount(bankAccountID: number) { + type DeletePaymentBankAccountParams = {bankAccountID: number}; + + const parameters: DeletePaymentBankAccountParams = {bankAccountID}; + + const onyxData: OnyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`, + value: {[bankAccountID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}}, + }, + ], + + // Sometimes pusher updates aren't received when we close the App while still offline, + // so we are setting the bankAccount to null here to ensure that it gets cleared out once we come back online. + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`, + value: {[bankAccountID]: null}, + }, + ], + }; + + API.write('DeletePaymentBankAccount', parameters, onyxData); } /** * Update the user's personal information on the bank account in database. * * This action is called by the requestor step in the Verified Bank Account flow - * - * @param {Object} params - * - * @param {String} [params.dob] - * @param {String} [params.firstName] - * @param {String} [params.lastName] - * @param {String} [params.requestorAddressStreet] - * @param {String} [params.requestorAddressCity] - * @param {String} [params.requestorAddressState] - * @param {String} [params.requestorAddressZipCode] - * @param {String} [params.ssnLast4] - * @param {String} [params.isControllingOfficer] - * @param {Object} [params.onfidoData] - * @param {Boolean} [params.isOnfidoSetupComplete] */ -function updatePersonalInformationForBankAccount(params) { +function updatePersonalInformationForBankAccount(params: RequestorStepProps) { API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR)); } -/** - * @param {Number} bankAccountID - * @param {String} validateCode - */ -function validateBankAccount(bankAccountID, validateCode) { - API.write( - 'ValidateBankAccountWithTransactions', - { - bankAccountID, - validateCode, - }, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: true, - errors: null, - }, +function validateBankAccount(bankAccountID: number, validateCode: string) { + type ValidateBankAccountWithTransactionsParams = { + bankAccountID: number; + validateCode: string; + }; + + const parameters: ValidateBankAccountWithTransactionsParams = { + bankAccountID, + validateCode, + }; + + const onyxData: OnyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: true, + errors: null, }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: false, }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: false, }, - ], - }, - ); + }, + ], + }; + + API.write('ValidateBankAccountWithTransactions', parameters, onyxData); } function clearReimbursementAccount() { Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, null); } -function openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep) { - const onyxData = { +function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subStep: ReimbursementAccountSubStep, localCurrentStep: ReimbursementAccountStep) { + const onyxData: OnyxData = { optimisticData: [ { onyxMethod: Onyx.METHOD.MERGE, @@ -310,122 +327,104 @@ function openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep) { ], }; - const param = { + type OpenReimbursementAccountPageParams = { + stepToOpen: ReimbursementAccountStep; + subStep: ReimbursementAccountSubStep; + localCurrentStep: ReimbursementAccountStep; + }; + + const parameters: OpenReimbursementAccountPageParams = { stepToOpen, subStep, localCurrentStep, }; - return API.read('OpenReimbursementAccountPage', param, onyxData); + return API.read('OpenReimbursementAccountPage', parameters, onyxData); } /** * Updates the bank account in the database with the company step data - * - * @param {Object} bankAccount - * @param {Number} [bankAccount.bankAccountID] - * - * Fields from BankAccount step - * @param {String} [bankAccount.routingNumber] - * @param {String} [bankAccount.accountNumber] - * @param {String} [bankAccount.bankName] - * @param {String} [bankAccount.plaidAccountID] - * @param {String} [bankAccount.plaidAccessToken] - * @param {Boolean} [bankAccount.isSavings] - * - * Fields from Company step - * @param {String} [bankAccount.companyName] - * @param {String} [bankAccount.addressStreet] - * @param {String} [bankAccount.addressCity] - * @param {String} [bankAccount.addressState] - * @param {String} [bankAccount.addressZipCode] - * @param {String} [bankAccount.companyPhone] - * @param {String} [bankAccount.website] - * @param {String} [bankAccount.companyTaxID] - * @param {String} [bankAccount.incorporationType] - * @param {String} [bankAccount.incorporationState] - * @param {String} [bankAccount.incorporationDate] - * @param {Boolean} [bankAccount.hasNoConnectionToCannabis] - * @param {String} policyID */ -function updateCompanyInformationForBankAccount(bankAccount, policyID) { - API.write('UpdateCompanyInformationForBankAccount', {...bankAccount, policyID}, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY)); +function updateCompanyInformationForBankAccount(bankAccount: BankAccountCompanyInformation, policyID: string) { + type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {policyID: string}; + + const parameters: UpdateCompanyInformationForBankAccountParams = {...bankAccount, policyID}; + + API.write('UpdateCompanyInformationForBankAccount', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY)); } /** * Add beneficial owners for the bank account, accept the ACH terms and conditions and verify the accuracy of the information provided - * - * @param {Object} params - * - * // ACH Contract Step - * @param {Boolean} [params.ownsMoreThan25Percent] - * @param {Boolean} [params.hasOtherBeneficialOwners] - * @param {Boolean} [params.acceptTermsAndConditions] - * @param {Boolean} [params.certifyTrueInformation] - * @param {String} [params.beneficialOwners] */ -function updateBeneficialOwnersForBankAccount(params) { - API.write('UpdateBeneficialOwnersForBankAccount', {...params}, getVBBADataForOnyx()); +function updateBeneficialOwnersForBankAccount(params: ACHContractStepProps) { + API.write('UpdateBeneficialOwnersForBankAccount', params, getVBBADataForOnyx()); } /** * Create the bank account with manually entered data. * - * @param {number} [bankAccountID] - * @param {String} [accountNumber] - * @param {String} [routingNumber] - * @param {String} [plaidMask] - * */ -function connectBankAccountManually(bankAccountID, accountNumber, routingNumber, plaidMask) { - API.write( - 'ConnectBankAccountManually', - { - bankAccountID, - accountNumber, - routingNumber, - plaidMask, - }, - getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT), - ); +function connectBankAccountManually(bankAccountID: number, accountNumber?: string, routingNumber?: string, plaidMask?: string) { + type ConnectBankAccountManuallyParams = { + bankAccountID: number; + accountNumber?: string; + routingNumber?: string; + plaidMask?: string; + }; + + const parameters: ConnectBankAccountManuallyParams = { + bankAccountID, + accountNumber, + routingNumber, + plaidMask, + }; + + API.write('ConnectBankAccountManually', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT)); } /** * Verify the user's identity via Onfido - * - * @param {Number} bankAccountID - * @param {Object} onfidoData */ -function verifyIdentityForBankAccount(bankAccountID, onfidoData) { - API.write( - 'VerifyIdentityForBankAccount', - { - bankAccountID, - onfidoData: JSON.stringify(onfidoData), - }, - getVBBADataForOnyx(), - ); +function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoData) { + type VerifyIdentityForBankAccountParams = { + bankAccountID: number; + onfidoData: string; + }; + + const parameters: VerifyIdentityForBankAccountParams = { + bankAccountID, + onfidoData: JSON.stringify(onfidoData), + }; + + API.write('VerifyIdentityForBankAccount', parameters, getVBBADataForOnyx()); } function openWorkspaceView() { - API.read('OpenWorkspaceView'); + API.read('OpenWorkspaceView', {}, {}); } -function handlePlaidError(bankAccountID, error, error_description, plaidRequestID) { - API.write('BankAccount_HandlePlaidError', { +function handlePlaidError(bankAccountID: number, error: string, errorDescription: string, plaidRequestID: string) { + type BankAccountHandlePlaidErrorParams = { + bankAccountID: number; + error: string; + errorDescription: string; + plaidRequestID: string; + }; + + const parameters: BankAccountHandlePlaidErrorParams = { bankAccountID, error, - error_description, + errorDescription, plaidRequestID, - }); + }; + + API.write('BankAccount_HandlePlaidError', parameters); } /** * Set the reimbursement account loading so that it happens right away, instead of when the API command is processed. - * - * @param {Boolean} isLoading */ -function setReimbursementAccountLoading(isLoading) { +function setReimbursementAccountLoading(isLoading: boolean) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isLoading}); } @@ -439,6 +438,7 @@ export { connectBankAccountWithPlaid, deletePaymentBankAccount, handlePlaidError, + setPersonalBankAccountContinueKYCOnSuccess, openPersonalBankAccountSetupView, clearReimbursementAccount, openReimbursementAccountPage, diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js index a060c1bc67fa..92b23e2103ee 100644 --- a/src/libs/actions/Card.js +++ b/src/libs/actions/Card.js @@ -43,6 +43,51 @@ function reportVirtualExpensifyCardFraud(cardID) { ); } +/** + * Call the API to deactivate the card and request a new one + * @param {String} cardId - id of the card that is going to be replaced + * @param {String} reason - reason for replacement ('damaged' | 'stolen') + */ +function requestReplacementExpensifyCard(cardId, reason) { + API.write( + 'RequestReplacementExpensifyCard', + { + cardId, + reason, + }, + { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, + value: { + isLoading: true, + errors: null, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, + value: { + isLoading: false, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, + value: { + isLoading: false, + }, + }, + ], + }, + ); +} + /** * Activates the physical Expensify card based on the last four digits of the card number * @@ -101,4 +146,4 @@ function clearCardListErrors(cardID) { Onyx.merge(ONYXKEYS.CARD_LIST, {[cardID]: {errors: null, isLoading: false}}); } -export {reportVirtualExpensifyCardFraud, activatePhysicalExpensifyCard, clearCardListErrors}; +export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud}; diff --git a/src/libs/actions/Chronos.ts b/src/libs/actions/Chronos.ts index 1b46a68a1afe..ce821e524722 100644 --- a/src/libs/actions/Chronos.ts +++ b/src/libs/actions/Chronos.ts @@ -1,11 +1,11 @@ -import Onyx from 'react-native-onyx'; +import Onyx, {OnyxUpdate} from 'react-native-onyx'; import CONST from '../../CONST'; import ONYXKEYS from '../../ONYXKEYS'; import * as API from '../API'; import {ChronosOOOEvent} from '../../types/onyx/OriginalMessage'; const removeEvent = (reportID: string, reportActionID: string, eventID: string, events: ChronosOOOEvent[]) => { - const optimisticData = [ + const optimisticData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, @@ -20,7 +20,7 @@ const removeEvent = (reportID: string, reportActionID: string, eventID: string, }, ]; - const successData = [ + const successData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, @@ -32,7 +32,7 @@ const removeEvent = (reportID: string, reportActionID: string, eventID: string, }, ]; - const failureData = [ + const failureData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, diff --git a/src/libs/actions/DemoActions.js b/src/libs/actions/DemoActions.js new file mode 100644 index 000000000000..e7ce02d2796b --- /dev/null +++ b/src/libs/actions/DemoActions.js @@ -0,0 +1,70 @@ +import Config from 'react-native-config'; +import Onyx from 'react-native-onyx'; +import lodashGet from 'lodash/get'; +import * as API from '../API'; +import * as ReportUtils from '../ReportUtils'; +import Navigation from '../Navigation/Navigation'; +import ROUTES from '../../ROUTES'; +import ONYXKEYS from '../../ONYXKEYS'; + +let currentUserEmail; +Onyx.connect({ + key: ONYXKEYS.SESSION, + callback: (val) => { + currentUserEmail = lodashGet(val, 'email', ''); + }, +}); + +function runMoney2020Demo() { + // Try to navigate to existing demo chat if it exists in Onyx + const money2020AccountID = Number(lodashGet(Config, 'EXPENSIFY_ACCOUNT_ID_MONEY2020', 15864555)); + const existingChatReport = ReportUtils.getChatByParticipants([money2020AccountID]); + if (existingChatReport) { + // We must call goBack() to remove the demo route from nav history + Navigation.goBack(); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(existingChatReport.reportID)); + return; + } + + // We use makeRequestWithSideEffects here because we need to get the chat report ID to navigate to it after it's created + // eslint-disable-next-line rulesdir/no-api-side-effects-method + API.makeRequestWithSideEffects('CreateChatReport', { + emailList: `${currentUserEmail},money2020@expensify.com`, + activationConference: 'money2020', + }).then((response) => { + // If there's no response or no reportID in the response, navigate the user home so user doesn't get stuck. + if (!response || !response.reportID) { + Navigation.goBack(); + Navigation.navigate(ROUTES.HOME); + return; + } + + // Get reportID & navigate to it + // Note: We must call goBack() to remove the demo route from history + const chatReportID = response.reportID; + Navigation.goBack(); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chatReportID)); + }); +} + +/** + * Runs code for specific demos, based on the provided URL + * + * @param {String} url - URL user is navigating to via deep link (or regular link in web) + */ +function runDemoByURL(url = '') { + const cleanUrl = (url || '').toLowerCase(); + + if (cleanUrl.endsWith(ROUTES.MONEY2020)) { + Onyx.set(ONYXKEYS.DEMO_INFO, { + money2020: { + isBeginningDemo: true, + }, + }); + } else { + // No demo is being run, so clear out demo info + Onyx.set(ONYXKEYS.DEMO_INFO, {}); + } +} + +export {runMoney2020Demo, runDemoByURL}; diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index a95d69243ec8..07e814f92884 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -1,6 +1,7 @@ import Onyx from 'react-native-onyx'; import _ from 'underscore'; import lodashGet from 'lodash/get'; +import lodashHas from 'lodash/has'; import Str from 'expensify-common/lib/str'; import {format} from 'date-fns'; import CONST from '../../CONST'; @@ -1064,6 +1065,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco let oneOnOneChatReport; let isNewOneOnOneChatReport = false; let shouldCreateOptimisticPersonalDetails = false; + const personalDetailExists = lodashHas(allPersonalDetails, accountID); // If this is a split between two people only and the function // wasn't provided with an existing group chat report id @@ -1072,11 +1074,11 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco // entering code that creates optimistic personal details if ((!hasMultipleParticipants && !existingSplitChatReportID) || isOwnPolicyExpenseChat) { oneOnOneChatReport = splitChatReport; - shouldCreateOptimisticPersonalDetails = !existingSplitChatReport; + shouldCreateOptimisticPersonalDetails = !existingSplitChatReport && !personalDetailExists; } else { const existingChatReport = ReportUtils.getChatByParticipants([accountID]); isNewOneOnOneChatReport = !existingChatReport; - shouldCreateOptimisticPersonalDetails = isNewOneOnOneChatReport; + shouldCreateOptimisticPersonalDetails = isNewOneOnOneChatReport && !personalDetailExists; oneOnOneChatReport = existingChatReport || ReportUtils.buildOptimisticChatReport([accountID]); } @@ -1104,7 +1106,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco oneOnOneIOUReport.reportID, comment, '', - CONST.IOU.MONEY_REQUEST_TYPE.SPLIT, + CONST.IOU.TYPE.SPLIT, splitTransaction.transactionID, undefined, undefined, @@ -1303,7 +1305,18 @@ function startSplitBill(participants, currentUserLogin, currentUserAccountID, co 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); + const splitTransaction = TransactionUtils.buildOptimisticTransaction( + 0, + CONST.CURRENCY.USD, + CONST.REPORT.SPLIT_REPORTID, + comment, + '', + '', + '', + CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT, + 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); @@ -1419,7 +1432,7 @@ function startSplitBill(participants, currentUserLogin, currentUserAccountID, co errors: ErrorUtils.getMicroSecondOnyxError('report.genericCreateReportFailureMessage'), }, [splitIOUReportAction.reportActionID]: { - errors: ErrorUtils.getMicroSecondOnyxError('report.genericCreateFailureMessage'), + errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'), }, }, }, @@ -1628,7 +1641,7 @@ function completeSplitBill(chatReportID, reportAction, updatedTransaction, sessi oneOnOneIOUReport.reportID, updatedTransaction.comment.comment, updatedTransaction.modifiedCreated, - CONST.IOU.MONEY_REQUEST_TYPE.SPLIT, + CONST.IOU.TYPE.SPLIT, transactionID, updatedTransaction.modifiedMerchant, {...updatedTransaction.receipt, state: CONST.IOU.RECEIPT_STATE.OPEN}, @@ -1688,15 +1701,23 @@ function completeSplitBill(chatReportID, reportAction, updatedTransaction, sessi failureData.push(...oneOnOneFailureData); }); + const { + amount: transactionAmount, + currency: transactionCurrency, + created: transactionCreated, + merchant: transactionMerchant, + comment: transactionComment, + } = ReportUtils.getTransactionDetails(updatedTransaction); + API.write( 'CompleteSplitBill', { transactionID, - amount: updatedTransaction.modifiedAmount, - currency: updatedTransaction.modifiedCurrency, - created: updatedTransaction.modifiedCreated, - merchant: updatedTransaction.modifiedMerchant, - comment: updatedTransaction.comment.comment, + amount: transactionAmount, + currency: transactionCurrency, + created: transactionCreated, + merchant: transactionMerchant, + comment: transactionComment, splits: JSON.stringify(splits), }, {optimisticData, successData, failureData}, @@ -1985,7 +2006,7 @@ function deleteMoneyRequest(transactionID, reportAction, isSingleTransactionView } updatedIOUReport.lastMessageText = iouReportLastMessageText; - updatedIOUReport.lastVisibleActionCreated = lastVisibleAction.created; + updatedIOUReport.lastVisibleActionCreated = lodashGet(lastVisibleAction, 'created'); updatedReportPreviewAction = {...reportPreviewAction}; const hasNonReimbursableTransactions = ReportUtils.hasNonReimbursableTransactions(iouReport); @@ -2047,7 +2068,7 @@ function deleteMoneyRequest(transactionID, reportAction, isSingleTransactionView hasOutstandingIOU: false, iouReportID: null, lastMessageText: ReportActionsUtils.getLastVisibleMessage(iouReport.chatReportID, {[reportPreviewAction.reportActionID]: null}).lastMessageText, - lastVisibleActionCreated: ReportActionsUtils.getLastVisibleAction(iouReport.chatReportID, {[reportPreviewAction.reportActionID]: null}).created, + lastVisibleActionCreated: lodashGet(ReportActionsUtils.getLastVisibleAction(iouReport.chatReportID, {[reportPreviewAction.reportActionID]: null}), 'created'), }, }, ] @@ -2626,7 +2647,7 @@ function submitReport(expenseReport) { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`, value: { - state: CONST.REPORT.STATE.OPEN, + statusNum: CONST.REPORT.STATUS.OPEN, stateNum: CONST.REPORT.STATE_NUM.OPEN, }, }, diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js deleted file mode 100644 index 0ed6f8b036bb..000000000000 --- a/src/libs/actions/PaymentMethods.js +++ /dev/null @@ -1,356 +0,0 @@ -import _ from 'underscore'; -import {createRef} from 'react'; -import Onyx from 'react-native-onyx'; -import ONYXKEYS from '../../ONYXKEYS'; -import * as API from '../API'; -import CONST from '../../CONST'; -import Navigation from '../Navigation/Navigation'; -import * as CardUtils from '../CardUtils'; -import ROUTES from '../../ROUTES'; - -/** - * Sets up a ref to an instance of the KYC Wall component. - */ -const kycWallRef = createRef(); - -/** - * When we successfully add a payment method or pass the KYC checks we will continue with our setup action if we have one set. - */ -function continueSetup() { - if (!kycWallRef.current || !kycWallRef.current.continue) { - Navigation.goBack(ROUTES.HOME); - return; - } - - // Close the screen (Add Debit Card, Add Bank Account, or Enable Payments) on success and continue with setup - Navigation.goBack(ROUTES.HOME); - kycWallRef.current.continue(); -} - -function openWalletPage() { - const onyxData = { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - value: true, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - value: false, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - value: false, - }, - ], - }; - - return API.read('OpenPaymentsPage', {}, onyxData); -} - -/** - * - * @param {Number} bankAccountID - * @param {Number} fundID - * @param {Object} previousPaymentMethod - * @param {Object} currentPaymentMethod - * @param {Boolean} isOptimisticData - * @return {Array} - * - */ -function getMakeDefaultPaymentOnyxData(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod, isOptimisticData = true) { - const onyxData = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.USER_WALLET, - value: { - walletLinkedAccountID: bankAccountID || fundID, - walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD, - }, - }, - ]; - - // Only clear the error if this is optimistic data. If this is failure data, we do not want to clear the error that came from the server. - if (isOptimisticData) { - onyxData[0].value.errors = null; - } - - if (previousPaymentMethod) { - onyxData.push({ - onyxMethod: Onyx.METHOD.MERGE, - key: previousPaymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST, - value: { - [previousPaymentMethod.methodID]: { - isDefault: !isOptimisticData, - }, - }, - }); - } - - if (currentPaymentMethod) { - onyxData.push({ - onyxMethod: Onyx.METHOD.MERGE, - key: currentPaymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST, - value: { - [currentPaymentMethod.methodID]: { - isDefault: isOptimisticData, - }, - }, - }); - } - - return onyxData; -} - -/** - * Sets the default bank account or debit card for an Expensify Wallet - * - * @param {Number} bankAccountID - * @param {Number} fundID - * @param {Object} previousPaymentMethod - * @param {Object} currentPaymentMethod - * - */ -function makeDefaultPaymentMethod(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod) { - API.write( - 'MakeDefaultPaymentMethod', - { - bankAccountID, - fundID, - }, - { - optimisticData: getMakeDefaultPaymentOnyxData(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod, true, ONYXKEYS.FUND_LIST), - failureData: getMakeDefaultPaymentOnyxData(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod, false, ONYXKEYS.FUND_LIST), - }, - ); -} - -/** - * Calls the API to add a new card. - * - * @param {Object} params - */ -function addPaymentCard(params) { - const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate); - const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate); - - API.write( - 'AddPaymentCard', - { - cardNumber: params.cardNumber, - cardYear, - cardMonth, - cardCVV: params.securityCode, - addressName: params.nameOnCard, - addressZip: params.addressZipCode, - currency: CONST.CURRENCY.USD, - isP2PDebitCard: true, - }, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, - value: {isLoading: true}, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, - value: {isLoading: false}, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, - value: {isLoading: false}, - }, - ], - }, - ); -} - -/** - * Resets the values for the add debit card form back to their initial states - */ -function clearDebitCardFormErrorAndSubmit() { - Onyx.set(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, { - isLoading: false, - errors: null, - }); -} - -/** - * Call the API to transfer wallet balance. - * @param {Object} paymentMethod - * @param {*} paymentMethod.methodID - * @param {String} paymentMethod.accountType - */ -function transferWalletBalance(paymentMethod) { - const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD; - const parameters = { - [paymentMethodIDKey]: paymentMethod.methodID, - }; - - API.write('TransferWalletBalance', parameters, { - optimisticData: [ - { - onyxMethod: 'merge', - key: ONYXKEYS.WALLET_TRANSFER, - value: { - loading: true, - errors: null, - }, - }, - ], - successData: [ - { - onyxMethod: 'merge', - key: ONYXKEYS.WALLET_TRANSFER, - value: { - loading: false, - shouldShowSuccess: true, - paymentMethodType: paymentMethod.accountType, - }, - }, - ], - failureData: [ - { - onyxMethod: 'merge', - key: ONYXKEYS.WALLET_TRANSFER, - value: { - loading: false, - shouldShowSuccess: false, - }, - }, - ], - }); -} - -function resetWalletTransferData() { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, { - selectedAccountType: '', - selectedAccountID: null, - filterPaymentMethodType: null, - loading: false, - shouldShowSuccess: false, - }); -} - -/** - * @param {String} selectedAccountType - * @param {String} selectedAccountID - */ -function saveWalletTransferAccountTypeAndID(selectedAccountType, selectedAccountID) { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountType, selectedAccountID}); -} - -/** - * Toggles the user's selected type of payment method (bank account or debit card) on the wallet transfer balance screen. - * @param {String} filterPaymentMethodType - */ -function saveWalletTransferMethodType(filterPaymentMethodType) { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {filterPaymentMethodType}); -} - -function dismissSuccessfulTransferBalancePage() { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowSuccess: false}); - Navigation.goBack(ROUTES.SETTINGS_WALLET); -} - -/** - * Looks through each payment method to see if there is an existing error - * @param {Object} bankList - * @param {Object} fundList - * @returns {Boolean} - */ -function hasPaymentMethodError(bankList, fundList) { - const combinedPaymentMethods = {...bankList, ...fundList}; - return _.some(combinedPaymentMethods, (item) => !_.isEmpty(item.errors)); -} - -/** - * Clears the error for the specified payment item - * @param {String} paymentListKey The onyx key for the provided payment method - * @param {String} paymentMethodID - */ -function clearDeletePaymentMethodError(paymentListKey, paymentMethodID) { - Onyx.merge(paymentListKey, { - [paymentMethodID]: { - pendingAction: null, - errors: null, - }, - }); -} - -/** - * If there was a failure adding a payment method, clearing it removes the payment method from the list entirely - * @param {String} paymentListKey The onyx key for the provided payment method - * @param {String} paymentMethodID - */ -function clearAddPaymentMethodError(paymentListKey, paymentMethodID) { - Onyx.merge(paymentListKey, { - [paymentMethodID]: null, - }); -} - -/** - * Clear any error(s) related to the user's wallet - */ -function clearWalletError() { - Onyx.merge(ONYXKEYS.USER_WALLET, {errors: null}); -} - -/** - * Clear any error(s) related to the user's wallet terms - */ -function clearWalletTermsError() { - Onyx.merge(ONYXKEYS.WALLET_TERMS, {errors: null}); -} - -function deletePaymentCard(fundID) { - API.write( - 'DeletePaymentCard', - { - fundID, - }, - { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: `${ONYXKEYS.FUND_LIST}`, - value: {[fundID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}}, - }, - ], - }, - ); -} - -export { - deletePaymentCard, - addPaymentCard, - openWalletPage, - makeDefaultPaymentMethod, - kycWallRef, - continueSetup, - clearDebitCardFormErrorAndSubmit, - dismissSuccessfulTransferBalancePage, - transferWalletBalance, - resetWalletTransferData, - saveWalletTransferAccountTypeAndID, - saveWalletTransferMethodType, - hasPaymentMethodError, - clearDeletePaymentMethodError, - clearAddPaymentMethodError, - clearWalletError, - clearWalletTermsError, -}; diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts new file mode 100644 index 000000000000..fe1b5ebe10e9 --- /dev/null +++ b/src/libs/actions/PaymentMethods.ts @@ -0,0 +1,393 @@ +import {createRef} from 'react'; +import Onyx, {OnyxUpdate} from 'react-native-onyx'; +import {ValueOf} from 'type-fest'; +import ONYXKEYS, {OnyxValues} from '../../ONYXKEYS'; +import * as API from '../API'; +import CONST from '../../CONST'; +import Navigation from '../Navigation/Navigation'; +import * as CardUtils from '../CardUtils'; +import ROUTES from '../../ROUTES'; +import {FilterMethodPaymentType} from '../../types/onyx/WalletTransfer'; +import PaymentMethod from '../../types/onyx/PaymentMethod'; + +type KYCWallRef = { + continue?: () => void; +}; + +/** + * Sets up a ref to an instance of the KYC Wall component. + */ +const kycWallRef = createRef(); + +/** + * When we successfully add a payment method or pass the KYC checks we will continue with our setup action if we have one set. + */ +function continueSetup(fallbackRoute = ROUTES.HOME) { + if (!kycWallRef.current?.continue) { + Navigation.goBack(fallbackRoute); + return; + } + + // Close the screen (Add Debit Card, Add Bank Account, or Enable Payments) on success and continue with setup + Navigation.goBack(fallbackRoute); + kycWallRef.current.continue(); +} + +function openWalletPage() { + const optimisticData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, + value: true, + }, + ]; + const successData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, + value: false, + }, + ]; + const failureData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, + value: false, + }, + ]; + + return API.read( + 'OpenPaymentsPage', + {}, + { + optimisticData, + successData, + failureData, + }, + ); +} + +function getMakeDefaultPaymentOnyxData( + bankAccountID: number, + fundID: number, + previousPaymentMethod: PaymentMethod, + currentPaymentMethod: PaymentMethod, + isOptimisticData = true, +): OnyxUpdate[] { + const onyxData: OnyxUpdate[] = [ + isOptimisticData + ? { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.USER_WALLET, + value: { + walletLinkedAccountID: bankAccountID || fundID, + walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD, + // Only clear the error if this is optimistic data. If this is failure data, we do not want to clear the error that came from the server. + errors: null, + }, + } + : { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.USER_WALLET, + value: { + walletLinkedAccountID: bankAccountID || fundID, + walletLinkedAccountType: bankAccountID ? CONST.PAYMENT_METHODS.BANK_ACCOUNT : CONST.PAYMENT_METHODS.DEBIT_CARD, + }, + }, + ]; + + if (previousPaymentMethod?.methodID) { + onyxData.push({ + onyxMethod: Onyx.METHOD.MERGE, + key: previousPaymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST, + value: { + [previousPaymentMethod.methodID]: { + isDefault: !isOptimisticData, + }, + }, + }); + } + + if (currentPaymentMethod?.methodID) { + onyxData.push({ + onyxMethod: Onyx.METHOD.MERGE, + key: currentPaymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST, + value: { + [currentPaymentMethod.methodID]: { + isDefault: isOptimisticData, + }, + }, + }); + } + + return onyxData; +} + +/** + * Sets the default bank account or debit card for an Expensify Wallet + * + */ +function makeDefaultPaymentMethod(bankAccountID: number, fundID: number, previousPaymentMethod: PaymentMethod, currentPaymentMethod: PaymentMethod) { + type MakeDefaultPaymentMethodParams = { + bankAccountID: number; + fundID: number; + }; + + const parameters: MakeDefaultPaymentMethodParams = { + bankAccountID, + fundID, + }; + + API.write('MakeDefaultPaymentMethod', parameters, { + optimisticData: getMakeDefaultPaymentOnyxData(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod, true), + failureData: getMakeDefaultPaymentOnyxData(bankAccountID, fundID, previousPaymentMethod, currentPaymentMethod, false), + }); +} + +type PaymentCardParams = {expirationDate: string; cardNumber: string; securityCode: string; nameOnCard: string; addressZipCode: string}; + +/** + * Calls the API to add a new card. + * + */ +function addPaymentCard(params: PaymentCardParams) { + const cardMonth = CardUtils.getMonthFromExpirationDateString(params.expirationDate); + const cardYear = CardUtils.getYearFromExpirationDateString(params.expirationDate); + + type AddPaymentCardParams = { + cardNumber: string; + cardYear: string; + cardMonth: string; + cardCVV: string; + addressName: string; + addressZip: string; + currency: ValueOf; + isP2PDebitCard: boolean; + }; + + const parameters: AddPaymentCardParams = { + cardNumber: params.cardNumber, + cardYear, + cardMonth, + cardCVV: params.securityCode, + addressName: params.nameOnCard, + addressZip: params.addressZipCode, + currency: CONST.CURRENCY.USD, + isP2PDebitCard: true, + }; + + const optimisticData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, + value: {isLoading: true}, + }, + ]; + + const successData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, + value: {isLoading: false}, + }, + ]; + + const failureData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, + value: {isLoading: false}, + }, + ]; + + API.write('AddPaymentCard', parameters, { + optimisticData, + successData, + failureData, + }); +} + +/** + * Resets the values for the add debit card form back to their initial states + */ +function clearDebitCardFormErrorAndSubmit() { + Onyx.set(ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM, { + isLoading: false, + errors: undefined, + setupComplete: true, + }); +} + +/** + * Call the API to transfer wallet balance. + * + */ +function transferWalletBalance(paymentMethod: PaymentMethod) { + const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD; + + type TransferWalletBalanceParameters = Partial, number | undefined>>; + + const parameters: TransferWalletBalanceParameters = { + [paymentMethodIDKey]: paymentMethod.methodID, + }; + + const optimisticData: OnyxUpdate[] = [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: true, + errors: null, + }, + }, + ]; + + const successData: OnyxUpdate[] = [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: false, + shouldShowSuccess: true, + paymentMethodType: paymentMethod.accountType, + }, + }, + ]; + + const failureData: OnyxUpdate[] = [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: false, + shouldShowSuccess: false, + }, + }, + ]; + + API.write('TransferWalletBalance', parameters, { + optimisticData, + successData, + failureData, + }); +} + +function resetWalletTransferData() { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, { + selectedAccountType: '', + selectedAccountID: null, + filterPaymentMethodType: null, + loading: false, + shouldShowSuccess: false, + }); +} + +function saveWalletTransferAccountTypeAndID(selectedAccountType: string, selectedAccountID: string) { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountType, selectedAccountID}); +} + +/** + * Toggles the user's selected type of payment method (bank account or debit card) on the wallet transfer balance screen. + * + */ +function saveWalletTransferMethodType(filterPaymentMethodType?: FilterMethodPaymentType) { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {filterPaymentMethodType}); +} + +function dismissSuccessfulTransferBalancePage() { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowSuccess: false}); + Navigation.goBack(ROUTES.SETTINGS_WALLET); +} + +/** + * Looks through each payment method to see if there is an existing error + * + */ +function hasPaymentMethodError(bankList: OnyxValues[typeof ONYXKEYS.BANK_ACCOUNT_LIST], fundList: OnyxValues[typeof ONYXKEYS.FUND_LIST]): boolean { + const combinedPaymentMethods = {...bankList, ...fundList}; + + return Object.values(combinedPaymentMethods).some((item) => Object.keys(item.errors ?? {}).length); +} + +type PaymentListKey = typeof ONYXKEYS.BANK_ACCOUNT_LIST | typeof ONYXKEYS.FUND_LIST; + +/** + * Clears the error for the specified payment item + * @param paymentListKey The onyx key for the provided payment method + * @param paymentMethodID + */ +function clearDeletePaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: string) { + Onyx.merge(paymentListKey, { + [paymentMethodID]: { + pendingAction: null, + errors: null, + }, + }); +} + +/** + * If there was a failure adding a payment method, clearing it removes the payment method from the list entirely + * @param paymentListKey The onyx key for the provided payment method + * @param paymentMethodID + */ +function clearAddPaymentMethodError(paymentListKey: PaymentListKey, paymentMethodID: string) { + Onyx.merge(paymentListKey, { + [paymentMethodID]: null, + }); +} + +/** + * Clear any error(s) related to the user's wallet + */ +function clearWalletError() { + Onyx.merge(ONYXKEYS.USER_WALLET, {errors: null}); +} + +/** + * Clear any error(s) related to the user's wallet terms + */ +function clearWalletTermsError() { + Onyx.merge(ONYXKEYS.WALLET_TERMS, {errors: null}); +} + +function deletePaymentCard(fundID: number) { + type DeletePaymentCardParams = { + fundID: number; + }; + + const parameters: DeletePaymentCardParams = { + fundID, + }; + + const optimisticData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.FUND_LIST}`, + value: {[fundID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}}, + }, + ]; + + API.write('DeletePaymentCard', parameters, { + optimisticData, + }); +} + +export { + deletePaymentCard, + addPaymentCard, + openWalletPage, + makeDefaultPaymentMethod, + kycWallRef, + continueSetup, + clearDebitCardFormErrorAndSubmit, + dismissSuccessfulTransferBalancePage, + transferWalletBalance, + resetWalletTransferData, + saveWalletTransferAccountTypeAndID, + saveWalletTransferMethodType, + hasPaymentMethodError, + clearDeletePaymentMethodError, + clearAddPaymentMethodError, + clearWalletError, + clearWalletTermsError, +}; diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js index 1a73b148e100..89324dd35485 100644 --- a/src/libs/actions/Policy.js +++ b/src/libs/actions/Policy.js @@ -73,6 +73,13 @@ Onyx.connect({ callback: (val) => (allRecentlyUsedCategories = val), }); +let networkStatus = {}; +Onyx.connect({ + key: ONYXKEYS.NETWORK, + waitForCollectionCallback: true, + callback: (val) => (networkStatus = val), +}); + /** * Stores in Onyx the policy ID of the last workspace that was accessed by the user * @param {String|null} policyID @@ -766,7 +773,7 @@ function updateWorkspaceCustomUnitAndRate(policyID, currentCustomUnit, newCustom 'UpdateWorkspaceCustomUnitAndRate', { policyID, - lastModified, + ...(!networkStatus.isOffline && {lastModified}), customUnit: JSON.stringify(newCustomUnitParam), customUnitRate: JSON.stringify(newCustomUnitParam.rates), }, @@ -909,6 +916,48 @@ function buildOptimisticCustomUnits() { }; } +/** + * Optimistically creates a Policy Draft for a new workspace + * + * @param {String} [policyOwnerEmail] Optional, the email of the account to make the owner of the policy + * @param {String} [policyName] Optional, custom policy name we will use for created workspace + * @param {String} [policyID] Optional, custom policy id we will use for created workspace + */ +function createDraftInitialWorkspace(policyOwnerEmail = '', policyName = '', policyID = generatePolicyID()) { + const workspaceName = policyName || generateDefaultWorkspaceName(policyOwnerEmail); + const {customUnits} = buildOptimisticCustomUnits(); + + const optimisticData = [ + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, + value: { + id: policyID, + type: CONST.POLICY.TYPE.FREE, + name: workspaceName, + role: CONST.POLICY.ROLE.ADMIN, + owner: sessionEmail, + isPolicyExpenseChatEnabled: true, + outputCurrency: lodashGet(allPersonalDetails, [sessionAccountID, 'localCurrencyCode'], CONST.CURRENCY.USD), + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD, + customUnits, + }, + }, + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS}${policyID}`, + value: { + [sessionAccountID]: { + role: CONST.POLICY.ROLE.ADMIN, + errors: {}, + }, + }, + }, + ]; + + Onyx.update(optimisticData); +} + /** * Optimistically creates a new workspace and default workspace chats * @@ -1027,6 +1076,16 @@ function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseChatReportID}`, value: expenseReportActionData, }, + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, + value: null, + }, + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS}${policyID}`, + value: null, + }, ], successData: [ { @@ -1131,6 +1190,7 @@ function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName ], }, ); + return adminsChatReportID; } @@ -1259,4 +1319,5 @@ export { clearErrors, openDraftWorkspaceRequest, buildOptimisticPolicyRecentlyUsedCategories, + createDraftInitialWorkspace, }; diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index c56e9c567745..dc881252e4d8 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -375,8 +375,8 @@ function addActions(reportID, text = '', file) { const {lastMessageText = '', lastMessageTranslationKey = ''} = ReportActionsUtils.getLastVisibleMessage(reportID); if (lastMessageText || lastMessageTranslationKey) { const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(reportID); - const lastVisibleActionCreated = lastVisibleAction.created; - const lastActorAccountID = lastVisibleAction.actorAccountID; + const lastVisibleActionCreated = lodashGet(lastVisibleAction, 'created'); + const lastActorAccountID = lodashGet(lastVisibleAction, 'actorAccountID'); failureReport = { lastMessageTranslationKey, lastMessageText, @@ -1054,11 +1054,11 @@ function deleteReportComment(reportID, reportAction) { isLastMessageDeletedParentAction: true, }; } else { - const {lastMessageText = '', lastMessageTranslationKey = ''} = ReportActionsUtils.getLastVisibleMessage(originalReportID, optimisticReportActions); + const {lastMessageText = '', lastMessageTranslationKey = ''} = ReportUtils.getLastVisibleMessage(originalReportID, optimisticReportActions); if (lastMessageText || lastMessageTranslationKey) { const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(originalReportID, optimisticReportActions); - const lastVisibleActionCreated = lastVisibleAction.created; - const lastActorAccountID = lastVisibleAction.actorAccountID; + const lastVisibleActionCreated = lodashGet(lastVisibleAction, 'created'); + const lastActorAccountID = lodashGet(lastVisibleAction, 'actorAccountID'); optimisticReport = { lastMessageTranslationKey, lastMessageText, @@ -1162,17 +1162,16 @@ const removeLinksFromHtml = (html, links) => { * This function will handle removing only links that were purposely removed by the user while editing. * * @param {String} newCommentText text of the comment after editing. - * @param {String} originalHtml original html of the comment before editing. + * @param {String} originalCommentMarkdown original markdown of the comment before editing. * @returns {String} */ -const handleUserDeletedLinksInHtml = (newCommentText, originalHtml) => { +const handleUserDeletedLinksInHtml = (newCommentText, originalCommentMarkdown) => { const parser = new ExpensiMark(); if (newCommentText.length > CONST.MAX_MARKUP_LENGTH) { return newCommentText; } - const markdownOriginalComment = parser.htmlToMarkdown(originalHtml).trim(); const htmlForNewComment = parser.replace(newCommentText); - const removedLinks = parser.getRemovedMarkdownLinks(markdownOriginalComment, newCommentText); + const removedLinks = parser.getRemovedMarkdownLinks(originalCommentMarkdown, newCommentText); return removeLinksFromHtml(htmlForNewComment, removedLinks); }; @@ -1191,7 +1190,14 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { // https://github.com/Expensify/App/issues/9090 // https://github.com/Expensify/App/issues/13221 const originalCommentHTML = lodashGet(originalReportAction, 'message[0].html'); - const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentHTML); + const originalCommentMarkdown = parser.htmlToMarkdown(originalCommentHTML).trim(); + + // Skip the Edit if draft is not changed + if (originalCommentMarkdown === textForNewComment) { + return; + } + + const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentMarkdown); const reportComment = parser.htmlToText(htmlForNewComment); // For comments shorter than or equal to 10k chars, convert the comment from MD into HTML because that's how it is stored in the database @@ -1199,7 +1205,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { let parsedOriginalCommentHTML = originalCommentHTML; if (textForNewComment.length <= CONST.MAX_MARKUP_LENGTH) { const autolinkFilter = {filterRules: _.filter(_.pluck(parser.rules, 'name'), (name) => name !== 'autolink')}; - parsedOriginalCommentHTML = parser.replace(parser.htmlToMarkdown(originalCommentHTML).trim(), autolinkFilter); + parsedOriginalCommentHTML = parser.replace(originalCommentMarkdown, autolinkFilter); } // Delete the comment if it's empty @@ -1239,7 +1245,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) { ]; const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(originalReportID, optimisticReportActions); - if (reportActionID === lastVisibleAction.reportActionID) { + if (reportActionID === lodashGet(lastVisibleAction, 'reportActionID')) { const lastMessageText = ReportUtils.formatReportLastMessageText(reportComment); const optimisticReport = { lastMessageTranslationKey: '', @@ -1728,25 +1734,6 @@ function clearIOUError(reportID) { Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {errorFields: {iou: null}}); } -/** - * Returns true if the accountID has reacted to the report action (with the given skin tone). - * Uses the NEW FORMAT for "emojiReactions" - * @param {String} accountID - * @param {Array} users - * @param {Number} [skinTone] - * @returns {boolean} - */ -function hasAccountIDEmojiReacted(accountID, users, skinTone) { - if (_.isUndefined(skinTone)) { - return Boolean(users[accountID]); - } - const usersReaction = users[accountID]; - if (!usersReaction || !usersReaction.skinTones || !_.size(usersReaction.skinTones)) { - return false; - } - return Boolean(usersReaction.skinTones[skinTone]); -} - /** * Adds a reaction to the report action. * Uses the NEW FORMAT for "emojiReactions" @@ -1876,7 +1863,7 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea // Only use skin tone if emoji supports it const skinTone = emoji.types === undefined ? -1 : paramSkinTone; - if (existingReactionObject && hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, skinTone)) { + if (existingReactionObject && EmojiUtils.hasAccountIDEmojiReacted(currentUserAccountID, existingReactionObject.users, skinTone)) { removeEmojiReaction(originalReportID, reportAction.reportActionID, emoji); return; } @@ -1889,6 +1876,7 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea * @param {Boolean} isAuthenticated */ function openReportFromDeepLink(url, isAuthenticated) { + const route = ReportUtils.getRouteFromLink(url); const reportID = ReportUtils.getReportIDFromLink(url); if (reportID && !isAuthenticated) { @@ -1907,16 +1895,11 @@ function openReportFromDeepLink(url, isAuthenticated) { // Navigate to the report after sign-in/sign-up. InteractionManager.runAfterInteractions(() => { Session.waitForUserSignIn().then(() => { - Navigation.waitForProtectedRoutes() - .then(() => { - const route = ReportUtils.getRouteFromLink(url); - if (route === ROUTES.CONCIERGE) { - navigateToConciergeChat(true); - return; - } - Navigation.navigate(route, CONST.NAVIGATION.TYPE.PUSH); - }) - .catch((error) => Log.warn(error.message)); + if (route === ROUTES.CONCIERGE) { + navigateToConciergeChat(true); + return; + } + Navigation.navigate(route, CONST.NAVIGATION.TYPE.PUSH); }); }); } @@ -1929,8 +1912,9 @@ function getCurrentUserAccountID() { * Leave a report by setting the state to submitted and closed * * @param {String} reportID + * @param {Boolean} isWorkspaceMemberLeavingWorkspaceRoom */ -function leaveRoom(reportID) { +function leaveRoom(reportID, isWorkspaceMemberLeavingWorkspaceRoom = false) { const report = lodashGet(allReports, [reportID], {}); const reportKeys = _.keys(report); @@ -1939,38 +1923,150 @@ function leaveRoom(reportID) { // between Onyx report being null and Pusher's leavingStatus becoming true. broadcastUserIsLeavingRoom(reportID); + // If a workspace member is leaving a workspace room, they don't actually lose the room from Onyx. + // Instead, their notification preference just gets set to "hidden". + const optimisticData = [ + isWorkspaceMemberLeavingWorkspaceRoom + ? { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN, + }, + } + : { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + stateNum: CONST.REPORT.STATE_NUM.SUBMITTED, + statusNum: CONST.REPORT.STATUS.CLOSED, + }, + }, + ]; + + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: isWorkspaceMemberLeavingWorkspaceRoom ? {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN} : _.object(reportKeys, Array(reportKeys.length).fill(null)), + }, + ]; + API.write( 'LeaveRoom', { reportID, }, + { + optimisticData, + successData, + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: report, + }, + ], + }, + ); + + if (isWorkspaceMemberLeavingWorkspaceRoom) { + const participantAccountIDs = PersonalDetailsUtils.getAccountIDsByLogins([CONST.EMAIL.CONCIERGE]); + const chat = ReportUtils.getChatByParticipants(participantAccountIDs); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(chat.reportID)); + } +} + +/** + * Invites people to a room + * + * @param {String} reportID + * @param {Object} inviteeEmailsToAccountIDs + */ +function inviteToRoom(reportID, inviteeEmailsToAccountIDs) { + const report = lodashGet(allReports, [reportID], {}); + + const inviteeEmails = _.keys(inviteeEmailsToAccountIDs); + const inviteeAccountIDs = _.values(inviteeEmailsToAccountIDs); + + const {participantAccountIDs} = report; + const participantAccountIDsAfterInvitation = _.uniq([...participantAccountIDs, ...inviteeAccountIDs]); + + API.write( + 'InviteToRoom', + { + reportID, + inviteeEmails, + }, { optimisticData: [ { - onyxMethod: Onyx.METHOD.SET, + onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - stateNum: CONST.REPORT.STATE_NUM.SUBMITTED, - statusNum: CONST.REPORT.STATUS.CLOSED, + participantAccountIDs: participantAccountIDsAfterInvitation, }, }, ], - // Manually clear the report using merge. Should not use set here since it would cause race condition - // if it was called right after a merge. - successData: [ + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + participantAccountIDs, + }, + }, + ], + }, + ); +} + +/** + * Removes people from a room + * + * @param {String} reportID + * @param {Array} targetAccountIDs + */ +function removeFromRoom(reportID, targetAccountIDs) { + const report = lodashGet(allReports, [reportID], {}); + + const {participantAccountIDs} = report; + const participantAccountIDsAfterRemoval = _.difference(participantAccountIDs, targetAccountIDs); + + API.write( + 'RemoveFromRoom', + { + reportID, + targetAccountIDs, + }, + { + optimisticData: [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: _.object(reportKeys, Array(reportKeys.length).fill(null)), + value: { + participantAccountIDs: participantAccountIDsAfterRemoval, + }, }, ], failureData: [ { - onyxMethod: Onyx.METHOD.SET, + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + participantAccountIDs, + }, + }, + ], + + // We need to add success data here since in high latency situations, + // the OpenRoomMembersPage call has the chance of overwriting the optimistic data we set above. + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - stateNum: CONST.REPORT.STATE_NUM.OPEN, - statusNum: CONST.REPORT.STATUS.OPEN, + participantAccountIDs: participantAccountIDsAfterRemoval, }, }, ], @@ -2191,6 +2287,17 @@ function getReportPrivateNote(reportID) { ); } +/** + * Loads necessary data for rendering the RoomMembersPage + * + * @param {String|Number} reportID + */ +function openRoomMembersPage(reportID) { + API.read('OpenRoomMembersPage', { + reportID, + }); +} + /** * Checks if there are any errors in the private notes for a given report * @@ -2326,9 +2433,10 @@ export { notifyNewAction, showReportActionNotification, toggleEmojiReaction, - hasAccountIDEmojiReacted, shouldShowReportActionNotification, leaveRoom, + inviteToRoom, + removeFromRoom, getCurrentUserAccountID, setLastOpenedPublicRoom, flagComment, @@ -2337,6 +2445,7 @@ export { getReportPrivateNote, clearPrivateNotesError, hasErrorInPrivateNotes, + openRoomMembersPage, savePrivateNotesDraft, getDraftPrivateNote, }; diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index 117a092c3875..3b623a42689d 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -316,7 +316,7 @@ function signInWithShortLivedAuthToken(email, authToken) { // If the user is signing in with a different account from the current app, should not pass the auto-generated login as it may be tied to the old account. // scene 1: the user is transitioning to newDot from a different account on oldDot. // scene 2: the user is transitioning to desktop app from a different account on web app. - const oldPartnerUserID = credentials.login === email ? credentials.autoGeneratedLogin : ''; + const oldPartnerUserID = credentials.login === email && credentials.autoGeneratedLogin ? credentials.autoGeneratedLogin : ''; API.read('SignInWithShortLivedAuthToken', {authToken, oldPartnerUserID, skipReauthentication: true}, {optimisticData, successData, failureData}); } @@ -541,6 +541,10 @@ function clearAccountMessages() { }); } +function setAccountError(error) { + Onyx.merge(ONYXKEYS.ACCOUNT, {errors: ErrorUtils.getMicroSecondOnyxError(error)}); +} + // It's necessary to throttle requests to reauthenticate since calling this multiple times will cause Pusher to // reconnect each time when we only need to reconnect once. This way, if an authToken is expired and we try to // subscribe to a bunch of channels at once we will only reauthenticate and force reconnect Pusher once. @@ -807,6 +811,7 @@ export { unlinkLogin, clearSignInData, clearAccountMessages, + setAccountError, authenticatePusher, reauthenticatePusher, invalidateCredentials, diff --git a/src/libs/actions/Session/updateSessionAuthTokens.js b/src/libs/actions/Session/updateSessionAuthTokens.js index 5be53c77a92c..e88b3b993c7a 100644 --- a/src/libs/actions/Session/updateSessionAuthTokens.js +++ b/src/libs/actions/Session/updateSessionAuthTokens.js @@ -2,8 +2,8 @@ import Onyx from 'react-native-onyx'; import ONYXKEYS from '../../../ONYXKEYS'; /** - * @param {String} authToken - * @param {String} encryptedAuthToken + * @param {String | undefined} authToken + * @param {String | undefined} encryptedAuthToken */ export default function updateSessionAuthTokens(authToken, encryptedAuthToken) { Onyx.merge(ONYXKEYS.SESSION, {authToken, encryptedAuthToken}); diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.ts similarity index 74% rename from src/libs/actions/SignInRedirect.js rename to src/libs/actions/SignInRedirect.ts index a010621c4eea..67f5f2d8586f 100644 --- a/src/libs/actions/SignInRedirect.js +++ b/src/libs/actions/SignInRedirect.ts @@ -1,7 +1,5 @@ import Onyx from 'react-native-onyx'; -import lodashGet from 'lodash/get'; -import _ from 'underscore'; -import ONYXKEYS from '../../ONYXKEYS'; +import ONYXKEYS, {OnyxKey} from '../../ONYXKEYS'; import * as MainQueue from '../Network/MainQueue'; import * as PersistedRequests from './PersistedRequests'; import NetworkConnection from '../NetworkConnection'; @@ -12,27 +10,21 @@ import Navigation from '../Navigation/Navigation'; import * as ErrorUtils from '../ErrorUtils'; import * as SessionUtils from '../SessionUtils'; -let currentIsOffline; -let currentShouldForceOffline; +let currentIsOffline: boolean | undefined; +let currentShouldForceOffline: boolean | undefined; Onyx.connect({ key: ONYXKEYS.NETWORK, callback: (network) => { - if (!network) { - return; - } - currentIsOffline = network.isOffline; - currentShouldForceOffline = Boolean(network.shouldForceOffline); + currentIsOffline = network?.isOffline; + currentShouldForceOffline = network?.shouldForceOffline; }, }); -/** - * @param {String} errorMessage - */ -function clearStorageAndRedirect(errorMessage) { +function clearStorageAndRedirect(errorMessage?: string) { // Under certain conditions, there are key-values we'd like to keep in storage even when a user is logged out. // We pass these into the clear() method in order to avoid having to reset them on a delayed tick and getting // flashes of unwanted default state. - const keysToPreserve = []; + const keysToPreserve: OnyxKey[] = []; keysToPreserve.push(ONYXKEYS.NVP_PREFERRED_LOCALE); keysToPreserve.push(ONYXKEYS.ACTIVE_CLIENTS); keysToPreserve.push(ONYXKEYS.DEVICE_ID); @@ -58,15 +50,15 @@ function clearStorageAndRedirect(errorMessage) { */ function resetHomeRouteParams() { Navigation.isNavigationReady().then(() => { - const routes = navigationRef.current && lodashGet(navigationRef.current.getState(), 'routes'); - const homeRoute = _.find(routes, (route) => route.name === SCREENS.HOME); + const routes = navigationRef.current?.getState().routes; + const homeRoute = routes?.find((route) => route.name === SCREENS.HOME); - const emptyParams = {}; - _.keys(lodashGet(homeRoute, 'params')).forEach((paramKey) => { + const emptyParams: Record = {}; + Object.keys(homeRoute?.params ?? {}).forEach((paramKey) => { emptyParams[paramKey] = undefined; }); - Navigation.setParams(emptyParams, lodashGet(homeRoute, 'key', '')); + Navigation.setParams(emptyParams, homeRoute?.key ?? ''); Onyx.set(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, false); }); } @@ -79,9 +71,9 @@ function resetHomeRouteParams() { * * Normally this method would live in Session.js, but that would cause a circular dependency with Network.js. * - * @param {String} [errorMessage] error message to be displayed on the sign in page + * @param [errorMessage] error message to be displayed on the sign in page */ -function redirectToSignIn(errorMessage) { +function redirectToSignIn(errorMessage?: string) { MainQueue.clear(); HttpUtils.cancelPendingRequests(); PersistedRequests.clear(); diff --git a/src/libs/actions/TestTool.js b/src/libs/actions/TestTool.ts similarity index 74% rename from src/libs/actions/TestTool.js rename to src/libs/actions/TestTool.ts index 65df5310579c..11de9498b7b0 100644 --- a/src/libs/actions/TestTool.js +++ b/src/libs/actions/TestTool.ts @@ -1,12 +1,12 @@ +import throttle from 'lodash/throttle'; import Onyx from 'react-native-onyx'; -import _ from 'underscore'; import ONYXKEYS from '../../ONYXKEYS'; import CONST from '../../CONST'; let isTestToolsModalOpen = false; Onyx.connect({ key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, - callback: (val) => (isTestToolsModalOpen = val || false), + callback: (val) => (isTestToolsModalOpen = val ?? false), }); /** @@ -15,7 +15,7 @@ Onyx.connect({ */ function toggleTestToolsModal() { const toggle = () => Onyx.set(ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, !isTestToolsModalOpen); - const throttledToggle = _.throttle(toggle, CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME); + const throttledToggle = throttle(toggle, CONST.TIMING.TEST_TOOLS_MODAL_THROTTLE_TIME); throttledToggle(); } diff --git a/src/libs/actions/Timing.js b/src/libs/actions/Timing.ts similarity index 76% rename from src/libs/actions/Timing.js rename to src/libs/actions/Timing.ts index 2be2cdc6fa63..13f40bab87c9 100644 --- a/src/libs/actions/Timing.js +++ b/src/libs/actions/Timing.ts @@ -4,15 +4,20 @@ import Firebase from '../Firebase'; import * as API from '../API'; import Log from '../Log'; -let timestampData = {}; +type TimestampData = { + startTime: number; + shouldUseFirebase: boolean; +}; + +let timestampData: Record = {}; /** * Start a performance timing measurement * - * @param {String} eventName - * @param {Boolean} shouldUseFirebase - adds an additional trace in Firebase + * @param eventName + * @param shouldUseFirebase - adds an additional trace in Firebase */ -function start(eventName, shouldUseFirebase = false) { +function start(eventName: string, shouldUseFirebase = false) { timestampData[eventName] = {startTime: Date.now(), shouldUseFirebase}; if (!shouldUseFirebase) { @@ -25,11 +30,11 @@ function start(eventName, shouldUseFirebase = false) { /** * End performance timing. Measure the time between event start/end in milliseconds, and push to Grafana * - * @param {String} eventName - event name used as timestamp key - * @param {String} [secondaryName] - optional secondary event name, passed to grafana - * @param {number} [maxExecutionTime] - optional amount of time (ms) to wait before logging a warn + * @param eventName - event name used as timestamp key + * @param [secondaryName] - optional secondary event name, passed to grafana + * @param [maxExecutionTime] - optional amount of time (ms) to wait before logging a warn */ -function end(eventName, secondaryName = '', maxExecutionTime = 0) { +function end(eventName: string, secondaryName = '', maxExecutionTime = 0) { if (!timestampData[eventName]) { return; } diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts index 8653b038e381..8a7f0f7bd533 100644 --- a/src/libs/actions/Transaction.ts +++ b/src/libs/actions/Transaction.ts @@ -32,8 +32,8 @@ function createInitialWaypoints(transactionID: string) { Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, { comment: { waypoints: { - waypoint0: null, - waypoint1: null, + waypoint0: {}, + waypoint1: {}, }, }, }); @@ -107,15 +107,15 @@ function removeWaypoint(transactionID: string, currentIndex: string) { const transaction = allTransactions?.[transactionID] ?? {}; const existingWaypoints = transaction?.comment?.waypoints ?? {}; const totalWaypoints = Object.keys(existingWaypoints).length; - // Prevents removing the starting or ending waypoint but clear the stored address only if there are only two waypoints - if (totalWaypoints === 2 && (index === 0 || index === totalWaypoints - 1)) { - saveWaypoint(transactionID, index.toString(), null); - return; - } const waypointValues = Object.values(existingWaypoints); const removed = waypointValues.splice(index, 1); - const isRemovedWaypointEmpty = removed.length > 0 && !TransactionUtils.waypointHasValidAddress(removed[0] ?? null); + const isRemovedWaypointEmpty = removed.length > 0 && !TransactionUtils.waypointHasValidAddress(removed[0] ?? {}); + + // When there are only two waypoints we are adding empty waypoint back + if (totalWaypoints === 2 && (index === 0 || index === totalWaypoints - 1)) { + waypointValues.splice(index, 0, {}); + } const reIndexedWaypoints: WaypointCollection = {}; waypointValues.forEach((waypoint, idx) => { diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js index 78bd52988cdf..f65c20cd7e5b 100644 --- a/src/libs/actions/User.js +++ b/src/libs/actions/User.js @@ -541,7 +541,7 @@ function subscribeToUserEvents() { /** * Sync preferredSkinTone with Onyx and Server - * @param {String} skinTone + * @param {Number} skinTone */ function updatePreferredSkinTone(skinTone) { const optimisticData = [ diff --git a/src/libs/actions/Wallet.js b/src/libs/actions/Wallet.js index 38ca49e4836a..183920eccf21 100644 --- a/src/libs/actions/Wallet.js +++ b/src/libs/actions/Wallet.js @@ -69,12 +69,13 @@ function setAdditionalDetailsErrorMessage(additionalErrorMessage) { } /** - * Save the ID of the chat whose IOU triggered showing the KYC wall. + * Save the source that triggered the KYC wall and optionally the chat report ID associated with the IOU * + * @param {String} source * @param {String} chatReportID */ -function setKYCWallSourceChatReportID(chatReportID) { - Onyx.merge(ONYXKEYS.WALLET_TERMS, {chatReportID}); +function setKYCWallSource(source, chatReportID = '') { + Onyx.merge(ONYXKEYS.WALLET_TERMS, {source, chatReportID}); } /** @@ -333,5 +334,5 @@ export { updatePersonalDetails, verifyIdentity, acceptWalletTerms, - setKYCWallSourceChatReportID, + setKYCWallSource, }; diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts index fd1bbcaea521..0bf52d543a84 100644 --- a/src/libs/getComponentDisplayName.ts +++ b/src/libs/getComponentDisplayName.ts @@ -1,6 +1,6 @@ import {ComponentType} from 'react'; /** Returns the display name of a component */ -export default function getComponentDisplayName(component: ComponentType): string { +export default function getComponentDisplayName(component: ComponentType): string { return component.displayName ?? component.name ?? 'Component'; } diff --git a/src/libs/isReportMessageAttachment.ts b/src/libs/isReportMessageAttachment.ts index c257e1db4191..8d1112261d1f 100644 --- a/src/libs/isReportMessageAttachment.ts +++ b/src/libs/isReportMessageAttachment.ts @@ -1,10 +1,5 @@ import CONST from '../CONST'; - -type IsReportMessageAttachmentParams = { - text: string; - html: string; - translationKey: string; -}; +import {Message} from '../types/onyx/ReportAction'; /** * Check whether a report action is Attachment or not. @@ -12,7 +7,7 @@ type IsReportMessageAttachmentParams = { * * @param reportActionMessage report action's message as text, html and translationKey */ -export default function isReportMessageAttachment({text, html, translationKey}: IsReportMessageAttachmentParams): boolean { +export default function isReportMessageAttachment({text, html, translationKey}: Message): boolean { if (!text || !html) { return false; } diff --git a/src/libs/localFileDownload/index.android.js b/src/libs/localFileDownload/index.android.ts similarity index 88% rename from src/libs/localFileDownload/index.android.js rename to src/libs/localFileDownload/index.android.ts index b3e39e7a7a53..ad13b5c5cfa7 100644 --- a/src/libs/localFileDownload/index.android.js +++ b/src/libs/localFileDownload/index.android.ts @@ -1,15 +1,13 @@ import RNFetchBlob from 'react-native-blob-util'; import * as FileUtils from '../fileDownload/FileUtils'; +import LocalFileDownload from './types'; /** * Writes a local file to the app's internal directory with the given fileName * and textContent, so we're able to copy it to the Android public download dir. * After the file is copied, it is removed from the internal dir. - * - * @param {String} fileName - * @param {String} textContent */ -export default function localFileDownload(fileName, textContent) { +const localFileDownload: LocalFileDownload = (fileName, textContent) => { const newFileName = FileUtils.appendTimeToFileName(fileName); const dir = RNFetchBlob.fs.dirs.DocumentDir; const path = `${dir}/${newFileName}.txt`; @@ -34,4 +32,6 @@ export default function localFileDownload(fileName, textContent) { RNFetchBlob.fs.unlink(path); }); }); -} +}; + +export default localFileDownload; diff --git a/src/libs/localFileDownload/index.ios.js b/src/libs/localFileDownload/index.ios.ts similarity index 82% rename from src/libs/localFileDownload/index.ios.js rename to src/libs/localFileDownload/index.ios.ts index 1241f5a535db..3597ea5f6d3c 100644 --- a/src/libs/localFileDownload/index.ios.js +++ b/src/libs/localFileDownload/index.ios.ts @@ -1,16 +1,14 @@ import {Share} from 'react-native'; import RNFetchBlob from 'react-native-blob-util'; import * as FileUtils from '../fileDownload/FileUtils'; +import LocalFileDownload from './types'; /** * Writes a local file to the app's internal directory with the given fileName * and textContent, so we're able to share it using iOS' share API. * After the file is shared, it is removed from the internal dir. - * - * @param {String} fileName - * @param {String} textContent */ -export default function localFileDownload(fileName, textContent) { +const localFileDownload: LocalFileDownload = (fileName, textContent) => { const newFileName = FileUtils.appendTimeToFileName(fileName); const dir = RNFetchBlob.fs.dirs.DocumentDir; const path = `${dir}/${newFileName}.txt`; @@ -20,4 +18,6 @@ export default function localFileDownload(fileName, textContent) { RNFetchBlob.fs.unlink(path); }); }); -} +}; + +export default localFileDownload; diff --git a/src/libs/localFileDownload/index.js b/src/libs/localFileDownload/index.ts similarity index 77% rename from src/libs/localFileDownload/index.js rename to src/libs/localFileDownload/index.ts index 427928834c9c..7b9b4973d5c1 100644 --- a/src/libs/localFileDownload/index.js +++ b/src/libs/localFileDownload/index.ts @@ -1,18 +1,18 @@ import * as FileUtils from '../fileDownload/FileUtils'; +import LocalFileDownload from './types'; /** * Creates a Blob with the given fileName and textContent, then dynamically * creates a temporary anchor, just to programmatically click it, so the file * is downloaded by the browser. - * - * @param {String} fileName - * @param {String} textContent */ -export default function localFileDownload(fileName, textContent) { +const localFileDownload: LocalFileDownload = (fileName, textContent) => { const blob = new Blob([textContent], {type: 'text/plain'}); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.download = FileUtils.appendTimeToFileName(`${fileName}.txt`); link.href = url; link.click(); -} +}; + +export default localFileDownload; diff --git a/src/libs/localFileDownload/types.ts b/src/libs/localFileDownload/types.ts new file mode 100644 index 000000000000..2086e2334d39 --- /dev/null +++ b/src/libs/localFileDownload/types.ts @@ -0,0 +1,3 @@ +type LocalFileDownload = (fileName: string, textContent: string) => void; + +export default LocalFileDownload; diff --git a/src/libs/models/BankAccount.js b/src/libs/models/BankAccount.js index c0dee2a672ff..faf4cbad34e5 100644 --- a/src/libs/models/BankAccount.js +++ b/src/libs/models/BankAccount.js @@ -139,6 +139,10 @@ class BankAccount { return this.json.accountData.allowDebit === true; } + getType() { + return this.json.accountData.type; + } + /** * Return the client ID of this bank account * @@ -147,14 +151,14 @@ class BankAccount { */ getClientID() { // eslint-disable-next-line max-len - return `${Str.makeID(this.getMaskedAccountNumber())}${Str.makeID(this.getAddressName())}${Str.makeID(this.getRoutingNumber())}${this.getType()}`; + return `${Str.makeID(this.getMaskedAccountNumber())}${Str.makeID(this.getAddressName())}${Str.makeID(this.getRoutingNumber())}${this.getTransactionType()}`; } /** * @returns {String} * @private */ - getType() { + getTransactionType() { return this.isWithdrawal() ? 'withdrawal' : 'direct-deposit'; } @@ -222,6 +226,14 @@ class BankAccount { return this.json.accountData.additionalData || {}; } + /** + * Get the pending action of the bank account + * @returns {String} + */ + getPendingAction() { + return lodashGet(this.json, 'pendingAction', ''); + } + /** * Return a map needed to setup a withdrawal account * @returns {Object} diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 7c04970c3980..1eda16ad841a 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -7,6 +7,7 @@ import HeaderWithBackButton from '../components/HeaderWithBackButton'; import ScreenWrapper from '../components/ScreenWrapper'; import Navigation from '../libs/Navigation/Navigation'; import * as BankAccounts from '../libs/actions/BankAccounts'; +import * as PaymentMethods from '../libs/actions/PaymentMethods'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; import AddPlaidBankAccount from '../components/AddPlaidBankAccount'; import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI'; @@ -35,6 +36,9 @@ const propTypes = { /** Any reportID we should redirect to at the end of the flow */ exitReportID: PropTypes.string, + /** Whether we should continue with KYC at the end of the flow */ + shouldContinueKYCOnSuccess: PropTypes.bool, + /** Whether the form is loading */ isLoading: PropTypes.bool, @@ -51,6 +55,7 @@ const defaultProps = { isLoading: false, plaidAccountID: '', exitReportID: '', + shouldContinueKYCOnSuccess: false, }, }; @@ -86,10 +91,14 @@ class AddPersonalBankAccountPage extends React.Component { BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount); } - exitFlow() { + exitFlow(shouldContinue = false) { const exitReportID = lodashGet(this.props, 'personalBankAccount.exitReportID'); + const onSuccessFallbackRoute = lodashGet(this.props, 'personalBankAccount.onSuccessFallbackRoute', ''); + if (exitReportID) { Navigation.dismissModal(exitReportID); + } else if (shouldContinue && onSuccessFallbackRoute) { + PaymentMethods.continueSetup(onSuccessFallbackRoute); } else { Navigation.goBack(ROUTES.SETTINGS_WALLET); } @@ -115,7 +124,7 @@ class AddPersonalBankAccountPage extends React.Component { description={this.props.translate('addPersonalBankAccountPage.successMessage')} shouldShowButton buttonText={this.props.translate('common.continue')} - onButtonPress={this.exitFlow} + onButtonPress={() => this.exitFlow(true)} /> ) : (
{ - Navigation.isNavigationReady().then(() => { - Navigation.goBack(ROUTES.HOME); - }); - }); +function DemoSetupPage(props) { + useFocusEffect( + useCallback(() => { + if (props.route.name === CONST.DEMO_PAGES.MONEY2020) { + DemoActions.runMoney2020Demo(); + } else { + Navigation.goBack(ROUTES.HOME); + } + }, [props.route.name]), + ); return ; } diff --git a/src/pages/EditRequestDistancePage.js b/src/pages/EditRequestDistancePage.js index f5beba5fdcfd..4eb7340dd410 100644 --- a/src/pages/EditRequestDistancePage.js +++ b/src/pages/EditRequestDistancePage.js @@ -29,7 +29,7 @@ const propTypes = { /** Parameters the route gets */ params: PropTypes.shape({ /** Type of IOU */ - iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)), + iouType: PropTypes.oneOf(_.values(CONST.IOU.TYPE)), /** Id of the report on which the distance request is being created */ reportID: PropTypes.string, diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js index 6744f027b404..54ed5a8897a4 100644 --- a/src/pages/EditRequestReceiptPage.js +++ b/src/pages/EditRequestReceiptPage.js @@ -1,5 +1,6 @@ import React, {useState} from 'react'; import PropTypes from 'prop-types'; +import {View} from 'react-native'; import ScreenWrapper from '../components/ScreenWrapper'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; import Navigation from '../libs/Navigation/Navigation'; @@ -40,17 +41,21 @@ function EditRequestReceiptPage({route, transactionID}) { testID={EditRequestReceiptPage.displayName} headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []} > - - - - + {({safeAreaPaddingBottomStyle}) => ( + + + + + + + )} ); } diff --git a/src/pages/EditSplitBillPage.js b/src/pages/EditSplitBillPage.js index 217b1a100572..d10803cd40ea 100644 --- a/src/pages/EditSplitBillPage.js +++ b/src/pages/EditSplitBillPage.js @@ -37,11 +37,11 @@ const propTypes = { transaction: transactionPropTypes.isRequired, /** The draft transaction that holds data to be persisted on the current transaction */ - draftTransaction: PropTypes.shape(transactionPropTypes), + draftTransaction: transactionPropTypes, }; const defaultProps = { - draftTransaction: {}, + draftTransaction: undefined, }; function EditSplitBillPage({route, transaction, draftTransaction}) { diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js index 268c2664e01d..2badb5595f3b 100644 --- a/src/pages/EnablePayments/ActivateStep.js +++ b/src/pages/EnablePayments/ActivateStep.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; import * as LottieAnimations from '../../components/LottieAnimations'; @@ -24,25 +25,34 @@ const propTypes = { const defaultProps = { userWallet: {}, walletTerms: { + source: '', chatReportID: 0, }, }; function ActivateStep(props) { - const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD; - const animation = isGoldWallet ? LottieAnimations.Fireworks : LottieAnimations.ReviewingBankInfo; - const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer'); + const isActivatedWallet = _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], props.userWallet.tierName); + const animation = isActivatedWallet ? LottieAnimations.Fireworks : LottieAnimations.ReviewingBankInfo; + let continueButtonText = ''; + + if (props.walletTerms.chatReportID) { + continueButtonText = props.translate('activateStep.continueToPayment'); + } else if (props.walletTerms.source === CONST.KYC_WALL_SOURCE.ENABLE_WALLET) { + continueButtonText = props.translate('common.continue'); + } else { + continueButtonText = props.translate('activateStep.continueToTransfer'); + } return ( <> PaymentMethods.continueSetup()} /> ); diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index bd068ad9abcc..13091ab3f845 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -23,7 +23,6 @@ import DatePicker from '../../components/DatePicker'; import Form from '../../components/Form'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails'; import * as PersonalDetails from '../../libs/actions/PersonalDetails'; -import OfflineIndicator from '../../components/OfflineIndicator'; const propTypes = { ...withLocalizePropTypes, @@ -148,6 +147,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP if (!_.isEmpty(walletAdditionalDetails.questions)) { return ( - diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js index f7ef2a174208..3f179e309a98 100644 --- a/src/pages/EnablePayments/EnablePaymentsPage.js +++ b/src/pages/EnablePayments/EnablePaymentsPage.js @@ -47,6 +47,7 @@ function EnablePaymentsPage({userWallet}) { return ( diff --git a/src/pages/EnablePayments/walletTermsPropTypes.js b/src/pages/EnablePayments/walletTermsPropTypes.js index c5f19cd3a9f2..4dadd9946149 100644 --- a/src/pages/EnablePayments/walletTermsPropTypes.js +++ b/src/pages/EnablePayments/walletTermsPropTypes.js @@ -1,10 +1,15 @@ import PropTypes from 'prop-types'; +import _ from 'underscore'; +import CONST from '../../CONST'; /** Prop types related to the Terms step of KYC flow */ export default PropTypes.shape({ /** Any error message to show */ errors: PropTypes.objectOf(PropTypes.string), + /** The source that triggered the KYC wall */ + source: PropTypes.oneOf(_.values(CONST.KYC_WALL_SOURCE)), + /** When the user accepts the Wallet's terms in order to pay an IOU, this is the ID of the chatReport the IOU is linked to */ chatReportID: PropTypes.string, }); diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js index 62eff262611d..875cdf7e8072 100644 --- a/src/pages/LogInWithShortLivedAuthTokenPage.js +++ b/src/pages/LogInWithShortLivedAuthTokenPage.js @@ -12,8 +12,7 @@ import themeColors from '../styles/themes/default'; import Icon from '../components/Icon'; import * as Expensicons from '../components/Icon/Expensicons'; import * as Illustrations from '../components/Icon/Illustrations'; -import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; -import compose from '../libs/compose'; +import useLocalize from '../hooks/useLocalize'; import TextLink from '../components/TextLink'; import ONYXKEYS from '../ONYXKEYS'; @@ -33,8 +32,6 @@ const propTypes = { }), }).isRequired, - ...withLocalizePropTypes, - /** The details about the account that the user is signing in with */ account: PropTypes.shape({ /** Whether a sign is loading */ @@ -49,15 +46,26 @@ const defaultProps = { }; function LogInWithShortLivedAuthTokenPage(props) { + const {translate} = useLocalize(); + useEffect(() => { const email = lodashGet(props, 'route.params.email', ''); // We have to check for both shortLivedAuthToken and shortLivedToken, as the old mobile app uses shortLivedToken, and is not being actively updated. const shortLivedAuthToken = lodashGet(props, 'route.params.shortLivedAuthToken', '') || lodashGet(props, 'route.params.shortLivedToken', ''); - if (shortLivedAuthToken) { + + // Try to authenticate using the shortLivedToken if we're not already trying to load the accounts + if (shortLivedAuthToken && !props.account.isLoading) { Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken); return; } + + // If an error is returned as part of the route, ensure we set it in the onyxData for the account + const error = lodashGet(props, 'route.params.error', ''); + if (error) { + Session.setAccountError(error); + } + const exitTo = lodashGet(props, 'route.params.exitTo', ''); if (exitTo) { Navigation.isNavigationReady().then(() => { @@ -82,10 +90,18 @@ function LogInWithShortLivedAuthTokenPage(props) { src={Illustrations.RocketBlue} /> - {props.translate('deeplinkWrapper.launching')} + {translate('deeplinkWrapper.launching')} - {props.translate('deeplinkWrapper.expired')} Navigation.navigate()}>{props.translate('deeplinkWrapper.signIn')} + {translate('deeplinkWrapper.expired')}{' '} + { + Session.clearSignInData(); + Navigation.navigate(); + }} + > + {translate('deeplinkWrapper.signIn')} + @@ -105,9 +121,7 @@ LogInWithShortLivedAuthTokenPage.propTypes = propTypes; LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps; LogInWithShortLivedAuthTokenPage.displayName = 'LogInWithShortLivedAuthTokenPage'; -export default compose( - withLocalize, - withOnyx({ - account: {key: ONYXKEYS.ACCOUNT}, - }), -)(LogInWithShortLivedAuthTokenPage); +export default withOnyx({ + account: {key: ONYXKEYS.ACCOUNT}, + session: {key: ONYXKEYS.SESSION}, +})(LogInWithShortLivedAuthTokenPage); diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 64bff8655403..9ee5f838aafd 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -71,13 +71,9 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i const sectionsList = []; let indexOffset = 0; - sectionsList.push({ - title: undefined, - data: selectedOptions, - shouldShow: !_.isEmpty(selectedOptions), - indexOffset, - }); - indexOffset += selectedOptions.length; + const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(searchTerm, selectedOptions, filteredRecentReports, filteredPersonalDetails, {}, false, indexOffset); + sectionsList.push(formatResults.section); + indexOffset = formatResults.newIndexOffset; if (maxParticipantsReached) { return sectionsList; @@ -109,7 +105,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i } return sectionsList; - }, [translate, filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions]); + }, [translate, filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions, searchTerm]); /** * Removes a selected option from list if already selected. If not already selected add this option to the list. @@ -130,7 +126,24 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i recentReports, personalDetails: newChatPersonalDetails, userToInvite, - } = OptionsListUtils.getFilteredOptions(reports, personalDetails, betas, searchTerm, newSelectedOptions, excludedGroupEmails); + } = OptionsListUtils.getFilteredOptions( + reports, + personalDetails, + betas, + searchTerm, + newSelectedOptions, + isGroupChat ? excludedGroupEmails : [], + false, + true, + false, + {}, + [], + false, + {}, + [], + true, + true, + ); setSelectedOptions(newSelectedOptions); setFilteredRecentReports(recentReports); @@ -165,7 +178,24 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i recentReports, personalDetails: newChatPersonalDetails, userToInvite, - } = OptionsListUtils.getFilteredOptions(reports, personalDetails, betas, searchTerm, selectedOptions, isGroupChat ? excludedGroupEmails : []); + } = OptionsListUtils.getFilteredOptions( + reports, + personalDetails, + betas, + searchTerm, + selectedOptions, + isGroupChat ? excludedGroupEmails : [], + false, + true, + false, + {}, + [], + false, + {}, + [], + true, + true, + ); setFilteredRecentReports(recentReports); setFilteredPersonalDetails(newChatPersonalDetails); setFilteredUserToInvite(userToInvite); diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js index 1bf99a6f5681..b61e7bca7a76 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.js +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js @@ -104,7 +104,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) { const savePrivateNote = () => { const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], ''); - const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), originalNote); + const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim()); Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote); Keyboard.dismiss(); diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 42a535844c72..c6338159f65e 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -2,6 +2,7 @@ import React, {useMemo} from 'react'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import {View, ScrollView} from 'react-native'; import RoomHeaderAvatars from '../components/RoomHeaderAvatars'; import compose from '../libs/compose'; @@ -61,7 +62,8 @@ 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 shouldUseFullTitle = ReportUtils.isTaskReport(props.report); + const isPolicyMember = useMemo(() => PolicyUtils.isPolicyMember(props.report.policyID, props.policies), [props.report.policyID, props.policies]); + const shouldUseFullTitle = useMemo(() => ReportUtils.shouldUseFullTitleToDisplay(props.report), [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]); @@ -93,7 +95,7 @@ function ReportDetailsPage(props) { return items; } - if (participants.length) { + if ((!isUserCreatedPolicyRoom && participants.length) || (isUserCreatedPolicyRoom && isPolicyMember)) { items.push({ key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS, translationKey: 'common.members', @@ -101,7 +103,21 @@ function ReportDetailsPage(props) { subtitle: participants.length, isAnonymousAction: false, action: () => { - Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(props.report.reportID)); + if (isUserCreatedPolicyRoom && !props.report.parentReportID) { + Navigation.navigate(ROUTES.ROOM_MEMBERS.getRoute(props.report.reportID)); + } else { + Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(props.report.reportID)); + } + }, + }); + } else if ((!participants.length || !isPolicyMember) && isUserCreatedPolicyRoom && !props.report.parentReportID) { + items.push({ + key: CONST.REPORT_DETAILS_MENU_ITEM.INVITE, + translationKey: 'common.invite', + icon: Expensicons.Users, + isAnonymousAction: false, + action: () => { + Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(props.report.reportID)); }, }); } @@ -129,17 +145,18 @@ function ReportDetailsPage(props) { } if (isUserCreatedPolicyRoom || canLeaveRoom) { + const isWorkspaceMemberLeavingWorkspaceRoom = lodashGet(props.report, 'visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED && isPolicyMember; items.push({ key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE_ROOM, translationKey: isThread ? 'common.leaveThread' : 'common.leaveRoom', icon: Expensicons.Exit, isAnonymousAction: false, - action: () => Report.leaveRoom(props.report.reportID), + action: () => Report.leaveRoom(props.report.reportID, isWorkspaceMemberLeavingWorkspaceRoom), }); } return items; - }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isUserCreatedPolicyRoom, canLeaveRoom, isGroupDMChat]); + }, [props.report, isMoneyRequestReport, participants.length, isArchivedRoom, isThread, isUserCreatedPolicyRoom, canLeaveRoom, isGroupDMChat, isPolicyMember]); const displayNamesWithTooltips = useMemo(() => { const hasMultipleParticipants = participants.length > 1; @@ -160,7 +177,18 @@ function ReportDetailsPage(props) { return ( - + { + const topMostReportID = Navigation.getTopmostReportId(); + if (topMostReportID) { + Navigation.goBack(ROUTES.HOME); + return; + } + Navigation.goBack(); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.report.reportID)); + }} + /> diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js new file mode 100644 index 000000000000..c923a8d96d70 --- /dev/null +++ b/src/pages/RoomInvitePage.js @@ -0,0 +1,265 @@ +import React, {useEffect, useMemo, useState, useCallback} from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import lodashGet from 'lodash/get'; +import ScreenWrapper from '../components/ScreenWrapper'; +import HeaderWithBackButton from '../components/HeaderWithBackButton'; +import Navigation from '../libs/Navigation/Navigation'; +import styles from '../styles/styles'; +import compose from '../libs/compose'; +import ONYXKEYS from '../ONYXKEYS'; +import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton'; +import * as OptionsListUtils from '../libs/OptionsListUtils'; +import CONST from '../CONST'; +import {policyDefaultProps, policyPropTypes} from './workspace/withPolicy'; +import withReportOrNotFound from './home/report/withReportOrNotFound'; +import reportPropTypes from './reportPropTypes'; +import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import ROUTES from '../ROUTES'; +import * as PolicyUtils from '../libs/PolicyUtils'; +import useLocalize from '../hooks/useLocalize'; +import SelectionList from '../components/SelectionList'; +import * as Report from '../libs/actions/Report'; +import * as ReportUtils from '../libs/ReportUtils'; +import Permissions from '../libs/Permissions'; +import personalDetailsPropType from './personalDetailsPropType'; +import * as Browser from '../libs/Browser'; + +const propTypes = { + /** Beta features list */ + betas: PropTypes.arrayOf(PropTypes.string), + + /** All of the personal details for everyone */ + personalDetails: PropTypes.objectOf(personalDetailsPropType), + + /** URL Route params */ + route: PropTypes.shape({ + /** Params from the URL path */ + params: PropTypes.shape({ + /** policyID passed via route: /workspace/:policyID/invite */ + policyID: PropTypes.string, + }), + }).isRequired, + + /** The report currently being looked at */ + report: reportPropTypes.isRequired, + + /** The policies which the user has access to and which the report could be tied to */ + policies: PropTypes.shape({ + /** ID of the policy */ + id: PropTypes.string, + }).isRequired, + + ...policyPropTypes, +}; + +const defaultProps = { + personalDetails: {}, + betas: [], + ...policyDefaultProps, +}; + +function RoomInvitePage(props) { + const {translate} = useLocalize(); + const [searchTerm, setSearchTerm] = useState(''); + const [selectedOptions, setSelectedOptions] = useState([]); + const [personalDetails, setPersonalDetails] = useState([]); + const [userToInvite, setUserToInvite] = useState(null); + + // Any existing participants and Expensify emails should not be eligible for invitation + const excludedUsers = useMemo(() => [...lodashGet(props.report, 'participants', []), ...CONST.EXPENSIFY_EMAILS], [props.report]); + + useEffect(() => { + // Kick the user out if they tried to navigate to this via the URL + if (Permissions.canUsePolicyRooms(props.betas)) { + return; + } + Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID)); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { + const inviteOptions = OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, searchTerm, excludedUsers); + + // Update selectedOptions with the latest personalDetails information + const detailsMap = {}; + _.forEach(inviteOptions.personalDetails, (detail) => (detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail, false))); + const newSelectedOptions = []; + _.forEach(selectedOptions, (option) => { + newSelectedOptions.push(_.has(detailsMap, option.login) ? {...detailsMap[option.login], isSelected: true} : option); + }); + + setUserToInvite(inviteOptions.userToInvite); + setPersonalDetails(inviteOptions.personalDetails); + setSelectedOptions(newSelectedOptions); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change + }, [props.personalDetails, props.betas, searchTerm, excludedUsers]); + + const getSections = () => { + const sections = []; + let indexOffset = 0; + + sections.push({ + title: undefined, + data: selectedOptions, + shouldShow: true, + indexOffset, + }); + indexOffset += selectedOptions.length; + + // Filtering out selected users from the search results + const selectedLogins = _.map(selectedOptions, ({login}) => login); + const personalDetailsWithoutSelected = _.filter(personalDetails, ({login}) => !_.contains(selectedLogins, login)); + const personalDetailsFormatted = _.map(personalDetailsWithoutSelected, (personalDetail) => OptionsListUtils.formatMemberForList(personalDetail, false)); + const hasUnselectedUserToInvite = userToInvite && !_.contains(selectedLogins, userToInvite.login); + + sections.push({ + title: translate('common.contacts'), + data: personalDetailsFormatted, + shouldShow: !_.isEmpty(personalDetailsFormatted), + indexOffset, + }); + indexOffset += personalDetailsFormatted.length; + + if (hasUnselectedUserToInvite) { + sections.push({ + title: undefined, + data: [OptionsListUtils.formatMemberForList(userToInvite, false)], + shouldShow: true, + indexOffset, + }); + } + + return sections; + }; + + const toggleOption = useCallback( + (option) => { + const isOptionInList = _.some(selectedOptions, (selectedOption) => selectedOption.login === option.login); + + let newSelectedOptions; + if (isOptionInList) { + newSelectedOptions = _.reject(selectedOptions, (selectedOption) => selectedOption.login === option.login); + } else { + newSelectedOptions = [...selectedOptions, {...option, isSelected: true}]; + } + + setSelectedOptions(newSelectedOptions); + }, + [selectedOptions], + ); + + const validate = useCallback(() => { + const errors = {}; + if (selectedOptions.length <= 0) { + errors.noUserSelected = true; + } + + return _.size(errors) <= 0; + }, [selectedOptions]); + + // Non policy members should not be able to view the participants of a room + const reportID = props.report.reportID; + const isPolicyMember = useMemo(() => PolicyUtils.isPolicyMember(props.report.policyID, props.policies), [props.report.policyID, props.policies]); + const backRoute = useMemo(() => (isPolicyMember ? ROUTES.ROOM_MEMBERS.getRoute(reportID) : ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID)), [isPolicyMember, reportID]); + const reportName = useMemo(() => ReportUtils.getReportName(props.report), [props.report]); + const inviteUsers = useCallback(() => { + if (!validate()) { + return; + } + const invitedEmailsToAccountIDs = {}; + _.each(selectedOptions, (option) => { + const login = option.login || ''; + const accountID = lodashGet(option, 'accountID', ''); + if (!login.toLowerCase().trim() || !accountID) { + return; + } + invitedEmailsToAccountIDs[login] = Number(accountID); + }); + Report.inviteToRoom(props.report.reportID, invitedEmailsToAccountIDs); + Navigation.navigate(backRoute); + }, [selectedOptions, backRoute, props.report.reportID, validate]); + + const headerMessage = useMemo(() => { + const searchValue = searchTerm.trim().toLowerCase(); + if (!userToInvite && CONST.EXPENSIFY_EMAILS.includes(searchValue)) { + return translate('messages.errorMessageInvalidEmail'); + } + if (!userToInvite && excludedUsers.includes(searchValue)) { + return translate('messages.userIsAlreadyMember', {login: searchValue, name: reportName}); + } + return OptionsListUtils.getHeaderMessage(personalDetails.length !== 0, Boolean(userToInvite), searchValue); + }, [excludedUsers, translate, searchTerm, userToInvite, personalDetails, reportName]); + return ( + + {({didScreenTransitionEnd}) => { + const sections = didScreenTransitionEnd ? getSections() : []; + + return ( + Navigation.goBack(backRoute)} + > + { + Navigation.goBack(backRoute); + }} + /> + + + + + + ); + }} + + ); +} + +RoomInvitePage.propTypes = propTypes; +RoomInvitePage.defaultProps = defaultProps; +RoomInvitePage.displayName = 'RoomInvitePage'; + +export default compose( + withReportOrNotFound, + withOnyx({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + betas: { + key: ONYXKEYS.BETAS, + }, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, + }), +)(RoomInvitePage); diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js new file mode 100644 index 000000000000..87e1afab8ae9 --- /dev/null +++ b/src/pages/RoomMembersPage.js @@ -0,0 +1,335 @@ +import React, {useMemo, useState, useCallback, useEffect} from 'react'; +import _ from 'underscore'; +import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import styles from '../styles/styles'; +import compose from '../libs/compose'; +import CONST from '../CONST'; +import ONYXKEYS from '../ONYXKEYS'; +import ROUTES from '../ROUTES'; +import Navigation from '../libs/Navigation/Navigation'; +import ScreenWrapper from '../components/ScreenWrapper'; +import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '../components/HeaderWithBackButton'; +import ConfirmModal from '../components/ConfirmModal'; +import Button from '../components/Button'; +import SelectionList from '../components/SelectionList'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; +import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; +import withReportOrNotFound from './home/report/withReportOrNotFound'; +import personalDetailsPropType from './personalDetailsPropType'; +import reportPropTypes from './reportPropTypes'; +import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails'; +import * as PolicyUtils from '../libs/PolicyUtils'; +import * as OptionsListUtils from '../libs/OptionsListUtils'; +import * as UserUtils from '../libs/UserUtils'; +import * as Report from '../libs/actions/Report'; +import * as ReportUtils from '../libs/ReportUtils'; +import Permissions from '../libs/Permissions'; +import Log from '../libs/Log'; +import * as Browser from '../libs/Browser'; + +const propTypes = { + /** All personal details asssociated with user */ + personalDetails: PropTypes.objectOf(personalDetailsPropType), + + /** Beta features list */ + betas: PropTypes.arrayOf(PropTypes.string), + + /** The report currently being looked at */ + report: reportPropTypes.isRequired, + + /** The policies which the user has access to and which the report could be tied to */ + policies: PropTypes.shape({ + /** ID of the policy */ + id: PropTypes.string, + }), + + /** URL Route params */ + route: PropTypes.shape({ + /** Params from the URL path */ + params: PropTypes.shape({ + /** reportID passed via route: /workspace/:reportID/members */ + reportID: PropTypes.string, + }), + }).isRequired, + + /** Session info for the currently logged in user. */ + session: PropTypes.shape({ + /** Currently logged in user accountID */ + accountID: PropTypes.number, + }), + + ...withLocalizePropTypes, + ...windowDimensionsPropTypes, + ...withCurrentUserPersonalDetailsPropTypes, +}; + +const defaultProps = { + personalDetails: {}, + session: { + accountID: 0, + }, + report: {}, + policies: {}, + betas: [], + ...withCurrentUserPersonalDetailsDefaultProps, +}; + +function RoomMembersPage(props) { + const [selectedMembers, setSelectedMembers] = useState([]); + const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false); + const [searchValue, setSearchValue] = useState(''); + const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false); + + /** + * Get members for the current room + */ + const getRoomMembers = useCallback(() => { + Report.openRoomMembersPage(props.report.reportID); + setDidLoadRoomMembers(true); + }, [props.report.reportID]); + + useEffect(() => { + // Kick the user out if they tried to navigate to this via the URL + if (!PolicyUtils.isPolicyMember(props.report.policyID, props.policies) || !Permissions.canUsePolicyRooms(props.betas)) { + Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID)); + return; + } + getRoomMembers(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + /** + * Open the modal to invite a user + */ + const inviteUser = () => { + setSearchValue(''); + Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(props.report.reportID)); + }; + + /** + * Remove selected users from the room + */ + const removeUsers = () => { + Report.removeFromRoom(props.report.reportID, selectedMembers); + setSelectedMembers([]); + setRemoveMembersConfirmModalVisible(false); + }; + + /** + * Add user from the selectedMembers list + * + * @param {String} login + */ + const addUser = useCallback((accountID) => { + setSelectedMembers((prevSelected) => [...prevSelected, accountID]); + }, []); + + /** + * Remove user from the selectedEmployees list + * + * @param {String} login + */ + const removeUser = useCallback((accountID) => { + setSelectedMembers((prevSelected) => _.without(prevSelected, accountID)); + }, []); + + /** + * Toggle user from the selectedMembers list + * + * @param {String} accountID + * @param {String} pendingAction + * + */ + const toggleUser = useCallback( + (accountID, pendingAction) => { + if (pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) { + return; + } + + // Add or remove the user if the checkbox is enabled + if (_.contains(selectedMembers, Number(accountID))) { + removeUser(Number(accountID)); + } else { + addUser(Number(accountID)); + } + }, + [selectedMembers, addUser, removeUser], + ); + + /** + * Add or remove all users passed from the selectedMembers list + * @param {Object} memberList + */ + const toggleAllUsers = (memberList) => { + const enabledAccounts = _.filter(memberList, (member) => !member.isDisabled); + const everyoneSelected = _.every(enabledAccounts, (member) => _.contains(selectedMembers, Number(member.keyForList))); + + if (everyoneSelected) { + setSelectedMembers([]); + } else { + const everyAccountId = _.map(enabledAccounts, (member) => Number(member.keyForList)); + setSelectedMembers(everyAccountId); + } + }; + + /** + * Show the modal to confirm removal of the selected members + */ + const askForConfirmationToRemove = () => { + setRemoveMembersConfirmModalVisible(true); + }; + + const getMemberOptions = () => { + let result = []; + + _.each(props.report.participantAccountIDs, (accountID) => { + const details = props.personalDetails[accountID]; + + if (!details) { + Log.hmmm(`[RoomMembersPage] no personal details found for room member with accountID: ${accountID}`); + return; + } + + // If search value is provided, filter out members that don't match the search value + if (searchValue.trim()) { + let memberDetails = ''; + if (details.login) { + memberDetails += ` ${details.login.toLowerCase()}`; + } + if (details.firstName) { + memberDetails += ` ${details.firstName.toLowerCase()}`; + } + if (details.lastName) { + memberDetails += ` ${details.lastName.toLowerCase()}`; + } + if (details.displayName) { + memberDetails += ` ${details.displayName.toLowerCase()}`; + } + if (details.phoneNumber) { + memberDetails += ` ${details.phoneNumber.toLowerCase()}`; + } + + if (!OptionsListUtils.isSearchStringMatch(searchValue.trim(), memberDetails)) { + return; + } + } + + result.push({ + keyForList: String(accountID), + accountID: Number(accountID), + isSelected: _.contains(selectedMembers, Number(accountID)), + isDisabled: accountID === props.session.accountID, + text: props.formatPhoneNumber(details.displayName), + alternateText: props.formatPhoneNumber(details.login), + icons: [ + { + source: UserUtils.getAvatar(details.avatar, accountID), + name: details.login, + type: CONST.ICON_TYPE_AVATAR, + }, + ], + }); + }); + + result = _.sortBy(result, (value) => value.text.toLowerCase()); + + return result; + }; + + const isPolicyMember = useMemo(() => PolicyUtils.isPolicyMember(props.report.policyID, props.policies), [props.report.policyID, props.policies]); + const data = getMemberOptions(); + const headerMessage = searchValue.trim() && !data.length ? props.translate('roomMembersPage.memberNotFound') : ''; + return ( + + Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))} + > + { + setSearchValue(''); + Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID)); + }} + /> + setRemoveMembersConfirmModalVisible(false)} + prompt={props.translate('roomMembersPage.removeMembersPrompt')} + confirmText={props.translate('common.remove')} + cancelText={props.translate('common.cancel')} + /> + + +