diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..83e9479ce0c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { }, { selector: ['parameter', 'method'], - format: ['camelCase'], + format: ['camelCase', 'PascalCase'], }, ], '@typescript-eslint/ban-types': [ diff --git a/.github/actions/composite/setupGitForOSBotifyApp/action.yml b/.github/actions/composite/setupGitForOSBotifyApp/action.yml new file mode 100644 index 000000000000..bd5b5139bc6b --- /dev/null +++ b/.github/actions/composite/setupGitForOSBotifyApp/action.yml @@ -0,0 +1,53 @@ +# This is a duplicate for setupGitForOSBotify except we are using a Github App now for Github Authentication. +# GitHub Apps have higher rate limits. The reason this is being duplicated is because the existing action is still in use +# in open PRs/branches that aren't up to date with main and it ends up breaking action workflows as a result. +name: "Setup Git for OSBotify" +description: "Setup Git for OSBotify" + +inputs: + GPG_PASSPHRASE: + description: "Passphrase used to decrypt GPG key" + required: true + OS_BOTIFY_APP_ID: + description: "Application ID for OS Botify" + required: true + OS_BOTIFY_PRIVATE_KEY: + description: "OS Botify's private key" + required: true + +outputs: + # Do not try to use this for committing code. Use `secrets.OS_BOTIFY_COMMIT_TOKEN` instead + OS_BOTIFY_API_TOKEN: + description: Token to use for GitHub API interactions. + value: ${{ steps.generateToken.outputs.token }} + +runs: + using: composite + steps: + - name: Decrypt OSBotify GPG key + run: cd .github/workflows && gpg --quiet --batch --yes --decrypt --passphrase=${{ inputs.GPG_PASSPHRASE }} --output OSBotify-private-key.asc OSBotify-private-key.asc.gpg + shell: bash + + - name: Import OSBotify GPG Key + shell: bash + run: cd .github/workflows && gpg --import OSBotify-private-key.asc + + - name: Set up git for OSBotify + shell: bash + run: | + git config user.signingkey 367811D53E34168C + git config commit.gpgsign true + git config user.name OSBotify + git config user.email infra+osbotify@expensify.com + + - name: Enable debug logs for git + shell: bash + if: runner.debug == '1' + run: echo "GIT_TRACE=true" >> "$GITHUB_ENV" + + - name: Generate a token + id: generateToken + uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a + with: + app_id: ${{ inputs.OS_BOTIFY_APP_ID }} + private_key: ${{ inputs.OS_BOTIFY_PRIVATE_KEY }} diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh index 77c3ea25326b..1411fffc8389 100755 --- a/.github/scripts/findUnusedKeys.sh +++ b/.github/scripts/findUnusedKeys.sh @@ -6,7 +6,7 @@ LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)" readonly SRC_DIR="${LIB_PATH}/src" readonly STYLES_DIR="${LIB_PATH}/src/styles" -readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.js" +readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.ts" readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities" readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt" readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt" @@ -210,7 +210,12 @@ find_theme_style_and_store_keys() { fi # Check if we are inside an arrow function - if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then + if [[ "$line" =~ ^[[:space:]]*([a-zA-Zgv 0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*([a-zA-Zgv 0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then + inside_arrow_function=true + continue + fi + + if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then inside_arrow_function=true continue fi @@ -348,7 +353,7 @@ echo "πŸ” Looking for styles." find_utility_styles_store_prefix find_utility_usage_as_styles -# Find and store keys from styles.js +# Find and store keys from styles.ts find_styles_object_and_store_keys "$STYLES_FILE" find_styles_functions_and_store_keys "$STYLES_FILE" collect_theme_keys_from_styles "$STYLES_FILE" diff --git a/.github/workflows/cherryPick.yml b/.github/workflows/cherryPick.yml index b6558b049647..e6da6fff1446 100644 --- a/.github/workflows/cherryPick.yml +++ b/.github/workflows/cherryPick.yml @@ -11,7 +11,7 @@ jobs: validateActor: runs-on: ubuntu-latest outputs: - IS_DEPLOYER: ${{ fromJSON(steps.isDeployer.outputs.IS_DEPLOYER) || github.actor == 'OSBotify' }} + IS_DEPLOYER: ${{ fromJSON(steps.isDeployer.outputs.IS_DEPLOYER) || github.actor == 'OSBotify' || github.actor == 'os-botify[bot]' }} steps: - name: Check if user is deployer id: isDeployer @@ -41,15 +41,17 @@ jobs: token: ${{ secrets.OS_BOTIFY_TOKEN }} - name: Set up git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Get previous app version id: getPreviousVersion uses: Expensify/App/.github/actions/javascript/getPreviousVersion@main with: - SEMVER_LEVEL: 'PATCH' + SEMVER_LEVEL: "PATCH" - name: Fetch history of relevant refs run: | @@ -119,7 +121,7 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }} - - name: 'Announces a CP failure in the #announce Slack room' + - name: "Announces a CP failure in the #announce Slack room" uses: 8398a7/action-slack@v3 if: ${{ failure() }} with: diff --git a/.github/workflows/createNewVersion.yml b/.github/workflows/createNewVersion.yml index ba907334c595..c9c97d5355fb 100644 --- a/.github/workflows/createNewVersion.yml +++ b/.github/workflows/createNewVersion.yml @@ -26,12 +26,18 @@ on: LARGE_SECRET_PASSPHRASE: description: Passphrase used to decrypt GPG key required: true - OS_BOTIFY_TOKEN: - description: Token for the OSBotify user - required: true SLACK_WEBHOOK: description: Webhook used to comment in slack required: true + OS_BOTIFY_COMMIT_TOKEN: + description: OSBotify personal access token, used to workaround committing to protected branch + required: true + OS_BOTIFY_APP_ID: + description: Application ID for OS Botify App + required: true + OS_BOTIFY_PRIVATE_KEY: + description: OSBotify private key + required: true jobs: validateActor: @@ -43,7 +49,7 @@ jobs: id: getUserPermissions run: echo "PERMISSION=$(gh api /repos/${{ github.repository }}/collaborators/${{ github.actor }}/permission | jq -r '.permission')" >> "$GITHUB_OUTPUT" env: - GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }} + GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }} createNewVersion: runs-on: macos-latest @@ -65,18 +71,23 @@ jobs: uses: actions/checkout@v3 with: ref: main - token: ${{ secrets.OS_BOTIFY_TOKEN }} + # The OS_BOTIFY_COMMIT_TOKEN is a personal access token tied to osbotify + # This is a workaround to allow pushes to a protected branch + token: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }} - name: Setup git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab + id: setupGitForOSBotify with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Generate version id: bumpVersion uses: Expensify/App/.github/actions/javascript/bumpVersion@main with: - GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }} + GITHUB_TOKEN: ${{ steps.setupGitForOSBotify.outputs.OS_BOTIFY_API_TOKEN }} SEMVER_LEVEL: ${{ inputs.SEMVER_LEVEL }} - name: Commit new version diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index f2ff67680940..78040f237689 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -14,11 +14,13 @@ jobs: with: ref: staging token: ${{ secrets.OS_BOTIFY_TOKEN }} - - - name: Setup git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + + - uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab + id: setupGitForOSBotify with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Tag version run: git tag "$(npm run print-version --silent)" @@ -30,16 +32,18 @@ jobs: runs-on: ubuntu-latest if: github.ref == 'refs/heads/production' steps: - - name: Checkout - uses: actions/checkout@v3 + - uses: actions/checkout@v3 + name: Checkout with: ref: production token: ${{ secrets.OS_BOTIFY_TOKEN }} - - name: Setup git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + - uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab + id: setupGitForOSBotify with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Get current app version run: echo "PRODUCTION_VERSION=$(npm run print-version --silent)" >> "$GITHUB_ENV" @@ -49,7 +53,7 @@ jobs: uses: Expensify/App/.github/actions/javascript/getDeployPullRequestList@main with: TAG: ${{ env.PRODUCTION_VERSION }} - GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }} + GITHUB_TOKEN: ${{ steps.setupGitForOSBotify.outputs.OS_BOTIFY_API_TOKEN }} IS_PRODUCTION_DEPLOY: true - name: Generate Release Body @@ -64,4 +68,4 @@ jobs: tag_name: ${{ env.PRODUCTION_VERSION }} body: ${{ steps.getReleaseBody.outputs.RELEASE_BODY }} env: - GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }} + GITHUB_TOKEN: ${{ steps.setupGitForOSBotify.outputs.OS_BOTIFY_API_TOKEN }} diff --git a/.github/workflows/e2ePerformanceTests.yml b/.github/workflows/e2ePerformanceTests.yml index 3666e8c7d343..308404b74bc0 100644 --- a/.github/workflows/e2ePerformanceTests.yml +++ b/.github/workflows/e2ePerformanceTests.yml @@ -191,14 +191,15 @@ jobs: if: ${{ always() && runner.debug != null && fromJSON(runner.debug) }} run: cat "./Host_Machine_Files/\$WORKING_DIRECTORY/debug.log" - - name: Check if test failed, if so post the results and add the DeployBlocker label - run: | - if grep -q 'πŸ”΄' ./Host_Machine_Files/\$WORKING_DIRECTORY/output.md; then - gh pr edit ${{ inputs.PR_NUMBER }} --add-label DeployBlockerCash - gh pr comment ${{ inputs.PR_NUMBER }} -F ./Host_Machine_Files/\$WORKING_DIRECTORY/output.md - gh pr comment ${{ inputs.PR_NUMBER }} -b "@Expensify/mobile-deployers πŸ“£ Please look into this performance regression as it's a deploy blocker." - else - echo 'βœ… no performance regression detected' - fi - env: - GITHUB_TOKEN: ${{ github.token }} +# TODO: Once tests are more reliable we should uncomment this +# - name: Check if test failed, if so post the results and add the DeployBlocker label +# run: | +# if grep -q 'πŸ”΄' ./Host_Machine_Files/\$WORKING_DIRECTORY/output.md; then +# gh pr edit ${{ inputs.PR_NUMBER }} --add-label DeployBlockerCash +# gh pr comment ${{ inputs.PR_NUMBER }} -F ./Host_Machine_Files/\$WORKING_DIRECTORY/output.md +# gh pr comment ${{ inputs.PR_NUMBER }} -b "@Expensify/mobile-deployers πŸ“£ Please look into this performance regression as it's a deploy blocker." +# else +# echo 'βœ… no performance regression detected' +# fi +# env: +# GITHUB_TOKEN: ${{ github.token }} diff --git a/.github/workflows/finishReleaseCycle.yml b/.github/workflows/finishReleaseCycle.yml index e2323af2486e..4fe6249edacc 100644 --- a/.github/workflows/finishReleaseCycle.yml +++ b/.github/workflows/finishReleaseCycle.yml @@ -12,6 +12,19 @@ jobs: outputs: isValid: ${{ fromJSON(steps.isDeployer.outputs.IS_DEPLOYER) && !fromJSON(steps.checkDeployBlockers.outputs.HAS_DEPLOY_BLOCKERS) }} steps: + - name: Checkout + uses: actions/checkout@v3 + with: + ref: main + token: ${{ secrets.OS_BOTIFY_TOKEN }} + + - uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab + id: setupGitForOSBotify + with: + GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} + - name: Validate actor is deployer id: isDeployer run: | @@ -70,9 +83,12 @@ jobs: token: ${{ secrets.OS_BOTIFY_TOKEN }} - name: Setup Git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + id: setupGitForOSBotify + uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Update production branch run: | @@ -109,9 +125,11 @@ jobs: token: ${{ secrets.OS_BOTIFY_TOKEN }} - name: Setup Git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Update staging branch to trigger staging deploy run: | diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml index ad002e164837..1105f78da27a 100644 --- a/.github/workflows/platformDeploy.yml +++ b/.github/workflows/platformDeploy.yml @@ -16,7 +16,7 @@ jobs: validateActor: runs-on: ubuntu-latest outputs: - IS_DEPLOYER: ${{ fromJSON(steps.isUserDeployer.outputs.IS_DEPLOYER) || github.actor == 'OSBotify' }} + IS_DEPLOYER: ${{ fromJSON(steps.isUserDeployer.outputs.IS_DEPLOYER) || github.actor == 'OSBotify' || github.actor == 'os-botify[bot]' }} steps: - name: Check if user is deployer id: isUserDeployer @@ -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/.github/workflows/preDeploy.yml b/.github/workflows/preDeploy.yml index 186490c7baaf..d7d372aa7948 100644 --- a/.github/workflows/preDeploy.yml +++ b/.github/workflows/preDeploy.yml @@ -92,9 +92,11 @@ jobs: token: ${{ secrets.OS_BOTIFY_TOKEN }} - name: Setup Git for OSBotify - uses: Expensify/App/.github/actions/composite/setupGitForOSBotify@main + uses: Expensify/App/.github/actions/composite/setupGitForOSBotifyApp@8c19d6da4a3d7ce3b15c9cd89a802187d208ecab with: GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }} + OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }} + OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }} - name: Update staging branch from main run: | diff --git a/.storybook/fonts.css b/.storybook/fonts.css index bbbcf3839000..906490c3a9d9 100644 --- a/.storybook/fonts.css +++ b/.storybook/fonts.css @@ -40,6 +40,13 @@ src: url('../assets/fonts/web/ExpensifyMono-Bold.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyMono-Bold.woff') format('woff'); } +@font-face { + font-family: ExpensifyNewKansas-Medium; + font-weight: 400; + font-style: normal; + src: url('../assets/fonts/web/ExpensifyNewKansas-Medium.woff2') format('woff2'), url('../assets/fonts/web/ExpensifyNewKansas-Medium.woff') format('woff'); +} + * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 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/README.md b/README.md index daf9ddfae1ff..9aad797ebb51 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ New Expensify Icon

- + New Expensify

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 a28038cf0f18..7cc5a511d4b9 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 1001038104 - versionName "1.3.81-4" + versionCode 1001038701 + versionName "1.3.87-1" } 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/animations/FastMoney.json b/assets/animations/FastMoney.json new file mode 100644 index 000000000000..95d560319141 --- /dev/null +++ b/assets/animations/FastMoney.json @@ -0,0 +1 @@ +{"v":"5.9.6","fr":24,"ip":0,"op":80,"w":375,"h":240,"nm":"C","assets":[{"id":"comp_0","nm":"C","fr":24,"layers":[{"ind":1,"ty":0,"nm":"E","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[174.5,291,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[42,42,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":0,"op":80,"st":0}]},{"id":"comp_1","nm":"E","fr":24,"layers":[{"ind":1,"ty":0,"nm":"t","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[966,966,0],"to":[0,-20,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":8,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":16,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":24,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":32,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":40,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":48,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":52,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":56,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":64,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":72,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":76,"s":[966,846,0],"to":[0,0,0],"ti":[0,-20,0]},{"t":80,"s":[966,966,0]}],"l":2},"a":{"a":0,"k":[966,543.5,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1087,"ip":0,"op":80,"st":0},{"ind":2,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":0,"op":16,"st":0},{"ind":3,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":16,"op":32,"st":16},{"ind":4,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":32,"op":48,"st":32},{"ind":5,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":48,"op":64,"st":48},{"ind":6,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":64,"op":80,"st":64},{"ind":7,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":0,"op":8,"st":-8},{"ind":8,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":8,"op":24,"st":8},{"ind":9,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":24,"op":40,"st":24},{"ind":10,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":40,"op":56,"st":40},{"ind":11,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":56,"op":72,"st":56},{"ind":12,"ty":0,"nm":"l","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[1060,966,0],"l":2},"a":{"a":0,"k":[966,966,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1932,"ip":72,"op":80,"st":72},{"ind":13,"ty":0,"nm":"t","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[966,966,0],"to":[0,-20,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":8,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":16,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":24,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":32,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":40,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":48,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":52,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":56,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":64,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[966,846,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":72,"s":[966,966,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":76,"s":[966,846,0],"to":[0,0,0],"ti":[0,-20,0]},{"t":80,"s":[966,966,0]}],"l":2},"a":{"a":0,"k":[966,543.5,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1087,"ip":0,"op":80,"st":0},{"ind":14,"ty":0,"nm":"u","parent":1,"refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[966,543,0],"l":2},"a":{"a":0,"k":[966,543.5,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"w":1932,"h":1087,"ip":0,"op":80,"st":0},{"ind":15,"ty":3,"nm":"s","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":50,"s":[0]},{"t":54,"s":[9]}]},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":50,"s":[1304.5,374.75,0],"to":[12.667,-19,0],"ti":[-13.167,5,0]},{"t":54,"s":[1362.5,335.75,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":50,"s":[100,100,100]},{"t":54,"s":[25,25,100]}],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":16,"ty":3,"nm":"s","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":50,"s":[0]},{"t":54,"s":[6]}]},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":50,"s":[1341.898,405.813,0],"to":[13.5,0.917,0],"ti":[-11.5,-9.417,0]},{"t":54,"s":[1395.898,426.313,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":50,"s":[100,100,100]},{"t":54,"s":[25,25,100]}],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":17,"ty":4,"nm":"s","parent":15,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-278.97,470.86,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-8.927,0],[1.705,-3.01],[7.797,-1.705]],"o":[[4.514,-11.535],[7.87,0],[-1.705,3.009],[-7.797,1.706]],"v":[[-14.694,12.137],[6.068,-12.137],[12.99,-2.507],[-0.378,5.015]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.553,0.784,1,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1285.643,129.839]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":50,"op":55,"st":0},{"ind":18,"ty":4,"nm":"s","parent":16,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-316.368,439.797,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[11.736,1.103],[-9.329,0],[0.702,-4.112],[5.019,0.247]],"o":[[5.818,-4.313],[9.328,0],[-0.702,3.01],[-10.432,-0.903]],"v":[[-16.349,-0.224],[4.012,-6.643],[15.647,1.582],[6.72,6.397]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.553,0.784,1,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1321,152.732]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":50,"op":55,"st":0}]},{"id":"comp_2","nm":"t","fr":24,"layers":[{"ind":1,"ty":3,"nm":"m","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[1028,525.5,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":8,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":16,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":20,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":24,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":28,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":36,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":40,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":44,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":48,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":56,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":64,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":68,"s":[91,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":72,"s":[101,91,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":76,"s":[91,103,100]},{"t":80,"s":[101,91,100]}],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":2,"ty":3,"nm":"b","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[909,531.5,0],"to":[1,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":16,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":32,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":40,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":48,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":52,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":56,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":64,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[915,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":72,"s":[909,531.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":76,"s":[915,531.5,0],"to":[0,0,0],"ti":[1,0,0]},{"t":80,"s":[909,531.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":8,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":16,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":20,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":24,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":28,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":36,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":40,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":44,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":48,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":52,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":56,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":64,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":68,"s":[80,103,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":72,"s":[111,65,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":76,"s":[80,103,100]},{"t":80,"s":[111,65,100]}],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":3,"ty":3,"nm":"h","parent":4,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[10,137,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":4,"ty":3,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":56,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":64,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":76,"s":[0]},{"t":80,"s":[10]}]},"p":{"a":0,"k":[-36,63,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":5,"ty":3,"nm":"a","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[-160]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[-160]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[-4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[-160]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[-4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[-160]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":56,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[-4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":64,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[-160]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[-112]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":76,"s":[-4]},{"t":80,"s":[-112]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[890,395.5,0],"to":[2.5,-2,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[905,383.5,0],"to":[0,0,0],"ti":[-2.5,-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[890,395.5,0],"to":[2.5,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[920,393.5,0],"to":[0,0,0],"ti":[2.5,1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":16,"s":[890,395.5,0],"to":[-2.5,-1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[905,383.5,0],"to":[0,0,0],"ti":[-2.5,-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[890,395.5,0],"to":[2.5,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[920,393.5,0],"to":[0,0,0],"ti":[2.5,1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":32,"s":[890,395.5,0],"to":[-2.5,-1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[905,383.5,0],"to":[0,0,0],"ti":[-2.5,-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":40,"s":[890,395.5,0],"to":[2.5,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[920,393.5,0],"to":[0,0,0],"ti":[2.5,1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":48,"s":[890,395.5,0],"to":[-2.5,-1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":52,"s":[905,383.5,0],"to":[0,0,0],"ti":[-2.5,-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":56,"s":[890,395.5,0],"to":[2.5,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[920,393.5,0],"to":[0,0,0],"ti":[2.5,1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":64,"s":[890,395.5,0],"to":[-2.5,-1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[905,383.5,0],"to":[0,0,0],"ti":[-2.5,-1.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":72,"s":[890,395.5,0],"to":[2.5,1.667,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":76,"s":[920,393.5,0],"to":[0,0,0],"ti":[5,-0.333,0]},{"t":80,"s":[890,395.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":6,"ty":3,"nm":"h","parent":7,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":44,"s":[24]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[0]},{"t":49,"s":[-20]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":44,"s":[-125,-9.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":47,"s":[-125,-9.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":49,"s":[-125,-9.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":7,"ty":3,"nm":"a","parent":8,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":44,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[0]},{"t":49,"s":[-19]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":44,"s":[75,-34,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":47,"s":[75,-34,0],"to":[0,0,0],"ti":[0,0,0]},{"t":49,"s":[75,-34,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":8,"ty":3,"nm":"a","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":44,"s":[24]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[0]},{"t":49,"s":[30]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":44,"s":[1122,363.5,0],"to":[5,1.333,0],"ti":[-3.333,-2.333,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":47,"s":[1152,371.5,0],"to":[3.333,2.333,0],"ti":[1.667,-1,0]},{"t":49,"s":[1142,377.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":9,"ty":3,"nm":"h","parent":10,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[-10]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":53,"s":[0]},{"t":59,"s":[-54]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":50,"s":[70,-59,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":53,"s":[70,-59,0],"to":[0,0,0],"ti":[0,0,0]},{"t":59,"s":[70,-59,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":10,"ty":3,"nm":"a","parent":11,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[5]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":53,"s":[0]},{"t":59,"s":[-11]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":50,"s":[121,-15,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":53,"s":[121,-15,0],"to":[0,0,0],"ti":[0,0,0]},{"t":59,"s":[121,-15,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":11,"ty":3,"nm":"a","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[2]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":53,"s":[0]},{"t":59,"s":[20]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":50,"s":[1150,365.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.659,"y":0.854},"o":{"x":0.297,"y":0},"t":53,"s":[1150,365.5,0],"to":[-1.038,0.389,0],"ti":[2.52,-0.945,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.425,"y":0.211},"t":56,"s":[1144.19,387.679,0],"to":[-3.951,1.482,0],"ti":[1.628,-0.611,0]},{"t":59,"s":[1134,371.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":12,"ty":4,"nm":"h","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[208.53,96.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0.2,6.65],[-11.98,5.54],[-6.96,-4.61],[0.1,-7.55],[0,0]],"o":[[0,0],[-5.9,0.34],[-0.21,-6.66],[11.99,-5.53],[6.97,4.61],[-0.1,7.56],[0,0]],"v":[[-16.11,18.555],[-16.12,18.555],[-26.52,9.685],[-11.78,-13.365],[18.64,-11.005],[26.63,5.195],[19.56,15.265]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[804.229,508.235]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.55,-2.56]],"o":[[-0.38,4.04],[0,0]],"v":[[0.06,-4.945],[0.32,4.945]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[787.789,521.845]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.59,-0.76],[-0.11,0.24],[0,0]],"o":[[0.76,3.53],[4.3,1.27],[0,0],[0,0]],"v":[[-5.495,-3.85],[-0.485,2.58],[5.495,0.2],[5.495,0.19]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[793.614,530.64]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-1.48,-2.41],[-2.62,0.23],[-0.21,0.37]],"o":[[-0.42,5.63],[1.84,3],[4.74,-0.43],[0,0]],"v":[[-6.755,-7.855],[-4.845,3.955],[2.435,7.625],[7.175,2.625]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[803.954,526.885]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-1.77,-2.08],[-2.7,0.54],[2.35,4.24],[0.06,4.63]],"o":[[0.46,4.14],[2.45,2.88],[4.64,-0.93],[-1.44,-2.85],[0,0]],"v":[[-9.3,-3.17],[-5.71,6.09],[2.68,9.45],[6.95,0.08],[4.48,-9.99]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[816.839,523.42]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.64,-0.93],[2.45,2.88],[4.74,-0.43],[1.84,3],[4.3,1.27],[0.76,3.53],[0,0],[0.2,6.65],[-11.98,5.54],[-6.96,-4.61],[0.1,-7.55]],"o":[[2.35,4.24],[-2.7,0.54],[-0.21,0.37],[-2.62,0.23],[-0.11,0.24],[-2.59,-0.76],[0,0],[-5.9,0.34],[-0.21,-6.66],[11.99,-5.53],[6.97,4.61],[-0.1,7.56]],"v":[[19.56,11.46],[15.29,20.83],[6.9,17.47],[2.16,22.47],[-5.12,18.8],[-11.1,21.18],[-16.11,14.75],[-16.12,14.75],[-26.52,5.88],[-11.78,-17.17],[18.64,-14.81],[26.63,1.39]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[804.229,512.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":80,"st":0},{"ind":13,"ty":4,"nm":"a","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[168.53,183.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-3.79,-4.94]],"o":[[6.76,-0.53],[0,0]],"v":[[-8.2,-2.515],[8.2,3.045]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[810.199,470.945]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[7.72,-0.59]],"o":[[-3.14,-5.15],[0,0]],"v":[[8.145,3.715],[-8.145,-3.125]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[813.384,459.555]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-4.28,-4.54]],"o":[[6.87,-2.29],[0,0]],"v":[[-8.365,-0.545],[8.365,2.835]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[808.274,482.105]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.37,9.86]],"o":[[-0.37,9.86],[0,0]],"v":[[-7.815,-5.235],[8.185,-4.625]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[806.914,502.335]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.54,4.98],[-0.91,4.23],[-1.27,3.87],[-16.55,15.32]],"o":[[0,-5.38],[0.48,-4.53],[0.88,-4.14],[6.98,-21.31],[0,0]],"v":[[-21.145,47.33],[-20.335,31.79],[-18.245,18.66],[-15.005,6.66],[21.145,-47.33]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[820.244,449.77]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.68,4.15],[-0.85,3.53],[-1.15,3.48],[-12.89,12.79]],"o":[[0.36,-4.37],[0.59,-3.7],[0.89,-3.66],[5.88,-17.68],[0,0]],"v":[[-17.46,40.015],[-15.91,27.245],[-13.75,16.395],[-10.69,5.685],[17.46,-40.015]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[832.559,457.695]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-16.55,15.32],[0,0],[5.88,-17.68],[0,0],[7.72,-0.59]],"o":[[0,0],[-12.89,12.79],[0,0],[-3.14,-5.15],[6.98,-21.31]],"v":[[13.76,-30.47],[22.39,-15.23],[-5.76,30.47],[-6.1,30.36],[-22.39,23.52]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[827.629,432.91]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.28,-4.54],[0,0],[0.36,-4.37],[-0.37,9.86],[-0.54,4.98]],"o":[[0,0],[-0.68,4.15],[-0.37,9.86],[0,-5.38],[6.87,-2.29]],"v":[[8.95,-8.48],[8.96,-8.48],[7.41,4.29],[-8.59,3.68],[-7.78,-11.86]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[807.689,493.42]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.14,-5.15],[0,0],[0.89,-3.66],[0,0],[6.76,-0.53],[-1.27,3.87]],"o":[[0,0],[-1.15,3.48],[0,0],[-3.79,-4.94],[0.88,-4.14],[7.72,-0.59]],"v":[[9.595,-1.695],[9.935,-1.585],[6.875,9.125],[6.465,9.025],[-9.935,3.465],[-6.695,-8.535]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[811.934,464.965]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.79,-4.94],[0,0],[0.59,-3.7],[0,0],[6.87,-2.29],[-0.91,4.23]],"o":[[0,0],[-0.85,3.53],[0,0],[-4.28,-4.54],[0.48,-4.53],[6.76,-0.53]],"v":[[9.04,-2.43],[9.45,-2.33],[7.29,8.52],[7.28,8.52],[-9.45,5.14],[-7.36,-7.99]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[809.359,476.42]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":80,"st":0},{"ind":14,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":79,"op":80,"st":0},{"ind":15,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":63,"op":74,"st":0},{"ind":16,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":47,"op":58,"st":0},{"ind":17,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":31,"op":42,"st":0},{"ind":18,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":15,"op":26,"st":0},{"ind":19,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":10,"st":0},{"ind":20,"ty":4,"nm":"h","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-187.47,521.11,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.16,-0.19],[3.84,0],[3.82,-0.13],[0.38,-2.68],[0,0]],"o":[[-1.74,0.1],[-1.91,0.31],[-6.18,0],[-3.82,0.13],[-0.38,2.67],[0,0]],"v":[[16.135,-3.325],[12.025,-2.855],[4.485,-2.215],[-9.325,-3.665],[-15.755,0.235],[-14.695,3.795]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1164.344,61.285]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[5.22,0.9],[1.21,-0.17],[0.01,-2.03],[-0.25,-0.13],[0,0]],"o":[[-8.92,1.02],[-1.75,-0.3],[-2.4,0.34],[-0.02,2.87],[0.02,0.01],[0,0]],"v":[[14.59,-2.46],[-6.43,-3.61],[-10.88,-3.79],[-14.57,-0.17],[-12.3,3.95],[-12.27,3.96]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1160.539,68.96]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[9.68,0.77],[0.84,-0.37],[-4.65,-0.93]],"o":[[-12.23,1.66],[-1.38,-0.02],[-4.17,1.76],[0,0]],"v":[[15.53,-4.375],[-8.04,-4.375],[-11.36,-3.825],[-8.94,4.395]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1159.599,76.735]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.98,-0.25],[1.1,-1.06],[0,-1],[-5.86,-0.63],[-3.95,0],[-8.15,2.81],[-0.51,6.88],[7.13,1.4],[4.87,3.95],[1.15,-1.91],[-7.42,-3.29]],"o":[[-6.4,0.97],[-2.55,-0.16],[-0.66,0.61],[0,2.68],[5.86,0.64],[3.95,0],[8.15,-2.8],[0.51,-6.88],[-7.13,-1.4],[-4.87,-3.95],[-1.15,1.91],[0,0]],"v":[[-3.255,11.595],[-22.745,12.485],[-28.345,13.875],[-29.365,16.305],[-22.105,22.165],[-5.675,21.025],[15.605,19.235],[28.855,5.095],[18.535,-10.705],[-0.295,-18.855],[-8.475,-20.005],[-2.645,-8.835]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1179.014,67.265]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.91,0.31],[-1.15,1.91],[-4.87,-3.95],[-7.13,-1.4],[0.51,-6.88],[8.15,-2.8],[3.95,0],[5.86,0.64],[0,2.68],[-0.66,0.61],[0,0],[-4.17,1.76],[-0.02,2.87],[-2.4,0.34],[0,0],[-0.38,2.67],[-3.82,0.13],[-6.18,0]],"o":[[-7.42,-3.29],[1.15,-1.91],[4.87,3.95],[7.13,1.4],[-0.51,6.88],[-8.15,2.81],[-3.95,0],[-5.86,-0.63],[0,-1],[0,0],[-4.65,-0.93],[-0.25,-0.13],[0.01,-2.03],[0,0],[0,0],[0.38,-2.68],[3.82,-0.13],[3.84,0]],"v":[[0.145,-8.835],[-5.685,-20.005],[2.495,-18.855],[21.325,-10.705],[31.645,5.095],[18.395,19.235],[-2.885,21.025],[-19.315,22.165],[-26.575,16.305],[-25.555,13.875],[-25.565,13.865],[-27.985,5.645],[-30.255,1.525],[-26.565,-2.095],[-26.575,-2.185],[-27.635,-5.745],[-21.205,-9.645],[-7.395,-8.195]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1176.224,67.265]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":44,"op":50,"st":0},{"ind":21,"ty":4,"nm":"a","parent":7,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-362.47,461.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[2.48,-5]],"o":[[0,0],[2,5.67],[0,0]],"v":[[-0.94,-8.03],[-0.94,-8.02],[-1.24,8.03]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1233.839,72.2]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.58,5.79]],"o":[[2.18,-5.01],[0,0]],"v":[[-0.535,8.145],[-1.645,-8.145]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1219.294,72.085]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.74,-4.81]],"o":[[1.86,5.95],[0,0]],"v":[[-0.09,-8.025],[-1.77,8.025]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1247.969,72.955]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-10.36,1.72]],"o":[[-10.36,1.73],[0,0]],"v":[[3.795,-9.17],[6.565,7.45]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1201.674,73.11]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[89.82,6.06],[5.16,0.17],[5.24,0.02],[4.15,-0.07]],"o":[[-13.75,-27.12],[-4.83,-0.32],[-4.93,-0.18],[-3.97,-0.03],[0,0]],"v":[[89.84,32.59],[-47.43,-31.51],[-62.41,-32.26],[-77.66,-32.56],[-89.84,-32.5]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1295.309,96.44]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[60.81,4.09],[4.61,0.12],[4.68,-0.07],[3.54,-0.15]],"o":[[-15.72,-30],[-4.46,-0.3],[-4.54,-0.12],[-3.47,0.04],[0,0]],"v":[[80.59,27.725],[-42.63,-26.945],[-56.23,-27.575],[-70.07,-27.655],[-80.59,-27.365]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1288.829,107.925]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-13.75,-27.12],[0,0],[60.81,4.09],[1.86,5.95]],"o":[[0,0],[-15.72,-30],[2.74,-4.81],[89.82,6.06]],"v":[[69.475,28.74],[53.745,35.36],[-69.475,-19.31],[-67.795,-35.36]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1315.674,100.29]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.18,-5.01],[0,0],[3.54,-0.15],[-10.36,1.73],[-3.97,-0.03]],"o":[[2.58,5.79],[0,0],[-3.47,0.04],[-10.36,1.72],[4.15,-0.07],[0,0]],"v":[[9.625,-9.125],[10.735,7.165],[10.735,7.205],[0.215,7.495],[-2.555,-9.125],[9.625,-9.185]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1208.024,73.065]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.83,-0.32],[2.74,-4.81],[4.61,0.12],[0,0],[2,5.67]],"o":[[1.86,5.95],[-4.46,-0.3],[0,0],[2.48,-5],[5.16,0.17]],"v":[[6.71,-7.65],[5.03,8.4],[-8.57,7.77],[-8.57,7.65],[-8.27,-8.4]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1241.169,72.58]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.93,-0.18],[2.48,-5],[0,0],[4.68,-0.07],[0,0],[2.58,5.79],[0,0]],"o":[[2,5.67],[0,0],[-4.54,-0.12],[0,0],[2.18,-5.01],[0,0],[5.24,0.02]],"v":[[6.535,-7.935],[6.235,8.115],[6.235,8.235],[-7.605,8.155],[-7.605,8.115],[-8.715,-8.175],[-8.715,-8.235]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1226.364,72.115]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":44,"op":50,"st":0},{"ind":22,"ty":4,"nm":"m","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-12.47,67.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.462,-5.128],[-0.013,-0.349],[2.171,-0.112],[0.287,5.602],[0,0.45],[-1.984,0.087]],"o":[[0.037,0.337],[0.287,5.602],[-2.17,0.113],[-0.025,-0.474],[0,-4.965],[2.034,-0.1]],"v":[[3.73,-1.229],[3.805,-0.206],[0.386,10.136],[-4.055,0.193],[-4.092,-1.192],[-0.649,-10.149]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1053.325,418.603]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.287,-5.602],[2.171,-0.112],[0.287,5.601],[-2.184,0.112]],"o":[[0.287,5.602],[-2.171,0.112],[-0.287,-5.602],[2.17,-0.112]],"v":[[3.93,-0.206],[0.524,10.149],[-3.93,0.206],[-0.511,-10.149]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1027.587,422.096]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.137,8.271],[-2.358,5.477],[-1.547,0.449],[-0.4,0],[-1.273,-1.847],[-0.698,-8.01],[0.586,-5.365]],"o":[[-2.982,-6.749],[-0.137,-8.434],[0.686,-1.572],[0.399,-0.113],[2.071,0],[3.955,5.751],[0.537,5.938],[0,0]],"v":[[-5.801,24.515],[-10.367,0.911],[-6.911,-21.109],[-3.281,-24.352],[-2.083,-24.515],[3.319,-21.258],[9.968,0.325],[9.744,17.666]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1053.138,416.55]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.424,7.66],[-2.658,6.151],[-1.559,0.449],[-0.399,0],[-1.26,-1.847],[-0.524,-8.746],[1.148,-6.063]],"o":[[-2.982,-6.101],[-0.537,-9.332],[0.673,-1.572],[0.399,-0.113],[2.058,0],[4.33,6.262],[0.474,7.71],[0,0]],"v":[[-5.153,24.802],[-10.168,3.331],[-6.812,-21.396],[-3.182,-24.639],[-1.984,-24.802],[3.405,-21.545],[10.23,2.196],[8.907,23.704]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1027.637,419.332]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.036,8.982],[1.909,-1.559],[-0.112,0.499],[-1.971,2.92],[-0.274,-0.149],[-0.212,-14.971]],"o":[[0.2,-12.014],[-2.033,1.984],[-0.262,-3.007],[0.063,-0.312],[3.693,-0.536],[0.449,0.262],[0,0]],"v":[[-1.004,19.742],[-3.039,-9.762],[-10.161,-1.392],[-10.885,-11.496],[-4.573,-21.079],[7.492,-22.676],[10.997,22.824]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1001.095,419.988]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-17.404,1.036],[-7.723,0.449],[-4.204,0.287],[-0.199,-11.166]],"o":[[9.731,-1.21],[8.92,-0.536],[6.312,-0.349],[3.518,18.789],[0,0]],"v":[[-45.792,-14.684],[-1.054,-18.115],[24.447,-19.587],[40.515,-20.548],[45.792,20.548]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1026.296,406.046]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,-0.062],[-1.048,-8.583],[0.087,-2.27]],"o":[[0.013,0.062],[1.435,8.421],[0.687,5.664],[0,0]],"v":[[-2.651,-20.329],[-2.626,-20.142],[1.528,7.754],[2.564,20.329]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[981.982,411.691]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-10.542,-17.217]],"o":[[1.647,20.111],[0,0]],"v":[[-9.319,-28.514],[9.319,28.514]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1082.319,362.05]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-13.711,-19.325]],"o":[[1.335,23.667],[0,0]],"v":[[-11.59,-33.111],[11.59,33.111]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1077.004,366.934]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.886,-20.972]],"o":[[4.629,22.456],[0,0]],"v":[[-2.315,-31.196],[0.155,31.196]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[961.535,374.276]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.163,-15.108],[0,0]],"o":[[2.907,14.859],[0,0],[0,0]],"v":[[-1.516,-19.706],[1.353,19.606],[1.353,19.706]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[951.267,364.982]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.584,14.41]],"o":[[51.662,64.574],[0,0]],"v":[[-39.479,-28.607],[37.896,-35.967]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1004.426,369.192]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.345,21.433]],"o":[[40.222,51.961],[0,0]],"v":[[-32.73,-24.222],[32.73,-27.739]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1003.253,358.931]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.15,-0.786],[-6.25,0.2],[0.399,6.326],[0.2,0.761],[0.012,0.05],[-0.012,-0.05],[-0.25,-0.761],[-5.526,0.686],[0.461,5.714]],"o":[[0,0.798],[1.135,5.565],[6.276,-0.212],[-0.05,-0.785],[-0.012,-0.05],[0,0.05],[0.025,0.785],[1.672,5.465],[5.776,-0.711],[0,0]],"v":[[-22.961,-4.753],[-22.724,-2.383],[-10.336,7.872],[-0.231,-5.502],[-0.617,-7.834],[-0.655,-7.984],[-0.643,-7.834],[-0.231,-5.502],[13.443,4.055],[22.5,-8.072]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[837.613,133.101]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[-0.012,0.012],[0,0]],"v":[[0.006,-0.013],[0.006,0.013]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[860.107,125.017]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.137,-0.536],[0.125,0.549]],"o":[[-0.05,-0.549],[0.037,0.562]],"v":[[0.131,0.823],[-0.131,-0.823]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[859.982,124.181]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.751,0.436],[-0.499,5.664],[0.038,0.562],[-0.05,-0.537],[-5.365,0.387],[0.15,4.978],[0.163,0.649],[-0.15,-0.599],[-6.139,0.337],[-0.324,5.464],[0.063,0.636]],"o":[[1.31,5.564],[5.764,-0.425],[0.05,-0.537],[-0.062,0.562],[0.449,5.127],[5.264,-0.374],[-0.025,-0.624],[0.038,0.662],[1.073,4.74],[4.778,-0.275],[0.038,-0.574],[0,0]],"v":[[-32.63,-2.364],[-19.968,7.118],[-8.54,-3.861],[-8.528,-5.508],[-8.54,-3.861],[2.339,4.772],[11.708,-4.784],[11.433,-6.681],[11.708,-4.784],[23.186,2.427],[32.592,-5.745],[32.568,-7.554]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[892.743,127.394]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.51,-2.408],[6.936,-2.396],[-0.088,-4.915],[4.977,0.062],[3.606,-3.318],[-5.827,1.073],[5.277,-2.283],[-8.596,-1.697],[-6.114,0.948],[-5.726,-2.694],[-8.571,-3.243],[3.58,-3.955],[-5.777,-3.219],[4.067,-1.148]],"o":[[-6.413,-3.581],[-4.754,1.646],[-4.804,-1.272],[-4.966,-0.05],[2.233,-5.339],[-4.966,-2.907],[6.5,-5.689],[1.372,-5.863],[6.262,-0.961],[6.238,-6.512],[-5.377,0.649],[6.574,-0.449],[-4.255,0.062],[-4.067,1.148]],"v":[[18.651,6.755],[-2.707,4.859],[-11.989,15.238],[-26.648,12.619],[-40.397,17.197],[-27.197,6.705],[-43.865,5.671],[-19.425,-0.793],[-5.539,-11.072],[13.024,-8.391],[38.288,-13.954],[24.228,-6.743],[43.865,-2.814],[30.578,-1.379]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[912.349,159.082]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.449,-0.936],[-22.631,1.46],[-7.485,-0.012],[0,0]],"o":[[0,0],[1.996,4.105],[8.558,7.136],[11.166,0.025],[0,0]],"v":[[-38.456,-12.208],[-37.846,-10.685],[-5.783,2.901],[19.081,12.182],[38.456,7.466]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[963.181,132.334]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-4.753,9.107],[6.912,13.836],[2.046,8.084],[0.137,0.411],[0,0]],"o":[[0,0],[4.579,-8.771],[19.313,-6.799],[-0.349,-1.385],[-0.05,-0.15],[0,0]],"v":[[-15.601,44.694],[-4.111,30.111],[-3.712,-4.622],[9.912,-41.712],[9.126,-44.47],[9.051,-44.694]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[804.864,172.456]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.41,3.668],[19.05,32.337],[40.684,-11.253],[-18.377,-38.537],[-4.341,-8.795],[-5.177,-12.488],[-4.579,-11.477],[-2.657,-6.038],[-0.324,-0.711],[-9.681,-6.201],[-5.589,-1.934],[-4.117,-0.736],[-3.519,-0.174],[-4.715,0.612],[-3.593,1.01],[-1.56,0.562],[-3.406,2.183],[-2.881,2.844],[-3.655,10.355],[-0.723,3.269],[5.489,15.645]],"o":[[-12.625,-32.923],[-20.822,-35.307],[-47.046,12.999],[4.728,7.673],[5.951,12.077],[5.54,13.349],[3.144,7.872],[0.337,0.748],[4.529,10.018],[4.828,3.094],[3.88,1.372],[3.431,0.649],[4.703,0.25],[3.668,-0.474],[1.584,-0.449],[3.892,-1.397],[3.406,-2.171],[7.399,-7.298],[1.098,-3.106],[3.443,-15.37],[-1.372,-3.917]],"v":[[93.076,18.676],[47.365,-70.413],[-52.878,-120.628],[-85.04,-28.258],[-71.442,-3.369],[-54.737,33.959],[-39.541,71.81],[-30.833,92.857],[-29.86,95.028],[-7.853,119.63],[7.842,127.215],[19.868,130.396],[30.311,131.631],[44.495,131.107],[55.411,128.887],[60.127,127.377],[71.08,121.988],[80.525,114.44],[97.229,87.467],[99.974,77.898],[97.243,30.029]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[992.162,312.777]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-52.473,25.813],[9.956,24.44],[27.634,44.239],[18.502,-2.532],[7.648,-24.839],[-5.551,-18.152],[-9.581,-18.826]],"o":[[22.906,57.189],[53.346,-29.642],[-6.774,-18.801],[-42.28,-67.693],[-25.762,3.531],[-5.577,18.128],[7.548,24.664],[10.717,21.046]],"v":[[-57.956,82.414],[70.657,128.999],[103.455,5.926],[52.966,-87.118],[-66.839,-146.953],[-118.426,-104.285],[-116.081,-52.037],[-83.669,14.934]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1000.297,322.459]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[65.173,27.584]],"o":[[4.104,-129.161],[0,0]],"v":[[85.721,159.689],[-89.825,-159.689]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1072.088,304.481]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[11.952,33.335],[38.75,35.231]],"o":[[-3.531,-44.476],[-22.306,-62.229],[0,0]],"v":[[63.776,138.923],[38.375,16.949],[-63.776,-138.923]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[864.629,341.54]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[8.769,-0.587],[14.896,-0.986],[0.038,0],[5.963,-0.399],[34.994,-2.271],[7.647,-0.499],[9.943,-0.649],[2.907,-0.187],[-0.487,14.06],[0.062,4.965],[0.087,2.433],[23.729,48.481],[29.704,29.218],[3.069,2.845],[27.584,13.649],[-46.087,6.164]],"o":[[-0.587,20.548],[-14.846,0.985],[-0.037,0.012],[-5.277,0.349],[-30.229,2.008],[-8.109,0.536],[-11.915,0.773],[-23.404,1.509],[8.147,-2.844],[0.212,-6.2],[-0.025,-2.433],[-1.797,-53.708],[-19.375,-39.623],[-3.032,-2.981],[-28.894,-26.798],[0,0],[0,0]],"v":[[242.177,154.847],[224.602,184.789],[179.989,187.747],[179.864,187.758],[162.96,188.882],[59.673,195.643],[35.957,197.19],[2.908,199.336],[-39.921,202.106],[-29.154,170.641],[-29.104,153.375],[-29.279,146.089],[-69.576,-10.719],[-145.927,-114.879],[-155.072,-123.612],[-242.178,-185.08],[-136.499,-202.106]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[935.003,332.216]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-4.878,0.623],[-7.697,0.848],[0,0],[-7.56,0.686],[-7.96,0.511],[-6.475,0.237],[-6.724,-0.05],[-10.171,-1.561]],"o":[[4.778,-0.636],[7.585,-0.948],[0,0],[7.623,-0.848],[8.234,-0.761],[6.824,-0.449],[7.348,-0.262],[6.961,0.075],[0,0]],"v":[[-82.507,5.115],[-68.01,3.219],[-45.03,0.499],[-45.005,0.499],[-22.187,-1.809],[2.166,-3.73],[22.152,-4.753],[43.311,-5.065],[82.507,-2.441]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882,124.768]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.191,-4.241],[-10.742,-20.323],[-0.612,-96.038],[0.063,-3.206],[0.35,-5.364]],"o":[[14.268,4.61],[52.46,32.985],[21.733,41.145],[0.025,3.132],[-0.112,5.178],[0,0]],"v":[[-106.576,-182.624],[-69.408,-165.199],[43.859,-44.509],[106.55,157.286],[106.487,166.805],[105.801,182.624]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1071.083,304.95]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.445,0.162],[13.062,-0.387],[33.46,4.841],[0.112,-1.735]],"o":[[2.358,-0.2],[-6.761,-3.967],[0,0],[-0.374,7.049],[0,0]],"v":[[28.882,20.728],[36.104,20.18],[6.886,13.967],[-35.256,-20.728],[-36.104,-5.819]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[942.078,508.678]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.684,5.839],[18.165,5.515],[12.9,-1.859],[0,0],[15.919,1.634],[-10.28,0.636],[3.643,0.037],[-12.937,9.419],[-14.272,2.059],[0,0],[-17.055,10.006],[3.132,2.358]],"o":[[0,0],[0,0],[-9.606,1.372],[0,0],[0,0],[0,0],[0,0],[0,0],[14.272,-2.046],[0,0],[0,0],[0,0]],"v":[[47.807,-16.038],[13.885,-16.212],[-1.597,-5.021],[-16.58,-11.833],[-49.978,-2.563],[-37.153,4.835],[-47.183,11.048],[-17.541,6.794],[3.281,13.318],[19.35,0.368],[49.978,-2.9],[38.25,-6.543]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1046.863,493.732]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0.013],[19.862,-2.433],[25.226,8.246],[7.772,-0.4]],"o":[[-0.012,-0.012],[-7.174,-8.546],[0,0],[-5.514,-1.809],[0,0]],"v":[[43.784,25.014],[43.771,24.989],[4.797,12.351],[-23.948,-22.269],[-43.784,-24.614]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[950.905,502.87]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[9.394,-3.668],[3.256,-24.402],[9.182,-18.489]],"o":[[0,0],[-10.729,4.179],[0,0],[0,0]],"v":[[38.906,-28.676],[21.302,-25.93],[-4.947,12.818],[-38.906,29.599]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1136.831,490.925]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[7.91,-0.761],[0.387,-0.025],[7.623,1.821],[2.021,0.849],[3.955,6.337],[2.669,10.591]],"o":[[-3.369,-0.287],[-0.374,0.037],[-7.173,0.637],[-2.133,-0.499],[-5.864,-2.445],[0,0],[0,0]],"v":[[34.645,13.492],[16.742,15.239],[15.594,15.338],[-7.324,14.303],[-13.561,12.294],[-28.657,-0.493],[-34.645,-16.124]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1049.807,318.273]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-3.718,0.512],[-2.969,1.048],[-1.697,1.123],[-1.435,2.396],[-0.487,2.757],[1.172,15.257]],"o":[[3.443,-0.299],[3.243,-0.449],[1.996,-0.686],[2.233,-1.435],[1.21,-1.958],[0,0],[0,0]],"v":[[-17.902,19.961],[-6.998,18.888],[2.445,16.742],[8.01,14.06],[13.586,8.383],[16.156,1.335],[16.731,-19.961]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[956.725,326.201]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.939,-3.751],[1.94,3.751]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[973.699,287.83]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2.202,-3.787],[2.202,3.787]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[992.3,286.011]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.21,0.374],[0,0],[0,0],[0,0],[7.785,-5.065],[0.499,-0.262],[1.023,-0.386],[0.025,-0.012],[2.345,-0.387],[1.934,0.062],[1.31,0.224]],"o":[[-10.604,-3.156],[0,0],[0,0],[0,0],[-0.437,0.287],[-0.836,0.449],[-0.012,0],[-1.734,0.637],[-2.134,0.349],[-1.435,-0.025],[-1.335,-0.212]],"v":[[-7.785,7.117],[-24.328,-3.999],[7.66,-7.03],[22.743,-8.452],[16.543,4.335],[15.158,5.147],[12.388,6.393],[12.326,6.418],[6.238,7.978],[0.137,8.39],[-3.98,8.004]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[982.438,289.242]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.637,3.113],[-1.636,-3.113]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[992.466,300.133]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.884,5.732],[-1.884,-5.732]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[961.004,268.806]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6.806,7.803],[-6.805,-7.803]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[999.473,264.328]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.087,-0.324]],"o":[[0,0],[0,0]],"v":[[-0.081,-0.25],[0.081,0.25]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[996.042,238.21]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,-0.012],[9.108,-6.488]],"o":[[0.012,0.012],[0.749,2.358],[0,0]],"v":[[1.547,-9.133],[1.559,-9.095],[-4.554,9.133]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[994.589,247.604]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.467,-0.624],[4.529,6.524],[0.013,0.025],[0,0],[-1.771,1.822],[-15.856,-0.723],[-5.838,-2.171],[-0.436,-0.174],[-0.025,-0.012],[-0.149,-0.063]],"o":[[-3.816,2.789],[-18.651,2.595],[-0.025,-0.025],[-2.832,-4.092],[0,0],[4.529,-4.603],[4.804,0.225],[0.425,0.149],[0.013,0.013],[0.137,0.062],[0,0]],"v":[[26.189,10.884],[10.227,16.337],[-22.422,4.485],[-22.472,4.41],[-26.189,-3.2],[-23.52,-6.307],[7.083,-18.209],[23.052,-14.79],[24.337,-14.304],[24.4,-14.279],[24.836,-14.104]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[963.415,246.039]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[50.953,-4.398],[25.989,-2.264],[-17.289,1.429],[-50.953,4.398]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[980.327,274.832]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[13.605,-1.285],[-13.605,1.285]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[955.558,220.494]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.633,-4.554]],"o":[[1.984,0.936],[0,0]],"v":[[-4.154,-3.35],[4.154,3.35]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[991.969,235.11]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.087,-0.163]],"o":[[0.1,0.15],[0,0]],"v":[[-0.131,-0.231],[0.131,0.231]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[996.279,238.74]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[1.518,-17.179],[1.668,-17.042],[36.612,14.809],[70.157,42.318],[20.032,47.021],[17.075,47.595],[-21.724,50.34],[-70.157,54.045],[-65.755,24.016],[-59.152,-12.563],[-54.486,-33.635],[-49.957,-54.045],[-25.517,-36.541],[-8.488,-24.34]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[995.13,255.127]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.187,-4.117],[5.016,-0.15],[0.187,4.117],[-5.027,0.162]],"o":[[0.187,4.117],[-5.027,0.15],[-0.2,-4.117],[5.016,-0.15]],"v":[[9.095,-0.275],[0.349,7.461],[-9.082,0.287],[-0.337,-7.46]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[744.487,154.473]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.125,-0.125],[8.059,-1.197],[-0.574,0]],"o":[[0.137,0.112],[-8.596,1.16],[-1.809,-0.386],[1.759,0]],"v":[[13.593,-1.959],[13.992,-1.596],[-11.06,1.959],[-13.417,1.572]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[785.502,131.479]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-8.596,1.16],[17.503,-5.414],[9.17,-5.576],[0,0],[-1.734,16.655],[0,0],[1.185,11.153],[3.717,0.798]],"o":[[7.386,7.024],[9.606,16.493],[0,0],[0.399,0.187],[1.759,-17.017],[0,0],[-0.786,-7.51],[8.059,-1.198]],"v":[[14.708,-39.155],[4.029,-3.699],[-4.48,39.155],[-19.151,25.669],[-7.998,13.318],[-22.095,-11.334],[0.798,-24.833],[-10.343,-35.599]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[784.785,169.038]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.349,-1.385],[19.313,-6.799],[4.579,-8.771],[0,0],[0,0],[3.069,2.845],[0,0],[9.606,16.493],[7.386,7.024],[-4.878,0.624]],"o":[[2.046,8.084],[6.912,13.836],[-4.753,9.107],[0,0],[-3.032,-2.982],[0,0],[9.17,-5.576],[17.503,-5.414],[4.778,-0.636],[0.137,0.412]],"v":[[14.578,-41.919],[0.954,-4.829],[0.555,29.904],[-10.935,44.488],[-11.122,44.676],[-20.267,35.942],[-19.893,35.53],[-11.384,-7.324],[-0.705,-42.78],[13.792,-44.676]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[800.198,172.662]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[5.776,-0.711],[1.672,5.464],[0.2,0.761],[-7.561,0.686],[0,0],[-0.137,-0.536]],"o":[[0.462,5.714],[-5.527,0.687],[-0.05,-0.786],[7.623,-0.848],[0,0],[0.037,0.562],[-0.012,0.013]],"v":[[11.328,-5.371],[2.271,6.755],[-11.403,-2.801],[-11.79,-5.134],[11.029,-7.442],[11.066,-7.043],[11.328,-5.396]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[848.785,130.401]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.531,-44.476],[0,0],[7.773,-0.399],[0,0],[23.729,48.481],[29.705,29.218],[0,0],[-4.753,9.107],[0,0],[-22.306,-62.229]],"o":[[0,0],[-5.514,-1.809],[0,0],[-1.796,-53.708],[-19.374,-39.623],[0,0],[0,0],[0,0],[38.75,35.231],[11.952,33.335]],"v":[[69.664,138.88],[68.217,139.017],[48.38,136.672],[46.983,136.722],[6.686,-20.086],[-69.665,-124.246],[-69.478,-124.433],[-57.988,-139.017],[-57.888,-138.967],[44.263,16.905]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[858.741,341.584]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.776,-3.219],[4.067,-1.148],[1.51,-2.408],[6.937,-2.396],[-0.087,-4.915],[4.978,0.063],[3.605,-3.318],[-5.826,1.073],[5.277,-2.284],[-8.596,-1.697],[-6.113,0.948],[-5.726,-2.694],[-8.57,-3.244],[3.581,-3.955]],"o":[[-4.254,0.062],[-4.067,1.147],[-6.412,-3.581],[-4.753,1.646],[-4.803,-1.272],[-4.965,-0.049],[2.233,-5.34],[-4.965,-2.907],[6.499,-5.689],[1.372,-5.864],[6.263,-0.961],[6.238,-6.512],[-5.377,0.649],[6.575,-0.449]],"v":[[43.865,-2.813],[30.577,-1.378],[18.65,6.756],[-2.708,4.86],[-11.99,15.239],[-26.648,12.619],[-40.397,17.198],[-27.198,6.706],[-43.865,5.671],[-19.424,-0.792],[-5.54,-11.072],[13.024,-8.39],[38.287,-13.954],[24.227,-6.743]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[912.349,159.082]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.886,-20.972],[0,0],[3.144,7.872],[2.907,14.858],[0,0],[-2.969,1.048]],"o":[[4.629,22.456],[0,0],[-2.657,-6.038],[0.163,-15.108],[0,0],[3.244,-0.449],[0,0]],"v":[[2.433,-31.208],[4.903,31.183],[4.541,31.345],[-4.167,10.299],[-7.036,-29.012],[-7.061,-29.199],[2.383,-31.345]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[956.788,374.289]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-2.832,-4.092],[-0.025,-0.025],[-8.995,-1.697],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.013,0.025],[3.306,5.514],[0,0],[0,0]],"v":[[17.242,13.642],[17.392,15.364],[-17.391,18.333],[-16.272,18.246],[-9.668,-18.333],[-8.421,-18.059],[-4.703,-10.449],[-4.653,-10.374],[13.624,1.441],[13.474,2.177]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[945.647,260.897]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.919,-0.237],[4.529,-4.604],[-12.576,1.647]],"o":[[-15.857,-0.724],[2.558,-3.893],[3.443,-0.449]],"v":[[15.302,-5.589],[-15.302,6.313],[5.758,-5.327]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.878,0.839,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[955.197,233.419]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[14.485,7.154],[14.036,7.779],[-13.174,10.349],[-14.484,10.062],[-9.955,-10.349]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[955.128,211.431]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[7.987,-1.328],[4.044,0.58],[1.21,0.374],[0,0]],"o":[[-2.032,3.204],[-4.038,1.029],[-1.335,-0.212],[-4.467,-1.559],[0,0]],"v":[[18.357,-4.305],[5.813,3.276],[-6.312,3.664],[-10.117,2.778],[-18.357,-1.227]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[984.77,293.581]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.435,-0.025],[2.233,0.786],[-1.335,-0.212]],"o":[[-3.019,0.075],[1.21,0.375],[1.31,0.225]],"v":[[3.961,0.599],[-3.961,-0.674],[-0.156,0.212]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[978.614,297.033]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.564,-2.745],[7.822,6.113],[5.302,4.017],[-0.773,-0.013],[-6.849,-2.133]],"o":[[-7.96,0.961],[-6.799,1.909],[0.636,0.025],[10.068,0.785],[5.502,1.709]],"v":[[22.188,5.077],[-3.562,-1.348],[-22.188,-6.039],[-20.055,-5.976],[5.57,-1.66]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[964.953,126.489]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[4.804,0.225],[3.444,-0.449],[2.558,-3.892],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-5.838,-2.171],[-2.919,-0.237],[-12.575,1.647],[-1.771,1.822],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[25.332,0.074],[25.157,0.537],[9.188,-2.882],[-0.356,-2.62],[-21.415,9.02],[-24.084,12.126],[-25.332,11.852],[-20.666,-9.219],[-19.356,-8.934],[7.853,-11.503],[8.303,-12.126]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[961.31,230.712]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-8.344,-4.205],[0.125,0],[5.502,1.709],[10.068,0.786],[0,0]],"o":[[0,0],[-0.125,0.012],[-5.564,-2.745],[-6.849,-2.133],[3.007,0.062],[0,0]],"v":[[-1.572,-3.419],[21.059,5.49],[21.059,5.526],[4.441,-1.211],[-21.184,-5.526],[-10.174,-4.391]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[966.082,126.04]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.57,-1.747],[3.494,-6.15],[1.447,-1.322],[2.109,-0.848],[-0.175,2.944],[0,0],[0,0],[-4.192,-1.085]],"o":[[3.418,3.481],[-1.197,2.371],[-1.472,1.048],[-7.273,1.634],[2.969,-2.233],[0,0],[4.716,-9.519],[4.179,1.772]],"v":[[10.087,-8.889],[10.648,5.695],[6.656,11.172],[1.315,14.029],[-13.13,6.693],[-4.036,0.992],[-14.141,-5.009],[0.007,-14.578]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[983.38,245.564]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,-0.012],[9.107,-6.487],[-1.198,2.371],[3.418,3.481],[-0.773,-0.499],[0,0]],"o":[[0.749,2.358],[1.447,-1.322],[3.493,-6.15],[0.998,0.674],[0,0],[0.012,0.012]],"v":[[1.56,-8.197],[-4.554,10.031],[-0.562,4.553],[-1.122,-10.031],[1.534,-8.247],[1.547,-8.234]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.878,0.839,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[994.589,246.706]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0.749,2.358],[0.012,0.012],[-0.063,-0.037],[8.197,-7.224],[6.637,-1.247],[5.264,0.985],[3.306,5.514],[-18.651,2.595],[-2.956,1.198],[-1.697,1.547]],"o":[[0,-0.012],[0.062,0.05],[0,0],[-2.882,2.545],[-7.411,1.385],[-8.995,-1.697],[4.528,6.525],[4.466,-0.624],[1.822,-0.412],[9.107,-6.487]],"v":[[25.469,-13.212],[25.457,-13.249],[25.644,-13.125],[21.489,4.242],[7.554,10.217],[-11.409,10.617],[-29.686,-1.198],[2.963,10.654],[14.016,7.872],[19.356,5.015]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.878,0.839,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[970.679,251.721]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[1.023,-0.387],[0.025,-0.013],[4.18,-0.537],[0.761,-0.012],[1.31,0.225],[0,0],[0,0],[0,0]],"o":[[0,0],[-0.836,0.45],[-0.013,0],[-2.507,0.786],[-0.786,0.1],[-1.435,-0.025],[0,0],[0,0],[0,0],[0,0]],"v":[[9.943,-0.387],[10.979,0.674],[8.209,1.922],[8.146,1.946],[-1.722,3.755],[-4.042,3.917],[-8.159,3.531],[-8.06,2.894],[-10.979,-2.133],[7.885,-3.917]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[986.617,293.714]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.836,0.449],[-0.437,0.287],[1.635,-0.524]],"o":[[0.499,-0.262],[-1.16,0.886],[1.023,-0.387]],"v":[[0.693,-0.219],[2.077,-1.03],[-2.078,1.03]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[996.903,294.607]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.828,-3.044],[0,0],[11.165,0.025],[8.558,7.136],[1.996,4.104],[0.062,0.636],[0,0],[-6.063,-0.474],[0.637,0.025],[-6.799,1.909],[-7.96,0.96]],"o":[[0,0],[0,0],[-7.486,-0.013],[-22.631,1.459],[0.037,-0.574],[0,0],[6.961,0.075],[-0.774,-0.012],[5.303,4.017],[7.822,6.113],[4.853,2.395]],"v":[[38.182,7.629],[38.145,7.679],[18.77,12.395],[-6.094,3.113],[-38.157,-10.473],[-38.182,-12.282],[-38.182,-12.42],[-18.595,-11.609],[-20.729,-11.671],[-2.102,-6.98],[23.648,-0.555]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[963.493,132.122]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[1.472,-1.098],[0.499,-0.262],[0,0]],"o":[[0,0],[-1.061,1.996],[-0.437,0.287],[0,0],[0,0]],"v":[[-4.086,-1.909],[4.086,-2.682],[0.393,1.871],[-0.992,2.682],[-2.028,1.622]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[998.588,291.706]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-7.411,1.385],[-2.882,2.546],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[5.265,0.985],[6.637,-1.247],[0,0],[0,0]],"v":[[23.561,6.019],[23.598,6.456],[-19.68,10.149],[-19.831,8.427],[-23.597,-3.037],[-23.448,-3.773],[-4.484,-4.174],[9.451,-10.149],[9.95,-9.588]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[982.718,266.112]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.212,-14.971],[0,0],[3.88,1.373],[0,0],[1.035,8.983],[1.909,-1.56],[-0.112,0.499],[-1.971,2.919],[-0.274,-0.15]],"o":[[0,0],[-4.117,-0.736],[0,0],[0.2,-12.014],[-2.034,1.984],[-0.262,-3.007],[0.063,-0.312],[3.693,-0.537],[0.449,0.262]],"v":[[10.998,22.643],[10.936,23.006],[-1.091,19.824],[-1.004,19.561],[-3.037,-9.944],[-10.161,-1.572],[-10.885,-11.678],[-4.572,-21.259],[7.492,-22.855]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1001.095,420.168]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-17.404,1.036],[0,0],[0.399,-0.112],[0.673,-1.572],[-0.537,-9.331],[-2.982,-6.1],[0,0],[3.431,0.648],[0,0],[0.449,0.262],[3.693,-0.537],[0.062,-0.312],[-0.262,-3.006],[0,0],[1.435,8.421],[0,0]],"o":[[0,0],[-0.4,0],[-1.559,0.449],[-2.658,6.15],[0.424,7.661],[0,0],[-3.518,-0.175],[0,0],[-0.213,-14.971],[-0.275,-0.15],[-1.971,2.919],[-0.112,0.499],[0,0],[-1.048,-8.584],[0,0],[9.731,-1.21]],"v":[[22.737,-28.239],[23.149,-21.639],[21.951,-21.477],[18.321,-18.233],[14.965,6.493],[19.98,27.964],[19.967,28.239],[9.525,27.004],[9.588,26.642],[6.082,-18.857],[-5.982,-17.26],[-12.295,-7.679],[-11.571,2.426],[-18.994,3.275],[-23.149,-24.621],[-22.001,-24.808]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1002.505,416.17]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.287,-5.602],[2.171,-0.112],[0.287,5.601],[-2.184,0.112]],"o":[[0.287,5.602],[-2.171,0.112],[-0.287,-5.602],[2.17,-0.112]],"v":[[3.93,-0.206],[0.524,10.149],[-3.93,0.206],[-0.511,-10.149]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1027.587,422.096]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[8.196,-7.223],[0,0],[0,0]],"v":[[19.786,14.609],[19.324,15.108],[-5.64,17.241],[-5.677,16.806],[-19.288,1.199],[-19.787,0.637],[-15.633,-16.73],[-15.159,-17.241]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1011.955,255.326]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.864,-2.445],[0,0],[40.222,51.961],[0,0],[-0.487,2.758],[1.172,15.258],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-2.345,21.433],[0,0],[1.21,-1.959],[0,0],[0,0],[0,0],[0,0],[2.67,10.592],[3.955,6.338]],"v":[[32.967,-13.842],[32.705,-13.217],[-32.755,-9.699],[-32.967,-9.824],[-30.397,-16.874],[-29.823,-38.169],[-29.873,-38.942],[8.926,-41.687],[11.883,-42.262],[17.871,-26.629]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1003.279,344.409]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.147,-6.063],[0,0],[4.703,0.25],[0,0],[0.424,7.66],[0,0],[-2.171,0.112],[0.287,5.601]],"o":[[0.474,7.71],[0,0],[-4.716,0.611],[0,0],[-2.981,-6.101],[0,0],[0.287,5.602],[2.171,-0.113],[0,0]],"v":[[9.962,-11.565],[8.64,9.943],[8.752,10.792],[-5.433,11.315],[-5.421,11.041],[-10.436,-10.43],[-4.248,-10.792],[0.206,-0.848],[3.612,-11.203]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1027.905,433.093]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.133,-0.499],[0,0],[51.662,64.575],[0,0],[-1.435,2.395],[0,0],[-2.345,21.434],[0,0]],"o":[[0,0],[1.584,14.409],[0,0],[2.233,-1.435],[0,0],[40.222,51.962],[0,0],[2.021,0.849]],"v":[[38.164,-35.288],[38.001,-34.638],[-39.374,-27.279],[-39.586,-27.602],[-34.008,-33.279],[-33.797,-33.154],[31.664,-36.672],[31.925,-37.297]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1004.32,367.864]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.012,-0.349],[2.17,-0.112],[0.287,5.602],[0,0.45],[-1.983,0.087],[-0.461,-5.128]],"o":[[0.287,5.602],[-2.171,0.113],[-0.025,-0.474],[0,-4.965],[2.034,-0.1],[0.038,0.337]],"v":[[3.805,-0.206],[0.387,10.136],[-4.055,0.193],[-4.092,-1.192],[-0.649,-10.149],[3.73,-1.229]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1053.325,418.603]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.16,0.886],[0,0],[0,0],[0,0],[-10.604,-3.156],[-3.019,0.074],[-2.133,0.349],[-1.734,0.637],[-0.013,0]],"o":[[7.785,-5.065],[0,0],[0,0],[0,0],[2.233,0.786],[1.934,0.062],[2.345,-0.387],[0.025,-0.012],[1.634,-0.524]],"v":[[3.851,4.023],[10.051,-8.764],[-5.032,-7.342],[-37.02,-4.311],[-20.477,6.806],[-12.555,8.079],[-6.454,7.666],[-0.366,6.106],[-0.303,6.082]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[70.157,7.89],[20.032,12.595],[17.075,13.168],[-21.724,15.913],[-70.157,19.618],[-65.755,-10.41],[-64.533,-10.324],[-32.092,-13.293],[11.187,-16.986],[36.151,-19.119],[36.612,-19.618]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[995.13,289.554]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.699,-8.009],[0,0],[2.034,-0.1],[0,-4.965],[0,0],[-2.358,5.477],[-1.547,0.449],[-0.399,0],[-1.272,-1.846]],"o":[[0,0],[-0.461,-5.127],[-1.983,0.087],[0,0],[-0.138,-8.433],[0.687,-1.572],[0.399,-0.112],[2.071,0],[3.955,5.751]],"v":[[10.236,12.126],[4.185,12.625],[-0.194,3.706],[-3.637,12.662],[-10.099,12.713],[-6.644,-9.307],[-3.013,-12.55],[-1.816,-12.713],[3.586,-9.456]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1052.869,404.748]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.2,-11.166],[0,0],[3.406,-2.171],[0,0],[0.537,5.939],[3.955,5.752],[2.071,0],[0,0],[-4.205,0.287]],"o":[[0,0],[-2.882,2.844],[0,0],[0.586,-5.365],[-0.698,-8.009],[-1.273,-1.846],[0,0],[6.313,-0.35],[3.518,18.788]],"v":[[10.374,16.461],[10.973,17.085],[1.528,24.634],[1.167,24.085],[1.391,6.742],[-5.259,-14.84],[-10.661,-18.097],[-10.973,-23.673],[5.096,-24.634]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1061.715,410.132]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.984,0.936],[0.012,0.012],[0.424,0.15],[0,0],[0,0],[0,0],[0,0],[0,0],[1.937,0.43],[0,0],[0,0],[4.728,7.673],[-47.047,13],[-20.822,-35.306],[-12.625,-32.923],[0,0],[7.909,-0.761],[0.387,-0.025],[7.623,1.821],[2.021,0.849],[3.955,6.337],[2.67,10.592],[0,0],[0,0],[0,0],[0,0],[0.062,0.05]],"o":[[-2.632,-4.554],[-0.025,-0.012],[-0.437,-0.175],[0,0],[0,0],[0,0],[0,0],[0,0],[1.938,0.43],[0,0],[0,0],[-4.342,-8.796],[-18.377,-38.537],[40.683,-11.253],[19.051,32.337],[0,0],[-3.368,-0.287],[-0.375,0.037],[-7.174,0.636],[-2.133,-0.499],[-5.864,-2.445],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.063,-0.037],[0,0]],"v":[[9.133,-19.188],[0.824,-25.887],[0.761,-25.912],[-0.523,-26.399],[-0.35,-26.861],[-17.379,-39.061],[-41.819,-56.564],[-46.348,-36.155],[-51.014,-15.084],[-57.617,21.496],[-62.018,51.525],[-66.271,51.762],[-79.87,26.873],[-47.707,-65.498],[52.535,-15.283],[98.246,73.806],[97.46,74.118],[79.558,75.866],[78.41,75.965],[55.492,74.929],[49.254,72.921],[34.158,60.134],[28.17,44.501],[74.929,39.798],[44.75,12.288],[9.806,-19.561],[9.332,-19.051],[9.145,-19.176]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[986.991,257.647]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-1.048,-8.584],[0.087,-2.27],[0,0],[4.528,10.018],[0.336,0.749],[0,0],[4.629,22.456],[0,0],[-1.696,1.123],[0,0],[1.584,14.409],[0,0],[-7.173,0.636],[0,0],[-13.711,-19.325],[0,0],[7.398,-7.298],[0,0],[3.518,18.789],[6.313,-0.349],[8.92,-0.536],[9.731,-1.21]],"o":[[1.435,8.421],[0.687,5.664],[0,0],[-9.681,-6.2],[-0.325,-0.711],[0,0],[0.886,-20.972],[0,0],[1.996,-0.686],[0,0],[51.662,64.574],[0,0],[7.623,1.822],[0,0],[1.335,23.666],[0,0],[-3.655,10.354],[0,0],[-0.199,-11.165],[-4.204,0.287],[-7.722,0.449],[-17.404,1.036],[0,0]],"v":[[-44.925,9.057],[-40.771,36.954],[-39.735,49.528],[-39.972,49.915],[-61.979,25.314],[-62.952,23.142],[-62.591,22.98],[-65.061,-39.41],[-65.111,-39.548],[-59.547,-42.23],[-59.334,-41.905],[18.04,-49.267],[18.202,-49.915],[41.12,-48.879],[41.133,-48.668],[64.313,17.553],[65.111,17.754],[48.406,44.725],[47.807,44.101],[42.53,3.007],[26.461,3.967],[0.961,5.439],[-43.777,8.871]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1024.281,382.492]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-10.542,-17.217],[0,0],[1.098,-3.106],[0,0],[1.335,23.667],[0,0],[-0.374,0.038],[0,0]],"o":[[0,0],[-0.724,3.269],[0,0],[-13.711,-19.325],[0,0],[0.387,-0.025],[0,0],[1.647,20.111]],"v":[[12.869,23.685],[13.368,23.798],[10.623,33.366],[9.825,33.168],[-13.355,-33.055],[-13.368,-33.267],[-12.22,-33.366],[-5.77,-33.342]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1078.769,366.878]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.372,-3.917],[3.443,-15.37],[0,0],[1.647,20.111],[0,0],[-3.368,-0.287],[0,0]],"o":[[5.489,15.645],[0,0],[-10.542,-17.216],[0,0],[7.91,-0.761],[0,0],[1.41,3.668]],"v":[[8.341,-18.258],[11.073,29.611],[10.573,29.499],[-8.065,-27.528],[-14.516,-27.552],[3.388,-29.299],[4.173,-29.611]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1081.064,361.064]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[14.272,-2.046],[0,0],[0,0],[0,0],[0,0],[0,0],[-9.606,1.372],[0,0],[0,0]],"o":[[3.131,2.358],[-17.054,10.005],[0,0],[-14.273,2.059],[-12.937,9.419],[3.643,0.037],[-10.28,0.636],[15.919,1.634],[0,0],[12.9,-1.859],[18.165,5.515],[-1.685,5.839]],"v":[[38.25,-6.544],[49.977,-2.901],[19.349,0.368],[3.281,13.317],[-17.542,6.793],[-47.184,11.047],[-37.153,4.835],[-49.978,-2.564],[-16.581,-11.834],[-1.598,-5.022],[13.885,-16.212],[47.807,-16.038]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1046.863,493.732]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-14.846,0.986],[0.012,-0.3],[26.436,-1.747],[-0.225,0.174]],"o":[[-0.013,0.287],[-0.05,1.197],[0.212,-0.187],[14.896,-0.986]],"v":[[22.631,-1.753],[22.594,-0.867],[-22.631,1.753],[-21.982,1.204]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1136.975,518.758]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.391,2.757],[4.624,-10.238],[4.778,-0.312]],"o":[[-0.599,9.22],[-4.073,3.633],[1.048,-17.615]],"v":[[8.64,-14.715],[2.661,8.661],[-8.64,14.715]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1168.245,502.29]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-32.661,6.088],[0.349,-5.364],[1.048,-17.616],[14.896,-0.985],[-13.699,1.385]],"o":[[-0.112,5.177],[-4.392,2.757],[-14.846,0.985],[6.2,-5.177],[0,0]],"v":[[31.289,-24.103],[30.603,-8.284],[13.324,21.147],[-31.289,24.103],[-2.158,13.374]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1146.282,495.859]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.162,0.025],[0,0],[1.011,-0.649],[-0.112,5.177]],"o":[[0,0],[0,0],[0.35,-5.365],[0.163,-0.038]],"v":[[0.362,-7.96],[0.811,7.012],[-0.811,7.96],[-0.125,-7.859]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1177.695,479.615]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.475,7.71],[4.329,6.263],[2.058,0],[0,0],[-7.722,0.45],[0,0],[0.399,-0.112],[0.686,-1.572],[-0.137,-8.434],[-2.982,-6.75],[0,0],[3.668,-0.474]],"o":[[1.148,-6.063],[-0.524,-8.746],[-1.26,-1.846],[0,0],[8.92,-0.537],[0,0],[-0.399,0],[-1.547,0.449],[-2.358,5.477],[0.138,8.271],[0,0],[-3.593,1.01],[0,0]],"v":[[-1.603,27.865],[-0.281,6.357],[-7.105,-17.385],[-12.494,-20.641],[-12.906,-27.24],[12.594,-28.713],[12.906,-23.136],[11.709,-22.974],[8.078,-19.73],[4.622,2.29],[9.189,25.894],[9.426,26.493],[-1.491,28.713]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1038.148,415.172]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[9.394,-3.668],[0,0],[65.173,27.584],[0,0],[0,0],[0,0],[-10.742,-20.323],[-0.611,-96.039]],"o":[[0,0],[0,0],[4.105,-129.161],[0,0],[11.166,0.025],[0,0],[52.461,32.986],[21.732,41.145],[0,0]],"v":[[95.789,159.876],[78.186,162.622],[77.861,161.797],[-97.685,-157.582],[-97.685,-157.856],[-78.31,-162.572],[-78.273,-162.622],[34.995,-41.932],[97.685,159.865]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1079.948,302.373]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.725,-0.05],[0,0],[0.037,-0.574],[4.778,-0.275],[1.073,4.741],[0.162,0.648]],"o":[[7.348,-0.262],[0,0],[0.062,0.637],[-0.325,5.465],[-6.138,0.337],[-0.025,-0.624],[0,0]],"v":[[-10.61,-4.891],[10.549,-5.202],[10.549,-5.065],[10.573,-3.256],[1.167,4.916],[-10.312,-2.295],[-10.586,-4.191]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[914.763,124.905]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[1.21,-1.959],[2.234,-1.434],[1.996,-0.686],[3.244,-0.449],[3.444,-0.299],[0,0],[5.951,12.076],[0,0],[0,0]],"o":[[1.173,15.258],[-0.486,2.757],[-1.435,2.395],[-1.696,1.123],[-2.969,1.048],[-3.718,0.512],[0,0],[-5.177,-12.488],[0,0],[0,0],[0,0]],"v":[[25.781,-19.862],[25.207,1.434],[22.637,8.483],[17.06,14.16],[11.496,16.842],[2.052,18.987],[-8.852,20.061],[-10.249,20.634],[-26.954,-16.693],[-26.467,-16.93],[25.731,-20.634]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[947.674,326.101]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-15.857,-0.724],[-3.618,-1.534],[4.716,-9.519],[0,0],[2.97,-2.234],[-7.273,1.635],[4.466,-0.623],[4.529,6.525],[0.012,0.024],[0.462,2.52],[-1.285,1.959]],"o":[[5.003,0.387],[-4.191,-1.085],[0,0],[0,0],[-0.174,2.944],[-2.956,1.198],[-18.651,2.595],[-0.025,-0.025],[-1.385,-2.333],[0,0],[4.529,-4.604]],"v":[[9.064,-18.208],[21.951,-15.052],[7.804,-5.483],[17.909,0.518],[8.814,6.22],[23.261,13.555],[12.208,16.337],[-20.441,4.485],[-20.491,4.411],[-23.261,-2.95],[-21.539,-6.306]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.878,0.839,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[961.434,246.038]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-3.718,0.512],[0,0],[0.162,-15.108],[5.539,13.349]],"o":[[3.443,-0.299],[0,0],[2.907,14.859],[-4.578,-11.477],[0,0]],"v":[[-6.281,-18.676],[4.622,-19.749],[4.647,-19.562],[7.516,19.749],[-7.679,-18.102]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[945.104,364.838]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.762,-3.967],[2.357,-0.2],[9.943,-0.649],[0,0],[-0.012,0.324],[-0.375,7.049],[0,0]],"o":[[-2.445,0.162],[-11.915,0.773],[-5.077,-20.548],[0,0],[0.113,-1.735],[33.46,4.841],[13.062,-0.387]],"v":[[36.117,19.106],[28.894,19.655],[-4.155,21.801],[-36.118,-6.394],[-36.093,-6.892],[-35.244,-21.801],[6.899,12.894]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[942.066,509.751]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[3.892,-1.397],[1.585,-0.45],[0,0],[0.137,8.271],[0,0],[-0.025,-0.474],[-2.171,0.112],[0.286,5.602],[0.037,0.337],[0,0],[0.586,-5.365],[0,0]],"o":[[-1.56,0.561],[0,0],[-2.982,-6.75],[0,0],[0,0.449],[0.287,5.602],[2.171,-0.113],[-0.013,-0.349],[0,0],[0.537,5.939],[0,0],[-3.406,2.184]],"v":[[-0.917,10.885],[-5.633,12.395],[-5.87,11.796],[-10.436,-11.808],[-3.974,-11.858],[-3.936,-10.474],[0.505,-0.53],[3.924,-10.873],[3.849,-11.896],[9.899,-12.395],[9.675,4.947],[10.037,5.495]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1053.206,429.27]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-11.914,0.773],[0.324,1.36],[0.037,0.112]],"o":[[-17.74,1.497],[-0.025,-0.113],[9.943,-0.649]],"v":[[16.524,-1.922],[-16.437,0.562],[-16.524,0.225]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[954.436,531.328]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.15,-0.599],[5.265,-0.374],[0.449,5.128],[0.038,0.562],[0,0],[-6.475,0.237],[0,0]],"o":[[0.15,4.978],[-5.365,0.387],[0.05,-0.536],[0,0],[6.825,-0.449],[0,0],[0.037,0.661]],"v":[[10.068,-3.674],[0.699,5.882],[-10.18,-2.751],[-10.168,-4.398],[-10.218,-5.246],[9.769,-6.269],[9.794,-5.57]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[894.384,126.283]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.067,1.148],[-4.255,0.063],[6.575,-0.449],[-5.377,0.649],[6.238,-6.513],[6.263,-0.96],[1.373,-5.863],[6.5,-5.689],[-4.966,-2.907],[2.234,-5.339],[-4.966,-0.05],[-4.803,-1.273],[-4.754,1.647],[-6.412,-3.58]],"o":[[4.067,-1.148],[-5.777,-3.218],[3.58,-3.954],[-8.571,-3.243],[-5.727,-2.695],[-6.113,0.949],[-8.596,-1.696],[5.277,-2.283],[-5.826,1.073],[3.606,-3.318],[4.978,0.062],[-0.088,-4.916],[6.936,-2.395],[1.51,-2.408]],"v":[[-38.406,-167.051],[-25.12,-168.486],[-44.757,-172.415],[-30.697,-179.626],[-55.96,-174.061],[-74.523,-176.744],[-88.41,-166.464],[-112.85,-160.001],[-96.182,-158.966],[-109.382,-148.474],[-95.633,-153.052],[-80.974,-150.432],[-71.692,-160.812],[-50.333,-158.916]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[-17.054,10.006],[3.132,2.357],[-1.685,5.839],[18.165,5.514],[12.899,-1.859],[0,0],[15.919,1.635],[-10.28,0.637],[3.643,0.038],[-12.938,9.419],[-14.273,2.058],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[-9.607,1.372],[0,0],[0,0],[0,0],[0,0],[0,0],[14.272,-2.046],[0,0]],"v":[[115.506,166.077],[103.779,162.434],[113.336,152.939],[79.414,152.766],[63.932,163.957],[48.948,157.145],[15.551,166.413],[28.376,173.811],[18.345,180.025],[47.988,175.771],[68.81,182.296],[84.878,169.345]],"c":true}},"nm":"P"},{"ind":2,"ty":"sh","ks":{"a":0,"k":{"i":[[-52.473,25.812],[9.956,24.44],[27.633,44.239],[18.501,-2.533],[7.647,-24.839],[-5.552,-18.152],[-9.581,-18.826],[0,0]],"o":[[53.346,-29.642],[-6.774,-18.801],[-42.281,-67.694],[-25.763,3.531],[-5.577,18.127],[7.548,24.665],[10.717,21.047],[22.905,57.188]],"v":[[89.62,126.704],[122.418,3.631],[71.929,-89.413],[-47.876,-149.247],[-99.463,-106.58],[-97.117,-54.332],[-64.706,12.638],[-38.993,80.12]],"c":true}},"nm":"P"},{"ind":3,"ty":"sh","ks":{"a":0,"k":{"i":[[9.182,-18.489],[0,0],[34.995,-2.271],[19.862,-2.433],[25.226,8.247],[0,0],[11.951,33.335],[38.75,35.231],[0,0],[6.911,13.836],[2.046,8.084],[0,0],[-6.251,0.2],[0.399,6.325],[-5.527,0.687],[0.462,5.714],[-5.751,0.436],[-0.499,5.664],[-5.365,0.387],[0.149,4.978],[-6.139,0.337],[-0.324,5.464],[-22.631,1.46],[-7.485,-0.012],[0,0],[4.105,-129.162],[0,0],[3.256,-24.403]],"o":[[0,0],[-30.229,2.008],[-7.173,-8.546],[0,0],[0,0],[-3.53,-44.476],[-22.307,-62.229],[0,0],[4.579,-8.771],[19.312,-6.799],[0,0],[1.136,5.564],[6.275,-0.212],[1.672,5.464],[5.776,-0.711],[1.31,5.564],[5.764,-0.425],[0.449,5.127],[5.264,-0.374],[1.073,4.74],[4.778,-0.275],[1.996,4.105],[8.558,7.136],[0,0],[65.173,27.584],[0,0],[-10.729,4.18],[0,0]],"v":[[116.592,195.77],[116.629,196.344],[13.342,203.105],[-25.632,190.467],[-54.376,155.847],[-52.929,155.71],[-78.329,33.735],[-180.481,-122.137],[-180.581,-122.187],[-180.181,-156.921],[-166.557,-194.01],[-166.445,-194.035],[-154.057,-183.78],[-143.952,-197.154],[-130.278,-187.598],[-121.221,-199.724],[-108.557,-190.242],[-97.13,-201.221],[-86.251,-192.588],[-76.882,-202.145],[-65.404,-194.934],[-55.997,-203.105],[-23.935,-189.52],[0.93,-180.237],[0.93,-179.962],[176.475,139.417],[176.8,140.24],[150.551,178.99]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[981.333,324.754]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.028,0.15],[0.187,4.117],[5.015,-0.15],[-0.199,-4.117]],"o":[[5.015,-0.15],[-0.188,-4.117],[-5.028,0.162],[0.187,4.117]],"v":[[5.04,-9.089],[13.786,-16.824],[4.354,-24.009],[-4.392,-16.262]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[27.584,13.648],[-46.235,6.85],[-0.786,-7.51],[0,0],[1.76,-17.017],[0.399,0.187],[0,0]],"o":[[-28.893,-26.798],[0,0],[3.718,0.799],[1.185,11.153],[0,0],[-1.734,16.655],[0,0],[0,0]],"v":[[40.134,37.584],[-46.971,-23.884],[34.645,-37.584],[45.786,-26.816],[22.893,-13.317],[36.99,11.335],[25.837,23.686],[40.509,37.171]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[739.797,171.022]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.774,-18.801],[53.347,-29.642],[22.905,57.189],[10.717,21.046],[7.548,24.664],[-5.577,18.128],[-25.762,3.531],[-42.281,-67.694]],"o":[[9.956,24.44],[-52.473,25.813],[0,0],[-9.581,-18.826],[-5.551,-18.153],[7.647,-24.839],[18.502,-2.532],[27.633,44.239]],"v":[[103.455,5.926],[70.656,128.999],[-57.956,82.415],[-83.669,14.934],[-116.081,-52.036],[-118.426,-104.285],[-66.839,-146.952],[52.966,-87.118]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.579,-11.477],[-2.658,-6.038],[-0.324,-0.711],[-9.681,-6.201],[-5.589,-1.934],[-4.117,-0.736],[-3.519,-0.174],[-4.715,0.612],[-3.593,1.01],[-1.56,0.562],[-3.406,2.183],[-2.882,2.844],[-3.655,10.355],[-0.724,3.269],[5.489,15.645],[1.41,3.668],[19.05,32.337],[40.684,-11.253],[-18.377,-38.537],[-4.341,-8.795],[-5.177,-12.488]],"o":[[3.144,7.872],[0.337,0.748],[4.529,10.018],[4.828,3.094],[3.88,1.372],[3.431,0.649],[4.703,0.25],[3.668,-0.474],[1.584,-0.449],[3.892,-1.397],[3.406,-2.171],[7.398,-7.298],[1.098,-3.106],[3.443,-15.37],[-1.372,-3.917],[-12.625,-32.923],[-20.822,-35.307],[-47.046,13],[4.728,7.673],[5.951,12.077],[5.54,13.349]],"v":[[-47.676,62.129],[-38.968,83.176],[-37.995,85.347],[-15.988,109.949],[-0.293,117.534],[11.733,120.715],[22.176,121.95],[36.36,121.426],[47.277,119.206],[51.993,117.696],[62.946,112.307],[72.39,104.759],[89.095,77.786],[91.84,68.217],[89.108,20.348],[84.941,8.995],[39.23,-80.094],[-61.013,-130.309],[-93.175,-37.939],[-79.577,-13.05],[-62.872,24.278]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1000.297,322.458]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.135,5.564],[0,0],[0.137,0.412],[-7.697,0.848],[-0.25,-0.761],[6.276,-0.212]],"o":[[0,0],[-0.35,-1.385],[7.585,-0.948],[0.025,0.786],[0.399,6.325],[-6.25,0.2]],"v":[[-10.997,-2.502],[-11.109,-2.477],[-11.895,-5.234],[11.085,-7.953],[11.497,-5.62],[1.391,7.753]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[825.886,133.22]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.335,-0.848],[-1.31,-1.36],[4.179,1.772]],"o":[[2.059,0.898],[-2.57,-1.747],[1.933,0.487]],"v":[[-0.05,-0.537],[5.04,2.845],[-5.04,-2.845]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[988.426,233.831]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[6.2,-5.177],[0.038,0],[5.963,-0.399],[0,0],[0,0],[-10.729,4.179],[0,0],[0,0],[0.063,-3.207],[0,0]],"o":[[-0.037,0.012],[-5.277,0.35],[0,0],[9.182,-18.489],[3.256,-24.402],[9.394,-3.668],[0,0],[0.025,3.131],[-32.661,6.088],[-13.699,1.385]],"v":[[-22.799,28.75],[-22.924,28.763],[-39.828,29.885],[-39.866,29.312],[-5.907,12.531],[20.342,-26.217],[37.944,-28.962],[39.842,-28.974],[39.778,-19.456],[6.332,18.022]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1137.792,491.211]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.05,-0.537],[5.764,-0.424],[1.31,5.564],[-0.013,0.012],[0.125,0.549],[0,0],[-7.959,0.511]],"o":[[-0.062,0.561],[-0.499,5.664],[-5.752,0.437],[0,0],[-0.05,-0.549],[0,0],[8.234,-0.761],[0,0]],"v":[[12.201,-6.107],[12.189,-4.46],[0.761,6.518],[-11.902,-2.963],[-11.902,-2.988],[-12.164,-4.635],[-12.202,-5.034],[12.151,-6.955]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[872.015,127.993]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.171,-0.112],[-0.287,-5.602],[0,0],[-2.658,6.15],[-1.559,0.449],[-0.4,0],[-1.26,-1.846],[-0.525,-8.745],[0,0]],"o":[[-2.183,0.112],[0,0],[-0.537,-9.332],[0.673,-1.572],[0.399,-0.112],[2.058,0],[4.329,6.263],[0,0],[-0.287,-5.601]],"v":[[-0.324,3.349],[-3.742,13.704],[-9.93,14.066],[-6.574,-10.66],[-2.945,-13.905],[-1.747,-14.066],[3.642,-10.811],[10.468,12.931],[4.116,13.293]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1027.4,408.597]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.829,3.094],[0,0],[0.686,5.664],[0,0],[-2.034,1.983],[0.2,-12.014]],"o":[[-5.589,-1.934],[0,0],[0.087,-2.271],[0,0],[1.909,-1.559],[1.035,8.982],[0,0]],"v":[[8.103,14.883],[-7.592,7.299],[-7.354,6.911],[-8.39,-5.664],[-0.967,-6.513],[6.157,-14.883],[8.19,14.622]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[991.9,425.109]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.907,-0.187],[-0.487,14.06],[0,0],[0,0],[-5.077,-20.547]],"o":[[8.147,-2.844],[0,0],[-0.012,0.325],[0,0],[-23.404,1.51]],"v":[[-21.414,15.732],[-10.648,-15.732],[-10.523,-15.732],[-10.549,-15.233],[21.414,12.962]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[916.497,518.59]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[33.46,4.841],[0.112,-1.735],[0,0],[0.062,4.965],[0.087,2.433],[0,0],[-5.514,-1.809],[0,0],[-7.173,-8.546],[7.647,-0.499],[-2.445,0.162],[13.062,-0.387]],"o":[[-0.374,7.049],[0,0],[0.212,-6.201],[-0.025,-2.433],[0,0],[7.773,-0.399],[25.226,8.246],[19.861,-2.433],[-8.109,0.536],[2.358,-0.2],[-6.762,-3.967],[0,0]],"v":[[-43.378,-15.682],[-44.226,-0.773],[-44.351,-0.773],[-44.301,-18.04],[-44.476,-25.326],[-43.079,-25.376],[-23.242,-23.03],[5.502,11.59],[44.476,24.228],[20.76,25.775],[27.983,25.226],[-1.235,19.013]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0,0.698,0.408,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[950.2,503.631]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-4.466,-1.56]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-10.605,-3.156]],"v":[[-18.196,-4.042],[13.792,-7.074],[13.792,-7.061],[18.196,0.512],[-0.668,2.296],[-8.777,3.069],[-1.653,7.074]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[976.306,289.285]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.06,1.996],[0,0],[0,0],[0,0],[0,0],[7.785,-5.066]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[1.472,-1.098]],"v":[[4.242,1.84],[-3.93,2.613],[-8.334,-4.959],[-8.334,-4.972],[6.75,-6.394],[0.549,6.394]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[998.431,287.183]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":80,"st":0},{"ind":23,"ty":4,"nm":"a","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.53,196.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33],[-1.52,-8.7]],"o":[[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33],[0,4.67]],"v":[[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22],[52.945,-11.41]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.52,-8.7],[2.2,0.33],[18.19,-7.67],[10.85,6.16],[-10.17,6.5],[-18.01,1.33]],"o":[[0,4.67],[-18.61,-2.32],[-24.82,9.99],[-11.12,-7.86],[10.18,-6.5],[18.02,-1.33]],"v":[[52.945,-11.41],[48.855,-5.73],[-7.545,1.83],[-41.825,17.17],[-29.705,-6.04],[18.515,-22]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[882.434,400.25]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":80,"st":0},{"ind":24,"ty":4,"nm":"b","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[106.53,61.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.88,24.951],[0,0],[0,0],[25.866,-7.144]],"o":[[0,0],[24.365,5.284],[0,0],[0,0],[-30.822,8.513]],"v":[[-33.188,8.953],[-9.998,-5.137],[12.312,-28.621],[28.163,-27.74],[7.321,20.108]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":10,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[894.218,513.63]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0.189,4.119],[-5.021,0.155],[-0.188,-4.118],[5.022,-0.155]],"o":[[-0.189,-4.119],[5.022,-0.155],[0.189,4.119],[-5.021,0.155]],"v":[[-9.092,0.28],[-0.342,-7.458],[9.092,-0.281],[0.342,7.457]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":10,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.043,0.106,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[873.947,500.296]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-26.316,0.733],[-22.016,0.44],[7.682,30.609],[0,0],[0,0]],"o":[[1.018,18.715],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-42.772,-24.016],[-10.703,24.048],[27.606,22.728],[35.091,-24.387],[35.229,-24.662],[-42.766,-24.782]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"fl","c":{"a":0,"k":[0.031,0.322,0.224,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[894.189,510.13]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":80,"st":0},{"ind":26,"ty":4,"nm":"a","parent":8,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-337.47,377.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.92,6.26],[-0.44,18.57],[2.07,4.77],[-6.4,3.28],[-3.12,-7.87],[0,-14],[10.37,-9.68],[4.19,4.89]],"o":[[6.93,-6.25],[0.6,-15.94],[-2.07,-4.77],[6.4,-3.28],[3.12,7.88],[-0.35,27.66],[-5.48,4.86],[-4.19,-4.89]],"v":[[-14.19,32.465],[7.93,-11.985],[3.24,-36.115],[4.43,-49.915],[20.26,-40.685],[24.46,-13.995],[-4.37,43.805],[-20.27,48.305]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1367.229,174.165]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.12,-7.87],[0,-14],[10.37,-9.68],[4.19,4.89],[-6.92,6.26],[-0.44,18.57],[2.07,4.77],[-6.4,3.28]],"o":[[3.12,7.88],[-0.35,27.66],[-5.48,4.86],[-4.19,-4.89],[6.93,-6.25],[0.6,-15.94],[-2.07,-4.77],[6.4,-3.28]],"v":[[20.26,-40.685],[24.46,-13.995],[-4.37,43.805],[-20.27,48.305],[-14.19,32.465],[7.93,-11.985],[3.24,-36.115],[4.43,-49.915]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1367.229,174.165]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":44,"op":50,"st":0},{"ind":27,"ty":4,"nm":"h","parent":9,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-327.47,181.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6,3.3],[-3.14,1.95],[-1.46,-2.02],[0.11,-0.22],[0,0]],"o":[[1.73,-10.14],[6,-3.3],[3.15,-1.95],[1.4,1.95],[0,0],[0,0]],"v":[[-19.38,13.575],[-2.52,-2.815],[10.09,-11.625],[17.98,-11.425],[17.99,-6.595],[17.98,-6.585]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1356.769,387.245]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.49,1.76]],"o":[[8.06,-2.61],[0,0]],"v":[[-7.06,3.495],[7.06,-3.495]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1367.689,384.155]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.09,0],[2.34,-3],[0,0]],"o":[[1.87,-1.32],[4.39,0],[0,0],[0,0]],"v":[[-5.37,-1.205],[-0.15,-3.365],[3.03,3.355],[3.03,3.365]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1380.129,381.855]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-3.76,2.29]],"o":[[7.52,-0.89],[0,0]],"v":[[-8.52,2.91],[8.52,-2.91]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1374.639,388.13]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.74,0.55],[0.62,-5.61]],"o":[[1.08,-0.65],[3.32,-2.45],[0,0]],"v":[[-5.23,0.79],[-2.5,-1.03],[4.61,3.48]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1388.389,384.42]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-13.18,0.39],[-8.88,-2.35],[-0.13,3],[5.22,-0.13],[0,1.96],[-8.35,-0.26],[-3.79,6.27],[4.31,-1.31],[14.36,-0.13]],"o":[[-1.43,9.4],[13.18,-0.39],[6.78,0.65],[0.13,-3],[-5.22,0.14],[0,-1.96],[8.35,0.26],[3.78,-6.26],[-4.31,1.3],[0,0]],"v":[[-31.135,-3.98],[-15.205,16.25],[6.205,17.56],[14.035,12.99],[6.205,7.5],[-1.895,3.33],[6.855,-1.11],[28.785,-7.9],[24.475,-16.9],[3.985,-10.64]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1368.524,404.8]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.34,-3],[-0.74,0.55],[0.62,-5.61],[3.78,-6.26],[8.35,0.26],[0,-1.96],[-5.22,0.14],[0.13,-3],[6.78,0.65],[13.18,-0.39],[-1.43,9.4],[-6,3.3],[-3.14,1.95],[-1.46,-2.02],[0.11,-0.22],[-2.09,0]],"o":[[1.08,-0.65],[3.32,-2.45],[4.31,-1.31],[-3.79,6.27],[-8.35,-0.26],[0,1.96],[5.22,-0.13],[-0.13,3],[-8.88,-2.35],[-13.18,0.39],[1.73,-10.14],[6,-3.3],[3.15,-1.95],[1.4,1.95],[1.87,-1.32],[4.39,0]],"v":[[14.635,-13.13],[17.365,-14.95],[24.475,-10.44],[28.785,-1.44],[6.855,5.35],[-1.895,9.79],[6.205,13.96],[14.035,19.45],[6.205,24.02],[-15.205,22.71],[-31.135,2.48],[-14.275,-13.91],[-1.665,-22.72],[6.225,-22.52],[6.235,-17.69],[11.455,-19.85]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1368.523,398.34]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":50,"op":60,"st":0},{"ind":28,"ty":4,"nm":"a","parent":10,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-307.47,72.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[-5.08,2.86]],"o":[[0,0],[4.98,3.32],[0,0]],"v":[[-7.525,-2.78],[-7.515,-2.78],[7.525,-0.08]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1343.894,447.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.68,1.63]],"o":[[4.65,3.8],[0,0]],"v":[[-7.74,-2.515],[7.74,0.885]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1343.679,461.675]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.15,2.36]],"o":[[4.61,4.25],[0,0]],"v":[[-7.99,-2.95],[7.99,0.59]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1344.369,432.32]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-0.72,-16.11]],"o":[[-0.14,-13.51],[0,0]],"v":[[-7.92,5.085],[8.06,8.425]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1343.359,408.045]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.45,24.03],[-0.14,5.24],[0.14,4.94],[0.47,5.65]],"o":[[11.89,-18.09],[0.5,-4.92],[0.13,-4.67],[-0.16,-5.31],[0,0]],"v":[[-11.115,54.29],[10.025,-8.2],[10.985,-23.44],[10.955,-37.85],[10.015,-54.29]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1341.404,470.76]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-1.45,24.25],[-0.02,5.15],[0.17,5.37],[0.3,5.73]],"o":[[12.33,-18.83],[0.28,-4.59],[0.01,-4.79],[-0.16,-5.12],[0,0]],"v":[[-9.785,53.19],[9.335,-7.16],[9.775,-21.73],[9.535,-36.94],[8.835,-53.19]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1326.604,466.32]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.68,1.63],[0,0],[11.89,-18.09],[0,0],[-1.45,24.25]],"o":[[0,0],[-2.45,24.03],[0,0],[12.33,-18.83],[4.65,3.8]],"v":[[17.295,-29.545],[17.305,-29.545],[-3.835,32.945],[-17.305,27.405],[1.815,-32.945]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1334.124,492.105]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.08,2.86],[0,0],[0.5,-4.92],[0,0],[4.65,3.8],[-0.02,5.15]],"o":[[0,0],[-0.14,5.24],[0,0],[-5.68,1.63],[0.28,-4.59],[4.98,3.32]],"v":[[7.255,-7.1],[8.225,-7.07],[7.265,8.17],[7.255,8.17],[-8.225,4.77],[-7.785,-9.8]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1344.164,454.39]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.72,-16.11],[-0.16,-5.31],[4.61,4.25],[0,0],[0.3,5.73]],"o":[[0.47,5.65],[-6.15,2.36],[0,0],[-0.16,-5.12],[-0.14,-13.51]],"v":[[7.59,-0.975],[8.53,15.465],[-7.45,11.925],[-7.69,11.935],[-8.39,-4.315]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1343.828,417.445]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.15,2.36],[0.13,-4.67],[0,0],[4.98,3.32],[0.17,5.37],[0,0]],"o":[[0.14,4.94],[0,0],[-5.08,2.86],[0.01,-4.79],[0,0],[4.61,4.25]],"v":[[8.03,-6.85],[8.06,7.56],[7.09,7.53],[-7.95,4.83],[-8.19,-10.38],[-7.95,-10.39]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1344.329,439.76]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":50,"op":60,"st":0},{"ind":29,"ty":4,"nm":"a","parent":11,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-236.47,7.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-8.38,11.87],[-5.84,-2.17],[7.86,-10.82],[21.86,-3.46],[1.34,4.81]],"o":[[30.14,-14.58],[6.71,-8.68],[5.85,2.17],[-15.05,21.51],[-3.83,0.29],[-1.33,-4.81]],"v":[[-34.315,26.33],[25.055,-29.36],[39.485,-38.52],[35.535,-18.38],[-34.685,40.4],[-44.005,35.65]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1289.524,551.75]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.84,-2.17],[7.86,-10.82],[21.86,-3.46],[1.34,4.81],[0,0],[-8.38,11.87]],"o":[[5.85,2.17],[-15.05,21.51],[-3.83,0.29],[-1.33,-4.81],[30.14,-14.58],[6.71,-8.68]],"v":[[39.485,-38.52],[35.535,-18.38],[-34.685,40.4],[-44.005,35.65],[-34.315,26.33],[25.055,-29.36]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1289.524,551.75]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":50,"op":60,"st":0}]},{"id":"comp_3","nm":"l","fr":24,"layers":[{"ind":1,"ty":3,"nm":"l","parent":2,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[10]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":8,"s":[19]},{"i":{"x":[0.593],"y":[0.843]},"o":{"x":[0.175],"y":[0.072]},"t":9,"s":[19]},{"i":{"x":[0.698],"y":[1]},"o":{"x":[0.351],"y":[1.186]},"t":10,"s":[6.793]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[4]},{"t":15,"s":[-34]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":1,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":4,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":7,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":8,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.593,"y":0.593},"o":{"x":0.167,"y":0.167},"t":9,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.698,"y":0.698},"o":{"x":0.351,"y":0.351},"t":10,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":12,"s":[-79,97,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[-79,97,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":8,"s":[100,100,100]},{"i":{"x":[0.593,0.593,0.593],"y":[1,1,1]},"o":{"x":[0.175,0.175,0.175],"y":[0,0,0]},"t":9,"s":[100,100,100]},{"i":{"x":[0.698,0.698,0.698],"y":[1,1,1]},"o":{"x":[0.351,0.351,0.351],"y":[0,0,0]},"t":10,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[100,100,100]},{"t":15,"s":[100,100,100]}],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":2,"ty":3,"nm":"l","parent":3,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[-6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[11]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[39]},{"i":{"x":[0.593],"y":[1]},"o":{"x":[0.175],"y":[0]},"t":9,"s":[-5]},{"i":{"x":[0.698],"y":[1]},"o":{"x":[0.351],"y":[0]},"t":10,"s":[-5]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-5]},{"t":15,"s":[-14]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.167,"y":0.167},"t":1,"s":[10,135,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":4,"s":[10,135,0],"to":[-0.206,-0.114,0],"ti":[0.564,0.209,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":7,"s":[8.763,134.314,0],"to":[-0.564,-0.209,0],"ti":[-0.206,-0.114,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":8,"s":[6.619,133.749,0],"to":[0.206,0.114,0],"ti":[-0.564,-0.209,0]},{"i":{"x":0.593,"y":0.593},"o":{"x":0.167,"y":0.167},"t":9,"s":[10,135,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.698,"y":0.698},"o":{"x":0.351,"y":0.351},"t":10,"s":[10,135,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0.333},"t":12,"s":[10,135,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[10,135,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":8,"s":[100,100,100]},{"i":{"x":[0.593,0.593,0.593],"y":[1,1,1]},"o":{"x":[0.175,0.175,0.175],"y":[0,0,0]},"t":9,"s":[100,100,100]},{"i":{"x":[0.698,0.698,0.698],"y":[1,1,1]},"o":{"x":[0.351,0.351,0.351],"y":[0,0,0]},"t":10,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[100,100,100]},{"t":15,"s":[100,100,100]}],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":3,"ty":3,"nm":"l","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[5]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[16]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[16]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[-54]},{"i":{"x":[0.593],"y":[0.843]},"o":{"x":[0.175],"y":[0.072]},"t":9,"s":[-65]},{"i":{"x":[0.698],"y":[1]},"o":{"x":[0.351],"y":[1.186]},"t":10,"s":[-93.482]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-100]},{"t":15,"s":[-81]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[993,865,0],"to":[-4,-9.5,0],"ti":[-3.5,-10,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":4,"s":[969,808,0],"to":[3.5,10,0],"ti":[-3.833,-15.833,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":7,"s":[1014,925,0],"to":[3.833,15.833,0],"ti":[-1.333,7.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":8,"s":[992,903,0],"to":[1.333,-7.667,0],"ti":[-1.5,15,0]},{"i":{"x":0.593,"y":0.843},"o":{"x":0.167,"y":0.167},"t":9,"s":[1022,879,0],"to":[1.036,-10.364,0],"ti":[6.778,15.785,0]},{"i":{"x":0.698,"y":1},"o":{"x":0.296,"y":1},"t":10,"s":[1009.1,821.8,0],"to":[-3.032,-7.061,0],"ti":[2.112,-2.266,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":12,"s":[1001,813,0],"to":[-6.833,7.333,0],"ti":[3.333,-18.333,0]},{"t":15,"s":[981,923,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":8,"s":[100,100,100]},{"i":{"x":[0.593,0.593,0.593],"y":[1,1,1]},"o":{"x":[0.175,0.175,0.175],"y":[0,0,0]},"t":9,"s":[100,100,100]},{"i":{"x":[0.698,0.698,0.698],"y":[1,1,1]},"o":{"x":[0.351,0.351,0.351],"y":[0,0,0]},"t":10,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[100,100,100]},{"t":15,"s":[100,100,100]}],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":4,"ty":3,"nm":"l","parent":5,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[4,171,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":5,"ty":3,"nm":"l","parent":6,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[114,137,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":6,"ty":3,"nm":"l","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":2},"p":{"a":0,"k":[1005,948,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":16,"st":0},{"ind":7,"ty":4,"nm":"l","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[353.53,-209.39,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,-3.87],[3.87,0],[0,3.88],[-3.87,0]],"o":[[0,3.88],[-3.87,0],[0,-3.87],[3.87,0]],"v":[[7.01,0],[0,7.01],[-7.01,0],[0,-7.01]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[653.369,810.09]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[3.57,-4.41],[-3.65,-27.85],[-5.48,0],[0,0]],"o":[[-4.08,-2.78],[-3.57,4.42],[4.7,24.38],[5.48,0],[0,0]],"v":[[9.305,-42.03],[-4.715,-37.92],[-12.695,11.43],[10.865,44.81],[16.345,40.13]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[638.504,835.55]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-3.67,6.05]],"o":[[5.61,2.49],[0,0]],"v":[[-8.92,1.38],[8.92,-3.87]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[660.379,853.62]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5,3.48]],"o":[[5.97,3.15],[0,0]],"v":[[-9.235,-0.935],[9.235,-2.215]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[657.774,844.495]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.18,3.71],[-0.03,0.02]],"o":[[3.23,2.81],[0.03,-0.01],[0,0]],"v":[[-8.855,-2.215],[8.765,-1.495],[8.855,-1.545]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[657.064,833.335]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.13,-1.55],[3.22,-8.76],[-3.27,-12.43],[-8.88,-1.56],[-3.14,2.01],[2.23,7.26],[0.41,1.22],[0.21,4.39],[-1.83,3.66]],"o":[[-6.1,0.15],[-4.96,1.85],[-5.89,16.08],[2.85,11.54],[3.48,0.62],[8.64,-5.55],[-0.63,-2.07],[-0.94,-3.96],[-0.29,-6.33],[0,0]],"v":[[11.25,-42.18],[-3.93,-40.41],[-15.9,-25.83],[-17.53,19.4],[3.04,41.56],[13.15,39.62],[17.49,15.64],[15.8,10.61],[14.02,-2.27],[16.15,-18.31]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[651.809,834.11]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-8.88,-1.56],[0,0],[5.48,0],[4.7,24.38],[-3.57,4.42],[-4.08,-2.78],[0,0],[3.22,-8.76],[-3.27,-12.43]],"o":[[0,0],[0,0],[-5.48,0],[-3.65,-27.85],[3.57,-4.41],[0,0],[-4.96,1.85],[-5.89,16.08],[2.85,11.54]],"v":[[16.345,40.12],[16.345,40.13],[10.865,44.81],[-12.695,11.43],[-4.715,-37.92],[9.305,-42.03],[9.375,-41.85],[-2.595,-27.27],[-4.225,17.96]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[638.504,835.55]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.87,0],[0,-3.87],[3.87,0],[0,3.88]],"o":[[3.87,0],[0,3.88],[-3.87,0],[0,-3.87]],"v":[[0,-7.01],[7.01,0],[0,7.01],[-7.01,0]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[653.369,810.09]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,3.88],[3.87,0],[0,-3.87],[-3.87,0]],"o":[[0,-3.87],[-3.87,0],[0,3.88],[3.87,0]],"v":[[8.57,-24.02],[1.56,-31.03],[-5.45,-24.02],[1.56,-17.01]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.29,-6.33],[-0.94,-3.96],[-0.63,-2.07],[8.64,-5.55],[3.48,0.62],[2.85,11.54],[-5.89,16.08],[-4.96,1.85],[-6.1,0.15],[0,0]],"o":[[0.21,4.39],[0.41,1.22],[2.23,7.26],[-3.14,2.01],[-8.88,-1.56],[-3.27,-12.43],[3.22,-8.76],[4.13,-1.55],[0,0],[-1.83,3.66]],"v":[[14.02,-2.27],[15.8,10.61],[17.49,15.64],[13.15,39.62],[3.04,41.56],[-17.53,19.4],[-15.9,-25.83],[-3.93,-40.41],[11.25,-42.18],[16.15,-18.31]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"fl","c":{"a":0,"k":[0.996,0.839,0.027,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[651.809,834.11]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":1,"op":16,"st":0},{"ind":8,"ty":4,"nm":"l","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[224.53,-162.39,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-1.28,-2.57]],"o":[[-0.74,3.44],[0,0]],"v":[[-0.14,-4.455],[0.88,4.455]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[673.919,796.385]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.82,-11.57]],"o":[[11.77,-3.09],[0,0]],"v":[[-9.94,-3.275],[9.12,6.365]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[684.739,804.115]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.04,-4.79]],"o":[[1.34,6.88],[0,0]],"v":[[-4.355,-8.905],[4.355,8.905]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[746.554,785.915]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.55,7.69]],"o":[[-3.12,-3.73],[0,0]],"v":[[4.335,9.085],[-4.335,-9.085]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[738.144,789.425]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-4.42,-5.91]],"o":[[0.61,6.84],[0,0]],"v":[[-3.86,-9.71],[3.86,9.71]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[730.019,792.67]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-4.9,-5.76]],"o":[[0.83,5.76],[0,0]],"v":[[-4.185,-8.42],[4.185,8.42]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[754.804,781.74]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.04,-0.04],[14.57,-7.41],[2.97,-1.28],[0,0],[2.62,-1.01],[0.31,-0.11],[2.4,-0.81],[26.95,-1.17],[3.58,-0.11],[-2.74,-8.72],[-5.32,2.37],[-16.13,1.82],[-1.12,0.14],[-12.94,4.79],[-3.1,1.39],[-1.86,0.9],[-0.99,0.52],[-2.74,1.67],[-5.43,6.05]],"o":[[-0.04,0.04],[-11.85,10.76],[-2.59,1.32],[0,0],[-2.33,1.01],[-0.32,0.11],[-2.73,0.94],[-15.05,5.03],[-3.1,0.14],[-6.17,0.42],[2.73,8.72],[4.17,-4.04],[1.03,-0.12],[14.02,-1.72],[2.74,-1.01],[1.71,-0.76],[0.97,-0.47],[2.65,-1.38],[18.46,-11.15],[0,0]],"v":[[58.025,-35.74],[57.895,-35.62],[22.145,-9.36],[13.825,-5.46],[13.825,-5.45],[6.405,-2.42],[5.455,-2.09],[-2.195,0.53],[-54.595,9.14],[-64.605,9.5],[-71.285,25],[-60.395,33.37],[-34.495,28.05],[-31.265,27.66],[5.525,19.95],[14.255,16.37],[19.615,13.88],[22.565,12.4],[30.685,7.81],[74.025,-25.71]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[728.354,782.43]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.28,-2.57],[0.82,-11.57],[4.17,-4.04],[2.73,8.72],[-6.17,0.42],[-3.1,0.14],[0,0]],"o":[[11.77,-3.09],[-16.13,1.82],[-5.32,2.37],[-2.74,-8.72],[3.58,-0.11],[0,0],[-0.74,3.44]],"v":[[0.295,-4.03],[19.355,5.61],[-6.545,10.93],[-17.435,2.56],[-10.755,-12.94],[-0.745,-13.3],[-0.725,-12.94]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0.996,0.839,0.027,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[674.504,804.87]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-15.05,5.03],[-4.42,-5.91],[14.02,-1.72],[1.03,-0.12],[11.77,-3.09],[-0.74,3.44],[0,0]],"o":[[0.61,6.84],[-12.94,4.79],[-1.12,0.14],[0.82,-11.57],[-1.28,-2.57],[0,0],[26.95,-1.17]],"v":[[22.7,-13.76],[30.42,5.66],[-6.37,13.37],[-9.6,13.76],[-28.66,4.12],[-29.68,-4.79],[-29.7,-5.15]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[703.459,796.72]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.12,-3.73],[0,0],[2.74,-1.01],[0.61,6.84],[-2.73,0.94]],"o":[[0,0],[-3.1,1.39],[-4.42,-5.91],[2.4,-0.81],[1.55,7.69]],"v":[[8.095,7.15],[8.225,7.44],[-0.505,11.02],[-8.225,-8.4],[-0.575,-11.02]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[734.384,791.36]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.04,-4.79],[0,0],[0.97,-0.47],[1.71,-0.76],[0,0],[1.55,7.69],[-0.32,0.11],[-2.33,1.01],[0,0]],"o":[[0,0],[-0.99,0.52],[-1.86,0.9],[0,0],[-3.12,-3.73],[0.31,-0.11],[2.62,-1.01],[0,0],[1.34,6.88]],"v":[[8.545,6.93],[8.555,6.94],[5.605,8.42],[0.245,10.91],[0.115,10.62],[-8.555,-7.55],[-7.605,-7.88],[-0.185,-10.91],[-0.165,-10.88]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[742.364,787.89]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.9,-5.76],[0,0],[2.65,-1.38],[0,0],[1.34,6.88],[0,0],[0,0],[-2.59,1.32],[0,0]],"o":[[0,0],[-2.74,1.67],[0,0],[-5.04,-4.79],[0,0],[0,0],[2.97,-1.28],[0,0],[0.83,5.76]],"v":[[8.38,6.21],[8.43,6.29],[0.31,10.88],[0.3,10.87],[-8.41,-6.94],[-8.43,-6.97],[-8.43,-6.98],[-0.11,-10.88],[0.01,-10.63]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[750.609,783.95]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[18.46,-11.15],[0,0],[0.83,5.76],[0,0],[-11.85,10.76]],"o":[[0,0],[0,0],[-5.43,6.05],[0,0],[-4.9,-5.76],[0,0],[14.57,-7.41],[0,0]],"v":[[9.9,-21.575],[25.98,-11.945],[25.9,-11.805],[-17.44,21.715],[-17.49,21.635],[-25.86,4.795],[-25.98,4.545],[9.77,-21.715]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[776.479,768.525]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":1,"op":16,"st":0},{"ind":9,"ty":4,"nm":"l","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[184.53,-77.39,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[4.88,0],[0.42,-9.78],[14.11,-21.77],[-6.21,-7.49],[-6.67,6.4],[-8.91,14.32],[0.72,10.97]],"o":[[-7.79,0],[-0.42,9.78],[-14.11,21.78],[4.01,5.64],[5.38,-4.95],[16.59,-28.29],[-0.72,-10.97]],"v":[[20.42,-52.47],[10.32,-36.16],[-8.19,13.2],[-25.76,46.83],[-8.19,45.01],[14.51,14.79],[31.25,-39.33]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[810.569,711.71]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.72,-10.97],[16.59,-28.29],[5.38,-4.95],[4.01,5.64],[-14.11,21.78],[-0.42,9.78],[-7.79,0]],"o":[[0.72,10.97],[-8.91,14.32],[-6.67,6.4],[-6.21,-7.49],[14.11,-21.77],[0.42,-9.78],[4.88,0]],"v":[[31.25,-39.33],[14.51,14.79],[-8.19,45.01],[-25.76,46.83],[-8.19,13.2],[10.32,-36.16],[20.42,-52.47]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[810.569,711.71]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":1,"op":16,"st":0},{"ind":10,"ty":4,"nm":"l","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-272.47,-255.39,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,-4.09],[4.08,0],[0,4.09],[-4.09,0]],"o":[[0,4.09],[-4.09,0],[0,-4.09],[4.08,0]],"v":[[7.4,0],[0,7.4],[-7.4,0],[0,-7.4]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1292.479,858.84]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.71,4.93]],"o":[[1.52,-7.73],[0,0]],"v":[[0.135,9.5],[-1.655,-9.5]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1331.114,855.78]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.42,-7.86]],"o":[[1.88,4.97],[0,0]],"v":[[-1.335,-9.375],[-0.085,9.375]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1341.204,854.165]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.89,6.41]],"o":[[1.97,-6.4],[0,0]],"v":[[-1.005,9.605],[-0.885,-9.605]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1320.884,857.185]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-7.27,-4.65],[-25.22,0.66],[-4.16,4.3],[3.44,1.87]],"o":[[-3.96,1.59],[7.27,4.64],[24.66,0.06],[4.15,-4.3],[0,0]],"v":[[-44.125,-8.175],[-40.285,3.765],[1.895,10.145],[43.935,-1.525],[43.935,-10.805]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1315.384,874.345]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.79,-6.43],[-5.04,-2.26],[-12.46,5.79],[-1.81,3.86],[0.59,3.54],[11.85,-1.75],[2.06,-0.35],[3.07,-0.26],[5.42,0.88]],"o":[[-3.45,6.89],[1.28,2.99],[15.88,7.12],[6.96,-3.23],[1.45,-3.06],[-1.33,-8.01],[-2.43,0.36],[-3.38,0.56],[-4.14,0.35],[0,0]],"v":[[-38.64,-17.155],[-43.44,3.815],[-34.34,11.785],[31.99,11.785],[44.62,1.185],[45.64,-8.695],[21.45,-17.155],[14.76,-16.075],[5.3,-14.775],[-8.52,-15.375]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1314.698,862.355]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.09,0],[0,-4.09],[4.08,0],[0,4.09]],"o":[[4.08,0],[0,4.09],[-4.09,0],[0,-4.09]],"v":[[0,-7.4],[7.4,0],[0,7.4],[-7.4,0]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1292.479,858.84]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.81,3.86],[4.15,-4.3],[24.66,0.06],[7.27,4.64],[-3.96,1.59],[-5.04,-2.26],[-12.46,5.79]],"o":[[3.44,1.87],[-4.16,4.3],[-25.22,0.66],[-7.27,-4.65],[1.28,2.99],[15.88,7.12],[6.96,-3.23]],"v":[[43.935,-10.805],[43.935,-1.525],[1.895,10.145],[-40.285,3.765],[-44.125,-8.175],[-35.025,-0.205],[31.305,-0.205]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1315.384,874.345]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,4.09],[4.08,0],[0,-4.09],[-4.09,0]],"o":[[0,-4.09],[-4.09,0],[0,4.09],[4.08,0]],"v":[[-14.82,-3.515],[-22.22,-10.915],[-29.62,-3.515],[-22.22,3.885]],"c":true}},"nm":"P"},{"ind":1,"ty":"sh","ks":{"a":0,"k":{"i":[[-3.38,0.56],[-2.43,0.36],[-1.33,-8.01],[1.45,-3.06],[6.96,-3.23],[15.88,7.12],[1.28,2.99],[-3.45,6.89],[0,0],[-4.14,0.35]],"o":[[2.06,-0.35],[11.85,-1.75],[0.59,3.54],[-1.81,3.86],[-12.46,5.79],[-5.04,-2.26],[-2.79,-6.43],[0,0],[5.42,0.88],[3.07,-0.26]],"v":[[14.76,-16.075],[21.45,-17.155],[45.64,-8.695],[44.62,1.185],[31.99,11.785],[-34.34,11.785],[-43.44,3.815],[-38.64,-17.155],[-8.52,-15.375],[5.3,-14.775]],"c":true}},"nm":"P"},{"ty":"mm","mm":1,"nm":"M"},{"ty":"fl","c":{"a":0,"k":[0.996,0.839,0.027,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1314.699,862.355]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":1,"st":0},{"ind":11,"ty":4,"nm":"l","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-318.47,-134.39,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-13.78,-0.14],[0,0]],"o":[[5.39,4.71],[0,0],[0,0]],"v":[[-11.665,-3.32],[11.595,3.32],[11.665,3.32]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1330.394,784.82]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-10.94,-0.02]],"o":[[4.88,4.66],[0,0]],"v":[[-11.595,-3.715],[11.595,3.715]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1327.094,792.145]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-10.49,0.76]],"o":[[4.87,6.32],[0,0]],"v":[[-11.525,-4.55],[11.525,3.79]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1323.494,799.4]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-9.69,1.43]],"o":[[6.2,3.77],[0,0]],"v":[[-11.62,-2.91],[11.62,1.48]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1333.009,778.23]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.89,-2.26]],"o":[[3.16,2.26],[0,0]],"v":[[-6.79,-3.385],[6.79,3.385]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1289.779,838.855]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.64,-7.83]],"o":[[7.52,-12.63],[0,0]],"v":[[-10.71,9.56],[10.71,-1.73]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1307.279,832.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.27,-12.72],[2.21,-6.83],[0.92,-2.19],[1.25,-2.43],[1.32,-2.24],[2.29,-3.36],[5.58,-7.23],[0.9,-1.82],[-8.27,-0.63],[-10.81,13.47],[-4.47,6.49],[-5.06,9.57],[-1.13,2.41],[-0.95,2.49],[-0.61,2.63],[7.6,26.4]],"o":[[3.32,13.67],[-0.59,5.85],[-0.65,2.01],[-0.91,2.2],[-1.04,2.05],[-1.74,2.97],[-9.12,13.39],[-3.56,4.62],[-2.32,4.7],[8.27,0.64],[3.16,-3.93],[5.75,-8.36],[1.31,-2.47],[1.24,-2.65],[1.13,-2.97],[4.77,-20.67],[0,0]],"v":[[10.655,-65.52],[13.215,-33.08],[9.565,-14.48],[7.235,-8.19],[4.005,-1.26],[0.475,5.16],[-5.545,14.63],[-28.505,45.78],[-35.435,55.51],[-31.315,70.61],[-5.315,57.29],[6.495,41.26],[23.525,13.5],[27.195,6.17],[30.495,-1.55],[33.135,-9.98],[31.985,-71.25]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1311.494,789.69]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.89,-2.26],[-6.64,-7.83],[3.16,-3.93],[8.27,0.64],[-2.32,4.7],[-3.56,4.62]],"o":[[7.52,-12.63],[-4.47,6.49],[-10.81,13.47],[-8.27,-0.63],[0.9,-1.82],[3.16,2.26]],"v":[[1.62,0.21],[23.04,-11.08],[11.23,4.95],[-14.77,18.27],[-18.89,3.17],[-11.96,-6.56]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0.996,0.839,0.027,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1294.948,842.03]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.74,2.97],[-10.49,0.76],[5.75,-8.36],[7.52,-12.63],[3.16,2.26],[-9.12,13.39]],"o":[[4.87,6.32],[-5.06,9.57],[-6.64,-7.83],[-5.89,-2.26],[5.58,-7.23],[2.29,-3.36]],"v":[[2.965,-23.695],[26.015,-15.355],[8.985,12.405],[-12.435,23.695],[-26.015,16.925],[-3.055,-14.225]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1309.004,818.545]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-10.94,-0.02],[1.31,-2.47],[4.87,6.32],[-1.04,2.05]],"o":[[-1.13,2.41],[-10.49,0.76],[1.32,-2.24],[4.88,4.66]],"v":[[13.36,-0.33],[9.69,7],[-13.36,-1.34],[-9.83,-7.76]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1325.329,796.19]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-13.78,-0.14],[1.24,-2.65],[4.88,4.66],[-0.91,2.2]],"o":[[-0.95,2.49],[-10.94,-0.02],[1.25,-2.43],[5.39,4.71]],"v":[[13.245,-0.54],[9.945,7.18],[-13.245,-0.25],[-10.015,-7.18]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1328.744,788.68]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-9.69,1.43],[1.13,-2.97],[5.39,4.71],[-0.65,2.01],[0,0]],"o":[[-0.61,2.63],[-13.78,-0.14],[0.92,-2.19],[0,0],[6.2,3.77]],"v":[[12.95,-1.965],[10.31,6.465],[-12.95,-0.175],[-10.62,-6.465],[-10.29,-6.355]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1331.679,781.675]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.77,-20.67],[6.2,3.77],[0,0],[-0.59,5.85],[3.32,13.67]],"o":[[7.6,26.4],[-9.69,1.43],[0,0],[2.21,-6.83],[1.27,-12.72],[0,0]],"v":[[7.41,-31.35],[8.56,29.92],[-14.68,25.53],[-15.01,25.42],[-11.36,6.82],[-13.92,-25.62]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1336.069,749.79]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":1,"st":0},{"ind":12,"ty":4,"nm":"l","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-8},"p":{"a":0,"k":[-294.274,-127.049,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,176,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.86,18.12]],"o":[[4.86,18.11],[0,0]],"v":[[-13.095,-6.19],[8.235,-11.92]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1335.244,730.36]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-9.81,-9.55]],"o":[[-10.99,-7.08],[0,0]],"v":[[13.125,-2.715],[-3.315,9.795]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1267.284,637.015]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[27.65,20.4]],"o":[[-13.33,-35.3],[0,0]],"v":[[31.535,42.07],[-31.535,-42.07]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1311.944,676.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[23.79,22.12]],"o":[[-12.16,-31.02],[0,0]],"v":[[29.09,38.68],[-29.09,-38.68]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1293.059,685.49]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-13.33,-35.3],[4.86,18.11],[23.79,22.12],[-10.99,-7.08]],"o":[[4.86,18.12],[-12.16,-31.02],[-9.81,-9.55],[27.65,20.4]],"v":[[42.23,33.69],[20.9,39.42],[-37.28,-37.94],[-20.84,-50.45]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1301.249,684.75]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":1,"st":0}]},{"id":"comp_4","nm":"u","fr":24,"layers":[{"ind":1,"ty":3,"nm":"h","parent":2,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[82.5,-21.5,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":2,"ty":3,"nm":"a","parent":3,"sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":56,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":64,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":76,"s":[0]},{"t":80,"s":[-10]}]},"p":{"a":0,"k":[148,23,0],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":3,"ty":3,"nm":"a","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":52,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":56,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":64,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[89]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":76,"s":[0]},{"t":80,"s":[89]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[1132,358.5,0],"to":[0,-0.833,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":12,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":16,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":20,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":32,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":40,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":48,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":52,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":56,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":64,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":72,"s":[1132,358.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":76,"s":[1132,353.5,0],"to":[0,0,0],"ti":[0,-0.833,0]},{"t":80,"s":[1132,358.5,0]}],"l":2},"a":{"a":0,"k":[50,50,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"ip":0,"op":80,"st":0},{"ind":4,"ty":4,"nm":"h","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-246.97,338.11,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[3.01,-3.81],[0,0]],"o":[[-4.07,-4.27],[-3.01,3.81],[0,0]],"v":[[7.035,-2.385],[-4.025,-1.525],[-6.335,6.655]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1256.284,224.005]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.79,2.34]],"o":[[2.34,0.83],[0,0]],"v":[[-3.33,-0.2],[3.33,-1.17]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1265.639,242.16]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.86,-2.46],[0.64,-1.17],[-0.49,-1.89],[0,0]],"o":[[-4,-3.97],[-0.96,0.83],[-2.55,4.64],[0,0],[0,0]],"v":[[7.95,-3.705],[-2.97,-4.695],[-5.4,-1.655],[-7.37,7.665],[-7.37,7.675]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1266.479,226.535]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.01,0],[3.34,-2.1],[0.87,-1.23],[-2.19,-4.06],[-0.58,-0.48],[-0.18,0.28],[0,0]],"o":[[0,0],[-2.89,-4.76],[-1.23,0.76],[-2.76,3.95],[0.35,0.67],[4.39,3.17],[0,0],[0,0]],"v":[[9.105,-7.665],[9.095,-7.675],[-1.395,-10.435],[-4.595,-7.375],[-6.915,7.625],[-5.515,9.365],[2.055,7.855],[2.065,7.845]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1275.884,233.365]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.43,4.27],[-0.06,0.13],[2.7,1.95]],"o":[[2.7,2.32],[0.07,-0.12],[1.29,-2.82],[0,0]],"v":[[-7.1,1.37],[5.62,1.74],[5.81,1.37],[2.42,-6.01]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1256.689,240.22]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.7,0.57],[1.23,0.04],[1.21,-6.18],[-12.11,-3.78],[-8.62,14.11],[4.17,1.79],[1.87,-0.89],[0.96,-3.7],[-0.39,-1.74],[-1,-0.54],[-0.59,7.74]],"o":[[-1.85,-1.34],[-1,-0.33],[-3.88,-0.14],[-1.59,8.15],[13.19,3.27],[7.15,-13.9],[-1.66,-0.71],[-2.83,1.35],[-0.87,3.36],[0.33,1.46],[2.18,1.2],[0,0]],"v":[[-9.74,-9.17],[-15.48,-12.1],[-18.9,-12.71],[-28.39,-4.96],[-11.12,15.5],[22.83,4.38],[21.64,-18.06],[16.13,-17.68],[9.73,-9.72],[9.09,-2.15],[11.12,0.8],[19.73,-7.63]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1268.849,243.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.18,0.28],[-0.87,3.36],[-2.83,1.35],[-1.66,-0.71],[7.15,-13.9],[13.19,3.27],[-1.59,8.15],[-3.88,-0.14],[-1,-0.33],[-1.85,-1.34],[0,0],[1.29,-2.82],[0.07,-0.12],[-2.79,2.34],[-0.58,-0.48]],"o":[[-0.39,-1.74],[0.96,-3.7],[1.87,-0.89],[4.17,1.79],[-8.62,14.11],[-12.11,-3.78],[1.21,-6.18],[1.23,0.04],[1.7,0.57],[0,0],[2.7,1.95],[-0.06,0.13],[2.34,0.83],[0.35,0.67],[4.39,3.17]],"v":[[9.09,-2.15],[9.73,-9.72],[16.13,-17.68],[21.64,-18.06],[22.83,4.38],[-11.12,15.5],[-28.39,-4.96],[-18.9,-12.71],[-15.48,-12.1],[-9.74,-9.17],[-9.74,-9.16],[-6.35,-1.78],[-6.54,-1.41],[0.12,-2.38],[1.52,-0.64]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1268.849,243.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4,-3.97],[0,0],[0.87,-1.23],[-2.19,-4.06],[2.34,0.83],[-0.06,0.13],[2.7,1.95],[0,0],[-2.55,4.64],[-0.96,0.83]],"o":[[0,0],[-1.23,0.76],[-2.76,3.95],[-2.79,2.34],[0.07,-0.12],[1.29,-2.82],[0,0],[-0.49,-1.89],[0.64,-1.17],[2.86,-2.46]],"v":[[7.92,-8.265],[7.98,-8.165],[4.78,-5.105],[2.46,9.895],[-4.2,10.865],[-4.01,10.495],[-7.4,3.115],[-7.4,3.105],[-5.43,-6.215],[-3,-9.255]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1266.509,231.095]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.07,-4.27],[0,0],[0.64,-1.17],[-0.49,-1.89],[1.7,0.57],[1.23,0.04],[-3.01,3.81]],"o":[[0,0],[-0.96,0.83],[-2.55,4.64],[-1.85,-1.34],[-1,-0.33],[0,0],[3.01,-3.81]],"v":[[6.94,-4.155],[7.13,-3.935],[4.7,-0.895],[2.73,8.425],[-3.01,5.495],[-6.43,4.885],[-4.12,-3.295]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1256.379,225.775]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.23,0.76],[-2.89,-4.76],[0.96,-3.7],[-0.39,-1.74],[4.39,3.17],[0.35,0.67],[-2.76,3.95]],"o":[[3.34,-2.1],[-2.83,1.35],[-0.87,3.36],[-0.18,0.28],[-0.58,-0.48],[-2.19,-4.06],[0.87,-1.23]],"v":[[-1.39,-10.435],[9.1,-7.675],[2.7,0.285],[2.06,7.855],[-5.51,9.365],[-6.91,7.625],[-4.59,-7.375]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1275.879,233.365]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":44,"st":0},{"ind":5,"ty":4,"nm":"a","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-214.47,266.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.13,0.64]],"o":[[4.18,5.01],[0,0]],"v":[[-7.73,-3.595],[7.73,2.955]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1257.679,280.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.39,0.92],[0,0]],"o":[[5.39,3.9],[0,0],[0,0]],"v":[[-8.085,-2.695],[8.075,1.775],[8.085,1.775]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1260.544,269.825]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[-6.42,-1.15]],"o":[[0,0],[3.14,4.74],[0,0]],"v":[[-7.165,-4.425],[-7.165,-4.415],[7.165,4.425]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1252.934,293.195]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.63,0.66]],"o":[[0.36,-5.98],[0,0]],"v":[[3.075,4.925],[-3.435,-4.925]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1268.064,251.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.3,-0.31]],"o":[[1.23,-7.85],[0,0]],"v":[[-5.175,5.245],[5.175,-4.935]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1259.454,251.735]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-7.05,15.66],[-1.54,4.9],[-0.91,4.19],[-0.62,5.21]],"o":[[11.12,-10.34],[1.99,-4.4],[1.23,-3.86],[1.06,-4.76],[0,0]],"v":[[-19.435,39.785],[8.395,1.185],[13.705,-12.755],[16.915,-24.835],[19.435,-39.785]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1251.704,296.435]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.68,-3.22],[0.94,-3.16],[1.58,-3.65]],"o":[[-0.53,3.56],[-0.74,3.51],[-1.22,4.13],[0,0]],"v":[[4.255,-15.895],[2.435,-5.745],[-0.075,4.255],[-4.255,15.895]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1250.024,272.875]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[9.56,-10.05]],"o":[[-5.12,11.94],[0,0]],"v":[[10.875,-15.895],[-10.875,15.895]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1234.894,304.675]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.42,-1.15],[11.12,-10.34],[0,0],[-5.12,11.94]],"o":[[-7.05,15.66],[0,0],[9.56,-10.05],[3.14,4.74]],"v":[[18.04,-14.88],[-9.79,23.72],[-18.04,8.07],[3.71,-23.72]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1242.059,312.5]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.22,4.13],[-6.13,0.64],[1.99,-4.4],[3.14,4.74],[0,0]],"o":[[4.18,5.01],[-1.54,4.9],[-6.42,-1.15],[0,0],[1.58,-3.65]],"v":[[-5.64,-10.245],[9.82,-3.695],[4.51,10.245],[-9.82,1.405],[-9.82,1.395]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1255.589,287.375]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.3,-0.31],[0.36,-5.98],[1.06,-4.76],[5.39,3.9],[-0.53,3.56]],"o":[[4.63,0.66],[-0.62,5.21],[-5.39,0.92],[0.68,-3.22],[1.23,-7.85]],"v":[[2.65,-12.705],[9.16,-2.855],[6.64,12.095],[-9.52,7.625],[-7.7,-2.525]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1261.979,259.505]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.74,3.51],[-5.39,0.92],[1.23,-3.86],[4.18,5.01]],"o":[[5.39,3.9],[-0.91,4.19],[-6.13,0.64],[0.94,-3.16]],"v":[[-6.825,-8.595],[9.335,-4.125],[6.125,7.955],[-9.335,1.405]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1259.284,275.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":44,"st":0},{"ind":6,"ty":4,"nm":"a","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-116.47,239.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-25.92,23.58],[-1.5,-2.76],[8.92,-8.56],[30.96,-0.76],[0.38,8.8]],"o":[[50.97,3.27],[5.48,-4.99],[1.5,2.76],[-7.4,7.61],[-30.96,0.76],[-0.38,-8.79]],"v":[[-50.885,6.21],[42.105,-19.95],[54.035,-19.35],[48.835,-2.67],[-18.395,24.18],[-57.375,14.62]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1181.913,340.52]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.5,-2.76],[8.92,-8.56],[30.96,-0.76],[0.38,8.8],[0,0],[-25.92,23.58]],"o":[[1.5,2.76],[-7.4,7.61],[-30.96,0.76],[-0.38,-8.79],[50.97,3.27],[5.48,-4.99]],"v":[[54.035,-19.35],[48.835,-2.67],[-18.395,24.18],[-57.375,14.62],[-50.885,6.21],[42.105,-19.95]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1181.914,340.52]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":0,"op":44,"st":0},{"ind":7,"ty":4,"nm":"h","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-246.97,338.11,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[3.01,-3.81],[0,0]],"o":[[-4.07,-4.27],[-3.01,3.81],[0,0]],"v":[[7.035,-2.385],[-4.025,-1.525],[-6.335,6.655]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1256.284,224.005]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.79,2.34]],"o":[[2.34,0.83],[0,0]],"v":[[-3.33,-0.2],[3.33,-1.17]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1265.639,242.16]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[2.86,-2.46],[0.64,-1.17],[-0.49,-1.89],[0,0]],"o":[[-4,-3.97],[-0.96,0.83],[-2.55,4.64],[0,0],[0,0]],"v":[[7.95,-3.705],[-2.97,-4.695],[-5.4,-1.655],[-7.37,7.665],[-7.37,7.675]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1266.479,226.535]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.01,0],[3.34,-2.1],[0.87,-1.23],[-2.19,-4.06],[-0.58,-0.48],[-0.18,0.28],[0,0]],"o":[[0,0],[-2.89,-4.76],[-1.23,0.76],[-2.76,3.95],[0.35,0.67],[4.39,3.17],[0,0],[0,0]],"v":[[9.105,-7.665],[9.095,-7.675],[-1.395,-10.435],[-4.595,-7.375],[-6.915,7.625],[-5.515,9.365],[2.055,7.855],[2.065,7.845]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1275.884,233.365]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-2.43,4.27],[-0.06,0.13],[2.7,1.95]],"o":[[2.7,2.32],[0.07,-0.12],[1.29,-2.82],[0,0]],"v":[[-7.1,1.37],[5.62,1.74],[5.81,1.37],[2.42,-6.01]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1256.689,240.22]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[1.7,0.57],[1.23,0.04],[1.21,-6.18],[-12.11,-3.78],[-8.62,14.11],[4.17,1.79],[1.87,-0.89],[0.96,-3.7],[-0.39,-1.74],[-1,-0.54],[-0.59,7.74]],"o":[[-1.85,-1.34],[-1,-0.33],[-3.88,-0.14],[-1.59,8.15],[13.19,3.27],[7.15,-13.9],[-1.66,-0.71],[-2.83,1.35],[-0.87,3.36],[0.33,1.46],[2.18,1.2],[0,0]],"v":[[-9.74,-9.17],[-15.48,-12.1],[-18.9,-12.71],[-28.39,-4.96],[-11.12,15.5],[22.83,4.38],[21.64,-18.06],[16.13,-17.68],[9.73,-9.72],[9.09,-2.15],[11.12,0.8],[19.73,-7.63]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1268.849,243.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.18,0.28],[-0.87,3.36],[-2.83,1.35],[-1.66,-0.71],[7.15,-13.9],[13.19,3.27],[-1.59,8.15],[-3.88,-0.14],[-1,-0.33],[-1.85,-1.34],[0,0],[1.29,-2.82],[0.07,-0.12],[-2.79,2.34],[-0.58,-0.48]],"o":[[-0.39,-1.74],[0.96,-3.7],[1.87,-0.89],[4.17,1.79],[-8.62,14.11],[-12.11,-3.78],[1.21,-6.18],[1.23,0.04],[1.7,0.57],[0,0],[2.7,1.95],[-0.06,0.13],[2.34,0.83],[0.35,0.67],[4.39,3.17]],"v":[[9.09,-2.15],[9.73,-9.72],[16.13,-17.68],[21.64,-18.06],[22.83,4.38],[-11.12,15.5],[-28.39,-4.96],[-18.9,-12.71],[-15.48,-12.1],[-9.74,-9.17],[-9.74,-9.16],[-6.35,-1.78],[-6.54,-1.41],[0.12,-2.38],[1.52,-0.64]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1268.849,243.37]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4,-3.97],[0,0],[0.87,-1.23],[-2.19,-4.06],[2.34,0.83],[-0.06,0.13],[2.7,1.95],[0,0],[-2.55,4.64],[-0.96,0.83]],"o":[[0,0],[-1.23,0.76],[-2.76,3.95],[-2.79,2.34],[0.07,-0.12],[1.29,-2.82],[0,0],[-0.49,-1.89],[0.64,-1.17],[2.86,-2.46]],"v":[[7.92,-8.265],[7.98,-8.165],[4.78,-5.105],[2.46,9.895],[-4.2,10.865],[-4.01,10.495],[-7.4,3.115],[-7.4,3.105],[-5.43,-6.215],[-3,-9.255]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1266.509,231.095]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-4.07,-4.27],[0,0],[0.64,-1.17],[-0.49,-1.89],[1.7,0.57],[1.23,0.04],[-3.01,3.81]],"o":[[0,0],[-0.96,0.83],[-2.55,4.64],[-1.85,-1.34],[-1,-0.33],[0,0],[3.01,-3.81]],"v":[[6.94,-4.155],[7.13,-3.935],[4.7,-0.895],[2.73,8.425],[-3.01,5.495],[-6.43,4.885],[-4.12,-3.295]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1256.379,225.775]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.23,0.76],[-2.89,-4.76],[0.96,-3.7],[-0.39,-1.74],[4.39,3.17],[0.35,0.67],[-2.76,3.95]],"o":[[3.34,-2.1],[-2.83,1.35],[-0.87,3.36],[-0.18,0.28],[-0.58,-0.48],[-2.19,-4.06],[0.87,-1.23]],"v":[[-1.39,-10.435],[9.1,-7.675],[2.7,0.285],[2.06,7.855],[-5.51,9.365],[-6.91,7.625],[-4.59,-7.375]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1275.879,233.365]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":60,"op":80,"st":0},{"ind":8,"ty":4,"nm":"a","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-214.47,266.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-6.13,0.64]],"o":[[4.18,5.01],[0,0]],"v":[[-7.73,-3.595],[7.73,2.955]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1257.679,280.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.39,0.92],[0,0]],"o":[[5.39,3.9],[0,0],[0,0]],"v":[[-8.085,-2.695],[8.075,1.775],[8.085,1.775]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1260.544,269.825]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0],[-6.42,-1.15]],"o":[[0,0],[3.14,4.74],[0,0]],"v":[[-7.165,-4.425],[-7.165,-4.415],[7.165,4.425]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1252.934,293.195]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[4.63,0.66]],"o":[[0.36,-5.98],[0,0]],"v":[[3.075,4.925],[-3.435,-4.925]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1268.064,251.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-5.3,-0.31]],"o":[[1.23,-7.85],[0,0]],"v":[[-5.175,5.245],[5.175,-4.935]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1259.454,251.735]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-7.05,15.66],[-1.54,4.9],[-0.91,4.19],[-0.62,5.21]],"o":[[11.12,-10.34],[1.99,-4.4],[1.23,-3.86],[1.06,-4.76],[0,0]],"v":[[-19.435,39.785],[8.395,1.185],[13.705,-12.755],[16.915,-24.835],[19.435,-39.785]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1251.704,296.435]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0.68,-3.22],[0.94,-3.16],[1.58,-3.65]],"o":[[-0.53,3.56],[-0.74,3.51],[-1.22,4.13],[0,0]],"v":[[4.255,-15.895],[2.435,-5.745],[-0.075,4.255],[-4.255,15.895]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1250.024,272.875]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[9.56,-10.05]],"o":[[-5.12,11.94],[0,0]],"v":[[10.875,-15.895],[-10.875,15.895]],"c":false}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1234.894,304.675]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-6.42,-1.15],[11.12,-10.34],[0,0],[-5.12,11.94]],"o":[[-7.05,15.66],[0,0],[9.56,-10.05],[3.14,4.74]],"v":[[18.04,-14.88],[-9.79,23.72],[-18.04,8.07],[3.71,-23.72]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1242.059,312.5]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.22,4.13],[-6.13,0.64],[1.99,-4.4],[3.14,4.74],[0,0]],"o":[[4.18,5.01],[-1.54,4.9],[-6.42,-1.15],[0,0],[1.58,-3.65]],"v":[[-5.64,-10.245],[9.82,-3.695],[4.51,10.245],[-9.82,1.405],[-9.82,1.395]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1255.589,287.375]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-5.3,-0.31],[0.36,-5.98],[1.06,-4.76],[5.39,3.9],[-0.53,3.56]],"o":[[4.63,0.66],[-0.62,5.21],[-5.39,0.92],[0.68,-3.22],[1.23,-7.85]],"v":[[2.65,-12.705],[9.16,-2.855],[6.64,12.095],[-9.52,7.625],[-7.7,-2.525]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.443,0.004,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1261.979,259.505]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.74,3.51],[-5.39,0.92],[1.23,-3.86],[4.18,5.01]],"o":[[5.39,3.9],[-0.91,4.19],[-6.13,0.64],[0.94,-3.16]],"v":[[-6.825,-8.595],[9.335,-4.125],[6.125,7.955],[-9.335,1.405]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[1,0.98,0.941,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1259.284,275.725]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":60,"op":80,"st":0},{"ind":9,"ty":4,"nm":"a","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[-116.47,239.61,0],"l":2},"a":{"a":0,"k":[965.53,543.11,0],"l":2},"s":{"a":0,"k":[100,100,100],"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[-25.92,23.58],[-1.5,-2.76],[8.92,-8.56],[30.96,-0.76],[0.38,8.8]],"o":[[50.97,3.27],[5.48,-4.99],[1.5,2.76],[-7.4,7.61],[-30.96,0.76],[-0.38,-8.79]],"v":[[-50.885,6.21],[42.105,-19.95],[54.035,-19.35],[48.835,-2.67],[-18.395,24.18],[-57.375,14.62]],"c":true}},"nm":"P"},{"ty":"st","c":{"a":0,"k":[0,0.129,0.251,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"nm":"S"},{"ty":"tr","p":{"a":0,"k":[1181.913,340.52]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-1.5,-2.76],[8.92,-8.56],[30.96,-0.76],[0.38,8.8],[0,0],[-25.92,23.58]],"o":[[1.5,2.76],[-7.4,7.61],[-30.96,0.76],[-0.38,-8.79],[50.97,3.27],[5.48,-4.99]],"v":[[54.035,-19.35],[48.835,-2.67],[-18.395,24.18],[-57.375,14.62],[-50.885,6.21],[42.105,-19.95]],"c":true}},"nm":"P"},{"ty":"fl","c":{"a":0,"k":[0,0.549,0.349,1]},"o":{"a":0,"k":100},"r":1,"nm":"F"},{"ty":"tr","p":{"a":0,"k":[1181.914,340.52]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"T"}],"nm":"G"}],"ip":60,"op":80,"st":0}]}],"layers":[{"ind":1,"ty":0,"nm":"C","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[187.5,120,0],"l":2},"a":{"a":0,"k":[187.5,200,0],"l":2},"s":{"a":0,"k":[60,60,100],"l":2}},"ao":0,"w":375,"h":400,"ip":0,"op":80,"st":0}],"markers":[]} \ No newline at end of file diff --git a/assets/images/MCCGroupIcons/MCC-Airlines.svg b/assets/images/MCCGroupIcons/MCC-Airlines.svg index 9d7924cff407..b707faf9857e 100644 --- a/assets/images/MCCGroupIcons/MCC-Airlines.svg +++ b/assets/images/MCCGroupIcons/MCC-Airlines.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Commuter.svg b/assets/images/MCCGroupIcons/MCC-Commuter.svg index 2996c9f5f793..d8f808cf463b 100644 --- a/assets/images/MCCGroupIcons/MCC-Commuter.svg +++ b/assets/images/MCCGroupIcons/MCC-Commuter.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Gas.svg b/assets/images/MCCGroupIcons/MCC-Gas.svg index 519882921fb6..b13e657a1af4 100644 --- a/assets/images/MCCGroupIcons/MCC-Gas.svg +++ b/assets/images/MCCGroupIcons/MCC-Gas.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Goods.svg b/assets/images/MCCGroupIcons/MCC-Goods.svg index 2aa86250e9d8..e3ea39f77344 100644 --- a/assets/images/MCCGroupIcons/MCC-Goods.svg +++ b/assets/images/MCCGroupIcons/MCC-Goods.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Groceries.svg b/assets/images/MCCGroupIcons/MCC-Groceries.svg index e957d6ee0238..349154ca5496 100644 --- a/assets/images/MCCGroupIcons/MCC-Groceries.svg +++ b/assets/images/MCCGroupIcons/MCC-Groceries.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Hotel.svg b/assets/images/MCCGroupIcons/MCC-Hotel.svg index 8de897bfafff..04be004b24bb 100644 --- a/assets/images/MCCGroupIcons/MCC-Hotel.svg +++ b/assets/images/MCCGroupIcons/MCC-Hotel.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Mail.svg b/assets/images/MCCGroupIcons/MCC-Mail.svg index 56b4d7bd1005..e554fa44f37f 100644 --- a/assets/images/MCCGroupIcons/MCC-Mail.svg +++ b/assets/images/MCCGroupIcons/MCC-Mail.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/assets/images/MCCGroupIcons/MCC-Meals.svg b/assets/images/MCCGroupIcons/MCC-Meals.svg index e8b9eab9d803..df3672cf52a6 100644 --- a/assets/images/MCCGroupIcons/MCC-Meals.svg +++ b/assets/images/MCCGroupIcons/MCC-Meals.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Misc.svg b/assets/images/MCCGroupIcons/MCC-Misc.svg index 8bd292d0568f..a4ef1615d146 100644 --- a/assets/images/MCCGroupIcons/MCC-Misc.svg +++ b/assets/images/MCCGroupIcons/MCC-Misc.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-RentalCar.svg b/assets/images/MCCGroupIcons/MCC-RentalCar.svg index f88d28723569..789cb5bc3fe3 100644 --- a/assets/images/MCCGroupIcons/MCC-RentalCar.svg +++ b/assets/images/MCCGroupIcons/MCC-RentalCar.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Services.svg b/assets/images/MCCGroupIcons/MCC-Services.svg index f4d632e86581..25c67065c105 100644 --- a/assets/images/MCCGroupIcons/MCC-Services.svg +++ b/assets/images/MCCGroupIcons/MCC-Services.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Taxi.svg b/assets/images/MCCGroupIcons/MCC-Taxi.svg index 89d3eb239371..2cc31e4db079 100644 --- a/assets/images/MCCGroupIcons/MCC-Taxi.svg +++ b/assets/images/MCCGroupIcons/MCC-Taxi.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/MCCGroupIcons/MCC-Utilities.svg b/assets/images/MCCGroupIcons/MCC-Utilities.svg index 464344b41b4e..27e7290bf4e5 100644 --- a/assets/images/MCCGroupIcons/MCC-Utilities.svg +++ b/assets/images/MCCGroupIcons/MCC-Utilities.svg @@ -1,4 +1,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/eReceiptBGs/eReceiptBG_blue.png b/assets/images/eReceiptBGs/eReceiptBG_blue.png new file mode 100644 index 000000000000..f317b72dc4fc Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_blue.png differ diff --git a/assets/images/eReceiptBGs/eReceiptBG_green.png b/assets/images/eReceiptBGs/eReceiptBG_green.png new file mode 100644 index 000000000000..55fe8886bca9 Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_green.png differ diff --git a/assets/images/eReceiptBGs/eReceiptBG_navy.png b/assets/images/eReceiptBGs/eReceiptBG_navy.png new file mode 100644 index 000000000000..2b9616d42c11 Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_navy.png differ diff --git a/assets/images/eReceiptBGs/eReceiptBG_pink.png b/assets/images/eReceiptBGs/eReceiptBG_pink.png new file mode 100644 index 000000000000..41b6492c3a35 Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_pink.png differ diff --git a/assets/images/eReceiptBGs/eReceiptBG_tangerine.png b/assets/images/eReceiptBGs/eReceiptBG_tangerine.png new file mode 100644 index 000000000000..00a8cd6dd612 Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_tangerine.png differ diff --git a/assets/images/eReceiptBGs/eReceiptBG_yellow.png b/assets/images/eReceiptBGs/eReceiptBG_yellow.png new file mode 100644 index 000000000000..7eb9d1f87fa6 Binary files /dev/null and b/assets/images/eReceiptBGs/eReceiptBG_yellow.png differ diff --git a/assets/images/eReceiptIcon.svg b/assets/images/eReceiptIcon.svg index f4fc8c9fcc34..e54c3a106a48 100644 --- a/assets/images/eReceiptIcon.svg +++ b/assets/images/eReceiptIcon.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/assets/images/eReceipt_background.svg b/assets/images/eReceipt_background.svg new file mode 100644 index 000000000000..5070ed3b2f24 --- /dev/null +++ b/assets/images/eReceipt_background.svg @@ -0,0 +1,1635 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/new-expensify-adhoc.svg b/assets/images/new-expensify-adhoc.svg index 26f18c8cc088..d3a926a097ec 100644 --- a/assets/images/new-expensify-adhoc.svg +++ b/assets/images/new-expensify-adhoc.svg @@ -1,6 +1,6 @@ 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/assets/images/simple-illustrations/simple-illustration__handearth.svg b/assets/images/simple-illustrations/simple-illustration__handearth.svg new file mode 100644 index 000000000000..f79e3f73293b --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__handearth.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md b/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md index 842fa711ba15..f4f591d10e8e 100644 --- a/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md +++ b/contributingGuides/REGRESSION_TEST_BEST_PRACTICES.md @@ -43,7 +43,7 @@ Example: For the test case steps we're asking to be created by the contributor whose PR solved the bug, it'll fall into a category known as bug fix verification. As such, the steps that should be proposed should contain the action element `Verify` and should be tied to the expected behavior in question. The steps should be broken out by individual actions taking place with the written style of communicating exact steps someone will replicate. As such, simplicity and succinctness is key. -Here are some below examples to illustrate the writing style that covers this: +Below are some examples to illustrate the writing style that covers this: - Bug: White space appears under compose box when scrolling up in any conversation - Proposed Test Steps: - Go to URL https://staging.new.expensify.com/ diff --git a/desktop/ELECTRON_EVENTS.js b/desktop/ELECTRON_EVENTS.js index 6a808bdb99aa..ee8c0521892e 100644 --- a/desktop/ELECTRON_EVENTS.js +++ b/desktop/ELECTRON_EVENTS.js @@ -6,7 +6,7 @@ const ELECTRON_EVENTS = { REQUEST_FOCUS_APP: 'requestFocusApp', REQUEST_UPDATE_BADGE_COUNT: 'requestUpdateBadgeCount', REQUEST_VISIBILITY: 'requestVisibility', - SHOW_KEYBOARD_SHORTCUTS_MODAL: 'show-keyboard-shortcuts-modal', + KEYBOARD_SHORTCUTS_PAGE: 'keyboard-shortcuts-page', START_UPDATE: 'start-update', UPDATE_DOWNLOADED: 'update-downloaded', }; diff --git a/desktop/contextBridge.js b/desktop/contextBridge.js index 3f2748ef05b5..a8b89cdc0b64 100644 --- a/desktop/contextBridge.js +++ b/desktop/contextBridge.js @@ -11,7 +11,7 @@ const WHITELIST_CHANNELS_RENDERER_TO_MAIN = [ ELECTRON_EVENTS.LOCALE_UPDATED, ]; -const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR]; +const WHITELIST_CHANNELS_MAIN_TO_RENDERER = [ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, ELECTRON_EVENTS.UPDATE_DOWNLOADED, ELECTRON_EVENTS.FOCUS, ELECTRON_EVENTS.BLUR]; const getErrorMessage = (channel) => `Electron context bridge cannot be used with channel '${channel}'`; diff --git a/desktop/main.js b/desktop/main.js index 36b70b37afc5..f2c11e73e513 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -174,11 +174,11 @@ const manuallyCheckForUpdates = (menuItem, browserWindow) => { * Trigger event to show keyboard shortcuts * @param {BrowserWindow} browserWindow */ -const showKeyboardShortcutsModal = (browserWindow) => { +const showKeyboardShortcutsPage = (browserWindow) => { if (!browserWindow.isVisible()) { return; } - browserWindow.webContents.send(ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL); + browserWindow.webContents.send(ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE); }; // Actual auto-update listeners @@ -330,9 +330,9 @@ const mainWindow = () => { { id: 'viewShortcuts', label: Localize.translate(preferredLocale, `desktopApplicationMenu.viewShortcuts`), - accelerator: 'CmdOrCtrl+I', + accelerator: 'CmdOrCtrl+J', click: () => { - showKeyboardShortcutsModal(browserWindow); + showKeyboardShortcutsPage(browserWindow); }, }, {type: 'separator'}, 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/account-settings/Merge-Accounts.md b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md index 073c74346d75..7fc355b30bd9 100644 --- a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md +++ b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md @@ -1,5 +1,33 @@ --- title: Merge Accounts -description: Merge Accounts +description: How to merge two Expensify accounts and why this is useful. --- -## Resource Coming Soon! + +# Overview + +Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group policy settings will be combined into one account. +This can be useful if you start off with an account of your own but your organization creates a separate account for you. You can then track both personal and business expenses via one account. + +# How to merge accounts +Merging two accounts together is fairly straightforward. Let’s go over how to do that below: +1. Navigate to [expensify.com](https://www.expensify.com) +2. Log into the account you want to set as the Primary account +3. Navigate to Settings > Account > Account Details +4. Scroll down to the Merge Accounts section and fill in the fields. Once you click Merge, a magic code link will be sent to you via email and you'll be prompted to enter the magic code +5. Copy the magic code, switch back to the expensify.com page, and paste the code into the required field +6. Click Merge Accounts +If you have any questions about this process, feel free to reach out to Concierge for some assistance! + +# FAQ +## Can you merge accounts from the mobile app? +No, accounts can only be merged from the full website at expensify.com. +## Can I administratively merge two accounts together? +No, only the account holder (user) can perform account merging. +## Is merging accounts reversible? +No, merging accounts is not reversible. It is a permanent action that cannot be undone. +## Are there any restrictions on account merging? +Yes! Please see below: +* If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account. +* If you have two accounts with two different verified domains, you cannot merge them together. +## What happens to my β€œpersonal” Individual policy when merging accounts? +The old β€œpersonal” Individual policy will be deleted. If you plan to submit reports under a different policy in the future, ensure that any reports on the Individual policy in the old account are marked as Open before merging the accounts. You can typically do this by selecting β€œUndo Submit” on any submitted reports. 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 6f0c738693ca..000000000000 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/business-bank-accounts/Add-a-Business-Bank-Account-(AUD).md +++ /dev/null @@ -1,50 +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/company-cards/Commercial-Card-Feeds.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md index 25d11561755d..741def35581e 100644 --- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md +++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Commercial-Card-Feeds.md @@ -2,4 +2,117 @@ title: Commercial Card Feeds description: Commercial Card Feeds --- -## Resource Coming Soon! +# Overview +A Commercial Card Feed is a connection that’s established directly between Expensify and your bank. This type of connection is considered the most reliable way to import company card expenses. Commercial Card Feeds cannot be interrupted by common changes on the bank’s side such as updating login credentials or a change in the bank’s UI. + +The easiest way to confirm if your company card program is eligible for a commercial bank feed is to ask your bank directly. If your company uses a commercial card program that isn’t with one of our Approved! Banking Partners (which supports connecting the feed via login credentials), the best way to import your company cards is by setting up a direct Commercial Card Feed between Expensify and your bank. + +# How to set up a Commercial Card Feed +Before setting up a Commercial Card Feed, you’ll want to set up your domain in Expensify. You can do this by going to Settings > Domains > New Domain. + +After the domain is set up in Expensify, you can follow the instructions that correspond with your company’s card program. + +# How to set up a MasterCard Commercial Feed +Your bank will need to access MasterCard's SmartData portal to complete the process. Expensify is a registered vendor in the portal, so neither you, your bank, nor Expensify need to complete any MasterCard forms. (Your bank may have its own form between you and the bank, though.) + +These are the steps you'll need to follow for a MasterCard feed: +- Contact your banking relationship manager and request that your CDF (Common Data File) feed be sent directly to Expensify in the MasterCard SmartData Portal (file type: CDF version 3 Release 11.01). Please also specify the date of the earliest transactions you require in the feed. +- The bank will initiate feed delivery by finding Expensify in MasterCard's online portal. Once this is done, the bank will email you the distribution ID. +- While you're waiting for your bank, make sure to set up a domain in Expensify -- it's required for us to be able to add the card feed to your account! +- Once you have the distribution ID, send it to us using the submission form here. +- We will connect the feed once we receive the file details and notify you when the feed is enabled. + +# How to set up a Visa Commercial Feed +These are the steps you'll need to follow for a Visa feed: +- Contact your banking relationship manager and request that your VCF (Variant Call Format) feed be sent directly to Expensify. Feel free to share this information with them: "There is a check box in your bank's Visa Subscription Management portal that they, or their BPS team, can select to enable the feed. This means there is no need for a test file because Visa already has agreements with 3rd parties who receive the files." +- Ask your bank to send you the "feed filename" OR the raw file information. You'll need the Processor, Financial Institution (Bank), and Company IDs; these are available in Visa Subscription Management if your relationship manager is still looking for them. +- Once you have the file information, send it to us using the submission form here. +- While you're waiting for your bank, make sure to set up a domain -- it's required for us to be able to add the feed to your account! +- We will connect the feed once we receive these details and notify you when the feed is enabled. + +# How to set up an American Express corporate feed +To begin the process, you'll need to fill out Amex's required forms and send them to Amex so they can start processing your feed. You can download the forms here. + +Below are instructions for filling out each page of the Amex form: +- PAGE 1 + - Corporation Name = the legal name of your company on file with American Express + - Corporation Address = the legal address of your company + - Requested Feed Start Date = the date you want transactional data to start feeding into Expensify. If you'd like historical data, be sure to date back as far as you'd prefer. You must put this date in an international date format (i.e., DD/MM/YY or spelled out January 1, 1900) to ensure the correct date. + - Requestor Contact = the name of the individual party completing the request + - Email address = the email address of the individual party completing the request + - Control Account Number = the master or basic control account number corresponding to the cards you'd like to be on the feed. Please note this will not be a credit card number. If you need help with the correct control account number, please contact Amex. +- PAGE 2 + - No information required +- PAGE 3 + - Client Registered Name = the legal name of your company on file with American Express + - Master Control Account or Basic Control Account = same as from page 1; the master or basic control account number corresponding to the cards you'd like to be on the feed. Please note this will not be a credit card number. If you need help with the correct control account number, please contact Amex. +- PAGE 4 + - Country List = the name of the country in which the account for which you're requesting a feed originates + - Client Authorization = please complete your full first and last name, job title, and date (note, put this date in an international date format--i.e., DD/MM/YY). Sign in the area provided. + +Once you've completed the forms, send them to electronictransmissionsteam@aexp.com and indicate you want to set up a Commercial Card feed for your company. You should receive a confirmation message from them within a day or two with contact and tracking information. + +While you're waiting for Amex, make sure to set up a domain -- it's required for us to be able to add the feed to your account. + +Once the feed is complete, Amex will send you a Production Letter. This will have the feed information in it, which will look something like this: +R123456_B123456789_GL1025_001_$DATE$$TIME$_$SEQ$ + +Once you have the filename, send it to us using the submission form here. + +# How to assign company cards +After connecting your company cards with Expensify, you can assign each card to its respective cardholder. +To assign cards go to Settings > Domains > [Your domain] > Company Cards. +If you have more than one card feed, select the correct feed in the drop-down list in the Company Card section. +Once you’ve selected the appropriate feed, click the `Assign New Cards` button to populate the emails and last four digits of the cardholder. +Select the cardholder +You can search the populated list for all employees' email addresses. Please note that the employee will need to have an email address under this Domain in order to assign a card to them. +Select the card +You can search the list using the last 4 digits of the card number. If no transactions have posted on the card then the card number will not appear in the list. You can instead assign the card by typing in the full card number in the field. +Note: if you're assigning a card by typing in the full PAN (the full card number), press the ENTER key on your keyboard after. The field may clear itself after pressing ENTER, but click Assign anyway and then verify that the assignment shows up in the cardholder table. + +## Set the transaction start date (optional) +Any transactions that were posted prior to this date will not be imported into Expensify. If you do not make a selection, it will default to the earliest available transactions from the card. Note: We can only import data for the time period the bank is releasing to us. It's not possible to override the start date the bank has provided via this tool. + +Click the Assign button +Once assigned, you will see each cardholder associated with their card as well as the start date listed. + +If you're using a connected accounting system such as NetSuite, Xero, Intacct, Quickbooks Desktop, or QuickBooks Online, you can also connect the card to export to a specific credit card GL account. + +Go to Settings > Domains > [Domain name] > Company Cards +Click Edit Exports on the right-hand side of the card table and select the GL account you want to export expenses to. +You're all done. After the account is set, exported expenses will be mapped to the specific account selected when exported by a Domain Admin. + +# How to unassign company cards +Before you begin the unassigning process, please note that unassigning a company card will delete any unsubmitted (Open or Unreported) expenses in the cardholder's account. + +If you need to unassign a certain card, click the Actions button associated with the card in question and then click "Unassign." + +To completely remove the card connection, unassign every card from the list and then refresh the page. + +Note: If expenses are Processing and then rejected, they will also be deleted when they're returned to an Open state as the card they're linked to no longer exists. + +# FAQ + +## My Commercial Card feed is set up. Why is a specific card not coming up when I try to assign it to an employee? +Cards will appear in the drop-down when activated and have at least one posted transaction. If the card is activated and has been used for a while and you're still not seeing it, please reach out to your Account Manager or message concierge@expensify.com for further assistance. + +## Is there a fee for utilizing Commercial Card Feeds? +Nope! Commercial Card Feed setup comes at no extra cost and is a part of the Corporate Workspace pricing. + +## What is the difference between Commercial Card feeds and your direct bank connections? +The direct bank connection is a connection set up with your login credentials for that account, while the Commercial Card feed is set up by your bank requesting that Visa/MasterCard/Amex send a daily transaction feed to Expensify. The former can be done without the assistance of your bank or Expensify, but the latter requires effort from your bank and Expensify to get set up. + +## I have a Small Business Amex account. Am I eligible to set up a Commercial Card feed? +If you have a Small Business or Triumph account, you may not be eligible for a Commercial Card feed and will need to use the direct bank connection for American Express Business. + +## What if my bank uses a Commercial Card program that isn't with one of Expensify's Approved! Banking partners? +If your company uses a Commercial Card program that isn’t with one of our Approved! Banking Partners (which supports connecting the feed via login credentials), the best way to import your company cards is by setting up a direct Commercial Card feed between Expensify and your bank. Note the Approved! Banking Partners include: +- Bank of America +- Citibank +- Capital One +- Chase +- Wells Fargo +- Amex +- Stripe +- Brex + 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/billing-and-subscriptions/Annual-Subscription.md b/docs/articles/expensify-classic/billing-and-subscriptions/Annual-Subscription.md index 8e2aa7d4a377..67a96610633d 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Annual-Subscription.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Annual-Subscription.md @@ -1,5 +1,45 @@ --- title: Annual Subscription -description: Annual Subscription +description: Learn more about managing your Annual Subscription. --- -## Resource Coming Soon! +# Overview +An Annual Subscription offers a 50% cost savings on active user pricing while allowing your company to manage multiple Workspaces across your organization and maintain predictable cost for your Expensify activity. + +_For pricing details, see [expensify.com/pricing](http://www.expensify.com/pricing), and find more ways to save with the Expensify Card here._ + +# How to set subscription size +When you first create a subscription, the best practice is to set your subscription size by entering the average number of active users you expect to have each month for the next year. For example, if you expect to have an average of 10 users each month, even if they are not always the same users, set your subscription size to 10. No need to provision and deprovision access to your team, so you still enjoy flexible usage across the entire company! + +If your Workspaces have more than 10 active users in a month, you will pay the unbundled Pay-per-use rate for the additional users. If you’d like to avoid this, you can enable Auto Increase so your subscription size increases based on Workspace user activity. + +An β€˜Active User’ is anyone who chats, creates, submits, approves, reimburses, or exports a report in Expensify. This includes actions taken by Copilots and any automated settings. + +To set your subscription size, go to **Settings > Workspaces > Groups > Subscription**. + +If you do not set a specific subscription size, this will be automatically updated based on your past activity: + +* If you’ve never had activity in Expensify, your subscription size will be set after your first month. Work with your Setup Specialist or Account Manager to determine the best subscription size for your team! + +* For existing Workspaces switching to an Annual Subscription, the subscription size is set to the number of active users on your last month’s billing history. + +* If Auto Increase is not selected, and you have more active users than you’ve input as the subscription size, you will be billed for those at the Pay-per-use rate. + +# How to adjust subscription size +You can add users to your subscription at any time. However, note that when your subscription size is increased, you will start a new 12-month subscription at that new subscription size. + +You can increase your subscription size manually or automatically. + +* To manually increase the size, just update the number in your subscription settings (**Settings > Workspaces > Groups > Subscription**). + +* To automatically increase your subscription size, enable **Auto Increase**. This feature manages your subscription by automatically increasing the count whenever there is activity that exceeds your subscription size. (**Settings > Workspaces > Groups > Subscription**) + +Note: After increasing your subscription size, you won't be able to decrease it for the next 12 months. If your active user numbers tend to fluctuate, you might want to keep this feature disabled. This way, you'll only pay for additional active users in the months they are active. Keep in mind that increasing the subscription size will reset your 12-month subscription period. + +# How to disable Auto Renew +By default, your subscription is set to automatically renew after a year. To disable this, click the toggle from your subscription settings before the current subscription ends. (**Settings > Workspaces > Groups > Subscription**) + +If Auto Renew is disabled, then the last bill at the annual rate will be issued on the date listed under the Auto Renew settings. For example, if your subscription expires on March 1, 2021, then February 2021 will be the last month billed at the annual rate. If you do not set a new subscription, March activity will be billed at the Pay-per-use rate. + +We recommend that you review your user count annually on a proactive basis. Set a reminder to review your active user numbers a month before your subscription expires! If you’d like assistance determining your subscription number, please contact your Account Manager or concierge@expensify.com. + +If you need to decrease your subscription size, you can do this in the first billing month before you are billed. Using the example above, this would be during March 2021. diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md b/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md index 8ce4283dd17d..f01bb963bacf 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Change-Plan-Or-Subscription.md @@ -1,5 +1,84 @@ --- -title: Change Plan or Subscription -description: Change Plan or Subscription +title: Changing your workspace plan +description: How to change your plan or subscription --- -## Resource Coming Soon! +# Overview +Expensify offers various plans depending on your needs: Track, Submit, Collect, Control, and Free. Your choice of plan depends on whether you want to manage your expenses individually or for a group or company. You may need to upgrade from an individual plan to a group plan if you recently hired additional employees that need should be added to a Group Workspace, or you need access to Expensify's features that are only available on a paid plan. + +# How to change a subscription on an Individual Plan +## Change Individual Plan +### Web +1. Go to **Settings > Workspaces > Individual > [Your Individual Workspace]** +1. Click on **Plan** and select **Switch** under the plan you want to switch to +### Mobile +Open the Expensify app and: +1. Tap the hamburger icon (three lines) on the top left +1. Tap **Settings** +1. Tap **View All** under your Workspace +1. Select the Workspace you want to change under the "Individual" tab +1. Tap **Current Plan** under **Plan** +1. Find the **Switch** option under the plan you're not currently using +## Upgrade to a Group Plan +To upgrade to a group plan, you will need to create a Group Workspace by heading to **Settings > Workspaces > Group** and choosing a Collect or Control plan. + +# How to change a subscription on a Group Plan +## Change Group Plan +## Web +1. Go to **Settings > Workspaces > Group > [Your Group Workspace]** +1. Click on **Plan** and select **Switch** under the plan you want to switch to. + +## Mobile +1. In the Expensify mobile app, navigate to **Settings > Workspaces > [Your Workspace] > Current Plan > Switch**. + +## Adjust subscription size +When you first create a subscription, you can manually set your size by entering a number in the Subscription Size field of your subscription settings by heading to **Settings > Workspaces > Group > Subscription**. + +If you choose not to set a size yourself, it will be calculated automatically for your first bill based on your depending on which scenario below fits your use case: +- If you’ve never had activity in Expensify, your subscription size is set automatically to match the number of active users you had your first month of using Expensify on your Annual Subscription. This means you’ll see the number update automatically after your first billing. +- For existing Workspaces switching to an annual subscription, the subscription size is set to the number of active users on your last month’s billing history. + +## Auto increase subscription size +This feature manages your subscription by automatically increasing the count whenever there is activity that exceeds your subscription size. Whenever your subscription size is increased, you will start a new 12-month commitment for the new subscription size in full. + +To enable automatically increasing your subscription size, head to **Settings > Workspaces > Group > Subscription** and toggle this feature on. + +## Auto renew +By default, your subscription is set to automatically renew after a year. To disable this, head to **Settings > Workspaces > Subscription** and use the toggle to turn this feature off before your current subscription ends. + +If Auto Renew is disabled then the last bill at the annual rate will be issued on the date listed under the Auto Renew settings. + +# How to downgrade to a free account from an Individual Plan +## Web +1. Log in to your account through a web browser. +1. Go to **Settings > Policies > Individual > Subscription**. +1. Click "Cancel Subscription" to end your Monthly Subscription. + +Note: Your subscription is a pre-purchase for 30 days of unlimited SmartScanning. This means that when you cancel, you do not get a refund and instead get to use the remainder of the month of unlimited SmartScanning you purchased. + +## App Store +If you subscribed via iOS, you must cancel your monthly subscription through the App Store by heading to App Store > click on your ID > Subscriptions. You can't cancel it directly in Expensify. + +# How to downgrade to a free account from a Group Plan +## Pay-per-use +If you have a Group Workspace and use Pay-Per-Use billing, you can downgrade by going to **Settings > Workspaces > Group** and clicking the cog button next to your Workspace name, then choosing **Delete**. + +Note: Deleting a Workspace removes its configurations and Workspace members but not their Expensify accounts. + +When deleting your final paid Workspace, if any Workspace members have been active that month (this means anybody who created, edited, submitted, approved, exported, or deleted a report) you will be billed for their activity as part of the downgrade flow. + +## Annual subscription +If you recently started an annual subscription, you can downgrade for a full refund before the second bill. If you meet the criteria below, you can request a refund by going to **Settings > Your Account > Billing** in the web app: +- Own Collect or Control Group Workspaces +- Have only been billed for a single month +- Have not cleared a balance in the past + +Note: Refunds apply to Collect or Control Group Workspaces with one month of billing and no previous balance. + +Once you’ve successfully downgraded to a free Expensify account, your Workspace will be deleted and you will see a refund line item added to your Billing History. + +# FAQ +## Will I be charged for a monthly subscription even if I don't use SmartScans? +Yes, the Monthly Subscription is prepaid and not based on activity, so you'll be charged regardless of usage. + +## I'm on a group policy; do I need the monthly subscription too? +Probably not. Group policy members already have unlimited SmartScans, so there's usually no need to buy the subscription. However, you can use it for personal use if you leave your company's Workspace. diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Individual-Subscription.md b/docs/articles/expensify-classic/billing-and-subscriptions/Individual-Subscription.md index 1ace758978aa..aa08340dd7a6 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Individual-Subscription.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Individual-Subscription.md @@ -1,5 +1,67 @@ --- title: Individual Subscription -description: Individual Subscription +description: Learn more about managing an Individual Subscription. --- -## Resource Coming Soon! +# Overview +An Individual Subscription is a great option for solo entrepreneurs or anyone who needs to track their own expenses or get paid by someone outside their own organization. +A free Individual Subscription includes: +- Up to 25 SmartScans/month +- Expense tracking +- Mileage tracking +- Invoicing +- Bill splitting +- Receive & send money + +To get unlimited SmartScans, you can upgrade your Individual Subscription for $4.99 (USD per month. + + +# How to sign up for an Individual Subscription +## Website +To activate an Individual Subscription from the web: +1. Log into your Expensify account +2. Navigate to **Settings > Workspaces > Individual** +3. Click **Activate Subscription** under **Monthly** +4. If you don't already have a billing card associated with your account, you will be prompted to add one + +Once payment is complete, you’re all set! + +## Mobile App: +1. Tap **Settings** +2. Under the Workspaces section, select **Free Trial** +3. Select **Upgrade** +4.Tap **Subscription** to upgrade your account + + +# How to manage the subscription +## Web and Android: +When you buy a subscription on the web or through an Android device, you'll be asked to enter your billing information immediately. After the purchase, you can easily view or cancel your subscription anytime by going to **Settings > Workspaces > Individual > Subscription > Show Details**. + +## iOS: +If you purchase a monthly subscription on an iOS device, it will be managed, including cancellations, through the App Store rather than within the Expensify app. You can learn how to manage App Store Subscriptions here. + +After purchasing the subscription from the App Store, remember to sync your app by: +1. Log into the Expensify mobile app +2. Click the three bars in the upper left corner +3. Scroll to **Settings** +4. Select **Sync Account** + +The subscription renewal date is the same as the purchase date. For instance, if you sign up for the subscription on September 7th, it will renew automatically on October 7th. You can cancel your subscription anytime during the month if you no longer need unlimited SmartScans. If you do cancel, keep in mind that your subscription (and your ability to SmartScan) will continue until the last day of the billing cycle. + + +# FAQ +## Can I use an Individual Subscription while on a Collect or Control Plan? +You can! If you want to track expenses separately from your organization’s Workspace, you can sign up for an Individual Subscription. However, only Submit and Track Workspace plans are available when on an Individual Subscription. Collect and Control Workspace plans require an annual or pay-per-use subscription. For more information, visit expensify.com/pricing. + +## Can I cancel an Individual Subscription anytime? +Yep! You can cancel an Individual Subscription anytime. + +## How do I cancel my subscription? +Follow the steps below to cancel a Monthly Subscription started via the website or Android app: +1. Log into your account using your preferred web browser (ex: Firefox, Chrome, Safari) +2. Navigate to **Settings > Workspace > Individual > Subscriptions** +3. Click the **Cancel Subscription** button to cancel your Monthly Subscription + +Your subscription is a pre-purchase for 30 days of unlimited SmartScanning. This means when you cancel you do not get a refund and instead get to use the remainder of the month of unlimited SmartScanning you purchased. + +## How can I cancel my subscription from the iOS app? +If you signed up for the Monthly Subscription via iOS and your iTunes account, you will need to log into iTunes and locate the subscription there in order to cancel it. The ability to cancel an Expensify subscription started via iOS is strictly limited to your iTunes account. 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/expense-and-report-features/Expense-Types.md b/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md index 3f2e49952c4a..795a895e81f0 100644 --- a/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md +++ b/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md @@ -1,5 +1,42 @@ --- title: Expense Types -description: Expense Types +description: Details of the different Expense filters and Expense Types --- -## Resource Coming Soon! + +# Overview +Expense types help categorize different expenses for better financial management. While reimbursable and non-reimbursable expenses are common, Expensify offers various other options to suit your needs. Let's explore the available expense types. + +# How To +## Filtering a Report by Expense Type +Organizing a report by expense type can make it easier to review expenses on a report. +- Open the report you're interested in. +- Click the **Details** icon in the upper right corner of the report, +- Change the β€œView” to **Detailed** and β€œSplit by” **Reimbursable** or **Billable**. +- You’ll also see the option to **Group by Category** or **Tags**. + + +# Deep Dive +Each report will show the total amount for all expenses in the upper right. Under that total, there will be a breakdown of amounts that are reimbursable, billable, and non-reimbursable (depending on which of those expense types exist on the report). + +## Expense Types +- **Reimbursable Expenses:** Employees pay for these expenses out of their pockets on behalf of the business and are usually reimbursed. They often come from cash, debit cards, or personal credit card purchases. +- **Non-reimbursable Expenses:** The business directly covers these expenses, so there's no need to reimburse the employee. Typically, these expenses are company card expenses. +- **Billable Expenses:** Business or employee expenses must be billed to a specific client or vendor. Choose this option if you need to track expenses for invoicing to customers, clients, or other departments. +- **Per Diem Expenses:** These expenses involve a daily or partial daily rate you can configure in your expense Workspace. +- **Time Expenses:** Employees or jobs are billed based on an hourly rate that you can set within Expensify. +- **Distance Expenses:** These expenses are related to travel for work. + +# FAQ + +## What’s the difference between a receipt, an expense, and a report attachment? + +- **Expense:** Created when you SmartScan or manually upload a receipt from a purchase. +- **Receipt:** Automatically attached to the expense during the SmartScan process. +- **Report Attachments:** Additional documents that need to be submitted to your approver (e.g., supplemental documents to the purchase) can be added to a report anytime by clicking the paperclip icon in the Reports Comments. + +## How are credits or refunds displayed in Expensify? +In Expensify, a credit is displayed as an expense with a minus (ex. -$1.00) in front of it. That’s because Expensify defaults all expenses as something that needs to be paid by the company. So a credit that is returned to the company is displayed as a negative expense. + +If a report includes a credit or a refund expense, it will offset the total amount on the report. +For example, the report has two reimbursable expenses, $400 and $500. The total Reimbursable is $900. +Conversely, a -$400 and $500 will be a total Reimbursable amount of $500 diff --git a/docs/articles/expensify-classic/expense-and-report-features/Report-Audit-Log-and-Comments.md b/docs/articles/expensify-classic/expense-and-report-features/Report-Audit-Log-and-Comments.md new file mode 100644 index 000000000000..229ca4ec1fe4 --- /dev/null +++ b/docs/articles/expensify-classic/expense-and-report-features/Report-Audit-Log-and-Comments.md @@ -0,0 +1,60 @@ +--- +title: Report Audit Log and Comments +description: Details on the expense report audit log and how to leave comments on reports +--- + +# Overview + +At the bottom of each expense report, there’s a section that acts as an audit log for the report. This section details report actions, such as submitting, approving, or exporting. The audit log records the user who completed the action as well as the timestamp for the action. + +This section also doubles as the space where submitters, approvers, and admins can converse with each other by leaving comments. Comments trigger notifications to everyone connected to the report and help facilitate communication inside of Expensify. + +# How to use the audit log + +All report actions are recorded in the audit log. Anytime you need to identify who touched a report or track its progress through the approval process, simply scroll down to the bottom of the report and review the log. + +Each recorded action is timestamped - tap or mouse over the timestamp to see the exact date and time the action occurred. + +# How to use report comments + +There’s a freeform field just under the audit log where you can leave a comment on the report. Type in your comment and click or tap the green arrow to send. The comment will be visible to anyone with visibility on the report, and also automatically sent to anyone who has actioned the report. + +# Deep Dive + +## Audit log + +Here’s a list of actions recorded by the audit log: + +- Report creation +- Report submission +- Report approval +- Report reimbursement +- Exports to accounting or to CSV/Excel files +- Report and expense rejections +- Changes made to expenses by approvers/admins +- Changes made to report fields by approvers/admins +- Automated actions taken by Concierge + +Both manual and automated actions are recorded. If a report action is completed by Concierge, that generally indicates an automation feature triggered the action. For example, an entry that shows a report submitted by Concierge indicates that the **Scheduled Submit** feature is enabled. + +Note that timestamps for actions recorded in the log reflect your own timezone. You can either set a static time zone manually, or we can trace your location data to set a time zone automatically for you. + +To set your time zone manually, head to **Settings > Account > Preferences > Time Zone** and check **Automatically Set my Time Zone**, or uncheck the box and manually choose your time zone from the searchable list of locations. + +## Comments + +Anyone with visibility on a report can leave a comment. Comments are interspersed with audit log entries. + +Report comments initially trigger a mobile app notification to report participants. If you don't read the notification within a certain amount of time, you'll receive an email notification with the report comment instead. The email will include a link to the report, allowing you to view and add additional comments directly on the report. You can also reply directly to the email, which will record your response as a comment. + +Comments can be formatted with bold, italics, or strikethrough using basic Markdown formatting. You can also add receipts and supporting documents to a report by clicking the paperclip icon on the right side of the comment field. + +# FAQ + +## Why don’t some timestamps in Expensify match up with what’s shown in the report audit log? + +While the audit log is localized to your own timezone, some other features in Expensify (like times shown on the reports page) are not. Those use UTC as a baseline, so it’s possible that some times may look mismatched at first glance. In reality, it’s just a timezone discrepancy. + +## Is commenting on a report a billable action? + +Yes. If you comment on a report, you become a billable actor for the current month. diff --git a/docs/articles/expensify-classic/expense-and-report-features/Report-Comments.md b/docs/articles/expensify-classic/expense-and-report-features/Report-Comments.md deleted file mode 100644 index b7ed120fb28b..000000000000 --- a/docs/articles/expensify-classic/expense-and-report-features/Report-Comments.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Report Comments -description: Report Comments ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md b/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md index e72abfcad51a..ff9e2105ffac 100644 --- a/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md +++ b/docs/articles/expensify-classic/expense-and-report-features/The-Reports-Page.md @@ -1,5 +1,43 @@ --- title: The Reports Page -description: The Reports Page +description: Details about the Reports Page filters and CSV export options --- -## Resource Coming Soon! + +## How to use the Reports Page +The Reports page is your central hub for a high-level view of a Reports' status. You can see the Reports page on a web browser when you sign into your Expensify account. +Here, you can quickly see which reports need submission (referred to as **Open**), which are currently awaiting approval (referred to as **Processing**), and which reports have successfully been **Approved** or **Reimbursed**. +To streamline your experience, we've incorporated user-friendly filters on the Reports page. These filters allow you to refine your report search by specific criteria, such as dates, submitters, or their association with a workspace. + +## Report filters +- **Reset Filters/Show Filters:** You can reset or display your filters at the top of the Reports page. +- **From & To:** Use these fields to refine your search to a specific date range. +- **Report ID, Name, or Email:** Narrow your search by entering a Report ID, Report Name, or the submitter's email. +- **Report Types:** If you're specifically looking for Bills or Invoices, you can select this option. +- **Submitters:** Choose between "All Submitters" or enter a specific employee's email to view their reports. +- **Policies:** Select "All Policies" or specify a particular policy associated with the reports you're interested in. + +## Report status +- **Open icon:** These reports are still "In Progress" and must be submitted by the creator. If they contain company card expenses, a domain admin can submit them. If labeled as β€œRejected," an Approver has rejected it, typically requiring some adjustments. Click into the report and review the History for any comments from your Approver. +- **Processing icon:** These reports have been submitted for Approval but have not received the final approval. +- **Approved icon:** Reports in this category have been Approved but have yet to be Reimbursed. For non-reimbursable reports, this is the final status. +- **Reimbursed icon:** These reports have been successfully Reimbursed. If you see "Withdrawing," it means the ACH (Automated Clearing House) process is initiated. "Confirmed" indicates the ACH process is in progress or complete. No additional status means your Admin is handling reimbursement outside of Expensify. +- **Closed icon:** This status represents an officially closed report. + + +## How to Export a report to a CSV +To export a report to a CSV file, follow these steps on the Reports page: + +1. Click the checkbox on the far left of the report row you want to export. +2. Navigate to the upper right corner of the page and click the "Export to" button. +3. From the drop-down options that appear, select your preferred export format. + +# FAQ +## What does it mean if the integration icon for a report is grayed out? +If the integration icon for a report appears grayed out, the report has yet to be fully exported. +To address this, consider these options: +- Go to **Settings > Policies > Group > Connections** within the workspace associated with the report to check for any errors with the accounting integration (i.e., The connection to NetSuite, QuickBooks Online, Xero, Sage Intacct shows an error). +- Alternatively, click the β€œSync Now" button on the Connections page to see if any error prevents the export. + +## How can I see a specific expense on a report? +To locate a specific expense within a report, click on the Report from the Reports page and then click on an expense to view the expense details. + 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/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/get-paid-back/Distance-Tracking.md b/docs/articles/expensify-classic/get-paid-back/Distance-Tracking.md new file mode 100644 index 000000000000..c0d8956f71ac --- /dev/null +++ b/docs/articles/expensify-classic/get-paid-back/Distance-Tracking.md @@ -0,0 +1,81 @@ +--- +title: Distance Tracking in Expensify +description: Learn how distance tracking works in Expensify! +--- + +# Overview + +Expensify provides a convenient feature for tracking your mileage-related expenses. You'll find all the essential information to begin logging your trips below. + +# How to Use Distance Tracking +## Mobile App + +First, you’ll want to click the **+** in the top right corner. + +If you select **Manually Create**, you’ll be prompted to enter your mileage, select a rate, and code the expense before clicking **Save**. + + ![Click manually create or odometer to create a distance request.](https://help.expensify.com/assets/images/ExpensifyHelp_CreateExpense_Mobile.png){:width="100%"} + +If you select **Manually Create**: + - Enter your mileage. + - Select a rate. + - Code the expense. + - Click **Save**. + +![Enter your mileage, rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistance_Mobile.png){:width="100%"} + +If you select **Odometer**: + - Enter your vehicle’s mileage reading before and after your trip. + - Select your rate. + - Code the expense. + - Click **Save**. + +![Etner your mileage readings, your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_Odometer_Mobile.png){:width="100%"} + +The **Start GPS** option also exists on the mobile app. However, we’ve learned that most customers prefer to track their mileage after their trips (thus not needing to hit that start button!) + +We’ve temporarily paused the development of GPS mileage tracking in the mobile app, and we recommend you use one of the above options instead! + + +## Web + +Navigate to the **Expenses** page, click **New Expense**, and review the two **Distance** options. + +![Select manually create or create from map to create a new distance request.](https://help.expensify.com/assets/images/ExpensifyHelp_CreateExpense.png){:width="100%"} + +If you select **Manually Create**: + - Enter the number of miles for your trip. + - Mileage rate is automatically selected based on your history, or manually select it if it's your first time. + - Complete any other applicable coding fields. + - Click **Save**. + +![Enter the number of miles, select your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistance.png){:width="100%"} + +For **Create from Map** expenses: + - Add your start and end location, and the distance will be calculated. + - You can also click **Add Destination** for multiple stops. + - Leave **Create Receipt** selected if you want a map receipt generated. + - Click **Save**. + +![Enter your start and end locations, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistanceMap.png){:width="100%"} + +Once you click **Save**, review the details from your map selection. + - Select your rate. + - Enter any other applicable coding. + - Click **Save**. + +![Select your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistanceConfirm.png){:width="100%"} + +# Mileage Tracking FAQs +## **How can I change the rate of my mileage expenses?** +You can change the rate by going to Settings > Workspaces > [Your Workspace] > Expenses > Distance > Add a Mileage Rate. +If you submit mileage expenses on a group workspace, only workspace admins can do this. + +## **Do you plan to add the "Create from Map" option to the mobile app or "Odometer" option to web?** +Not now, but if that changes, you'll be the first to know! + +## **Will you restart maintenance on the mobile app's GPS option anytime soon?** +Not now, but if that changes, you'll be the first to know! + +## **Does Expensify automatically update IRS Mileage rates?** + We never automatically update mileage rates in Expensify because different companies want the new rates to become effective on different dates. diff --git a/docs/articles/expensify-classic/get-paid-back/Mileage.md b/docs/articles/expensify-classic/get-paid-back/Mileage.md deleted file mode 100644 index 248e80e1c115..000000000000 --- a/docs/articles/expensify-classic/get-paid-back/Mileage.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Mileage -description: Mileage ---- -## Resource Coming Soon! 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/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md b/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md deleted file mode 100644 index 507d24503af8..000000000000 --- a/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Enable Location Access on Web -description: How to enable location access for Expensify websites on your browser -redirect_from: articles/other/Enable-Location-Access-on-Web/ ---- - - -# About - -If you'd like to use features that rely on your current location you will need to enable location permissions for Expensify. You can find instructions for how to enable location settings on the three most common web browsers below. If your browser is not in the list then please do a web search for your browser and "enable location settings". - -# How-to - - -### Chrome -1. Open Chrome -2. At the top right, click the three-dot Menu > Settings -3. Click "Privacy and Security" and then "Site Settings" -4. Click Location -5. Check the "Not allowed to see your location" list to make sure expensify.com and new.expensify.com are not listed. If they are, click the delete icon next to them to allow location access - -[Chrome help page](https://support.google.com/chrome/answer/142065) - -### Firefox - -1. Open Firefox -2. In the URL bar enter "about:preferences" -3. On the left hand side select "Privacy & Security" -4. Scroll down to Permissions -5. Click on Settings next to Location -6. If location access is blocked for expensify.com or new.expensify.com, you can update it here to allow access - -[Firefox help page](https://support.mozilla.org/en-US/kb/permissions-manager-give-ability-store-passwords-set-cookies-more) - -### Safari -1. In the top menu bar click Safari -2. Then select Settings > Websites -3. Click Location on the left hand side -4. If expensify.com or new.expensify.com have "Deny" set as their access, update it to "Ask" or "Allow" - -Ask: The site must ask if it can use your location. -Deny: The site can’t use your location. -Allow: The site can always use your location. - -[Safari help page](https://support.apple.com/guide/safari/websites-ibrwe2159f50/mac) \ No newline at end of file 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/HR-integrations/ADP.md b/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md index 3ee1c8656b4b..65b276796c2a 100644 --- a/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md +++ b/docs/articles/expensify-classic/integrations/HR-integrations/ADP.md @@ -1,5 +1,81 @@ --- -title: Coming Soon -description: Coming Soon +title: How to use the ADP integration +description: Expensify’s ADP integration lets you pay out expense reports outside of the Expensify platform. Expensify creates a Custom Export Format that can be uploaded to ADP directly. --- -## Resource Coming Soon! +# Overview +Expensify’s ADP integration lets you pay out expense reports outside of the Expensify platform. Expensify creates a Custom Export Format that can be uploaded to ADP directly. + +You’ll need to be on the Control Plan to create a Custom Export Format. + +Your employee list in ADP can also be imported into Expensify via Expensify’s People table in CSV format, which will speed up the process of importing the correct values to sync up your employee’s reports with ADP. This feature is available on all plans. + +# How to use the ADP integration + +## Step 1: Set up the ADP import file + +A basic setup for an ADP import file includes five columns. In order (from left to right), these columns are: + +- **Company Code** - See β€œEdit Company” page in ADP +- **Batch ID** - Found in β€œEdit Company” +- **File #** - Employee number in ADP +- **Earnings 3 Code** - See β€œEdit Profit Center Group” page +- **Earnings 3 Amount** - Found in β€œEdit Profit Center Group” + +There is a **File #** for each employee that you’re tracking in **Expensify** located under β€œ**RUN Powered by ADP**” - navigate to **Reports tab > Tax Reports > Wage > Tax Register**. + +In **Expensify**, the **File #** is entered in the **Custom Field 1 or 2** column in the **Members table**. +The **Earnings 3 Code** is the ADP code that corresponds to a payroll account you’re tracking in **Expensify**. The **Earnings 3 Amount** is the total of a given expense you’re sending to payroll. + +In **Expensify**, you can enter the **Earnings 3 Code** at **Settings > Workspaces > [Group Workspace Name] > Categories > Categories [Category Name] > Edit Rules > Add under Payroll Code**. + +## Step 2:Create your ADP Export Format + +For a basic setup, visit **Settings > Workspaces > [Group Workspace Name] > Export Formats** and add these column headings and corresponding formulas: + +- **Name:** Company Code + - **Formula:** [From Step 1.] + +- **Name:** BatchID + - **Formula:** [From Step 1.] + +- **Name:** File # + - **Formula:** {report:submit.from:customfield1} + +- **Name:** Earnings 3 Code + - **Formula:** {expense:category:payrollcode} + +- **Name:** Earnings 3 Amount + - **Formula:** {expense:amount} + +The Company Code column is hardcoded with your company’s code in ADP. Similarly, the Batch ID is hard coded with whatever Batch ID your company is using in ADP. + +## Step 3.:Export to CSV or XLS + +To export the file, do the following: + +1. Go to your "Reports" page in Expensify +2. Select the reports you want to export +3. Click "Export to..." and choose your custom ADP format +4. Your download will begin automatically and be delivered in CSV or XLS format + +## Step 4: Upload to ADP + +You should be able to upload your ADP file directly to ADP without any changes. + +# Deep Dive + +## Using the ADP integration + +You can set Custom Fields and Payroll Codes in bulk using a CSV upload in Expensify’s settings pages. + +If you have additional requirements for your ADP upload, for example, additional headings or datasets, reach out to your Expensify Account Manager who will assist you in customizing your ADP export. Expensify Account Managers are trained to accommodate your data requests and help you retrieve them from the system. + +# FAQ + +- Do I need to convert my employee list into new column headings so I can upload it to Expensify? + +Yes, you’ll need to convert your ADP employee data to the same headings as the spreadsheet that can be downloaded from the Members table in Expensify. + +- Can I add special fields/items to my ADP Payroll Custom Export Format? + +Yes! You can ask your Expensify Account Manager to help you prepare your ADP Payroll export so that it meets your specific requirements. Just reach out to them via the Chat option in Expensify and they’ll help you get set up. diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md b/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md new file mode 100644 index 000000000000..fffe0abb43aa --- /dev/null +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/Accelo.md @@ -0,0 +1,74 @@ +--- +title: Accelo +description: Help doc for Accelo integration +--- + + +# Overview +Accelo is a cloud-based business management software platform tailored for professional service companies, offering streamlined operations. It enables seamless integration with Expensify, allowing users to effortlessly import expense details from Expensify into Accelo, associating them with the corresponding project, ticket, or retainer within the system. + +# How to Connect Expensify to Accelo +To connect Expensify to Accelo, follow these clear steps: + +## Prerequisites +Ensure you have administrator access to Accelo. +Have a Workspace Admin role in Expensify. + +## Connecting Expensify to Accelo +1. Access the Expensify Integration Server: +- Open the Expensify Integration Server. +2. Retrieve Your Partner User ID and Partner User Secret: +- Important: These credentials are distinct from your regular Expensify username and password. +- If you haven't previously set up the integration server, click where it indicates "click here." +3. Regenerating Partner User Secret (If Necessary): +- Note: If you've previously configured the integration server, you must regenerate your Partner User Secret. Do this by clicking "click here" to regenerate your partnerUserSecret. +- If you currently use the Integration Server/API for another integration, remember to update that integration to use the new Secret. +4. Configure Accelo: +- Return to your Accelo account. +- Navigate to your Integrations page and select the Expensify tab. +5. Enter Expensify Integration Server Credentials: +- Provide your Expensify Integration Server's Partner User ID and Partner User Secret. +- Click "Save" to complete the setup. +6. Connection Established: +- Congratulations! Your Expensify account is now successfully connected to Accelo. + +With this connection in place, all Expensify users can effortlessly synchronize their expenses with Accelo, streamlining their workflow and improving efficiency. + +## How to upload your Accelo Project Codes as Tags in Expensify +Once you have connected Accelo to Expensify, the next step is to upload your Accelo Project Codes as Tags in Expensify. Simply go to Go to **Settings** > **Workspaces** > **Group** > _[Workspace Name]_ > **Tags** and upload your CSV. +If you directly integrate with Xero or QuickBooks Online, you must upload your Project Codes by appending your tags. Go to **Settings** > **Workspaces** > **Group** > _[Workspace Name]_ > **Tags** and click on β€œAppend a custom tag list from a CSV” to upload your Project Codes via a CSV. + +# Deep Dive +## Information sync between Expensify and Accelo +The Accelo integration does a one-way sync, which means it brings expenses from Expensify into Accelo. When this happens, it transfers specific information from Expensify expenses to Accelo: + +| Expensify | Accelo | +|---------------------|-----------------------| +| Comment | Title | +| Date | Date Incurred | +| Category | Type | +| Tags | Against (relevant Project, Ticket or Retainer) | +| Distance (mileage) | Quantity | +| Hours (time expenses) | Quantity | +| Amount | Purchase Price and Sale Price | +| Reimbursable? | Reimbursable? | +| Billable? | Billable? | +| Receipt | Attachment | +| Tax Rate | Tax Code | +| Attendees | Submitted By | + +## Expense Status +The status of your expense report in Expensify is also synced in Accelo. + +| Expensify Report Status | Accelo Expense Status | +|-------------------------|-----------------------| +| Open | Submitted | +| Submitted | Submitted | +| Approved | Approved | +| Reimbursed | Approved | +| Rejected | Declined | +| Archived | Approved | +| Closed | Approved | + +## Importing expenses from Expensify to Accelo +Accelo regularly checks Expensify for new expenses once every hour. It automatically brings in expenses that have been created or changed since the last sync. diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md b/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md index 3ee1c8656b4b..8092ed9c6dd6 100644 --- a/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md +++ b/docs/articles/expensify-classic/integrations/accounting-integrations/NetSuite.md @@ -1,5 +1,575 @@ --- -title: Coming Soon -description: Coming Soon +title: NetSuite +description: Connect and configure NetSuite directly to Expensify. --- -## Resource Coming Soon! +# Overview +Expensify's seamless integration with NetSuite enables you to streamline your expense reporting process. This integration allows you to automate the export of reports, tailor your coding preferences, and tap into NetSuite's array of advanced features. By correctly configuring your NetSuite settings in Expensify, you can leverage the connection's settings to automate most of the tasks, making your workflow more efficient. + +Before getting started with connecting NetSuite to Expensify, there are a few things to note: +- Token-based authentication works by ensuring that each request to NetSuite is accompanied by a signed token which is verified for authenticity +- You must be able to login to NetSuite as an administrator to initiate the connection +- You must have a Control Plan in Expensify to integrate with NetSuite +- Employees don’t need NetSuite access or a NetSuite license to submit expense reports since the connection is managed by the Workspace Admin +- Each NetSuite subsidiary will need its own Expensify Group Workspace +- Ensure that your workspace's report output currency setting matches the NetSuite Subsidiary default currency +- Make sure your page size is set to 1000 for importing your customers and vendors. Go to Setup > Integration > Web Services Preferences > 'Search Page Size' + +# How to Connect to NetSuite + +## Step 1: Install the Expensify Bundle in NetSuite + +1. While logged into NetSuite as an administrator, go to Customization > SuiteBundler > Search & Install Bundles, then search for "Expensify" +2. Click on the Expensify Connect bundle (Bundle ID 283395) +3. Click Install +4. If you already have the Expensify Connect bundle installed, head to _Customization > SuiteBundler > Search & Install Bundles > List_ and update it to the latest version +5. Select **Show on Existing Custom Forms** for all available fields + +## Step 2: Enable Token-Based Authentication + +1. Head to _Setup > Company > Enable Features > SuiteCloud > Manage Authentication_ +2. Make sure β€œToken Based Authentication” is enabled +3. Click **Save** + +## Step 3: Add Expensify Integration Role to a User + +The user you select must have access to at least the permissions included in the Expensify Integration Role, but they're not required to be an Admin. +1. In NetSuite, head to Lists > Employees, and find the user you want to add the Expensify Integration role to +2. Click _Edit > Access_, then find the Expensify Integration role in the dropdown and add it to the user +3. Click **Save** + +Remember that Tokens are linked to a User and a Role, not solely to a User. It's important to note that you cannot establish a connection with tokens using one role and then switch to another role afterward. Once you've initiated a connection with tokens, you must continue using the same token/user/role combination for all subsequent sync or export actions. + +## Step 4: Create Access Tokens + +1. Using Global Search in NetSuite, enter β€œpage: tokens” +2. Click **New Access Token** +3. Select Expensify as the application (this must be the original Expensify integration from the bundle) +4. Select the role Expensify Integration +5. Press **Save** +6. Copy and Paste the token and token ID to a saved location on your computer (this is the only time you will see these details) + +## Step 5: Confirm Expense Reports are Enabled in NetSuite. + +Enabling Expense Reports is required as part of Expensify's integration with NetSuite: +1. Logged into NetSuite as an administrator, go to Setup > Company > Enable Features > Employees +2. Confirm the checkbox next to Expense Reports is checked +3. If not, click the checkbox and then Save to enable Expense Reports + +## Step 6: Confirm Expense Categories are set up in NetSuite. + +Once Expense Reports are enabled, Expense Categories can be set up in NetSuite. Expense Categories are an alias for General Ledger accounts for coding expenses. + +1. Logged into NetSuite as an administrator, go to Setup > Accounting > Expense Categories (a list of Expense Categories should show) +2. If no Expense Categories are visible, click **New** to create new ones + +## Step 7: Confirm Journal Entry Transaction Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to the Standard Journal Entry form +3. Then, click Screen Fields > Main. Please verify the "Created From" label has "Show" checked and the Display Type is set to Normal +4. Click the sub-header Lines and verify that the "Show" column for "Receipt URL" is checked +5. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the journal type have this same configuration + +## Step 8: Confirm Expense Report Transaction Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to the Standard Expense Report form, then click **Screen Fields > Main** +3. Verify the "Created From" label has "Show" checked and the Display Type is set to Normal +4. Click the second sub-header, Expenses, and verify that the 'Show' column for 'Receipt URL' is checked +5. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the expense report type have this same configuration + +## Step 9: Confirm Vendor Bill Transactions Forms are Configured Properly + +1. Logged into NetSuite as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to your preferred Vendor Bill form +3. Then, click _Screen Fields > Main_ and verify that the "Created From" label has "Show" checked and that Departments, Classes, and Locations have the "Show" label unchecked +4. Under the Expenses sub-header (make sure to click the "Expenses" sub-header at the very bottom and not "Expenses & Items"), ensure "Show" is checked for Receipt URL, Department, Location, and Class +5. Go to _Customization > Forms > Transaction Forms_ and provide all other transaction forms with the vendor bill type have this same configuration + +## Step 10: Confirm Vendor Credit Transactions Forms are Configured Properly + +1. While logged in as an administrator, go to _Customization > Forms > Transaction Forms_ +2. Click **Customize** or **Edit** next to your preferred Vendor Credit form, then click _Screen Fields > Main_ and verify that the "Created From" label has "Show" checked and that Departments, Classes, and Locations have the "Show" label unchecked +3. Under the Expenses sub-header (make sure to click the "Expenses" sub-header at the very bottom and not "Expenses & Items"), ensure "Show" is checked for Receipt URL, Department, Location, and Class +4. Go to _Customization > Forms > Transaction Forms_ and ensure all other transaction forms with the vendor credit type have this same configuration + +## Step 11: Set up Tax Groups (only applicable if tracking taxes) + +Expensify imports NetSuite Tax Groups (not Tax Codes), which you can find in NetSuite under _Setup > Accounting > Tax Groups_. + +Tax Groups are an alias for Tax Codes in NetSuite and can contain one or more Tax Codes (Please note: for UK and Ireland subsidiaries, please ensure your Tax Groups do not have more than one Tax Code). We recommend naming Tax Groups so your employees can easily understand them, as the name and rate will be displayed in Expensify. + +Before importing NetSuite Tax Groups into Expensify: +1. Create your Tax Groups in NetSuite by going to _Setup > Accounting > Tax Groups_ +2. Click **New** +3. Select the country for your Tax Group +4. Enter the Tax Name (this is what employees will see in Expensify) +5. Select the subsidiary for this Tax Group +6. Select the Tax Code from the table you wish to include in this Tax Group +7. Click **Add** +8. Click **Save** +9. Create one NetSuite Tax Group for each tax rate you want to show in Expensify + +Ensure Tax Groups can be applied to expenses by going to _Setup > Accounting > Set Up Taxes_ and setting the Tax Code Lists Include preference to "Tax Groups And Tax Codes" or "Tax Groups Only." + +If this field does not display, it’s not needed for that specific country. + +## Step 12: Connect Expensify and NetSuite + +1. Log into Expensify as a Policy Admin and go to **Settings > Workspaces > _[Workspace Name]_ > Connections > NetSuite** +2. Click **Connect to NetSuite** +3. Enter your Account ID (Account ID can be found in NetSuite by going to _Setup > Integration > Web Services Preferences_) +4. Then, enter the token and token secret +5. Click **Connect to NetSuite** + +From there, the NetSuite connection will sync, and the configuration dialogue box will appear. + +Please note that you must create the connection using a NetSuite account with the Expensify Integration role + +Once connected, all reports exported from Expensify will be generated in NetSuite using SOAP Web Services (the term NetSuite employs when records are created through the integration). + +# How to Configure Export Settings + +There are numerous options for exporting Expensify reports to NetSuite. Let's explore how to configure these settings to align with your business needs. +To access these settings, head to **Settings > Workspace > Group > Connections** and select the **Configure** button. + +## Export Options + +### Subsidiary + +The subsidiary selection will only appear if you use NetSuite OneWorld and have multiple subsidiaries active. If you add a new subsidiary to NetSuite, sync the workspace connection, and the new subsidiary should appear in the dropdown list under **Settings > Workspaces > _[Workspace Name]_ > Connections**. + +### Preferred Exporter + +This option allows any admin to export, but the preferred exporter will receive notifications in Expensify regarding the status of exports. + +### Date + +The three options for the date your report will export with are: +- Date of last expense: This will use the date of the previous expense on the report +- Submitted date: The date the employee submitted the report +- Exported date: The date you export the report to NetSuite + +## Reimbursable Expenses + +### Expense Reports + +Expensify transactions will export reimbursable expenses as expense reports by default, which will be posted to the payables account designated in NetSuite. + +### Vendor Bills + +Expensify transactions export as vendor bills in NetSuite and will be mapped to the subsidiary associated with the corresponding policy. Each report will be posted as payable to the vendor associated with the employee who submitted the report. +You can also set an approval level in NetSuite for vendor bills. + +### Journal Entries + +Expensify transactions that are set to export as journal entries in NetSuite will be mapped to the subsidiary associated with this policy. All the transactions will be posted to the payable account specified in the policy. + +You can also set an approval level in NetSuite for the journal entries. + +**Important Notes:** +- Journal entry forms by default do not contain a customer column, so it is not possible to export customers or projects with this export option +- The credit line and header level classifications are pulled from the employee record + +## Non-Reimbursable Expenses + +### Vendor Bills + +Non-reimbursable expenses will be posted as a vendor bill payable to the default vendor specified in your policy's connection settings. If you centrally manage your company cards through Domains, you can export expenses from each card to a specific vendor in NetSuite. You can also set an approval level in NetSuite for the bills. + +### Journal Entries + +Non-reimbursable expenses will be posted to the Journal Entries posting account selected in your policy's connection settings. If you centrally manage your company cards through Domains, you can export expenses from each card to a specific account in NetSuite. + +**Important Notes:** +- Expensify Card expenses will always export as Journal Entries, even if you have Expense Reports or Vendor Bills configured for non-reimbursable expenses on the Export tab +- Journal entry forms do not contain a customer column, so it is not possible to export customers or projects with this export option +- The credit line and header level classifications are pulled from the employee record + +### Expense Reports + +To use the expense report option for your corporate card expenses, you will need to set up your default corporate cards in NetSuite. + +To use a default corporate card for non-reimbursable expenses, you must select the correct card on the employee records (for individual accounts) or the subsidiary record (If you use a non-one world account, the default is found in your accounting preferences). + +Add the corporate card option and corporate card main field to your expense report transaction form in NetSuite by: +1. Heading to _Customization > Forms > Transaction Forms > Preferred expense report form > Screen Fields_ +2. Under the Main tab, check β€œShow” for Account for Corporate Card Expenses +3. On the Expenses tab, check β€œShow” for Corporate Card + +You can select the default account on your employee record to use individual corporate cards for each employee. Make sure you add this field to your employee entity form in NetSuite. +If you have multiple cards assigned to a single employee, you cannot export to each account. You can only have a single default per employee record. + +### Export Invoices + +Select the Accounts Receivable account you want your Invoice Reports to export. In NetSuite, the Invoices are linked to the customer, corresponding to the email address where the Invoice was sent. + +### Default Vendor Bills + +The list of vendors will be available in the dropdown when selecting the option to export non-reimbursable expenses as vendor bills. + +# How to Configure Coding Settings + +The Coding tab is where NetSuite information is configured in Expensify, which allows employees to code expenses and reports accurately. There are several coding options in NetSuite. Let’s go over each of those below. + +## Expense Categories + +Expensify's integration with NetSuite automatically imports NetSuite Expense Categories as Categories in Expensify. + +Please note that each expense must have a Category selected to export to NetSuite. The category chosen must be imported from NetSuite and cannot be manually created in Expensify. + +If you want to delete Categories, you must do this in NetSuite. Categories are added and modified on the integration’s side and then synced with Expensify. +Once imported, you can turn specific Categories on or off under **Settings > Workspaces > _[Workspace Name]_ > Categories**. + +## Tags + +The NetSuite integration allows you to configure Customers, Projects, Departments, Classes, and Locations as line-item expense classifications. These are called Tags in Expensify. + +Suppose a default Customer, Project, Department, Class, or Location ties to the employee record in NetSuite. In that case, Expensify will create a rule that automatically applies that tag to all expenses made by that employee (the Tag is still editable if necessary). + +If you want to delete Tags, you must do this in NetSuite. Tags are added and modified on the integration’s side and then synced with Expensify. + +Once imported, you can turn specific Tags on or off under **Settings > Workspaces > _[Workspace Name]_ > Tags**. + +## Report Fields + +The NetSuite integration allows you to configure Customers, Projects, Departments, Classes, and Locations as report-level classifications. These are called Report Fields in Expensify. + +## NetSuite Employee Default + +The NetSuite integration allows you to set Departments, Classes, and Locations according to the NetSuite Employee Default for expenses exported as both Expense Reports and Journal Entries. + +These fields must be set in NetSuite's employee(s) record(s) to be successfully applied to expenses upon export. + +You cannot use the employee default setting with a vendor bill export if you have both a vendor and an employee set up for the user under the same email address and subsidiary. + +## Tax + +The NetSuite integration allows users to apply a tax rate and amount to each expense. To do this, import Tax Groups from NetSuite: +1. In NetSuite, head to _Setup > Accounting > Tax Groups_ +2. Once imported, go to the NetSuite connection configuration page in Expensify (under **Settings > Workspaces > Group > _[Workspace Name]_ > Connection > NetSuite > Coding**), refresh the subsidiary list, and the Tax option will appear +3. From there, enable Tax +4. Click **Save** +5. Sync the connection +6. All Tax Groups for the connected NetSuite subsidiary will be imported to Expensify as taxes. +7. After syncing, go to **Settings > Workspace > Group > _[Workspace Name]_ > Tax** to see the tax groups imported from NetSuite +8. Use the turn on/off button to choose which taxes to make available to your employees +9. Select a default tax to apply to the workspace (that tax rate will automatically apply to all new expenses) + +## Custom Segments + +To add a Custom Segment to your workspace, you’ll need to locate three fields in NetSuite: +- Segment Name +- Internal ID +- Script/Field ID + +**To find the Segment Name:** +1. Log in as an administrator in NetSuite +2. Head to _Customization > Lists, Records, & Fields > Custom Segments_ +3. You’ll see the Segment Name on the Custom Segments page + +**To find the Internal ID:** +1. Ensure you have internal IDs enabled in NetSuite under _Home > Set Preferences_ +2. Navigate back to the Custom Segment page +3. Click the **Custom Record Type** hyperlink +4. You’ll see the Internal ID on the Custom Record Type page + +**To find the Script/Field ID:** + +If configuring Custom Segments as Report Fields, use the Field ID on the Transactions tab (under _Custom Segments > Transactions_). + +If configuring Custom Segments as Tags, use the Field ID on the Transaction Columns tab (under _Custom Segments > Transaction Columns_). + +Lastly, head over to Expensify and do the following: +1. Navigate to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Segments (Report Fields or Tags) +3. Fill out the three fields (Segment Name, Internal ID, Script ID) +4. Click **Submit** + +From there, you should see the values for the Custom Segment under the Tag or Report Field settings in Expensify. + +Don’t use the "Filtered by" feature available for Custom Segments. Expensify can’t make these dependent on other fields. If you do have a filter selected, we suggest switching that filter in NetSuite to "Subsidiary" and enabling all subsidiaries to ensure you don't receive any errors upon exporting reports. + +### Custom Records + +Custom Records are added through the Custom Segments feature. + +To add a Custom Record to your workspace, you’ll need to locate three fields in NetSuite: +- The name of the record +- Internal ID +- Transaction Column ID + +**To find the Internal ID:** +1. Make sure you have Internal IDs enabled in NetSuite under Home > Set Preferences +2. Navigate back to the Custom Segment page +3. Click the Custom Record Type hyperlink +4. You’ll see the Internal ID on the Custom Record Type page + +**To find the Transaction Column ID:** +If configuring Custom Segments as Report Fields, use the Field ID on the Transactions tab (under _Custom Segments > Transactions_). + +If configuring Custom Segments as Tags, use the Field ID on the Transaction Columns tab (under _Custom Segments > Transaction Columns_). + +Lastly, head over to Expensify and do the following: +1. Navigate to **Settings > Workspace > Group > [Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Records (Report Fields or Tags) +3. Fill out the three fields (the name or label of the record, Internal ID, Transaction Column ID) +4. Click **Submit** + +From there, you should see the values for the Custom Records under the Tag or Report Field settings in Expensify. + +### Custom Lists + +To add Custom Lists to your workspace, you’ll need to locate two fields in NetSuite: +- The name of the record +- The ID of the Transaction Line Field that holds the record + +**To find the record:** +1. Log into Expensify +2. Head to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +3. The name of the record will be populated in a dropdown list + +The name of the record will populate in a dropdown list. If you don't see the one you are looking for, click **Refresh Custom List Options**. + +**To find the Transaction Line Field ID:** +1. Log into NetSuite +2. Search "Transaction Line Fields" in the global search +3. Open the option that is holding the record to get the ID + +Lastly, head over to Expensify, and do the following: +1. Navigate to **Settings > Workspaces > Group > _[Workspace Name]_ > Connections > Configure > Coding tab** +2. Choose how to import Custom Lists (Report Fields or Tags) +3. Enter the ID in Expensify in the configuration screen +4. Click **Submit** + +From there, you should see the values for the Custom Lists under the Tag or Report Field settings in Expensify. + +# How to Configure Advanced Settings + +The NetSuite integration’s advanced configuration settings are accessed under **Settings > Workspaces > Group > _[Workspace Name]_ > Connections > NetSuite > Configure > Advanced tab**. + +Let’s review the different advanced settings and how they interact with the integration. + +## Auto Sync + +Enabling Auto Sync ensures that the information in NetSuite and Expensify is always in sync through automating exports, tracking direct deposits, and communicating export errors. + +**Automatic Export:** +- When you turn on the Auto Sync feature in Expensify, any final report you approve will automatically be sent to NetSuite. +- This happens every day at approximately the same time. + +**Direct Deposit Alert:** +- If you use Expensify's Direct Deposit ACH and have Auto Sync, getting reimbursed for an Expensify report will automatically create a Bill Payment in NetSuite. + +**Tracking Exports and Errors:** +- In the comments section of an Expensify report, you can find extra details about the report. +- The comments section will tell you when the report was sent to NetSuite, and if there were any problems during the export, it will show the error. + +## Newly Imported Categories + +With this enabled, all submitters can add any newly imported Categories to an Expense. + +## Invite Employees & Set Approval Workflow + +### Invite Employees + +Use this option in Expensify to bring your employees from a specific NetSuite subsidiary into Expensify. +Once imported, Expensify will send them an email letting them know they've been added to a workspace. + +### Set Approval Workflow + +Besides inviting employees, you can also establish an approval process in NetSuite. + +By doing this, the Approval Workflow in Expensify will automatically follow the same rules as NetSuite, typically starting with Manager Approval. + +- **Basic Approval:** A single level of approval, where all users submit directly to a Final Approver. The Final Approver defaults to the workspace owner but can be edited on the people page. +- **Manager Approval (default):** Two levels of approval route reports first to an employee's NetSuite expense approver or supervisor, and second to a workspace-wide Final Approver. By NetSuite convention, Expensify will map to the supervisor if no expense approver exists. The Final Approver defaults to the workspace owner but can be edited on the people page. +- **Configure Manually:** Employees will be imported, but all levels of approval must be manually configured on the workspace's People settings page. If you enable this setting, it’s recommended you review the newly imported employees and managers on the **Settings > Workspaces > Group > _[Workspace Name]_ > People page**. You can set a user role for each new employee and enforce an approval workflow. + +## Automatically Create Employees/Vendors + +With this feature enabled, Expensify will automatically create a new employee or vendor (if one doesn’t already exist) from the email of the report submitter in NetSuite. + +## Export Foreign Currency Amount + +Using this feature allows you to send the original amount of the expense rather than the converted total when exporting to NetSuite. This option is available if you are exporting reimbursable expenses as Expense Reports. + +## Cross-Subsidiary Customers/Projects + +This allows you to import Customers and Projects across all subsidiaries to a single group workspace. For this functionality, you must enable "Intercompany Time and Expense" in NetSuite. + +That feature is found in NetSuite under _Setup > Company > Setup Tasks: Enable Features > Advanced Features_. + +## Sync Reimbursed Reports + +If you're using Expensify's Direct Deposit ACH feature and you want to export reimbursable expenses as either Expense Reports or Vendor Bills in NetSuite, here's what to do: +1. In Expensify, go to the Advanced Settings tab +2. Look for a toggle or switch related to this feature +3. Turn it on by clicking the toggle +4. Select the correct account for the Bill Payment in NetSuite +5. Ensure the account you choose matches the default account for Bill Payments in NetSuite + +That's it! When Expensify reimburses an expense report, it will automatically create a corresponding Bill Payment in NetSuite. + +Alternatively, if reimbursing outside of Expensify, this feature will automatically update the expense report status in Expensify from Approved to Reimbursed when the respective report is paid in NetSuite and the corresponding workspace syncs via Auto-Sync or when the integration connection is manually synced. + +## Setting Approval Levels + +With this setting enabled, you can set approval levels based on your export type. + +- **Expense Reports:** These options correspond to the default preferences in NetSuite – β€œSupervisor approval only,” β€œAccounting approval only,” or β€œSupervisor and Accounting approved.” +- **Vendor Bills or Journal Entries:** These options correspond to the default preferences in NetSuite – β€œPending Approval” or β€œApproved for Posting.” + +If you have Approval Routing selected in your accounting preference, this will override the selections in Expensify. + +If you do not wish to use Approval Routing in NetSuite, go to _Setup > Accounting > Accounting Preferences > Approval Routing_ and ensure Vendor Bills and Journal Entries are not selected. + +### Collection Account + +When exporting invoices, once marked as Paid, the payment is marked against the account selected after enabling the Collection Account setting. + +# Deep Dive + +## Categories + +You can use the Auto-Categorization feature so that expenses are automatically categorized. + +To set Category Rules (e.g., receipt requirements or comments), go to the categories page in the workspace under **Settings > Workspaces > _[Workspace Name]_ > Categories**. + +With this setting enabled, when an Expense Category updates in NetSuite, it will update in Expensify automatically. + +## Company Cards + +NetSuite's company card feature simplifies exporting reimbursable and non-reimbursable transactions to your General Ledger (GL). This approach is recommended for several reasons: + +1. **Separate Employees from Vendors:** NetSuite allows you to maintain separate employee and vendor records. This feature proves especially valuable when integrating with Expensify. By utilizing employee defaults for classifications, your employees won't need to apply tags to all their expenses manually. +2. **Default Accounts Payable (A/P) Account:** Expense reports enable you to set a default A/P account for export on your subsidiary record. Unlike vendor bills, where the A/P account defaults to the last selected account, the expense report export option allows you to establish a default A/P account. +3. **Mix Reimbursable and Non-Reimbursable Expenses:** You can freely mix reimbursable and non-reimbursable expenses without categorizing them in NetSuite after export. NetSuite's corporate card feature automatically categorizes expenses into the correct GL accounts, ensuring a neat and organized GL impact. + +#### Let’s go over an example! + +Consider an expense report with one reimbursable and one non-reimbursable expense. Each needs to be exported to different accounts and expense categories. + +In NetSuite, you can quickly identify the non-reimbursable expense marked as a corporate card expense. Reviewing the GL impact, you'll notice that the reimbursable expense is posted to the default A/P account set on the subsidiary record. On the other hand, the company card expense is assigned to the Credit Card account, which can either be set as a default on the subsidiary record (for a single account) or the employee record (for individual credit card accounts in NetSuite). + +Furthermore, each expense is categorized according to your selected expense category. + +You'll need to set up default corporate cards in NetSuite to use the expense report option for your corporate card expenses. + +For non-reimbursable expenses, choose the appropriate card on the subsidiary record. You can find the default in your accounting preferences if you're not using a OneWorld account. + +Add the corporate card option and the corporate card main field to configure your expense report transaction form in NetSuite: +1. Go to _Customization > Forms > Transaction Forms > Preferred expense report form > Screen Fields_ +2. Under the Main tab, check "Show for Account for Corporate Card Expenses" +3. On the Expenses tab, check "Show for Corporate Card" + +If you prefer individual corporate cards for each employee, you can select the default account on the employee record. Add this field to your employee entity form in NetSuite (under _Customize > Customize Form_ from any employee record). Note that each employee can have only one corporate card account default. + +### Exporting Company Cards to GL Accounts in NetSuite + +If you need to export company card transactions to individual GL accounts, you can set that up at the domain level. + +Let’s go over how to do that: +1. Go to **Settings > Domain > _[Domain name]_ > Company Cards** +2. Click the Export Settings cog on the right-hand side of the card and select the GL account where you want the expenses to export + +After setting the account, exported expenses will be mapped to that designated account. + +## Tax + +You’ll want to set up Tax Groups in Expensify if you're keeping track of taxes. + +Expensify can import "NetSuite Tax Groups" (not Tax Codes) from NetSuite. Tax Groups can contain one or more Tax Codes. If you have subsidiaries in the UK or Ireland, ensure your Tax Groups have only one Tax Code. + +You can locate these in NetSuite by setting up> Accounting > Tax Groups. + +You’ll want to name Tax Groups something that makes sense to your employees since both the name and the tax rate will appear in Expensify. + +To bring NetSuite Tax Groups into Expensify, here's what you need to do: +1. Create your Tax Groups in NetSuite by going to _Setup > Accounting > Tax Groups_ +2. Click **New** +3. Pick the country for your Tax Group +4. Enter the Tax Name (this will be visible to your employees in Expensify) +5. Next, select the subsidiary for this Tax Group +6. Finally, from the table, choose the Tax Code you want to include in this Tax Group +7. Click **Add**, then click **Save** + +Repeat those steps for each tax rate you want to use in Expensify. + +Next, ensure that Tax Groups can be applied to expenses: +1. In NetSuite, head to _Setup > Accounting > Set Up Taxes_ +2. Set the preference for "Tax Code Lists Include" to either "Tax Groups And Tax Codes" or "Tax Groups Only." If you don't see this field, don't worry; it means you don't need to set it for that specific country + +NetSuite has a pre-made list of tax groups for specific locations, but you can also create your own. We'll import both your custom tax groups and the default ones. It's important not to deactivate the default NetSuite tax groups because we rely on them for exporting specific types of expenses. + +For example, there's a default Canadian tax group called CA-Zero, which we use when exporting mileage and per diem expenses that don't have any taxes applied in + +Expensify. If you deactivate this group in NetSuite, it will lead to export errors. + +Additionally, some tax nexuses in NetSuite have specific settings that need to be configured in a certain way to work seamlessly with the Expensify integration: +- ​​In the Tax Code Lists Include field, choose "Tax Groups" or "Tax Groups and Tax Codes." This setting determines how tax information is handled. +- In the Tax Rounding Method field, select "Round Off." Although it won't cause connection errors, not using this setting can result in exported amounts differing from what NetSuite expects. + +If your tax groups are importing into Expensify but not exporting to NetSuite, check that each tax group has the right subsidiaries enabled. That is crucial for proper data exchange. + +## Multi-Currency + +When using multi-currency features with NetSuite, remember these points: + +**Matching Currencies:** The currency set for a vendor or employee record must match the currency chosen for the subsidiary in your Expensify configuration. This alignment is crucial for proper handling. + +**Foreign Currency Conversion:** If you create expenses in one currency and then convert them to another currency within Expensify before exporting, you can include both the original and converted amounts in the exported expense reports. This option, called "Export foreign currency amount," can be found in the Advanced tab of your configuration. Note that Expensify sends only the amounts; the actual currency conversion is performed in NetSuite. + +**Bank Account Currency:** When synchronizing bill payments, make sure your bank account's currency matches the subsidiary's currency. Failure to do so will result in an "Invalid Account" error. This alignment is necessary to prevent issues during payment processing. + +## Exporting Invoices + +When you mark an invoice as paid in Expensify, the paid status syncs with NetSuite and vice versa! + +Let's dive right in: +1. Access Configuration Settings: Go to **Settings > Workspace > Group > _[Workspace Name]_ > Connections > Configuration** +2. Choose Your Accounts Receivable Account: Scroll down to "Export Expenses to" and select the appropriate Accounts Receivable account from the dropdown list. If you don't see any options, try syncing your NetSuite connection by returning to the Connections page and clicking **Sync Now** + +### Exporting an Invoice to NetSuite + +Invoices will be automatically sent to NetSuite when they are in the "Processing" or "Paid" status. This ensures you always have an up-to-date record of unpaid and paid invoices. + +If you have Auto Sync disabled, you'll need to export your invoices, along with your expense reports, manually. Follow these three simple steps: +1. Filter Invoices: From your Reports page, use filters to find the invoices you want to export. +2. Select Invoices: Pick the invoices ready for export. +3. Export to NetSuite: Click **Export to NetSuite** in the top right-hand corner. + +When exporting to NetSuite, we match the recipient's email address on the invoice to a customer record in NetSuite, meaning each customer in NetSuite must have an email address in their profile. If we can't find a match, we'll create a new customer in NetSuite. + +Once exported, the invoice will appear in the Accounts Receivable account you selected during your NetSuite Export configuration. + +### Updating an Invoice to paid + +When you mark an invoice as "Paid" in Expensify, this status will automatically update in NetSuite. Similarly, if the invoice is marked as "Paid" in NetSuite, it will sync with Expensify. The payment will be reflected in the Collection account specified in your Advanced Settings Configuration. + +## Download NetSuite Logs + +Sometimes, we might need more details from you to troubleshoot issues with your NetSuite connection. Providing the NetSuite web services usage logs is incredibly useful. + +Here's how you can send them to us: +1. **Generate the Logs:** Start by trying to export a report from your system. This action will create the most recent logs that we require. +2. **Access Web Services Usage Logs:** You can locate these logs in your NetSuite account. Just use the global search bar at the top of the page and type in "Web Services Usage Log." +3. **Identify the Logs:** Look for the most recent log entry. It should have "FAILED" under the STATUS column. Click on the two blue "view" links under the REQUEST and RESPONSE columns. These are the two .xml files we need to examine. + +Send these two files to your Account Manager or Concierge so we can continue troubleshooting! + +# FAQ + +## What type of Expensify plan is required for connecting to NetSuite? + +You need a group workspace on a Control Plan to integrate with NetSuite. + +## How does Auto Sync work with reimbursed reports? + +If a report is reimbursed via ACH or marked as reimbursed in Expensify and then exported to NetSuite, the report is automatically marked as paid in NetSuite during the next sync. + +If a report is exported to NetSuite and then marked as paid in NetSuite, the report is automatically marked as reimbursed in Expensify during the next sync. + +## If I enable Auto Sync, what happens to existing approved and reimbursed reports? + +If you previously had Auto Sync disabled but want to allow that feature to be used going forward, you can safely turn on Auto Sync without affecting existing reports. Auto Sync will only take effect for reports created after enabling that feature. 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/other-integrations/Google-Apps-SSO.md b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md index 3ee1c8656b4b..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 @@ -1,5 +1,35 @@ --- -title: Coming Soon -description: Coming Soon +title: Google Apps SSO +description: Expensify integrates with Google Apps SSO to easily invite users to your workspace. --- -## Resource Coming Soon! +Google Apps SSO Integration +# Overview +Expensify offers a Single Sign-on (SSO) integration with [Google Apps](https://cloud.google.com/architecture/identity/single-sign-on) for one-click Workspace invites. + +To set this up for users, you must: + +- Be an admin for a **Group Workspace** using a Collect or Control Workspace. +- Have Administrator access to the Google Apps Admin console. + +Google Apps SSO differs from using Google as your Identity Provider for SAML SSO, which limits domain access. To complete the Google SAML setup, follow the Google guide to [Set up SSO via SAML for Expensify](https://support.google.com/a/answer/7371682). You can enable both at the same time. +# How to Enable the Expensify App on Google Apps +To enable Expensify for your Google Apps domain and add an β€œExpenses” link to your universal navigation bar, please run through the following: +1. Sign in to your Google Apps Admin console as an administrator. +2. Navigate to the [Expensify App Listing on Google Apps](https://workspace.google.com/marketplace/app/expensify/452047858523). +3. Click **Admin Install** to start installing the app. +4. Click **Continue**. +5. Ensure the correct domain is selected if you have access to multiple. +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. +2. Log in to [Expensify](https://www.expensify.com/). +3. Click [Settings>Workspaces>Group](https://www.expensify.com/admin_policies?param={"section":"group"}). +4. Select the Workspace you wish to invite users to. +5. Select **People** from the admin menu. +6. Click **Sync G Suite Now** to identify anyone on your domain not yet on the Workspace and add them to it. + +The connection does not automatically refresh, you will need to click **Sync G Suite Now** whenever you’re ready to add new users. diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Additional-Travel-Integrations.md b/docs/articles/expensify-classic/integrations/travel-integrations/Additional-Travel-Integrations.md new file mode 100644 index 000000000000..ac37a01b3e6b --- /dev/null +++ b/docs/articles/expensify-classic/integrations/travel-integrations/Additional-Travel-Integrations.md @@ -0,0 +1,71 @@ +--- +title: Importing Receipts from Various Platforms to Expensify +description: Detailed guide on how to import receipts from multiple travel platforms into Expensify. +--- + +# Overview +You can automatically import receipts from many travel platforms into Expensify, to make tracking expenses while traveling for business a breeze. Read on to learn how to import receipts from Bolt Work, Spot Hero, Trainline, Grab, HotelTonight, and Kayak for Business. + +## How to Connect to Bolt Work + +### Set Up Bolt Work Profile +- Open the Bolt app, go to the side navigation menu, and select Payment. +- At the bottom, select Set up work profile and follow the instructions, entering your work email for verification. + +### Link to Expensify +- In the Bolt app, go to Work Rides. +- Select Add expense provider, choose Expensify, and enter the associated email to receive a verification link. +- Ensure you select your work ride profile as the payment method before booking. + +## How to Connect to SpotHero + +### Set up a Business Profile +- Open the SpotHero app, click the hamburger icon, and go to Account Settings. +- Click Set up Business Profile. +- Specify the email connected to Expensify and set up your payment method. +- Upon checkout, choose between Business and Personal Profiles in the "Payment Details" section. +- If you want, you can set a weekly or monthly cadence for consolidated SpotHero expense reports in your Business Profile settings. This will batch all of your SpotHero expenses to import into Expensify at that cadence. + +## How to Connect to Trainline +- To send a ticket receipt to Expensify: + - In the Trainline app, navigate to the My Tickets tab. + - Tap Manage my booking > Expense receipt > Send to Expensify. +- That’s it! + +## How to Connect to Grab +- In the Grab app, tap on your name, go to β€œProfiles”, and β€œAdd a business profile”. +- Follow instructions and enter your work email for verification. +- In your profile, tap on Business > Expense Solution > Expensify > Save. +- Before booking, select your Business profile and confirm. + +## How to Connect to HotelTonight +- In HotelTonight, go to the Bookings tab and select your booking. +- Select Receipt > Expensify, enter your Expensify email, and send. + +## How to Connect to Kayak for Business + +### Admin Setup +- Admins should go to β€œCompany Settings” and click on β€œConnect to Expensify”. +- Bookings made by employees will automatically be sent to Expensify. + +### Traveler Setup +- From your account settings, choose whether expenses should be sent to Expensify automatically or manually. +- We recommend sending them automatically, so you can travel without even thinking about your expense reports. + +# FAQ + +**Q: What if I don’t have the option for Send to Expensify in Trainline?** + +A: This can happen if the native iOS Mail app is not installed on an Apple device. However, you can still use the native iOS share to Expensify function for Trainline receipts. + +**Q: Why should I choose automatic mode in Kayak for Business?** + +A: Automatic mode is less effort as it’s easier to delete an expense in Expensify than to remember to forward a forgotten receipt. + +**Q: Can I receive consolidated reports from SpotHero?** + +A: Yes, you can set a weekly or monthly cadence for SpotHero expenses to be emailed in a consolidated report. + +**Q: Do I need to select a specific profile before booking in Bolt Work and Grab?** + +A: Yes, ensure you have selected your work or business profile as the payment method before booking. diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md b/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md index 3ee1c8656b4b..178621a62d90 100644 --- a/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md +++ b/docs/articles/expensify-classic/integrations/travel-integrations/Egencia.md @@ -1,5 +1,30 @@ --- -title: Coming Soon -description: Coming Soon +title: Egencia Integration +description: Expensify-Egencia integration automatically adds Egencia booking receipts to Expensify. --- -## Resource Coming Soon! +# Overview +[Egencia](https://www.egencia.com/en/) is a platform used to book and manage business travel. Integrating Expensify and Egencia ensures any bookings made using Egencia will automatically import as expenses to Expensify. +## Requirements: +- You'll need to have a Control Workspace +- A verified Domain + +# How to use Egencia with Expensify +When an employee makes a booking in Egencia: +- The receipt itinerary will automatically be imported to the traveler's Expensify account along with the expense details without needing to submit the information manually. +- When the traveler uses their company credit card to make a purchase via Egencia, the Egencia receipt will automatically merge with the credit card transaction. + +The travel information will also be available in the Trips section of the mobile app of the recipient's Expensify account. +# How to Enable the Egencia Feed +A file feed is an automated transfer of data files from Egencia to Expensify. + +Egencia controls the feed, so to connect Expensify you will need to: +1. Contact your Egencia account manager. +2. Request that they enable your Expensify feed. + +# How to Connect to a Central Purchasing Account +Once your Egencia account manager has established the feed, you can automatically forward all Egencia booking receipts to a single Expensify account. To do this: +1. Open a chat with Concierge. +2. Tell Concierge β€œPlease enable Central Purchasing Account for our Egencia feed. The account email is: xxx@yourdomain.com”. + +The receipt the traveler receives is a "reservation expense." Reservation expenses are non-reimbursable and won’t be included in any integrated accounting system exports. The reservation sent to the traveler's account is added to their mobile app Trips feature so that the traveler can easily keep tabs on upcoming travel and receive trip notifications. + 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/manage-employees-and-report-approvals/Removing-Members.md b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Removing-Members.md new file mode 100644 index 000000000000..76ebba9ef76b --- /dev/null +++ b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Removing-Members.md @@ -0,0 +1,34 @@ +--- +title: Remove a Workspace Member +description: How to remove a member from a Workspace in Expensify +--- + +Removing a member from a workspace disables their ability to use the workspace. Please note that it does not delete their account or deactivate the Expensify Card. + +## How to Remove a Workspace Member +1. Important: Make sure the employee has submitted all Draft reports and the reports have been approved, reimbursed, etc. +2. Go to Settings > Workspaces > Group > [Workspace Name] > Members > Workspace Members +3. Select the member you'd like to remove and click the **Remove** button at the top of the Members table. +4. If this member was an approver, make sure that reports are not routing to them in the workflow. + +# FAQ + +## Will reports from this member on this workspace still be available? +Yes, as long as the reports have been submitted. You can navigate to the Reports page and enter the member's email in the search field to find them. However, Draft reports will be removed from the workspace, so these will no longer be visible to the Workspace Admin. + +## Can members still access their reports on a workspace after they have been removed? +Yes. Any report that has been approved will now show the workspace as β€œ(not shared)” in their account. If it is a Draft Report they will still be able to edit it and add it to a new workspace. If the report is Approved or Reimbursed they will not be able to edit it further. + +## Who can remove members from a workspace? +Only Workspace Admins. It is not possible for a member to add or remove themselves from a workspace. It is not possible for a Domain Admin who is not also a Workspace Admin to remove a member from a workspace. + +## How do I remove a member from a workspace if I am seeing an error message? +If a member is a **preferred exporter, billing owner, report approver** or has **processing reports**, to remove them the workspace you will first need to: + +* **Preferred Exporter** - go to Settings > Workspaces > Group > [Workspace Name] > Connections > Configure and select a different Workspace Admin in the dropdown for **Preferred Exporter**. +* **Billing Owner** - take over billing on the Settings > Workspaces > Group > [Workspace Name] > Overview page. +* **Processing reports** - approve or reject the member’s reports on your Reports page. +* **Approval Workflow** - remove them as a workflow approver on your Settings > Workspaces > Group > [Workspace Name] > Members > Approval Mode > page by changing the "**Submit reports to**" field. + +## How do I remove a user completely from a company account? +If you have a Control Workspace and have Domain Control enabled, you will need to remove them from the domain to delete members' accounts entirely and deactivate the Expensify Card. diff --git a/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md b/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md deleted file mode 100644 index 3ee1c8656b4b..000000000000 --- a/docs/articles/expensify-classic/policy-and-domain-settings/SAML.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Coming Soon -description: Coming Soon ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md b/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md index 834d0b159931..e55d99d70827 100644 --- a/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md +++ b/docs/articles/expensify-classic/send-payments/Reimbursing-Reports.md @@ -1,5 +1,75 @@ --- title: Reimbursing Reports -description: Reimbursing Reports +description: How to reimburse employee expense reports --- -## Resource Coming Soon! +# Overview + +One essential aspect of the Expensify workflow is the ability to reimburse reports. This process allows for the reimbursement of expenses that have been submitted for review to the person who made the request. Detailed explanations of the various methods for reimbursing reports within Expensify are provided below. + +# How to reimburse reports + +Reports can be reimbursed directly within Expensify by clicking the **Reimburse** button at the top of the report to reveal the available reimbursement options. + +## Direct Deposit + +To reimburse directly in Expensify, the following needs to be already configured: +- The employee that's receiving reimbursement needs to add a deposit bank account to their Expensify account (under **Settings > Account > Payments > Add a Deposit-only Bank Account**) +- The reimburser needs to add a business bank account to Expensify (under **Settings > Account > Payments > Add a Verified Business Bank Account**) +- The reimburser needs to ensure Expensify is whitelisted to withdraw funds from the bank account + +If all of those settings are in place, to reimburse a report, you will click **Reimburse** on the report and then select **Via Direct Deposit (ACH)**. + +## Indirect or Manual Reimbursement + +If you don't have the option to utilize direct reimbursement, you can choose to mark a report as reimbursed by clicking the **Reimburse** button at the top of the report and then selecting **I’ll do it manually – just mark as reimbursed**. + +This will effectively mark the report as reimbursed within Expensify, but you'll handle the payment elsewhere, outside of the platform. + +# Best Practices +- Plan ahead! Consider sharing a business bank account with multiple workspace admins so they can reimburse employee reports if you're unavailable. We recommend having at least two workspace admins with reimbursement permissions. + +- Understand there is a verification process when sharing a business bank account. The new reimburser will need access to the business bank account’s transaction history (or access to someone who has access to it) to verify the set of test transactions sent from Expensify. + +- Get into the routine of having every new employee connect a deposit-only bank account to their Expensify account. This will ensure reimbursements happen in a timely manner. + +- Employees can see the expected date of their reimbursement at the top of and in the comments section of their report. + +# How to cancel a reimbursement + +Reimbursed a report by mistake? No worries! Any workspace admin with access to the same Verified Bank Account can cancel the reimbursement from within the report until it is withdrawn from the payment account. + +**Steps to Cancel an ACH Reimbursement:** +1. On your web account, navigate to the Reports page +2. Open the report +3. Click **Cancel Reimbursement** +4. After the prompt, "Are you sure you want to cancel the reimbursement?" click **Cancel Reimbursement**. + +It's important to note that there is a small window of time (roughly less than 24 hours) when a reimbursement can be canceled. If you don't see the **Cancel Reimbursement** button on a report, this means your bank has already begun withdrawing the funds from the reimbursement account and the withdrawal cannot be canceled. + +In that case, you’ll want to contact your bank directly to see if they can cancel the reimbursement on their end - or manage the return of funds directly with your employee, outside of Expensify. + +If you cancel a reimbursement after the withdrawal has started, it will be automatically returned to your Verified Bank Account within 3-5 business days. + +# Deep Dive + +## Rapid Reimbursement +If your company uses Expensify's ACH reimbursement, we'll first check to see if the report is eligible for Rapid Reimbursement (next business day). For a report to be eligible for Rapid Reimbursement, it must fall under two limits: +- $100 per deposit only bank account per day for the individuals being reimbursed or businesses receiving payments for bills +- $10,000 per verified bank account for the company paying bills and reimbursing + +If neither limit is met, you can expect to see funds deposited into your bank account on the next business day. + +If either limit has been reached, you can expect funds deposited within your bank account within the typical ACH time frame of four to five business days. + +Rapid Reimbursement is not available for non-US-based reimbursement. If you are receiving a reimbursement to a non-US-based deposit account, you should expect to see the funds deposited in your bank account within four business days. + +# FAQ + +## Who can reimburse reports? +Only a workspace admin who has added a verified business bank account to their Expensify account can reimburse employees. + +## Why can’t I trigger direct ACH reimbursements in bulk? + +Instead of a bulk reimbursement option, you can set up automatic reimbursement. With this configured, reports below a certain threshold (defined by you) will be automatically reimbursed via ACH as soon as they're "final approved." + +To set your manual reimbursement threshold, head to **Settings > Workspace > Group > _[Workspace Name]_ > Reimbursement > Manual Reimbursement**. 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 f61f26d91059..1a567dbe6fa3 100644 --- a/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md +++ b/docs/articles/expensify-classic/send-payments/Third-Party-Payments.md @@ -1,8 +1,59 @@ --- title: Third Party Payments -description: Third Party Payments +description: A help article that covers Third Party Payment options including PayPal, Venmo, Wise, and Paylocity. --- -## Resource Coming Soon! +# Expensify Third Party Payment Options +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. - \ No newline at end of file +# 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: + +- Faster Reimbursements: Expedite the reimbursement process and reduce the time it takes for employees to receive their funds. +- 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 + +To get started with third party payments in Expensify, follow these steps: + +1. **Log in to Expensify**: Access your Expensify account using your credentials. + +2. **Navigate to Settings**: Click on the "Settings" option in the top-right corner of the Expensify dashboard. + +3. **Select Payments**: In the Settings menu, find and click on the "Payments" or "Payment Methods" section. + +4. **Choose Third Party Payment Provider**: Select your preferred third party payment provider from the available options. Expensify may support providers such as PayPal, Venmo, Wise, and Paylocity. + +5. **Link Your Account**: Follow the prompts to link your third party payment account with Expensify. You may need to enter your account details and grant necessary permissions. + +6. **Verify Your Account**: Confirm your linked account to ensure it's correctly integrated with Expensify. + +# 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: + +1. **Create an Expense Report**: Begin by creating an expense report in Expensify, adding all relevant expenses. + +2. **Submit for Approval**: After reviewing and verifying the expenses, submit the report for approval within Expensify. + +3. **Approval and Reimbursement**: Once the report is approved, the approved expenses can be reimbursed directly through your chosen third party payment provider. Expensify will automatically initiate the payment process. + +4. **Track Payment Status**: You can track the status of payments and view transaction details within your Expensify account. + +# FAQ’s + +## 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? + +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? + +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 100% rename from docs/articles/expensify-classic/policy-and-domain-settings/Expenses.md rename to docs/articles/expensify-classic/workspace-and-domain-settings/Expenses.md 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/workspace-and-domain-settings/SAML-SSO.md b/docs/articles/expensify-classic/workspace-and-domain-settings/SAML-SSO.md new file mode 100644 index 000000000000..758cb70067e1 --- /dev/null +++ b/docs/articles/expensify-classic/workspace-and-domain-settings/SAML-SSO.md @@ -0,0 +1,89 @@ +--- +title: Managing Single Sign-On (SSO) and User Authentication in Expensify +description: Learn how to effectively manage Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Our comprehensive guide covers SSO setup, domain verification, and specific instructions for popular providers like AWS, Okta, and Microsoft Azure. Streamline user access and enhance security with Expensify's SAML-based SSO integration. +--- +# Overview +This article provides a comprehensive guide on managing Single Sign-On (SSO) and user authentication in Expensify alongside your preferred SSO provider. Expensify uses SAML to enable and manage SSO between Expensify and your SSO provider. + +# How to Use SSO in Expensify +Before setting up Single Sign-On with Expensify you will need to make sure your domain has been verified. Once the domain is verified, you can access the SSO settings by navigating to Settings > Domains > [Domain Name] > SAML. +On this page, you can: +- Get Expensify's Service Provider MetaData. You will need to give this to your identity provider. +- Enter your Identity Provider MetaData. Please contact your SAML SSO provider if you are unsure how to get this. +- Choose whether you want to make SAML SSO required for login. If you choose this option, members will only be able to log in to Expensify via SAML SSO. +Instructions for setting up Expensify for specific SSO providers can be found below. If you do not see your provider listed below, please contact them and request instructions. +- [Amazon Web Services (AWS SSO)](https://static.global.sso.amazonaws.com/app-202a715cb67cddd9/instructions/index.htm) +- [Bitium](https://support.bitium.com/administration/saml-expensify/) +- [Google SAML](https://support.google.com/a/answer/7371682) (for GSuite, not Google SSO) +- [Microsoft Azure Active Directory](https://azure.microsoft.com/en-us/documentation/articles/active-directory-saas-expensify-tutorial/) +- [Okta](https://saml-doc.okta.com/SAML_Docs/How-to-Configure-SAML-2.0-for-Expensify.html) +- [OneLogin](https://onelogin.service-now.com/support?id=kb_article&sys_id=e44c9e52db187410fe39dde7489619ba) +- [Oracle Identity Cloud Service](https://docs.oracle.com/en/cloud/paas/identity-cloud/idcsc/expensify.html#Expensify) +- [SAASPASS](https://saaspass.com/saaspass/expensify-two-factor-authentication-2fa-single-sign-on-sso-saml.html) +- Microsoft Active Directory Federation Services (see instructions in the FAQ section below) + +When SSO is enabled, employees will be prompted to sign in through Single Sign-On when using their company email (private domain email) and also a public email (e.g. gmail.com) linked as a secondary login. + +## How can I update the Microsoft Azure SSO Certificate? +Expensify's SAML configuration doesn't support multiple active certificates. This means that if you create the new certification ahead of time without first removing the old one, the respective IdP will include two unique x509 certificates instead of one and the connection will break. Should you need to access Expensify, switching back to the old certificate will continue to allow access while that certificate is still valid. + +To transfer from one Microsoft Azure certificate to another, please follow the below steps: +1. In Azure Directory , create your new certificate. +2. In Azure Director, remove the old, expiring certificate. +3. In Azure Directory, activate the remaining certificate, and get a new IdP for Expensify from it. +4. In Expensify, replace the previous IdP with the new IdP. +5. Log in via SSO. If login continues to fails, write into Concierge for assistance. + +## How can I enable deactivating users with the Okta SSO integration? +Companies using Okta can deactivate users in Expensify using the Okta SCIM API. This means that when a user is deactivated in Okta their access to Expensify will expire and they will be logged out of both the web and mobile apps. Deactivating a user through Okta will not close their account in Expensify, if you are offboarding this employee, you will still want to close the account. You will need have a verified domain and SAML fully setup before completing setting up the deactivation feature. + +To enable deactivating users in Okta, follow these steps: +1. In Expensify, head to *Settings > Domains > _[Domain Name]_ > SAML* +2. Ensure that the toggle is set to Enabled for *SAML Login* and *Required for login* +3. In Okta, go to *Admin > Applications > Add Application* +4. Search for Expensify and click on Add. +5. On the next screen, enter your company domain (e.g. yourcompany.com). +6. In the tab Sign-On Options, click *Next* (leaving default settings). +7. In the tab Assign to People, click *Next* and then click Done. +8. Next, in Okta, go to *Admin > Applications > Expensify > Sign On > View Setup Instructions* and follow the steps listed. +9. Then, go to *Directory > Profile Editor > Okta user > Profile* +10. Click the information bubble to the right of the *First name* and *Last name* attributes +11. Uncheck *Yes* under *Attribute required* field and press *Save Attribute*. +12. Email concierge@expensify.com providing your domain and request that Okta SCIM be enabled. You will receive a response when this step has been completed. +13. In Expensify, go to *Domains > _[Domain Name]_ > SAML > Show Token* and copy the Okta SCIM Token you received. +14. In Okta, go to *Admin > Applications > Expensify > Provisioning > API Integration > Configure API Integration* +15. Select Enable API Integration and paste the Okta SCIM Token in API Token field and then click Save. +15. Go to To App, click Edit Provisioning Users, select Enable Deactivate Users and then Save. (You may also need to set up the Expensify Attribute Mappings if you have not previously in steps 9-11). + +Successful activation of this function will be indicated by the green Push User Deactivation icon being enabled at the top of the app page. + +## How can I set up SAML authentication with Microsoft ADFS? +Before getting started, you will need to have a verified domain and Control plan in order to set up SSO with Microsoft ADFS. + +To enable SSO with Microsoft ADFS follow these steps: +1. Open the ADFS management console, and click the *Add Relying Party Trust* link on the right. +2. Check the option to *Import data about the relying party from a file*, then click the *Browse* button. You will input the XML file of Expensify’s metadata which can be found on the Expensify SAML setup page. +3. The metadata file will provide the critical information that ADFS needs to set up the trust. In ADFS, give it a name, and click Next. +4. Select the option to permit all users, then click Next. +5. The next step will give you an overview of what is being configured. Click Next. +6. The new trust is now created. Highlight the trust, then click *Edit claim rules* on the right. +7. Click *Add a Rule*. +8. The default option should be *Send LDAP Attributes as Claims*. Click Next. +9. Depending upon how your Active Directory is set up, you may or may not have a useful email address associated with each user, or you may have a policy to use the UPN as the user attribute for authentication. If so, using the UPN user attribute may be appropriate for you. If not, you can use the emailaddress attribute. +10. Give the rule a name like *Get email address from AD*. Choose Active Directory as the attribute store from the dropdown list. Choose your source user attribute to pass to Expensify that has users’ email address info in it, usually either *E-Mail-Address* or *User-Principal-Name*. Select the outgoing claim type as β€œE-Mail Address”. Click OK. +11. Add another rule; this time, we want to *Transform an Incoming Claim*. Click Next. +12. Name the rule *Send email address*. The Incoming claim type should be *E-Mail Address*. The outgoing claim type should be *Name ID*, and the outgoing name ID format should be *Email*. Click OK. +13. You should now have two claim rules. + +Assuming you’ve also set up Expensify SAML configuration with your metadata, SAML logins on Expensify.com should now work. For reference, ADFS’ default metadata path is: https://yourservicename.yourdomainname.com/FederationMetadata/2007-06/FederationMetadata.xml. + +# FAQ +## What should I do if I’m getting an error when trying to set up SSO? +You can double check your configuration data for errors using samltool.com. If you’re still having issues, you can reach out to your Account Manager or contact Concierge for assistance. + +## What is the EntityID for Expensify? +The entityID for Expensify is https://expensify.com. Remember not to copy and paste any extra slashes or spaces. If you've enabled the Multi-Domain support (see below) then your entityID will be https://expensify.com/mydomainname.com. + +## Can you have multiple domains with only one entityID? +Yes. Please send a message to Concierge or your account manager and we will enable the ability to use the same entityID with multiple domains. + 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/Grab.md b/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md similarity index 67% rename from docs/articles/expensify-classic/integrations/travel-integrations/Grab.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/Grab.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.md similarity index 100% rename from docs/articles/new-expensify/integrations/accounting-integrations/Xero rename to docs/articles/new-expensify/integrations/accounting-integrations/Xero.md 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/Auto-Reconciliation_Image2.png b/docs/assets/images/Auto-Reconciliation_Image2.png new file mode 100644 index 000000000000..5c7ed2d6b7ea Binary files /dev/null and b/docs/assets/images/Auto-Reconciliation_Image2.png differ diff --git a/docs/assets/images/Auto-Reconciliaton_Image1.png b/docs/assets/images/Auto-Reconciliaton_Image1.png new file mode 100644 index 000000000000..9fcb7e316aaf Binary files /dev/null and b/docs/assets/images/Auto-Reconciliaton_Image1.png differ diff --git a/docs/assets/images/ExpensifyHelp_AssignCardBtn.png b/docs/assets/images/ExpensifyHelp_AssignCardBtn.png new file mode 100644 index 000000000000..d9c6e919abcd Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_AssignCardBtn.png differ diff --git a/docs/assets/images/ExpensifyHelp_AssignCardForm.png b/docs/assets/images/ExpensifyHelp_AssignCardForm.png new file mode 100644 index 000000000000..f8c3ab5a6346 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_AssignCardForm.png differ diff --git a/docs/assets/images/ExpensifyHelp_AssignedCard.png b/docs/assets/images/ExpensifyHelp_AssignedCard.png new file mode 100644 index 000000000000..26f96ca07748 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_AssignedCard.png differ diff --git a/docs/assets/images/ExpensifyHelp_CreateExpense.png b/docs/assets/images/ExpensifyHelp_CreateExpense.png new file mode 100644 index 000000000000..bed2d508dfd7 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_CreateExpense.png differ diff --git a/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png b/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png new file mode 100644 index 000000000000..aebee5d1a86e Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_CreateExpense_Mobile.png differ diff --git a/docs/assets/images/ExpensifyHelp_DomainCards.png b/docs/assets/images/ExpensifyHelp_DomainCards.png new file mode 100644 index 000000000000..f4c4cb0688d5 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_DomainCards.png differ diff --git a/docs/assets/images/ExpensifyHelp_DomainCardsList.png b/docs/assets/images/ExpensifyHelp_DomainCardsList.png new file mode 100644 index 000000000000..e1336bc20416 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_DomainCardsList.png differ diff --git a/docs/assets/images/ExpensifyHelp_ExpenseRules_01.png b/docs/assets/images/ExpensifyHelp_ExpenseRules_01.png new file mode 100644 index 000000000000..7a6c3c1b3a13 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ExpenseRules_01.png differ diff --git a/docs/assets/images/ExpensifyHelp_ExpenseRules_02.png b/docs/assets/images/ExpensifyHelp_ExpenseRules_02.png new file mode 100644 index 000000000000..28c6a7689b77 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ExpenseRules_02.png differ diff --git a/docs/assets/images/ExpensifyHelp_ExpenseRules_03.png b/docs/assets/images/ExpensifyHelp_ExpenseRules_03.png new file mode 100644 index 000000000000..90c9855c0c49 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ExpenseRules_03.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistance.png b/docs/assets/images/ExpensifyHelp_ManualDistance.png new file mode 100644 index 000000000000..607025ed1765 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistance.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png b/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png new file mode 100644 index 000000000000..2bc61196531a Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistanceConfirm.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png b/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png new file mode 100644 index 000000000000..78f2a722a7ca Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistanceMap.png differ diff --git a/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png b/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png new file mode 100644 index 000000000000..327f5de00129 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_ManualDistance_Mobile.png differ diff --git a/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png b/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png new file mode 100644 index 000000000000..519f541b85c9 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Odometer_Mobile.png differ diff --git a/docs/assets/images/ExpensifyHelp_UnassignCard-1.png b/docs/assets/images/ExpensifyHelp_UnassignCard-1.png new file mode 100644 index 000000000000..5fa344fed9cb Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_UnassignCard-1.png differ diff --git a/docs/assets/images/ExpensifyHelp_UnassignCard.png b/docs/assets/images/ExpensifyHelp_UnassignCard.png new file mode 100644 index 000000000000..add6a4e3a057 Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_UnassignCard.png differ 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 9e6296400568..8eed7d03e73f 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.3.81 + 1.3.87 CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +40,7 @@ CFBundleVersion - 1.3.81.4 + 1.3.87.1 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 5dc727d452d5..57b623864549 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.3.81 + 1.3.87 CFBundleSignature ???? CFBundleVersion - 1.3.81.4 + 1.3.87.1 diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a4a8089c9c05..cb120bca2b88 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -251,9 +251,9 @@ PODS: - nanopb/encode (= 2.30908.0) - nanopb/decode (2.30908.0) - nanopb/encode (2.30908.0) - - Onfido (27.4.0) - - onfido-react-native-sdk (7.4.0): - - Onfido (= 27.4.0) + - Onfido (28.3.0) + - onfido-react-native-sdk (8.3.0): + - Onfido (~> 28.3.0) - React - OpenSSL-Universal (1.1.1100) - Plaid (4.1.0) @@ -722,7 +722,7 @@ PODS: - React-Core - RNCAsyncStorage (1.17.11): - React-Core - - RNCClipboard (1.5.1): + - RNCClipboard (1.12.1): - React-Core - RNCPicker (2.4.4): - React-Core @@ -819,7 +819,7 @@ PODS: - SDWebImage/Core (~> 5.10) - SocketRocket (0.6.1) - Turf (2.6.1) - - VisionCamera (2.15.4): + - VisionCamera (2.16.2): - React - React-callinvoker - React-Core @@ -915,7 +915,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - "RNAppleAuthentication (from `../node_modules/@invertase/react-native-apple-authentication`)" - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" - - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)" + - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)" - "RNCPicker (from `../node_modules/@react-native-picker/picker`)" - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)" - RNDeviceInfo (from `../node_modules/react-native-device-info`) @@ -1115,7 +1115,7 @@ EXTERNAL SOURCES: RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" RNCClipboard: - :path: "../node_modules/@react-native-community/clipboard" + :path: "../node_modules/@react-native-clipboard/clipboard" RNCPicker: :path: "../node_modules/@react-native-picker/picker" RNDateTimePicker: @@ -1204,8 +1204,8 @@ SPEC CHECKSUMS: MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209 MapboxMobileEvents: de50b3a4de180dd129c326e09cd12c8adaaa46d6 nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96 - Onfido: e36f284b865adcf99d9c905590a64ac09d4a576b - onfido-react-native-sdk: 4ecde1a97435dcff9f00a878e3f8d1eb14fabbdc + Onfido: c7d010d9793790d44a07799d9be25aa8e3814ee7 + onfido-react-native-sdk: b346a620af5669f9fecb6dc3052314a35a94ad9f OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2 PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef @@ -1263,7 +1263,7 @@ SPEC CHECKSUMS: ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d RNAppleAuthentication: 0571c08da8c327ae2afc0261b48b4a515b0286a6 RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 - RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495 + RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1 RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888 RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140 RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7 @@ -1287,7 +1287,7 @@ SPEC CHECKSUMS: SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 Turf: 469ce2c3d22e5e8e4818d5a3b254699a5c89efa4 - VisionCamera: d3ec8883417a6a4a0e3a6ba37d81d22db7611601 + VisionCamera: 95f969b8950b411285579d633a1014782fe0e634 Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/jest/setup.js b/jest/setup.js index f03c53540359..4def7d1efad5 100644 --- a/jest/setup.js +++ b/jest/setup.js @@ -1,6 +1,7 @@ import 'setimmediate'; import 'react-native-gesture-handler/jestSetup'; import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils'; +import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock'; import setupMockImages from './setupMockImages'; setupMockImages(); @@ -10,6 +11,10 @@ reanimatedJestUtils.setUpTests(); // https://reactnavigation.org/docs/testing/#mocking-native-modules jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); +// Clipboard requires mocking as NativeEmitter will be undefined with jest-runner. +// https://github.com/react-native-clipboard/clipboard#mocking-clipboard +jest.mock('@react-native-clipboard/clipboard', () => mockClipboard); + // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest. // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project, // and we only want to mock the storage layer, not the whole Onyx module. diff --git a/package-lock.json b/package-lock.json index 6eb71d25914b..95c25f602e30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.3.81-4", + "version": "1.3.87-1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.3.81-4", + "version": "1.3.87-1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -22,10 +22,10 @@ "@kie/act-js": "^2.0.1", "@kie/mock-github": "^1.0.0", "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52", - "@onfido/react-native-sdk": "7.4.0", + "@onfido/react-native-sdk": "8.3.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -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", @@ -94,7 +93,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "1.0.98", + "react-native-onyx": "1.0.100", "react-native-pager-view": "^6.2.0", "react-native-pdf": "^6.7.1", "react-native-performance": "^5.1.0", @@ -111,13 +110,14 @@ "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", "react-native-view-shot": "^3.6.0", - "react-native-vision-camera": "^2.15.4", + "react-native-vision-camera": "^2.16.2", "react-native-web-linear-gradient": "^1.1.2", "react-native-web-lottie": "^1.4.4", "react-native-webview": "^11.17.2", "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", @@ -137,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", @@ -170,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", @@ -221,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", @@ -2538,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", @@ -2622,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" @@ -2758,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" @@ -2776,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" @@ -2855,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": { @@ -5459,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", @@ -5479,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", @@ -5494,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", @@ -5515,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" } @@ -5524,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", @@ -5540,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", @@ -5554,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" } @@ -5563,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" } @@ -5571,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", @@ -5951,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", @@ -5965,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" @@ -5975,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", @@ -6106,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", @@ -6383,10 +6372,9 @@ } }, "node_modules/@onfido/react-native-sdk": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-7.4.0.tgz", - "integrity": "sha512-qeeaXLxVXz+J0lrqMwQGP52fXhCnTmEAC5K8jZe8YTqst2s1FZZGKkd1bxTloHG5hBBTa39SwWVUKmgPUm+Ssw==", - "license": "MIT", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-8.3.0.tgz", + "integrity": "sha512-nnhuvezd35v08WXUTQlX+gr4pbnNnwNV5KscC/jJrfjGikNUJnhnAHYxfnfJccTn44qUC6vRaKWq2GfpMUnqNA==", "peerDependencies": { "react": ">=17.0.0", "react-native": ">=0.68.2 <1.0.x" @@ -7008,6 +6996,15 @@ "react-native": ">=0.59" } }, + "node_modules/@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "peerDependencies": { + "react": ">=16.0", + "react-native": ">=0.57.0" + } + }, "node_modules/@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -8624,16 +8621,6 @@ "node": ">= 4.0.0" } }, - "node_modules/@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.0", - "react-native": ">=0.57.0" - } - }, "node_modules/@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", @@ -19889,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": { @@ -21214,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" } @@ -21845,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": { @@ -23288,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", @@ -23303,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" }, @@ -23315,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" @@ -23398,7 +23380,6 @@ }, "node_modules/body-parser": { "version": "1.20.0", - "dev": true, "license": "MIT", "dependencies": { "bytes": "3.1.2", @@ -23423,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" @@ -23433,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" @@ -23443,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" @@ -23456,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": { @@ -24532,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" @@ -24961,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" } @@ -25404,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" @@ -25417,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", @@ -25436,7 +25409,6 @@ }, "node_modules/content-type": { "version": "1.0.4", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -25451,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" @@ -25461,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": { @@ -30219,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", @@ -30316,7 +30286,6 @@ }, "node_modules/express": { "version": "4.18.1", - "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", @@ -30359,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" @@ -30369,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", @@ -30578,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", @@ -30663,7 +30628,6 @@ }, "node_modules/fastq": { "version": "1.13.0", - "dev": true, "license": "ISC", "dependencies": { "reusify": "^1.0.4" @@ -30897,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", @@ -30916,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" @@ -30926,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": { @@ -31113,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", @@ -31374,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": { @@ -31451,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" @@ -31716,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" @@ -33536,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" @@ -33861,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" @@ -33937,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" @@ -37364,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": { @@ -38284,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" @@ -38880,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" @@ -39120,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": { @@ -39156,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" @@ -39166,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" @@ -41063,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" }, @@ -41114,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", @@ -41211,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" @@ -41447,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", @@ -41677,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" } @@ -42889,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": { @@ -43606,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" } @@ -43634,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", @@ -43922,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" }, @@ -43983,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", @@ -44065,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", @@ -44081,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" @@ -44091,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" @@ -44692,9 +44628,9 @@ } }, "node_modules/react-native-onyx": { - "version": "1.0.98", - "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.98.tgz", - "integrity": "sha512-2wJNmZVBJs2Y0p1G/es4tQZnplJR8rOyVbHv9KZaq/SXluLUnIovttf1MMhVXidDLT+gcE+u20Mck/Gpb8bY0w==", + "version": "1.0.100", + "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.100.tgz", + "integrity": "sha512-m4bOF/uOtYpfL83fqoWhw7TYV4oKGXt0sfGoel/fhaT1HzXKheXc//ibt/G3VrTCf5nmRv7bXgsXkWjUYLH3UQ==", "dependencies": { "ascii-table": "0.0.9", "fast-equals": "^4.0.3", @@ -44984,9 +44920,9 @@ } }, "node_modules/react-native-vision-camera": { - "version": "2.15.4", - "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.15.4.tgz", - "integrity": "sha512-SJXSWH1pu4V3Kj4UuX/vSgOxc9d5wb5+nHqBHd+5iUtVyVLEp0F6Jbbaha7tDoU+kUBwonhlwr2o8oV6NZ7Ibg==", + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.16.2.tgz", + "integrity": "sha512-QIpG33l3QB0AkTfX/ccRknwNRu1APNUkokVKF1lpRO2+tBnkXnGL0UapgXg5u9KIONZtrpupeDeO+J5B2TeQVw==", "peerDependencies": { "react": "*", "react-native": "*" @@ -45943,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" } @@ -46190,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": { @@ -47098,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", @@ -47193,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", @@ -47928,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", @@ -49132,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" } @@ -49471,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", @@ -49488,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" } @@ -50320,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", @@ -50392,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" @@ -53267,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" @@ -54804,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": { @@ -54872,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" @@ -54974,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" @@ -54992,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" @@ -55052,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" } }, @@ -56878,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", @@ -56894,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", @@ -56909,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", @@ -56926,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==" } } }, @@ -56935,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", @@ -56951,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", @@ -56961,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==" } } }, @@ -56970,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" } @@ -56978,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", @@ -57261,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" @@ -57270,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" @@ -57389,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", @@ -57609,9 +57530,9 @@ } }, "@onfido/react-native-sdk": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-7.4.0.tgz", - "integrity": "sha512-qeeaXLxVXz+J0lrqMwQGP52fXhCnTmEAC5K8jZe8YTqst2s1FZZGKkd1bxTloHG5hBBTa39SwWVUKmgPUm+Ssw==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@onfido/react-native-sdk/-/react-native-sdk-8.3.0.tgz", + "integrity": "sha512-nnhuvezd35v08WXUTQlX+gr4pbnNnwNV5KscC/jJrfjGikNUJnhnAHYxfnfJccTn44qUC6vRaKWq2GfpMUnqNA==", "requires": {} }, "@pkgjs/parseargs": { @@ -57942,6 +57863,12 @@ "integrity": "sha512-SMEhc+2hQWubwzxR6Zac0CmrJ2rdoHHBo0ibG2iNMsxR0dnU5AdRGnYF/tyK9i20/i7ZNxn+qsEJ69shpkd6gg==", "requires": {} }, + "@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "requires": {} + }, "@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -59162,12 +59089,6 @@ "joi": "^17.2.1" } }, - "@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "requires": {} - }, "@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", @@ -67334,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": { @@ -68303,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", @@ -68782,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", @@ -69839,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", @@ -69850,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" @@ -69930,7 +69846,6 @@ }, "body-parser": { "version": "1.20.0", - "dev": true, "requires": { "bytes": "3.1.2", "content-type": "~1.0.4", @@ -69949,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" } @@ -69965,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" } @@ -69973,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==" } } }, @@ -70741,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", @@ -71043,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", @@ -71378,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" }, @@ -71386,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", @@ -71403,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", @@ -74870,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", @@ -74944,7 +74848,6 @@ }, "express": { "version": "4.18.1", - "dev": true, "requires": { "accepts": "~1.3.8", "array-flatten": "1.1.1", @@ -74983,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" } @@ -74991,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==" } } }, @@ -75138,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", @@ -75197,7 +75096,6 @@ }, "fastq": { "version": "1.13.0", - "dev": true, "requires": { "reusify": "^1.0.4" } @@ -75376,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", @@ -75391,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" } @@ -75399,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==" } } }, @@ -75538,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", @@ -75705,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": { @@ -75758,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" } @@ -75941,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" } @@ -77231,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", @@ -77427,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", @@ -77475,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" } @@ -79886,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", @@ -80555,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": { @@ -81010,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", @@ -81186,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", @@ -81213,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", @@ -82583,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" } @@ -82619,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" @@ -82693,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", @@ -82866,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", @@ -83042,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", @@ -83889,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", @@ -84395,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", @@ -84416,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" @@ -84633,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" } @@ -84674,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", @@ -84725,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", @@ -84736,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" } @@ -85254,9 +85124,9 @@ } }, "react-native-onyx": { - "version": "1.0.98", - "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.98.tgz", - "integrity": "sha512-2wJNmZVBJs2Y0p1G/es4tQZnplJR8rOyVbHv9KZaq/SXluLUnIovttf1MMhVXidDLT+gcE+u20Mck/Gpb8bY0w==", + "version": "1.0.100", + "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.100.tgz", + "integrity": "sha512-m4bOF/uOtYpfL83fqoWhw7TYV4oKGXt0sfGoel/fhaT1HzXKheXc//ibt/G3VrTCf5nmRv7bXgsXkWjUYLH3UQ==", "requires": { "ascii-table": "0.0.9", "fast-equals": "^4.0.3", @@ -85432,9 +85302,9 @@ "requires": {} }, "react-native-vision-camera": { - "version": "2.15.4", - "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.15.4.tgz", - "integrity": "sha512-SJXSWH1pu4V3Kj4UuX/vSgOxc9d5wb5+nHqBHd+5iUtVyVLEp0F6Jbbaha7tDoU+kUBwonhlwr2o8oV6NZ7Ibg==", + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/react-native-vision-camera/-/react-native-vision-camera-2.16.2.tgz", + "integrity": "sha512-QIpG33l3QB0AkTfX/ccRknwNRu1APNUkokVKF1lpRO2+tBnkXnGL0UapgXg5u9KIONZtrpupeDeO+J5B2TeQVw==", "requires": {} }, "react-native-web": { @@ -85994,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", @@ -86181,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": { @@ -86850,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", @@ -86916,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" } @@ -87462,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", @@ -88613,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", @@ -88626,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==" } } }, @@ -89224,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" @@ -89274,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": { @@ -91302,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 e0f296fd3eb7..1db859827c41 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.3.81-4", + "version": "1.3.87-1", "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.", @@ -8,9 +8,11 @@ "private": true, "scripts": { "configure-mapbox": "scripts/setup-mapbox-sdk-walkthrough.sh", + "setupNewDotWebForEmulators": "scripts/setup-newdot-web-emulators.sh", + "startAndroidEmulator": "scripts/start-android.sh", "postinstall": "scripts/postInstall.sh", "clean": "npx react-native clean-project-auto", - "android": "scripts/set-pusher-suffix.sh && npx react-native run-android --variant=developmentDebug --appId=com.expensify.chat.dev", + "android": "scripts/set-pusher-suffix.sh && npx react-native run-android --mode=developmentDebug --appId=com.expensify.chat.dev", "ios": "scripts/set-pusher-suffix.sh && npx react-native run-ios --list-devices --configuration=\"DebugDevelopment\" --scheme=\"New Expensify Dev\"", "pod-install": "cd ios && bundle exec pod install", "ipad": "concurrently \"npx react-native run-ios --simulator=\\\"iPad Pro (12.9-inch) (6th generation)\\\" --configuration=\\\"DebugDevelopment\\\" --scheme=\\\"New Expensify Dev\\\"\"", @@ -65,10 +67,10 @@ "@kie/act-js": "^2.0.1", "@kie/mock-github": "^1.0.0", "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52", - "@onfido/react-native-sdk": "7.4.0", + "@onfido/react-native-sdk": "8.3.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -86,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", @@ -94,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", @@ -137,7 +138,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "1.0.98", + "react-native-onyx": "1.0.100", "react-native-pager-view": "^6.2.0", "react-native-pdf": "^6.7.1", "react-native-performance": "^5.1.0", @@ -154,13 +155,14 @@ "react-native-tab-view": "^3.5.2", "react-native-url-polyfill": "^2.0.0", "react-native-view-shot": "^3.6.0", - "react-native-vision-camera": "^2.15.4", + "react-native-vision-camera": "^2.16.2", "react-native-web-linear-gradient": "^1.1.2", "react-native-web-lottie": "^1.4.4", "react-native-webview": "^11.17.2", "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", @@ -180,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", @@ -213,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", @@ -264,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/patches/@onfido+react-native-sdk+7.4.0.patch b/patches/@onfido+react-native-sdk+8.3.0.patch similarity index 90% rename from patches/@onfido+react-native-sdk+7.4.0.patch rename to patches/@onfido+react-native-sdk+8.3.0.patch index b84225c0f667..12245cb58355 100644 --- a/patches/@onfido+react-native-sdk+7.4.0.patch +++ b/patches/@onfido+react-native-sdk+8.3.0.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/@onfido/react-native-sdk/android/build.gradle b/node_modules/@onfido/react-native-sdk/android/build.gradle -index 781925b..9e16430 100644 +index b4c7106..d5083d3 100644 --- a/node_modules/@onfido/react-native-sdk/android/build.gradle +++ b/node_modules/@onfido/react-native-sdk/android/build.gradle -@@ -134,9 +134,9 @@ afterEvaluate { project -> +@@ -135,9 +135,9 @@ afterEvaluate { project -> group = "Reporting" description = "Generate Jacoco coverage reports after running tests." reports { diff --git a/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch b/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch deleted file mode 100644 index e6ed0d4f79a3..000000000000 --- a/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -index 33658e7..31c20c0 100644 ---- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -+++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -@@ -381,6 +381,17 @@ public class ReactScrollViewManager extends ViewGroupManager - view.setScrollEventThrottle(scrollEventThrottle); - } - -+ @ReactProp(name = "verticalScrollbarPosition") -+ public void setVerticalScrollbarPosition(ReactScrollView view, String position) { -+ if ("right".equals(position)) { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_RIGHT); -+ } else if ("left".equals(position)) { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_LEFT); -+ } else { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_DEFAULT); -+ } -+ } -+ - @ReactProp(name = "isInvertedVirtualizedList") - public void setIsInvertedVirtualizedList(ReactScrollView view, boolean applyFix) { - // Usually when inverting the scroll view we are using scaleY: -1 on the list diff --git a/patches/react-native-vision-camera+2.15.4.patch b/patches/react-native-vision-camera+2.15.4.patch deleted file mode 100644 index 0c80d6a8ce55..000000000000 --- a/patches/react-native-vision-camera+2.15.4.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm -index 3841b20..687ea94 100644 ---- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm -+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorRuntimeManager.mm -@@ -19,6 +19,8 @@ - #import - #import - -+#define VISION_CAMERA_DISABLE_FRAME_PROCESSORS 1 -+ - #ifndef VISION_CAMERA_DISABLE_FRAME_PROCESSORS - #if __has_include() - #if __has_include() diff --git a/scripts/select-device.sh b/scripts/select-device.sh new file mode 100755 index 000000000000..a53a6034d3da --- /dev/null +++ b/scripts/select-device.sh @@ -0,0 +1,133 @@ +#!/bin/bash + +# Utility script for iOS and Android Emulators +# ============================================ +# +# Purpose: +# -------- +# This script helps to start and kill iOS simulators and Android emulators instances. +# +# How this script helps: +# ---------------------- +# This script streamlines the process of starting and killing on both android and ios +# platforms. + +# Use functions and variables from the utils script +source scripts/shellUtils.sh + +select_device_ios() +{ + # shellcheck disable=SC2124 + IFS="$@" arr=$(xcrun xctrace list devices | grep -E "iPhone|iPad") + + # Create arrays to store device names and identifiers + device_names=() + device_identifiers=() + + # Parse the device list and populate the arrays + while IFS= read -r line; do + if [[ $line =~ ^(.*)\ \((.*)\)\ \((.*)\)$ ]]; then + device="${BASH_REMATCH[1]}" + version="${BASH_REMATCH[2]}" + identifier="${BASH_REMATCH[3]}" + device_identifiers+=("$identifier") + device_names+=("$device Version: $version") + else + info "Input does not match the expected pattern." + echo "$line" + fi + done <<< "$arr" + if [ ${#device_names[@]} -eq 0 ]; then + error "No devices detected, please create one." + exit 1 + fi + if [ ${#device_names[@]} -eq 1 ]; then + device_identifier="${device_identifiers[0]}" + success "Single device detected, launching ${device_names[0]}" + open -a Simulator --args -CurrentDeviceUDID "$device_identifier" + return + fi + info "Multiple devices detected, please select one from the list." + PS3='Please enter your choice: ' + select device_name in "${device_names[@]}"; do + if [ -n "$device_name" ]; then + selected_index=$((REPLY - 1)) + device_name_for_display="${device_names[$selected_index]}" + device_identifier="${device_identifiers[$selected_index]}" + break + else + echo "Invalid selection. Please choose a device." + fi + done + success "Launching $device_name_for_display" + open -a Simulator --args -CurrentDeviceUDID "$device_identifier" +} + +kill_all_emulators_ios() { + # kill all the emulators + killall Simulator +} + +restart_adb_server() { + info "Restarting adb ..." + adb kill-server + sleep 2 + adb start-server + sleep 2 + info "Restarting adb done" +} + +ensure_device_available() { + # Must turn off exit on error temporarily + set +e + if adb devices | grep -q offline; then + restart_adb_server + if adb devices | grep -q offline; then + error "Device remains 'offline'. Please investigate!" + exit 1 + fi + fi + set -e +} + +select_device_android() +{ + # shellcheck disable=SC2124 + IFS="$@" arr=$(emulator -list-avds) + + # Create arrays to store device names + device_names=() + + # Parse the device list and populate the arrays + while IFS= read -r line; do + device_names+=("$line") + done <<< "$arr" + if [ ${#device_names[@]} -eq 0 ]; then + error "No devices detected, please create one." + exit 1 + fi + if [ ${#device_names[@]} -eq 1 ]; then + device_identifier="${device_names[0]}" + success "Single device detected, launching $device_identifier" + emulator -avd "$device_identifier" -writable-system > /dev/null 2>&1 & + return + fi + info "Multiple devices detected, please select one from the list." + PS3='Please enter your choice: ' + select device_name in "${device_names[@]}"; do + if [ -n "$device_name" ]; then + selected_index=$((REPLY - 1)) + device_identifier="${device_names[$selected_index]}" + break + else + echo "Invalid selection. Please choose a device." + fi + done + success "Launching $device_identifier" + emulator -avd "$device_identifier" -writable-system > /dev/null 2>&1 & +} + +kill_all_emulators_android() { + # kill all the emulators + adb devices | grep emulator | cut -f1 | while read -r line; do adb -s "$line" emu kill; done +} diff --git a/scripts/setup-mapbox-sdk-walkthrough.sh b/scripts/setup-mapbox-sdk-walkthrough.sh index 20b79641fc42..46b970f2d462 100755 --- a/scripts/setup-mapbox-sdk-walkthrough.sh +++ b/scripts/setup-mapbox-sdk-walkthrough.sh @@ -21,7 +21,7 @@ # To configure Mapbox, invoke this script by running the following command from the project's root directory: # npm run configure-mapbox -# Use functions and varaibles from the utils script +# Use functions and variables from the utils script source scripts/shellUtils.sh # Intro message diff --git a/scripts/setup-mapbox-sdk.sh b/scripts/setup-mapbox-sdk.sh index 06fd75fba299..fa37cc2fbbad 100755 --- a/scripts/setup-mapbox-sdk.sh +++ b/scripts/setup-mapbox-sdk.sh @@ -36,7 +36,7 @@ # To run this script, pass the secret Mapbox access token as a command-line argument: # ./scriptname.sh YOUR_MAPBOX_ACCESS_TOKEN -# Use functions and varaibles from the utils script +# Use functions and variables from the utils script source scripts/shellUtils.sh NETRC_PATH="$HOME/.netrc" diff --git a/scripts/setup-newdot-web-emulators.sh b/scripts/setup-newdot-web-emulators.sh new file mode 100755 index 000000000000..a0ed1422d2a9 --- /dev/null +++ b/scripts/setup-newdot-web-emulators.sh @@ -0,0 +1,113 @@ +#!/bin/bash + +# NewDot Web Configuration Script for iOS and Android Emulators +# ============================================================= +# +# Purpose: +# -------- +# This script configures Configure iOS simulators and Android emulators to connect to +# new.expensify.com.dev over https for local development. +# +# Background: +# ----------- +# We plan to change the URL to serve the App on the development environment from +# localhost:8082 to new.expensify.com.dev. This can be accomplished by adding a new entry +# to the laptop's hosts file along with changes made in the PR. +# However, we're not sure how we can access the App on Safari or Chrome on iOS or Android +# simulators. +# +# How this script helps: +# ---------------------- +# This script streamlines the process of adding the certificates to both android and +# ios platforms. +# +# Usage: +# ------ +# To run this script, pass the platform on which you want to run as a command-line +# argument which can be the following: +# 1. ios +# 2. android +# 3. all (default) +# ./setup-newdot-web-emulators.sh platform + +# Use functions and variables from the utils script +source scripts/shellUtils.sh + +# Use functions to select and open the emulator for iOS and Android +source scripts/select-device.sh + +if [ $# -eq 0 ]; then + platform="all" +else + platform=$1 +fi + +setup_ios() +{ + select_device_ios + sleep 30 + info "Installing certificates on iOS simulator" + xcrun simctl keychain booted add-root-cert "$(mkcert -CAROOT)/rootCA.pem" + kill_all_emulators_ios +} + +setup_android_path_1() +{ + adb root || { + error "Failed to restart adb as root" + info "You may want to check https://stackoverflow.com/a/45668555" + exit 1 + } + sleep 2 + adb remount + adb push /etc/hosts /system/etc/hosts + kill_all_emulators_android +} + +setup_android_path_2() +{ + adb root || { + error "Failed to restart adb as root" + info "You may want to check https://stackoverflow.com/a/45668555" + exit 1 + } + sleep 2 + adb disable-verity + adb reboot + sleep 30 + ensure_device_available + adb root + sleep 2 + adb remount + adb push /etc/hosts /system/etc/hosts + kill_all_emulators_android +} + +setup_android() +{ + select_device_android + sleep 30 + ensure_device_available + info "Installing certificates on Android emulator" + setup_android_path_1 || { + info "Looks like the system partition is read-only" + info "Trying another method to install the certificates" + setup_android_path_2 + } +} + +if [ "$platform" = "ios" ] || [ "$platform" = "all" ]; then + setup_ios || { + error "Failed to setup iOS simulator" + exit 1 + } +fi + +if [ "$platform" = "android" ] || [ "$platform" = "all" ]; then + setup_android || { + error "Failed to setup Android emulator" + exit 1 + } +fi + +success "Done!" diff --git a/scripts/shellUtils.sh b/scripts/shellUtils.sh index 4c9e2febc34d..848e6d238254 100644 --- a/scripts/shellUtils.sh +++ b/scripts/shellUtils.sh @@ -1,10 +1,29 @@ #!/bin/bash -declare -r GREEN=$'\e[1;32m' -declare -r RED=$'\e[1;31m' -declare -r BLUE=$'\e[1;34m' -declare -r TITLE=$'\e[1;4;34m' -declare -r RESET=$'\e[0m' +# Check if GREEN has already been defined +if [ -z "${GREEN+x}" ]; then + declare -r GREEN=$'\e[1;32m' +fi + +# Check if RED has already been defined +if [ -z "${RED+x}" ]; then + declare -r RED=$'\e[1;31m' +fi + +# Check if BLUE has already been defined +if [ -z "${BLUE+x}" ]; then + declare -r BLUE=$'\e[1;34m' +fi + +# Check if TITLE has already been defined +if [ -z "${TITLE+x}" ]; then + declare -r TITLE=$'\e[1;4;34m' +fi + +# Check if RESET has already been defined +if [ -z "${RESET+x}" ]; then + declare -r RESET=$'\e[0m' +fi function success { echo "πŸŽ‰ $GREEN$1$RESET" diff --git a/scripts/start-android.sh b/scripts/start-android.sh new file mode 100644 index 000000000000..b9a4e08a07a2 --- /dev/null +++ b/scripts/start-android.sh @@ -0,0 +1,11 @@ +#!/bin/bash + +# Script for starting android emulator correctly + +# Use functions to select and open the emulator for iOS and Android +source scripts/select-device.sh + +select_device_android +sleep 30 +ensure_device_available +adb reverse tcp:8082 tcp:8082 \ No newline at end of file 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 cbfe07ae5aab..bc74cbe77717 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -141,6 +141,7 @@ const CONST = { MONTH_DAY_ABBR_FORMAT: 'MMM d', SHORT_DATE_FORMAT: 'MM-dd', MONTH_DAY_YEAR_ABBR_FORMAT: 'MMM d, yyyy', + MONTH_DAY_YEAR_FORMAT: 'MMMM d, yyyy', FNS_TIMEZONE_FORMAT_STRING: "yyyy-MM-dd'T'HH:mm:ssXXX", FNS_DB_FORMAT_STRING: 'yyyy-MM-dd HH:mm:ss.SSS', LONG_DATE_FORMAT_WITH_WEEKDAY: 'eeee, MMMM d, yyyy', @@ -242,6 +243,7 @@ const CONST = { CUSTOM_STATUS: 'customStatus', NEW_DOT_CATEGORIES: 'newDotCategories', NEW_DOT_TAGS: 'newDotTags', + NEW_DOT_SAML: 'newDotSAML', }, BUTTON_STATES: { DEFAULT: 'default', @@ -304,7 +306,7 @@ const CONST = { }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, }, - SHORTCUT_MODAL: { + SHORTCUTS: { descriptionKey: 'openShortcutDialog', shortcutKey: 'J', modifiers: ['CTRL'], @@ -471,6 +473,7 @@ const CONST = { HAND_ICON_HEIGHT: 152, HAND_ICON_WIDTH: 200, SHUTTER_SIZE: 90, + MAX_REPORT_PREVIEW_RECEIPTS: 3, }, REPORT: { MAXIMUM_PARTICIPANTS: 8, @@ -514,6 +517,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', @@ -548,6 +553,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: { @@ -667,6 +677,7 @@ const CONST = { TOOLTIP_SENSE: 1000, TRIE_INITIALIZATION: 'trie_initialization', COMMENT_LENGTH_DEBOUNCE_TIME: 500, + SEARCH_FOR_REPORTS_DEBOUNCE_TIME: 300, }, PRIORITY_MODE: { GSD: 'gsd', @@ -903,6 +914,8 @@ const CONST = { HERE_TEXT: '@here', }, COMPOSER_MAX_HEIGHT: 125, + CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 15, + CHAT_FOOTER_SECONDARY_ROW_PADDING: 5, CHAT_FOOTER_MIN_HEIGHT: 65, CHAT_SKELETON_VIEW: { AVERAGE_ROW_HEIGHT: 80, @@ -1011,8 +1024,10 @@ const CONST = { ACTIVATE: 'ActivateStep', }, TIER_NAME: { + PLATINUM: 'PLATINUM', GOLD: 'GOLD', SILVER: 'SILVER', + BRONZE: 'BRONZE', }, WEB_MESSAGE_TYPE: { STATEMENT: 'STATEMENT_NAVIGATE', @@ -1091,7 +1106,7 @@ const CONST = { EXPENSIFY: 'Expensify', VBBA: 'ACH', }, - MONEY_REQUEST_TYPE: { + TYPE: { SEND: 'send', SPLIT: 'split', REQUEST: 'request', @@ -1233,12 +1248,14 @@ const CONST = { NONE: 'none', }, STATE: { + STATE_NOT_ISSUED: 2, OPEN: 3, NOT_ACTIVATED: 4, STATE_DEACTIVATED: 5, CLOSED: 6, STATE_SUSPENDED: 7, }, + ACTIVE_STATES: [2, 3, 4, 7], }, AVATAR_ROW_SIZE: { DEFAULT: 4, @@ -1266,6 +1283,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, @@ -1284,18 +1303,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+@)/, @@ -1405,6 +1432,7 @@ const CONST = { REPORT_DETAILS_MENU_ITEM: { SHARE_CODE: 'shareCode', MEMBERS: 'member', + INVITE: 'invite', SETTINGS: 'settings', LEAVE_ROOM: 'leaveRoom', WELCOME_MESSAGE: 'welcomeMessage', @@ -1475,6 +1503,15 @@ const CONST = { MAKE_REQUEST_WITH_SIDE_EFFECTS: 'makeRequestWithSideEffects', }, + ERECEIPT_COLORS: { + YELLOW: 'Yellow', + ICE: 'Ice', + BLUE: 'Blue', + GREEN: 'Green', + TANGERINE: 'Tangerine', + PINK: 'Pink', + }, + MAP_PADDING: 50, MAP_MARKER_SIZE: 20, @@ -2648,8 +2685,8 @@ const CONST = { ATTACHMENT: 'common.attachment', }, TEACHERS_UNITE: { - PUBLIC_ROOM_ID: '207591744844000', - POLICY_ID: 'ABD1345ED7293535', + PUBLIC_ROOM_ID: '7470147100835202', + POLICY_ID: 'B795B6319125BDF2', POLICY_NAME: 'Expensify.org / Teachers Unite!', PUBLIC_ROOM_NAME: '#teachers-unite', }, @@ -2704,6 +2741,7 @@ const CONST = { DEMO_PAGES: { SAASTR: 'SaaStrDemoSetup', SBE: 'SbeDemoSetup', + MONEY2020: 'Money2020DemoSetup', }, MAPBOX: { diff --git a/src/Expensify.js b/src/Expensify.js index 9e6ae1ff27b4..6010824cf275 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -26,10 +26,10 @@ import Navigation from './libs/Navigation/Navigation'; import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu'; import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu'; import SplashScreenHider from './components/SplashScreenHider'; -import KeyboardShortcutsModal from './components/KeyboardShortcutsModal'; 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 @@ -168,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); }); @@ -194,7 +196,6 @@ function Expensify(props) { {shouldInit && ( <> - diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index e01319cc2f66..ad8b60700e39 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'; @@ -26,6 +27,9 @@ const ONYXKEYS = { /** Boolean flag set whenever the sidebar has loaded */ IS_SIDEBAR_LOADED: 'isSidebarLoaded', + /** Boolean flag set whenever we are searching for reports in the server */ + IS_SEARCHING_FOR_REPORTS: 'isSearchingForReports', + /** Note: These are Persisted Requests - not all requests in the main queue as the key name might lead one to believe */ PERSISTED_REQUESTS: 'networkRequestQueue', @@ -47,6 +51,9 @@ const ONYXKEYS = { // draft status CUSTOM_STATUS_DRAFT: 'customStatusDraft', + // keep edit message focus state + INPUT_FOCUSED: 'inputFocused', + /** Contains all the personalDetails the user has access to, keyed by accountID */ PERSONAL_DETAILS_LIST: 'personalDetailsList', @@ -169,9 +176,6 @@ const ONYXKEYS = { /** Is report data loading? */ IS_LOADING_APP: 'isLoadingApp', - /** Is Keyboard shortcuts modal open? */ - IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen', - /** Is the test tools modal open? */ IS_TEST_TOOLS_MODAL_OPEN: 'isTestToolsModalOpen', @@ -232,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_', @@ -252,6 +258,7 @@ const ONYXKEYS = { REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_', SECURITY_GROUP: 'securityGroup_', TRANSACTION: 'transactions_', + SPLIT_TRANSACTION_DRAFT: 'splitTransactionDraft_', PRIVATE_NOTES_DRAFT: 'privateNotesDraft_', // Manual request tab selector @@ -292,6 +299,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; @@ -314,6 +322,7 @@ type OnyxValues = { [ONYXKEYS.MODAL]: OnyxTypes.Modal; [ONYXKEYS.NETWORK]: OnyxTypes.Network; [ONYXKEYS.CUSTOM_STATUS_DRAFT]: OnyxTypes.CustomStatusDraft; + [ONYXKEYS.INPUT_FOCUSED]: boolean; [ONYXKEYS.PERSONAL_DETAILS_LIST]: Record; [ONYXKEYS.PRIVATE_PERSONAL_DETAILS]: OnyxTypes.PrivatePersonalDetails; [ONYXKEYS.TASK]: OnyxTypes.Task; @@ -353,7 +362,6 @@ type OnyxValues = { [ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID]: string; [ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: boolean; [ONYXKEYS.IS_LOADING_REPORT_DATA]: boolean; - [ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN]: boolean; [ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN]: boolean; [ONYXKEYS.WALLET_TRANSFER]: OnyxTypes.WalletTransfer; [ONYXKEYS.LAST_ACCESSED_WORKSPACE_POLICY_ID]: string; @@ -382,7 +390,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; @@ -423,7 +431,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 2069f773075b..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', @@ -112,6 +122,8 @@ export default { SETTINGS_STATUS: 'settings/profile/status', SETTINGS_STATUS_SET: 'settings/profile/status/set', + KEYBOARD_SHORTCUTS: 'keyboard-shortcuts', + NEW: 'new', NEW_CHAT: 'new/chat', NEW_ROOM: 'new/room', @@ -169,6 +181,14 @@ export default { route: 'r/:reportID/split/:reportActionID', getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}`, }, + EDIT_SPLIT_BILL: { + route: `r/:reportID/split/:reportActionID/edit/:field`, + getRoute: (reportID: string, reportActionID: string, field: ValueOf) => `r/${reportID}/split/${reportActionID}/edit/${field}`, + }, + EDIT_SPLIT_BILL_CURRENCY: { + route: 'r/:reportID/split/:reportActionID/edit/currency', + getRoute: (reportID: string, reportActionID: string, currency: string, backTo: string) => `r/${reportID}/split/${reportActionID}/edit/currency?currency=${currency}&backTo=${backTo}`, + }, TASK_TITLE: { route: 'r/:reportID/title', getRoute: (reportID: string) => `r/${reportID}/title`, @@ -193,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}`, @@ -276,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: { @@ -294,6 +327,10 @@ export default { route: 'workspace/:policyID/settings', getRoute: (policyID: string) => `workspace/${policyID}/settings`, }, + WORKSPACE_SETTINGS_CURRENCY: { + route: 'workspace/:policyID/settings/currency', + getRoute: (policyID: string) => `workspace/${policyID}/settings/currency`, + }, WORKSPACE_CARD: { route: 'workspace/:policyID/card', getRoute: (policyID: string) => `workspace/${policyID}/card`, @@ -323,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 0346168f0407..8ef787edec2e 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -17,6 +17,8 @@ export default { WORKSPACES: 'Settings_Workspaces', SECURITY: 'Settings_Security', STATUS: 'Settings_Status', + WALLET: 'Settings_Wallet', + WALLET_DOMAIN_CARDS: 'Settings_Wallet_DomainCards', }, SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', @@ -24,6 +26,7 @@ export default { SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', + SAML_SIGN_IN: 'SAMLSignIn', // Iframe screens from olddot HOME_OLDDOT: 'Home_OLDDOT', 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/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js index 034d14eb508b..43933210dc0b 100644 --- a/src/components/AnonymousReportFooter.js +++ b/src/components/AnonymousReportFooter.js @@ -6,9 +6,9 @@ import AvatarWithDisplayName from './AvatarWithDisplayName'; import ExpensifyWordmark from './ExpensifyWordmark'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import reportPropTypes from '../pages/reportPropTypes'; -import CONST from '../CONST'; import styles from '../styles/styles'; import * as Session from '../libs/actions/Session'; +import participantPropTypes from './participantPropTypes'; const propTypes = { /** The report currently being looked at */ @@ -16,12 +16,16 @@ const propTypes = { isSmallSizeLayout: PropTypes.bool, + /** Personal details of all the users */ + personalDetails: PropTypes.objectOf(participantPropTypes), + ...withLocalizePropTypes, }; const defaultProps = { report: {}, isSmallSizeLayout: false, + personalDetails: {}, }; function AnonymousReportFooter(props) { @@ -30,8 +34,9 @@ function AnonymousReportFooter(props) { diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 1cc12fca24ae..61b138747950 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -31,11 +31,14 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import useNativeDriver from '../libs/useNativeDriver'; -import * as ReportUtils from '../libs/ReportUtils'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; +import * as ReportUtils from '../libs/ReportUtils'; import ONYXKEYS from '../ONYXKEYS'; import * as Policy from '../libs/actions/Policy'; import useNetwork from '../hooks/useNetwork'; +import * as IOU from '../libs/actions/IOU'; +import transactionPropTypes from './transactionPropTypes'; +import * as TransactionUtils from '../libs/TransactionUtils'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -79,6 +82,9 @@ const propTypes = { /** The report that has this attachment */ report: reportPropTypes, + /** The transaction associated with the receipt attachment, if any */ + transaction: transactionPropTypes, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -97,6 +103,7 @@ const defaultProps = { allowDownload: false, headerTitle: null, report: {}, + transaction: {}, onModalShow: () => {}, onModalHide: () => {}, onCarouselAttachmentChange: () => {}, @@ -108,6 +115,7 @@ function AttachmentModal(props) { const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); + const [isDeleteReceiptConfirmModalVisible, setIsDeleteReceiptConfirmModalVisible] = useState(false); const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired); const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(''); @@ -205,12 +213,22 @@ function AttachmentModal(props) { }, [isModalOpen, isConfirmButtonDisabled, props.onConfirm, file, source]); /** - * Close the confirm modal. + * Close the confirm modals. */ const closeConfirmModal = useCallback(() => { setIsAttachmentInvalid(false); + setIsDeleteReceiptConfirmModalVisible(false); }, []); + /** + * Detach the receipt and close the modal. + */ + const deleteAndCloseModal = useCallback(() => { + IOU.detachReceipt(props.transaction.transactionID, props.report.reportID); + setIsDeleteReceiptConfirmModalVisible(false); + Navigation.dismissModal(props.report.reportID); + }, [props.transaction, props.report]); + /** * @param {Object} _file * @returns {Boolean} @@ -358,9 +376,18 @@ function AttachmentModal(props) { text: props.translate('common.download'), onSelected: () => downloadAttachment(source), }); + if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction) && !isSettled) { + menuItems.push({ + icon: Expensicons.Trashcan, + text: props.translate('receipt.deleteReceipt'), + onSelected: () => { + setIsDeleteReceiptConfirmModalVisible(true); + }, + }); + } return menuItems; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy]); + }, [isAttachmentReceipt, props.parentReport, props.parentReportActions, props.policy, props.transaction]); return ( <> @@ -442,17 +469,30 @@ function AttachmentModal(props) { )} )} + {isAttachmentReceipt && ( + + )} - - + {!isAttachmentReceipt && ( + + )} {props.children && props.children({ @@ -470,6 +510,16 @@ export default compose( withWindowDimensions, withLocalize, withOnyx({ + transaction: { + key: ({report}) => { + if (!report) { + return undefined; + } + const parentReportAction = ReportActionsUtils.getReportAction(report.parentReportID, report.parentReportActionID); + const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], 0); + return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`; + }, + }, parentReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`, }, diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js index 8b1bb54da920..063314a4268c 100644 --- a/src/components/AttachmentPicker/index.native.js +++ b/src/components/AttachmentPicker/index.native.js @@ -1,10 +1,12 @@ import _ from 'underscore'; import React, {useState, useRef, useCallback, useMemo} from 'react'; -import {View, Alert, Linking} from 'react-native'; +import PropTypes from 'prop-types'; +import {View, Alert} from 'react-native'; import RNDocumentPicker from 'react-native-document-picker'; import RNFetchBlob from 'react-native-blob-util'; +import lodashCompact from 'lodash/compact'; import {launchImageLibrary} from 'react-native-image-picker'; -import {propTypes as basePropTypes, defaultProps} from './attachmentPickerPropTypes'; +import {propTypes as basePropTypes, defaultProps as baseDefaultProps} from './attachmentPickerPropTypes'; import CONST from '../../CONST'; import * as FileUtils from '../../libs/fileDownload/FileUtils'; import * as Expensicons from '../Icon/Expensicons'; @@ -19,6 +21,14 @@ import useArrowKeyFocusManager from '../../hooks/useArrowKeyFocusManager'; const propTypes = { ...basePropTypes, + + /** If this value is true, then we exclude Camera option. */ + shouldHideCameraOption: PropTypes.bool, +}; + +const defaultProps = { + ...baseDefaultProps, + shouldHideCameraOption: false, }; /** @@ -90,7 +100,7 @@ const getDataForUpload = (fileData) => { * @param {propTypes} props * @returns {JSX.Element} */ -function AttachmentPicker({type, children}) { +function AttachmentPicker({type, children, shouldHideCameraOption}) { const [isVisible, setIsVisible] = useState(false); const completeAttachmentSelection = useRef(); @@ -100,27 +110,6 @@ function AttachmentPicker({type, children}) { const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); - /** - * Inform the users when they need to grant camera access and guide them to settings - */ - const showPermissionsAlert = useCallback(() => { - Alert.alert( - translate('attachmentPicker.cameraPermissionRequired'), - translate('attachmentPicker.expensifyDoesntHaveAccessToCamera'), - [ - { - text: translate('common.cancel'), - style: 'cancel', - }, - { - text: translate('common.settings'), - onPress: () => Linking.openSettings(), - }, - ], - {cancelable: false}, - ); - }, [translate]); - /** * A generic handling when we don't know the exact reason for an error */ @@ -145,7 +134,7 @@ function AttachmentPicker({type, children}) { if (response.errorCode) { switch (response.errorCode) { case 'permission': - showPermissionsAlert(); + FileUtils.showCameraPermissionsAlert(); return resolve(); default: showGeneralAlert(); @@ -158,7 +147,7 @@ function AttachmentPicker({type, children}) { return resolve(response.assets); }); }), - [showGeneralAlert, showPermissionsAlert, type], + [showGeneralAlert, type], ); /** @@ -180,8 +169,8 @@ function AttachmentPicker({type, children}) { ); const menuItemData = useMemo(() => { - const data = [ - { + const data = lodashCompact([ + !shouldHideCameraOption && { icon: Expensicons.Camera, textTranslationKey: 'attachmentPicker.takePhoto', pickAttachment: () => showImagePicker(launchCamera), @@ -191,18 +180,15 @@ function AttachmentPicker({type, children}) { textTranslationKey: 'attachmentPicker.chooseFromGallery', pickAttachment: () => showImagePicker(launchImageLibrary), }, - ]; - - if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE) { - data.push({ + type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE && { icon: Expensicons.Paperclip, textTranslationKey: 'attachmentPicker.chooseDocument', pickAttachment: showDocumentPicker, - }); - } + }, + ]); return data; - }, [showDocumentPicker, showImagePicker, type]); + }, [showDocumentPicker, showImagePicker, type, shouldHideCameraOption]); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItemData.length - 1, isActive: isVisible}); diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js index 3aeef8482e2d..096b6d60d428 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js @@ -10,6 +10,7 @@ import Button from '../../Button'; import AttachmentView from '../AttachmentView'; import SafeAreaConsumer from '../../SafeAreaConsumer'; import ReportAttachmentsContext from '../../../pages/home/report/ReportAttachmentsContext'; +import * as AttachmentsPropTypes from '../propTypes'; const propTypes = { /** Attachment required information such as the source and file name */ @@ -20,8 +21,8 @@ const propTypes = { /** Whether source URL requires authentication */ isAuthTokenRequired: PropTypes.bool, - /** The source (URL) of the attachment */ - source: PropTypes.string, + /** URL to full-sized attachment or SVG function */ + source: AttachmentsPropTypes.attachmentSourcePropType.isRequired, /** Additional information about the attachment file */ file: PropTypes.shape({ @@ -31,6 +32,9 @@ const propTypes = { /** Whether the attachment has been flagged */ hasBeenFlagged: PropTypes.bool, + + /** The id of the transaction related to the attachment */ + transactionID: PropTypes.string, }).isRequired, /** Whether the attachment is currently being viewed in the carousel */ @@ -97,6 +101,7 @@ function CarouselItem({item, isFocused, onPress}) { isFocused={isFocused} onPress={onPress} isUsedInCarousel + transactionID={item.transactionID} /> diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js index 8a623a44709f..8420a9e7831b 100644 --- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js +++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js @@ -53,10 +53,11 @@ function extractAttachmentsFromReport(report, reportActions) { const transaction = TransactionUtils.getTransaction(transactionID); if (TransactionUtils.hasReceipt(transaction)) { - const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction.receipt.source, transaction.filename); + const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction); + const isLocalFile = typeof image === 'string' && (image.startsWith('blob:') || image.startsWith('file:')); attachments.unshift({ source: tryResolveUrlFromApiRoot(image), - isAuthTokenRequired: true, + isAuthTokenRequired: !isLocalFile, file: {name: transaction.filename}, isReceipt: true, transactionID, diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index bd12020341be..bcea50698b3b 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -104,10 +104,10 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, * @returns {JSX.Element} */ const renderItem = useCallback( - ({item}) => ( + ({item, isActive}) => ( setShouldShowArrows(!shouldShowArrows)} /> ), diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index f4d3036ff802..34ff45160ce9 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -1,8 +1,9 @@ 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'; +import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; import Icon from '../../Icon'; import * as Expensicons from '../../Icon/Expensicons'; @@ -17,7 +18,11 @@ import AttachmentViewPdf from './AttachmentViewPdf'; import addEncryptedAuthTokenToURL from '../../../libs/addEncryptedAuthTokenToURL'; import * as StyleUtils from '../../../styles/StyleUtils'; import {attachmentViewPropTypes, attachmentViewDefaultProps} from './propTypes'; +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, @@ -38,6 +43,10 @@ const propTypes = { /** Denotes whether it is a workspace avatar or not */ isWorkspaceAvatar: PropTypes.bool, + + /** The id of the transaction related to the attachment */ + // eslint-disable-next-line react/no-unused-prop-types + transactionID: PropTypes.string, }; const defaultProps = { @@ -47,6 +56,7 @@ const defaultProps = { onToggleKeyboard: () => {}, containerStyles: [], isWorkspaceAvatar: false, + transactionID: '', }; function AttachmentView({ @@ -64,9 +74,9 @@ function AttachmentView({ isFocused, isWorkspaceAvatar, fallbackSource, + transaction, }) { const [loadComplete, setLoadComplete] = useState(false); - const [imageError, setImageError] = useState(false); useNetwork({onReconnect: () => setImageError(false)}); @@ -92,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')))) { @@ -113,6 +136,10 @@ function AttachmentView({ ); } + if (TransactionUtils.isDistanceRequest(transaction)) { + return ; + } + // For this check we use both source and file.name since temporary file source is a blob // both PDFs and images will appear as images when pasted into the text field. // We also check for numeric source since this is how static images (used for preview) are represented in RN. @@ -168,4 +195,12 @@ AttachmentView.propTypes = propTypes; AttachmentView.defaultProps = defaultProps; AttachmentView.displayName = 'AttachmentView'; -export default compose(memo, withLocalize)(AttachmentView); +export default compose( + memo, + withLocalize, + withOnyx({ + transaction: { + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + }, + }), +)(AttachmentView); 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 new file mode 100644 index 000000000000..f866de0b885e --- /dev/null +++ b/src/components/DistanceEReceipt.js @@ -0,0 +1,121 @@ +import React, {useMemo} from 'react'; +import {View, ScrollView} from 'react-native'; +import lodashGet from 'lodash/get'; +import _ from 'underscore'; +import Text from './Text'; +import styles from '../styles/styles'; +import transactionPropTypes from './transactionPropTypes'; +import * as ReceiptUtils from '../libs/ReceiptUtils'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as CurrencyUtils from '../libs/CurrencyUtils'; +import * as TransactionUtils from '../libs/TransactionUtils'; +import tryResolveUrlFromApiRoot from '../libs/tryResolveUrlFromApiRoot'; +import ThumbnailImage from './ThumbnailImage'; +import useLocalize from '../hooks/useLocalize'; +import Icon from './Icon'; +import themeColors from '../styles/themes/default'; +import * as Expensicons from './Icon/Expensicons'; +import EReceiptBackground from '../../assets/images/eReceipt_background.svg'; +import useNetwork from '../hooks/useNetwork'; +import PendingMapView from './MapView/PendingMapView'; + +const propTypes = { + /** The transaction for the distance request */ + transaction: transactionPropTypes, +}; + +const defaultProps = { + transaction: {}, +}; + +function DistanceEReceipt({transaction}) { + const {translate} = useLocalize(); + const {isOffline} = useNetwork(); + 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 || ''); + const waypoints = lodashGet(transaction, 'comment.waypoints', {}); + const sortedWaypoints = useMemo( + () => + // The waypoint keys are sometimes out of order + _.chain(waypoints) + .keys() + .sort((keyA, keyB) => TransactionUtils.getWaypointIndex(keyA) - TransactionUtils.getWaypointIndex(keyB)) + .map((key) => ({[key]: waypoints[key]})) + .reduce((result, obj) => (obj ? _.assign(result, obj) : result), {}) + .value(), + [waypoints], + ); + return ( + + + + + + {isOffline || !thumbnailSource ? ( + + ) : ( + + )} + + + {formattedTransactionAmount} + {transactionMerchant} + + + {_.map(sortedWaypoints, (waypoint, key) => { + const index = TransactionUtils.getWaypointIndex(key); + let descriptionKey = 'distance.waypointDescription.'; + if (index === 0) { + descriptionKey += 'start'; + } else if (index === _.size(waypoints) - 1) { + descriptionKey += 'finish'; + } else { + descriptionKey += 'stop'; + } + return ( + + {translate(descriptionKey)} + {waypoint.address || ''} + + ); + })} + + {translate('common.date')} + {transactionDate} + + + + + {translate('eReceipt.guaranteed')} + + + + + ); +} + +export default DistanceEReceipt; +DistanceEReceipt.displayName = 'DistanceEReceipt'; +DistanceEReceipt.propTypes = propTypes; +DistanceEReceipt.defaultProps = defaultProps; diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js index 574dda3d0dd6..d8214774d2c1 100644 --- a/src/components/DistanceRequest/DistanceRequestFooter.js +++ b/src/components/DistanceRequest/DistanceRequestFooter.js @@ -10,8 +10,6 @@ import ONYXKEYS from '../../ONYXKEYS'; import styles from '../../styles/styles'; import useNetwork from '../../hooks/useNetwork'; import useLocalize from '../../hooks/useLocalize'; -import DotIndicatorMessage from '../DotIndicatorMessage'; -import * as ErrorUtils from '../../libs/ErrorUtils'; import theme from '../../styles/themes/default'; import * as TransactionUtils from '../../libs/TransactionUtils'; import Button from '../Button'; @@ -32,9 +30,6 @@ const propTypes = { }), ), - /** Whether there is an error with the route */ - hasRouteError: PropTypes.bool, - /** Function to call when the user wants to add a new waypoint */ navigateToWaypointEditPage: PropTypes.func.isRequired, @@ -53,13 +48,12 @@ const propTypes = { const defaultProps = { waypoints: {}, - hasRouteError: false, mapboxAccessToken: { token: '', }, transaction: {}, }; -function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, hasRouteError, navigateToWaypointEditPage}) { +function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}) { const {isOffline} = useNetwork(); const {translate} = useLocalize(); @@ -103,13 +97,6 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, hasRo return ( <> - {hasRouteError && ( - - )} ) : ( )} diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js index 822567182d4a..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'; @@ -18,6 +17,7 @@ import usePrevious from '../../hooks/usePrevious'; import * as Transaction from '../../libs/actions/Transaction'; import * as TransactionUtils from '../../libs/TransactionUtils'; import * as IOUUtils from '../../libs/IOUUtils'; +import * as ErrorUtils from '../../libs/ErrorUtils'; import Button from '../Button'; import DraggableList from '../DraggableList'; import transactionPropTypes from '../transactionPropTypes'; @@ -26,6 +26,7 @@ import FullPageNotFoundView from '../BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '../HeaderWithBackButton'; import DistanceRequestFooter from './DistanceRequestFooter'; import DistanceRequestRenderItem from './DistanceRequestRenderItem'; +import DotIndicatorMessage from '../DotIndicatorMessage'; const propTypes = { /** The transactionID of this request */ @@ -68,6 +69,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe const {translate} = useLocalize(); const [optimisticWaypoints, setOptimisticWaypoints] = useState(null); + const [hasError, setHasError] = useState(false); const isEditing = lodashGet(route, 'path', '').includes('address'); const reportID = lodashGet(report, 'reportID', ''); const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]); @@ -101,6 +103,10 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe // Create the initial start and stop waypoints Transaction.createInitialWaypoints(transactionID); + return () => { + // Whenever we reset the transaction, we need to set errors as empty/false. + setHasError(false); + }; }, [transaction, transactionID]); useEffect(() => { @@ -118,6 +124,14 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe scrollViewRef.current.scrollToEnd({animated: true}); }, [numberOfPreviousWaypoints, numberOfWaypoints]); + useEffect(() => { + // Whenever we change waypoints we need to remove the error or it will keep showing the error. + if (_.isEqual(previousWaypoints, waypoints)) { + return; + } + setHasError(false); + }, [waypoints, previousWaypoints]); + const navigateBack = () => { Navigation.goBack(isEditing ? ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID) : ROUTES.HOME); }; @@ -130,6 +144,22 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe Navigation.navigate(isEditingRequest ? ROUTES.MONEY_REQUEST_EDIT_WAYPOINT.getRoute(report.reportID, transactionID, index) : ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', index)); }; + const getError = () => { + // Get route error if available else show the invalid number of waypoints error. + if (hasRouteError) { + return ErrorUtils.getLatestErrorField(transaction, 'route'); + } + + // Initially, both waypoints will be null, and if we give fallback value as empty string that will result in true condition, that's why different default values. + if (_.keys(waypoints).length === 2 && lodashGet(waypoints, 'waypoint0.address', 'address1') === lodashGet(waypoints, 'waypoint1.address', 'address2')) { + return {0: translate('iou.error.duplicateWaypointsErrorMessage')}; + } + + if (_.size(validatedWaypoints) < 2) { + return {0: translate('iou.error.emptyWaypointsErrorMessage')}; + } + }; + const updateWaypoints = useCallback( ({data}) => { if (_.isEqual(waypointsList, data)) { @@ -138,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); @@ -151,6 +180,15 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe [transactionID, waypoints, waypointsList], ); + const submitWaypoints = useCallback(() => { + // If there is any error or loading state, don't let user go to next page. + if (_.size(validatedWaypoints) < 2 || hasRouteError || isLoadingRoute || isLoading) { + setHasError(true); + return; + } + onSubmit(waypoints); + }, [onSubmit, setHasError, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, waypoints]); + const content = ( <> @@ -183,13 +221,20 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe /> + {/* Show error message if there is route error or there are less than 2 routes and user has tried submitting, */} + {((hasError && _.size(validatedWaypoints) < 2) || hasRouteError) && ( + + )} + ); +} + +EReceipt.displayName = 'EReceipt'; +EReceipt.propTypes = propTypes; +EReceipt.defaultProps = defaultProps; + +export default withOnyx({ + transaction: { + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + }, +})(EReceipt); diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js new file mode 100644 index 000000000000..f1bb5b025e2f --- /dev/null +++ b/src/components/EReceiptThumbnail.js @@ -0,0 +1,124 @@ +import React, {useState} from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import ONYXKEYS from '../ONYXKEYS'; +import * as StyleUtils from '../styles/StyleUtils'; +import transactionPropTypes from './transactionPropTypes'; +import styles from '../styles/styles'; +import * as Expensicons from './Icon/Expensicons'; +import * as MCCIcons from './Icon/MCCIcons'; +import Icon from './Icon'; +import * as ReportUtils from '../libs/ReportUtils'; +import variables from '../styles/variables'; +import * as eReceiptBGs from './Icon/EReceiptBGs'; +import Image from './Image'; +import CONST from '../CONST'; + +const propTypes = { + /* TransactionID of the transaction this EReceipt corresponds to */ + // eslint-disable-next-line react/no-unused-prop-types + transactionID: PropTypes.string.isRequired, + + /* Onyx Props */ + transaction: transactionPropTypes, +}; + +const defaultProps = { + transaction: {}, +}; + +const backgroundImages = { + [CONST.ERECEIPT_COLORS.YELLOW]: eReceiptBGs.EReceiptBG_Yellow, + [CONST.ERECEIPT_COLORS.ICE]: eReceiptBGs.EReceiptBG_Ice, + [CONST.ERECEIPT_COLORS.BLUE]: eReceiptBGs.EReceiptBG_Blue, + [CONST.ERECEIPT_COLORS.GREEN]: eReceiptBGs.EReceiptBG_Green, + [CONST.ERECEIPT_COLORS.TANGERINE]: eReceiptBGs.EReceiptBG_Tangerine, + [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink, +}; + +function getBackgroundImage(transaction) { + return backgroundImages[StyleUtils.getEReceiptColorCode(transaction)]; +} + +function EReceiptThumbnail({transaction}) { + // Get receipt colorway, or default to Yellow. + const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + + const [containerWidth, setContainerWidth] = useState(0); + const [containerHeight, setContainerHeight] = useState(0); + + const onContainerLayout = (event) => { + const {width, height} = event.nativeEvent.layout; + setContainerWidth(width); + setContainerHeight(height); + }; + + const {mccGroup: transactionMCCGroup} = ReportUtils.getTransactionDetails(transaction); + const MCCIcon = MCCIcons[`${transactionMCCGroup}`]; + + const isSmall = containerWidth && containerWidth < variables.eReceiptThumbnailSmallBreakpoint; + const isMedium = containerWidth && containerWidth < variables.eReceiptThumbnailMediumBreakpoint; + + let receiptIconWidth = variables.eReceiptIconWidth; + let receiptIconHeight = variables.eReceiptIconHeight; + let receiptMCCSize = variables.eReceiptMCCHeightWidth; + + if (isSmall) { + receiptIconWidth = variables.eReceiptIconWidthSmall; + receiptIconHeight = variables.eReceiptIconHeightSmall; + receiptMCCSize = variables.eReceiptMCCHeightWidthSmall; + } else if (isMedium) { + receiptIconWidth = variables.eReceiptIconWidthMedium; + receiptIconHeight = variables.eReceiptIconHeightMedium; + receiptMCCSize = variables.eReceiptMCCHeightWidthMedium; + } + + return ( + + + + + + {MCCIcon ? ( + + ) : null} + + + + ); +} + +EReceiptThumbnail.displayName = 'EReceiptThumbnail'; +EReceiptThumbnail.propTypes = propTypes; +EReceiptThumbnail.defaultProps = defaultProps; + +export default withOnyx({ + transaction: { + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + }, +})(EReceiptThumbnail); 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..0d7826ff3783 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,57 @@ 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); + const [selectTextOnFocus, setSelectTextOnFocus] = 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 +153,254 @@ 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); + setSelectTextOnFocus(true); + 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])); - }; + const emoji = lodashGet(item, ['types', preferredSkinTone], item.code); + onEmojiSelected(emoji, item); + return; + } - 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; - } + // 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; + } - // 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}); - } - } + // We allow typing in the search box if any key is pressed apart from Arrow keys. + if (searchInputRef.current && !searchInputRef.current.isFocused()) { + setSelectTextOnFocus(false); + searchInputRef.current.focus(); - 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}); - } + // Re-enable selection on the searchInput + setSelectTextOnFocus(true); + } + }, + [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 +409,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 +420,112 @@ 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/Form.js b/src/components/Form.js index 9836bd818536..b4e639dcf964 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -76,6 +76,10 @@ const propTypes = { /** Container styles */ style: stylePropTypes, + /** Submit button container styles */ + // eslint-disable-next-line react/forbid-prop-types + submitButtonStyles: PropTypes.arrayOf(PropTypes.object), + /** Custom content to display in the footer after submit button */ footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), @@ -98,6 +102,7 @@ const defaultProps = { shouldValidateOnBlur: true, footerContent: null, style: [], + submitButtonStyles: [], validate: () => ({}), }; @@ -447,7 +452,7 @@ function Form(props) { focusInput.focus(); } }} - containerStyles={[styles.mh0, styles.mt5, styles.flex1]} + containerStyles={[styles.mh0, styles.mt5, styles.flex1, ...props.submitButtonStyles]} enabledWhenOffline={props.enabledWhenOffline} isSubmitActionDangerous={props.isSubmitActionDangerous} disablePressOnEnter @@ -472,6 +477,7 @@ function Form(props) { props.isSubmitActionDangerous, props.isSubmitButtonVisible, props.submitButtonText, + props.submitButtonStyles, ], ); diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 5261d1258ad0..ada40c24ed89 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -11,6 +11,7 @@ import compose from '../../libs/compose'; import {withNetwork} from '../OnyxProvider'; import stylePropTypes from '../../styles/stylePropTypes'; import networkPropTypes from '../networkPropTypes'; +import CONST from '../../CONST'; const propTypes = { /** A unique Onyx key identifying the form */ @@ -98,19 +99,75 @@ function getInitialValueByType(valueType) { } } -function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) { +function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, onSubmit, ...rest}) { const inputRefs = useRef(null); const touchedInputs = useRef({}); const [inputValues, setInputValues] = useState({}); const [errors, setErrors] = useState({}); + const hasServerError = useMemo(() => Boolean(formState) && !_.isEmpty(formState.errors), [formState]); const onValidate = useCallback( - (values) => { - const validateErrors = validate(values); - setErrors(validateErrors); - return validateErrors; + (values, shouldClearServerError = true) => { + const trimmedStringValues = {}; + _.each(values, (inputValue, inputID) => { + if (_.isString(inputValue)) { + trimmedStringValues[inputID] = inputValue.trim(); + } else { + trimmedStringValues[inputID] = inputValue; + } + }); + + if (shouldClearServerError) { + FormActions.setErrors(formID, null); + } + FormActions.setErrorFields(formID, null); + + const validateErrors = validate(values) || {}; + + // Validate the input for html tags. It should supercede any other error + _.each(trimmedStringValues, (inputValue, inputID) => { + // If the input value is empty OR is non-string, we don't need to validate it for HTML tags + if (!inputValue || !_.isString(inputValue)) { + return; + } + const foundHtmlTagIndex = inputValue.search(CONST.VALIDATE_FOR_HTML_TAG_REGEX); + const leadingSpaceIndex = inputValue.search(CONST.VALIDATE_FOR_LEADINGSPACES_HTML_TAG_REGEX); + + // Return early if there are no HTML characters + if (leadingSpaceIndex === -1 && foundHtmlTagIndex === -1) { + return; + } + + const matchedHtmlTags = inputValue.match(CONST.VALIDATE_FOR_HTML_TAG_REGEX); + let isMatch = _.some(CONST.WHITELISTED_TAGS, (r) => r.test(inputValue)); + // Check for any matches that the original regex (foundHtmlTagIndex) matched + if (matchedHtmlTags) { + // Check if any matched inputs does not match in WHITELISTED_TAGS list and return early if needed. + for (let i = 0; i < matchedHtmlTags.length; i++) { + const htmlTag = matchedHtmlTags[i]; + isMatch = _.some(CONST.WHITELISTED_TAGS, (r) => r.test(htmlTag)); + if (!isMatch) { + break; + } + } + } + // Add a validation error here because it is a string value that contains HTML characters + validateErrors[inputID] = 'common.error.invalidCharacter'; + }); + + if (!_.isObject(validateErrors)) { + throw new Error('Validate callback must return an empty object or an object with shape {inputID: error}'); + } + + const touchedInputErrors = _.pick(validateErrors, (inputValue, inputID) => Boolean(touchedInputs.current[inputID])); + + if (!_.isEqual(errors, touchedInputErrors)) { + setErrors(touchedInputErrors); + } + + return touchedInputErrors; }, - [validate], + [errors, formID, validate], ); /** @@ -186,6 +243,18 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c propsToParse.onTouched(event); } }, + onPress: (event) => { + setTouchedInput(inputID); + if (_.isFunction(propsToParse.onPress)) { + propsToParse.onPress(event); + } + }, + onPressIn: (event) => { + setTouchedInput(inputID); + if (_.isFunction(propsToParse.onPressIn)) { + propsToParse.onPressIn(event); + } + }, onBlur: (event) => { // Only run validation when user proactively blurs the input. if (Visibility.isVisible() && Visibility.hasFocus()) { @@ -195,7 +264,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c setTimeout(() => { setTouchedInput(inputID); if (shouldValidateOnBlur) { - onValidate(inputValues); + onValidate(inputValues, !hasServerError); } }, 200); } @@ -228,7 +297,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c }, }; }, - [errors, formState, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], + [errors, formState, hasServerError, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange], ); const value = useMemo(() => ({registerInput}), [registerInput]); @@ -237,6 +306,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c {/* eslint-disable react/jsx-props-no-spreading */} ); } 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/hoverablePropTypes.js b/src/components/Hoverable/hoverablePropTypes.js index d483a06d6aaf..a3aeaa597d7a 100644 --- a/src/components/Hoverable/hoverablePropTypes.js +++ b/src/components/Hoverable/hoverablePropTypes.js @@ -13,6 +13,12 @@ const propTypes = { /** Function that executes when the mouse leaves the children. */ onHoverOut: PropTypes.func, + /** Direct pass-through of React's onMouseEnter event. */ + onMouseEnter: PropTypes.func, + + /** Direct pass-through of React's onMouseLeave event. */ + onMouseLeave: PropTypes.func, + /** Decides whether to handle the scroll behaviour to show hover once the scroll ends */ shouldHandleScroll: PropTypes.bool, }; diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 38ea64952a2c..2ded0e52e94d 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -1,189 +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) => { - this.setIsHovered(true); - - if (_.isFunction(child.props.onMouseEnter)) { - child.props.onMouseEnter(el); - } - }, - 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/Icon/EReceiptBGs.js b/src/components/Icon/EReceiptBGs.js new file mode 100644 index 000000000000..ff74c0fb83c2 --- /dev/null +++ b/src/components/Icon/EReceiptBGs.js @@ -0,0 +1,8 @@ +import EReceiptBG_Yellow from '../../../assets/images/eReceiptBGs/eReceiptBG_yellow.png'; +import EReceiptBG_Ice from '../../../assets/images/eReceiptBGs/eReceiptBG_navy.png'; +import EReceiptBG_Blue from '../../../assets/images/eReceiptBGs/eReceiptBG_blue.png'; +import EReceiptBG_Green from '../../../assets/images/eReceiptBGs/eReceiptBG_green.png'; +import EReceiptBG_Tangerine from '../../../assets/images/eReceiptBGs/eReceiptBG_tangerine.png'; +import EReceiptBG_Pink from '../../../assets/images/eReceiptBGs/eReceiptBG_pink.png'; + +export {EReceiptBG_Yellow, EReceiptBG_Ice, EReceiptBG_Blue, EReceiptBG_Green, EReceiptBG_Tangerine, EReceiptBG_Pink}; diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 0cd4e80396c9..0e39872a3da6 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -45,6 +45,7 @@ import MoneyBadge from '../../../assets/images/simple-illustrations/simple-illus import TreasureChest from '../../../assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg'; import Hands from '../../../assets/images/product-illustrations/home-illustration-hands.svg'; +import HandEarth from '../../../assets/images/simple-illustrations/simple-illustration__handearth.svg'; export { Abracadabra, @@ -94,4 +95,5 @@ export { TreasureChest, ThumbsUpStars, Hands, + HandEarth, }; diff --git a/src/components/Icon/MCCIcons.js b/src/components/Icon/MCCIcons.js index bd30e426ab31..a704f7d46bc6 100644 --- a/src/components/Icon/MCCIcons.js +++ b/src/components/Icon/MCCIcons.js @@ -1,15 +1,15 @@ -import Airlines from '../../../assets/images/mccGroupIcons/MCC-Airlines.svg'; -import Commuter from '../../../assets/images/mccGroupIcons/MCC-Commuter.svg'; -import Gas from '../../../assets/images/mccGroupIcons/MCC-Gas.svg'; -import Goods from '../../../assets/images/mccGroupIcons/MCC-Goods.svg'; -import Groceries from '../../../assets/images/mccGroupIcons/MCC-Groceries.svg'; -import Hotel from '../../../assets/images/mccGroupIcons/MCC-Hotel.svg'; -import Mail from '../../../assets/images/mccGroupIcons/MCC-Mail.svg'; -import Meals from '../../../assets/images/mccGroupIcons/MCC-Meals.svg'; -import Rental from '../../../assets/images/mccGroupIcons/MCC-RentalCar.svg'; -import Services from '../../../assets/images/mccGroupIcons/MCC-Services.svg'; -import Taxi from '../../../assets/images/mccGroupIcons/MCC-Taxi.svg'; -import Miscellaneous from '../../../assets/images/mccGroupIcons/MCC-Misc.svg'; -import Utilities from '../../../assets/images/mccGroupIcons/MCC-Utilities.svg'; +import Airlines from '../../../assets/images/MCCGroupIcons/MCC-Airlines.svg'; +import Commuter from '../../../assets/images/MCCGroupIcons/MCC-Commuter.svg'; +import Gas from '../../../assets/images/MCCGroupIcons/MCC-Gas.svg'; +import Goods from '../../../assets/images/MCCGroupIcons/MCC-Goods.svg'; +import Groceries from '../../../assets/images/MCCGroupIcons/MCC-Groceries.svg'; +import Hotel from '../../../assets/images/MCCGroupIcons/MCC-Hotel.svg'; +import Mail from '../../../assets/images/MCCGroupIcons/MCC-Mail.svg'; +import Meals from '../../../assets/images/MCCGroupIcons/MCC-Meals.svg'; +import Rental from '../../../assets/images/MCCGroupIcons/MCC-RentalCar.svg'; +import Services from '../../../assets/images/MCCGroupIcons/MCC-Services.svg'; +import Taxi from '../../../assets/images/MCCGroupIcons/MCC-Taxi.svg'; +import Miscellaneous from '../../../assets/images/MCCGroupIcons/MCC-Misc.svg'; +import Utilities from '../../../assets/images/MCCGroupIcons/MCC-Utilities.svg'; export {Airlines, Commuter, Gas, Goods, Groceries, Hotel, Mail, Meals, Rental, Services, Taxi, Miscellaneous, Utilities}; diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 10248697394f..f49214f5de70 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -133,6 +133,7 @@ function BaseInvertedFlatList(props) { // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={shouldMeasureItems ? getItemLayout : undefined} windowSize={15} + inverted /> ); } diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js b/src/components/InvertedFlatList/CellRendererComponent.js similarity index 99% rename from src/components/InvertedFlatList/CellRendererComponent/index.ios.js rename to src/components/InvertedFlatList/CellRendererComponent.js index d6f02de2b942..77397aeb4610 100644 --- a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js +++ b/src/components/InvertedFlatList/CellRendererComponent.js @@ -21,7 +21,6 @@ function CellRendererComponent(props) { {...props} style={[ props.style, - /** * To achieve absolute positioning and handle overflows for list items, * it is necessary to assign zIndex values. In the case of inverted lists, diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.android.js b/src/components/InvertedFlatList/CellRendererComponent/index.android.js deleted file mode 100644 index 78ca24751187..000000000000 --- a/src/components/InvertedFlatList/CellRendererComponent/index.android.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import PropTypes from 'prop-types'; -import styles from '../../../styles/styles'; - -const propTypes = { - /** Position index of the list item in a list view */ - index: PropTypes.number.isRequired, -}; - -function CellRendererComponent(props) { - return ( - - ); -} - -CellRendererComponent.propTypes = propTypes; -CellRendererComponent.displayName = 'CellRendererComponent'; - -export default CellRendererComponent; diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js deleted file mode 100644 index 0ffed10921d8..000000000000 --- a/src/components/InvertedFlatList/index.android.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, {forwardRef} from 'react'; -import {FlatList} from 'react-native'; -import PropTypes from 'prop-types'; -import _ from 'underscore'; -import BaseInvertedFlatList from './BaseInvertedFlatList'; -import styles from '../../styles/styles'; -import stylePropTypes from '../../styles/stylePropTypes'; -import CellRendererComponent from './CellRendererComponent'; - -const propTypes = { - /** Passed via forwardRef so we can access the FlatList ref */ - innerRef: PropTypes.shape({ - current: PropTypes.instanceOf(FlatList), - }).isRequired, - - /** The style of the footer of the list */ - ListFooterComponentStyle: stylePropTypes, -}; - -const defaultProps = { - ListFooterComponentStyle: {}, -}; - -class InvertedFlatList extends React.Component { - constructor(props) { - super(props); - - this.list = undefined; - } - - componentDidMount() { - if (!_.isFunction(this.props.innerRef)) { - // eslint-disable-next-line no-param-reassign - this.props.innerRef.current = this.list; - } else { - this.props.innerRef(this.list); - } - } - - render() { - return ( - (this.list = el)} - // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13 - inverted={false} - style={styles.invert} - ListFooterComponentStyle={[styles.invert, this.props.ListFooterComponentStyle]} - verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position - CellRendererComponent={CellRendererComponent} - /** - * To achieve absolute positioning and handle overflows for list items, the property must be disabled - * for Android native builds. - * Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews - */ - removeClippedSubviews={false} - /> - ); - } -} -InvertedFlatList.propTypes = propTypes; -InvertedFlatList.defaultProps = defaultProps; - -export default forwardRef((props, ref) => ( - -)); diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index d46cd5801605..564db6296c9b 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -114,7 +114,6 @@ function InvertedFlatList(props) { ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} - inverted CellRendererComponent={CellRendererComponent} + /** + * To achieve absolute positioning and handle overflows for list items, the property must be disabled + * for Android native builds. + * Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews + */ + removeClippedSubviews={false} /> )); diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index 1c1552d55844..db3c85ef818c 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'; @@ -123,9 +124,9 @@ 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; } diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js deleted file mode 100644 index 6ca3cce6412c..000000000000 --- a/src/components/KeyboardShortcutsModal.js +++ /dev/null @@ -1,196 +0,0 @@ -import React, {useEffect, useRef, useState} from 'react'; -import PropTypes from 'prop-types'; -import {View, ScrollView} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; -import HeaderWithBackButton from './HeaderWithBackButton'; -import Text from './Text'; -import Modal from './Modal'; -import CONST from '../CONST'; -import styles from '../styles/styles'; -import * as StyleUtils from '../styles/StyleUtils'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import compose from '../libs/compose'; -import KeyboardShortcut from '../libs/KeyboardShortcut'; -import * as KeyboardShortcutsActions from '../libs/actions/KeyboardShortcuts'; -import * as ModalActions from '../libs/actions/Modal'; -import ONYXKEYS from '../ONYXKEYS'; - -const propTypes = { - /** prop to set shortcuts modal visibility */ - isShortcutsModalOpen: PropTypes.bool, - - /** prop to fetch screen width */ - ...windowDimensionsPropTypes, - - /** props to fetch translation functions */ - ...withLocalizePropTypes, -}; - -const defaultProps = { - isShortcutsModalOpen: false, -}; - -const closeShortcutEscapeModalConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; -const closeShortcutEnterModalConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; -const arrowUpConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_UP; -const arrowDownConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN; -const openShortcutModalConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUT_MODAL; - -function KeyboardShortcutsModal({isShortcutsModalOpen = false, isSmallScreenWidth, translate}) { - const subscribedOpenModalShortcuts = useRef([]); - const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE; - const [shortcuts, setShortcurts] = useState([]); - - /* - * Subscribe shortcuts that only are used when the modal is open - */ - const subscribeOpenModalShortcuts = () => { - // Allow closing the modal with the both Enter and Escape keys - // Both callbacks have the lowest priority (0) to ensure that they are called before any other callbacks - // and configured so that event propagation is stopped after the callback is called (only when the modal is open) - - subscribedOpenModalShortcuts.current = [ - KeyboardShortcut.subscribe( - closeShortcutEscapeModalConfig.shortcutKey, - () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, - closeShortcutEscapeModalConfig.descriptionKey, - closeShortcutEscapeModalConfig.modifiers, - true, - true, - ), - - KeyboardShortcut.subscribe( - closeShortcutEnterModalConfig.shortcutKey, - () => { - ModalActions.close(); - KeyboardShortcutsActions.hideKeyboardShortcutModal(); - }, - closeShortcutEnterModalConfig.descriptionKey, - closeShortcutEnterModalConfig.modifiers, - true, - ), - - // Intercept arrow up and down keys to prevent scrolling ArrowKeyFocusManager while this modal is open - KeyboardShortcut.subscribe(arrowUpConfig.shortcutKey, () => {}, arrowUpConfig.descriptionKey, arrowUpConfig.modifiers, true), - KeyboardShortcut.subscribe(arrowDownConfig.shortcutKey, () => {}, arrowDownConfig.descriptionKey, arrowDownConfig.modifiers, true), - ]; - setShortcurts(KeyboardShortcut.getDocumentedShortcuts()); - }; - - /* - * Unsubscribe all shortcuts that were subscribed when the modal opened - */ - const unsubscribeOpenModalShortcuts = () => { - _.each(subscribedOpenModalShortcuts.current, (unsubscribe) => unsubscribe()); - subscribedOpenModalShortcuts.current = []; - }; - - /** - * Render single row for the Keyboard shortcuts with description - * @param {Object} shortcut - * @param {Boolean} isFirstRow - * @returns {*} - */ - const renderRow = (shortcut, isFirstRow) => ( - - - {shortcut.displayName} - - - {translate(`keyboardShortcutModal.shortcuts.${shortcut.descriptionKey}`)} - - - ); - - useEffect(() => { - const unsubscribeShortcutModal = KeyboardShortcut.subscribe( - openShortcutModalConfig.shortcutKey, - () => { - if (isShortcutsModalOpen) { - return; - } - - ModalActions.close(); - KeyboardShortcutsActions.showKeyboardShortcutModal(); - }, - openShortcutModalConfig.descriptionKey, - openShortcutModalConfig.modifiers, - true, - ); - - if (isShortcutsModalOpen) { - // The modal started open, which can happen if you reload the page when the modal is open. - subscribeOpenModalShortcuts(); - } - - return () => { - if (unsubscribeShortcutModal) { - unsubscribeShortcutModal(); - } - unsubscribeOpenModalShortcuts(); - }; - // We only want this to run on mount - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useEffect(() => { - if (isShortcutsModalOpen) { - subscribeOpenModalShortcuts(); - } else { - // Modal is closing, remove keyboard shortcuts - unsubscribeOpenModalShortcuts(); - } - // subscribeOpenModalShortcuts and unsubscribeOpenModalShortcuts functions are not added as dependencies since they don't change between renders - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isShortcutsModalOpen]); - - return ( - - - - {translate('keyboardShortcutModal.subtitle')} - - - {_.map(shortcuts, (shortcut, index) => { - const isFirstRow = index === 0; - return renderRow(shortcut, isFirstRow); - })} - - - - - ); -} - -KeyboardShortcutsModal.propTypes = propTypes; -KeyboardShortcutsModal.defaultProps = defaultProps; -KeyboardShortcutsModal.displayName = 'KeyboardShortcutsModal'; - -export default compose( - withWindowDimensions, - withLocalize, - withOnyx({ - isShortcutsModalOpen: { - key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN, - initWithStoredValues: false, - }, - }), -)(KeyboardShortcutsModal); 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/LottieAnimations.js b/src/components/LottieAnimations.js index 167b1078c3ca..cc3abd29a0d7 100644 --- a/src/components/LottieAnimations.js +++ b/src/components/LottieAnimations.js @@ -1,4 +1,5 @@ const ExpensifyLounge = require('../../assets/animations/ExpensifyLounge.json'); +const FastMoney = require('../../assets/animations/FastMoney.json'); const Fireworks = require('../../assets/animations/Fireworks.json'); const Hands = require('../../assets/animations/Hands.json'); const PreferencesDJ = require('../../assets/animations/PreferencesDJ.json'); @@ -8,4 +9,4 @@ const SaveTheWorld = require('../../assets/animations/SaveTheWorld.json'); const Safe = require('../../assets/animations/Safe.json'); const Magician = require('../../assets/animations/Magician.json'); -export {ExpensifyLounge, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe, Magician}; +export {ExpensifyLounge, FastMoney, Fireworks, Hands, PreferencesDJ, ReviewingBankInfo, SaveTheWorld, WorkspacePlanet, Safe, Magician}; 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/MapView.tsx b/src/components/MapView/MapView.tsx index a7155082ad86..5f791112da62 100644 --- a/src/components/MapView/MapView.tsx +++ b/src/components/MapView/MapView.tsx @@ -1,5 +1,5 @@ import {View} from 'react-native'; -import {useFocusEffect} from '@react-navigation/native'; +import {useFocusEffect, useNavigation} from '@react-navigation/native'; import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps'; import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import styles from '../../styles/styles'; @@ -14,6 +14,7 @@ import {MapViewProps, MapViewHandle} from './MapViewTypes'; const MapView = forwardRef(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => { const cameraRef = useRef(null); const [isIdle, setIsIdle] = useState(false); + const navigation = useNavigation(); useImperativeHandle( ref, @@ -30,6 +31,7 @@ const MapView = forwardRef(({accessToken, style, ma // When the page regains focus, the onIdled method of the map will set the actual "idled" state, // which in turn triggers the callback. useFocusEffect( + // eslint-disable-next-line rulesdir/prefer-early-return useCallback(() => { if (waypoints?.length && isIdle) { if (waypoints.length === 1) { @@ -46,12 +48,16 @@ const MapView = forwardRef(({accessToken, style, ma cameraRef.current?.fitBounds(northEast, southWest, mapPadding, 1000); } } - return () => { - setIsIdle(false); - }; }, [mapPadding, waypoints, isIdle, directionCoordinates]), ); + useEffect(() => { + const unsubscribe = navigation.addListener('blur', () => { + setIsIdle(false); + }); + return unsubscribe; + }, [navigation]); + useEffect(() => { setAccessToken(accessToken); }, [accessToken]); 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..49681f396181 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -62,7 +62,7 @@ const defaultProps = { function MoneyReportHeader({session, personalDetails, policy, chatReport, 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 +71,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 +80,10 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report } return isManager && !isDraft && !isApproved && !isSettled; }, [policyType, isManager, isDraft, isApproved, isSettled]); - const shouldShowSubmitButton = isDraft && reportTotal !== 0; + const shouldShowSubmitButton = isDraft && reimbursableTotal !== 0; const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); - const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, moneyRequestReport.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency); return ( diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index acaa83181bbf..5ca08bf82f89 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -80,6 +80,12 @@ const propTypes = { /** IOU Tag */ iouTag: PropTypes.string, + /** IOU isBillable */ + iouIsBillable: PropTypes.bool, + + /** Callback to toggle the billable state */ + onToggleBillable: PropTypes.func, + /** Selected participants from MoneyRequestModal with login / accountID */ selectedParticipants: PropTypes.arrayOf(optionPropTypes).isRequired, @@ -141,8 +147,14 @@ const propTypes = { /** Whether the money request is a distance request */ isDistanceRequest: PropTypes.bool, - /** Whether the receipt associated with this report is being scanned */ - isScanning: PropTypes.bool, + /** 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, /** A flag for verifying that the current report is a sub-report of a workspace chat */ isPolicyExpenseChat: PropTypes.bool, @@ -159,9 +171,11 @@ const defaultProps = { onConfirm: () => {}, onSendMoney: () => {}, onSelectParticipant: () => {}, - iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + iouType: CONST.IOU.TYPE.REQUEST, iouCategory: '', iouTag: '', + iouIsBillable: false, + onToggleBillable: () => {}, payeePersonalDetails: null, canModifyParticipants: false, isReadOnly: false, @@ -182,17 +196,23 @@ const defaultProps = { transaction: {}, mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0, currency: 'USD'}, isDistanceRequest: false, - isScanning: false, + isScanRequest: false, + shouldShowSmartScanFields: true, isPolicyExpenseChat: false, }; function MoneyRequestConfirmationList(props) { // Destructure functions from props to pass it as a dependecy to useCallback/useMemo hooks. // Prop functions pass props itself as a "this" value to the function which means they change every time props change. - const {onSendMoney, onConfirm, onSelectParticipant, transaction} = props; + const {onSendMoney, onConfirm, onSelectParticipant} = 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 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; const {unit, rate, currency} = props.mileageRate; const distance = lodashGet(transaction, 'routes.route0.distance', 0); @@ -202,13 +222,15 @@ function MoneyRequestConfirmationList(props) { const shouldShowCategories = props.isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && (props.iouCategory || OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories))); - // A flag for showing SmartScan fields: date, merchant, and amount, only when we don't have a receiptPath (e.g. manual request) - // or in the split details page which is ReadOnly - const shouldShowSmartScanFields = (!props.receiptPath || props.isReadOnly) && !props.isScanning; - // A flag and a toggler for showing the rest of the form fields const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false); - const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields || !shouldShowSmartScanFields; + + // Do not hide fields in case of send money request + const shouldShowAllFields = props.isDistanceRequest || shouldExpandFields || !props.shouldShowSmartScanFields || isTypeSend || props.isEditingSplitBill; + + // In Send Money and Split Bill with Scan flow, we don't allow the Merchant or Date to be edited. For distance requests, don't show the merchant as there's already another "Distance" menu item + const shouldShowDate = shouldShowAllFields && !isTypeSend && !isSplitWithScan; + const shouldShowMerchant = shouldShowAllFields && !isTypeSend && !props.isDistanceRequest && !isSplitWithScan; // Fetches the first tag list of the policy const policyTag = PolicyUtils.getTag(props.policyTags); @@ -232,10 +254,30 @@ function MoneyRequestConfirmationList(props) { const isFocused = useIsFocused(); const [formError, setFormError] = useState(''); + + const [didConfirm, setDidConfirm] = useState(false); + const [didConfirmSplit, setDidConfirmSplit] = useState(false); + + const shouldDisplayFieldError = useMemo(() => { + if (!props.isEditingSplitBill) { + return false; + } + + return (props.hasSmartScanFailed && TransactionUtils.hasMissingSmartscanFields(transaction)) || (didConfirmSplit && TransactionUtils.areRequiredFieldsEmpty(transaction)); + }, [props.isEditingSplitBill, props.hasSmartScanFailed, transaction, didConfirmSplit]); + useEffect(() => { + if (shouldDisplayFieldError && props.hasSmartScanFailed) { + setFormError('iou.receiptScanningFailed'); + return; + } + if (shouldDisplayFieldError && didConfirmSplit) { + setFormError('iou.error.genericSmartscanFailureMessage'); + return; + } // reset the form error whenever the screen gains or loses focus setFormError(''); - }, [isFocused]); + }, [isFocused, transaction, shouldDisplayFieldError, props.hasSmartScanFailed, didConfirmSplit]); useEffect(() => { if (!shouldCalculateDistanceAmount) { @@ -262,25 +304,28 @@ function MoneyRequestConfirmationList(props) { [props.iouAmount, props.iouCurrencyCode], ); - const [didConfirm, setDidConfirm] = useState(false); + // If completing a split bill fails, set didConfirm to false to allow the user to edit the fields again + if (props.isEditingSplitBill && didConfirm) { + setDidConfirm(false); + } const splitOrRequestOptions = useMemo(() => { let text; - if (props.receiptPath && props.hasMultipleParticipants && props.iouAmount === 0) { + if (isSplitBill && props.iouAmount === 0) { text = translate('iou.split'); - } else if (props.receiptPath || isDistanceRequestWithoutRoute) { + } else if ((props.receiptPath && isTypeRequest) || isDistanceRequestWithoutRoute) { text = translate('iou.request'); } else { - const translationKey = props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount'; + const translationKey = isSplitBill ? 'iou.splitAmount' : 'iou.requestAmount'; text = translate(translationKey, {amount: formattedAmount}); } return [ { text: text[0].toUpperCase() + text.slice(1), - value: props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + value: props.iouType, }, ]; - }, [props.hasMultipleParticipants, props.iouAmount, props.receiptPath, translate, formattedAmount, isDistanceRequestWithoutRoute]); + }, [isSplitBill, isTypeRequest, props.iouType, props.iouAmount, props.receiptPath, formattedAmount, isDistanceRequestWithoutRoute, translate]); const selectedParticipants = useMemo(() => _.filter(props.selectedParticipants, (participant) => participant.selected), [props.selectedParticipants]); const payeePersonalDetails = useMemo(() => props.payeePersonalDetails || props.currentUserPersonalDetails, [props.payeePersonalDetails, props.currentUserPersonalDetails]); @@ -400,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; } @@ -417,11 +462,28 @@ function MoneyRequestConfirmationList(props) { return; } + if (props.isEditingSplitBill && TransactionUtils.areRequiredFieldsEmpty(transaction)) { + setDidConfirmSplit(true); + setFormError('iou.error.genericSmartscanFailureMessage'); + return; + } + setDidConfirm(true); onConfirm(selectedParticipants); } }, - [selectedParticipants, onSendMoney, onConfirm, props.iouType, props.isDistanceRequest, isDistanceRequestWithoutRoute, props.iouCurrencyCode, props.iouAmount], + [ + selectedParticipants, + onSendMoney, + onConfirm, + props.isEditingSplitBill, + props.iouType, + props.isDistanceRequest, + isDistanceRequestWithoutRoute, + props.iouCurrencyCode, + props.iouAmount, + transaction, + ], ); const footerContent = useMemo(() => { @@ -429,11 +491,12 @@ 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 ? ( {props.isDistanceRequest && ( @@ -510,15 +574,27 @@ function MoneyRequestConfirmationList(props) { isAuthTokenRequired={!_.isEmpty(receiptThumbnail)} /> )} - {shouldShowSmartScanFields && ( + {props.shouldShowSmartScanFields && ( !props.isDistanceRequest && Navigation.navigate(ROUTES.MONEY_REQUEST_AMOUNT.getRoute(props.iouType, props.reportID))} + interactive={!props.isReadOnly} + onPress={() => { + if (props.isDistanceRequest) { + return; + } + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.AMOUNT)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_AMOUNT.getRoute(props.iouType, props.reportID)); + }} style={[styles.moneyRequestMenuItem, styles.mt2]} titleStyle={styles.moneyRequestConfirmationAmount} - disabled={didConfirm || props.isReadOnly} + disabled={didConfirm} + brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''} /> )} Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION.getRoute(props.iouType, props.reportID))} + onPress={() => { + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_DESCRIPTION.getRoute(props.iouType, props.reportID)); + }} style={[styles.moneyRequestMenuItem]} titleStyle={styles.flex1} - disabled={didConfirm || props.isReadOnly} + disabled={didConfirm} + interactive={!props.isReadOnly} numberOfLinesTitle={2} /> {!shouldShowAllFields && ( @@ -549,15 +632,24 @@ function MoneyRequestConfirmationList(props) { )} {shouldShowAllFields && ( <> - {shouldShowSmartScanFields && ( + {shouldShowDate && ( Navigation.navigate(ROUTES.MONEY_REQUEST_DATE.getRoute(props.iouType, props.reportID))} - disabled={didConfirm || props.isReadOnly} + onPress={() => { + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.DATE)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_DATE.getRoute(props.iouType, props.reportID)); + }} + disabled={didConfirm} + interactive={!props.isReadOnly} + brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''} /> )} {props.isDistanceRequest && ( @@ -568,18 +660,28 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem]} titleStyle={styles.flex1} onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_DISTANCE.getRoute(props.iouType, props.reportID))} - disabled={didConfirm || props.isReadOnly || !isTypeRequest} + disabled={didConfirm || !isTypeRequest} + interactive={!props.isReadOnly} /> )} - {shouldShowSmartScanFields && ( + {shouldShowMerchant && ( Navigation.navigate(ROUTES.MONEY_REQUEST_MERCHANT.getRoute(props.iouType, props.reportID))} - disabled={didConfirm || props.isReadOnly} + onPress={() => { + if (props.isEditingSplitBill) { + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.MERCHANT)); + return; + } + Navigation.navigate(ROUTES.MONEY_REQUEST_MERCHANT.getRoute(props.iouType, props.reportID)); + }} + disabled={didConfirm} + interactive={!props.isReadOnly} + brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction) ? translate('common.error.enterMerchant') : ''} /> )} {shouldShowCategories && ( @@ -589,7 +691,8 @@ function MoneyRequestConfirmationList(props) { description={translate('common.category')} onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_CATEGORY.getRoute(props.iouType, props.reportID))} style={[styles.moneyRequestMenuItem]} - disabled={didConfirm || props.isReadOnly} + disabled={didConfirm} + interactive={!props.isReadOnly} /> )} {shouldShowTags && ( @@ -599,7 +702,8 @@ function MoneyRequestConfirmationList(props) { description={policyTagListName} onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_TAG.getRoute(props.iouType, props.reportID))} style={[styles.moneyRequestMenuItem]} - disabled={didConfirm || props.isReadOnly} + disabled={didConfirm} + interactive={!props.isReadOnly} /> )} {shouldShowBillable && ( @@ -640,6 +744,9 @@ export default compose( key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, selector: DistanceRequestUtils.getDefaultMileageRate, }, + draftTransaction: { + key: ({transactionID}) => `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, + }, transaction: { key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, }, diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 8a2005e64c22..086e1429baef 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -19,6 +19,8 @@ import ConfirmModal from './ConfirmModal'; import useLocalize from '../hooks/useLocalize'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import * as TransactionUtils from '../libs/TransactionUtils'; +import * as ReportActionsUtils from '../libs/ReportActionsUtils'; +import * as HeaderUtils from '../libs/HeaderUtils'; import reportActionPropTypes from '../pages/home/report/reportActionPropTypes'; import transactionPropTypes from './transactionPropTypes'; import useWindowDimensions from '../hooks/useWindowDimensions'; @@ -80,8 +82,9 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, }, [parentReportAction, setIsDeleteModalVisible]); const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); + const isPending = TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction); - const canModifyRequest = isActionOwner && !isSettled && !isApproved; + const canModifyRequest = isActionOwner && !isSettled && !isApproved && !ReportActionsUtils.isDeletedAction(parentReportAction); useEffect(() => { if (canModifyRequest) { @@ -90,30 +93,31 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, setIsDeleteModalVisible(false); }, [canModifyRequest]); + const threeDotsMenuItems = [HeaderUtils.getPinMenuItem(report)]; + if (canModifyRequest) { + if (!TransactionUtils.hasReceipt(transaction)) { + threeDotsMenuItems.push({ + icon: Expensicons.Receipt, + text: translate('receipt.addReceipt'), + onSelected: () => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT)), + }); + } + threeDotsMenuItems.push({ + icon: Expensicons.Trashcan, + text: translate('reportActionContextMenu.deleteAction', {action: parentReportAction}), + onSelected: () => setIsDeleteModalVisible(true), + }); + } return ( <> Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT)), - }, - ]), - { - icon: Expensicons.Trashcan, - text: translate('reportActionContextMenu.deleteAction', {action: parentReportAction}), - onSelected: () => setIsDeleteModalVisible(true), - }, - ]} + shouldShowThreeDotsButton + threeDotsMenuItems={threeDotsMenuItems} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)} report={{ ...report, @@ -125,7 +129,20 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, shouldShowBackButton={isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} /> - {isScanning && } + {isPending && ( + + )} + {isScanning && ( + + )} + - {translate('iou.receiptStatusTitle')} + {title} - {translate('iou.receiptStatusText')} + {description} ); } MoneyRequestHeaderStatusBar.displayName = 'MoneyRequestHeaderStatusBar'; +MoneyRequestHeaderStatusBar.propTypes = propTypes; export default MoneyRequestHeaderStatusBar; diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js index 27a697fc458c..8866d61d3870 100644 --- a/src/components/MultipleAvatars.js +++ b/src/components/MultipleAvatars.js @@ -85,31 +85,8 @@ const avatarSizeToStylesMap = { secondAvatarStyles: styles.secondAvatar, }, }; - -function getContainerStyles(size, isInReportAction) { - let containerStyles; - - switch (size) { - case CONST.AVATAR_SIZE.SMALL: - containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall]; - break; - case CONST.AVATAR_SIZE.SMALLER: - containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller]; - break; - case CONST.AVATAR_SIZE.MEDIUM: - containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin]; - break; - case CONST.AVATAR_SIZE.LARGE: - containerStyles = [styles.emptyAvatarLarge, styles.mb2, styles.mr2]; - break; - default: - containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin]; - } - - return containerStyles; -} function MultipleAvatars(props) { - let avatarContainerStyles = getContainerStyles(props.size, props.isInReportAction); + let avatarContainerStyles = StyleUtils.getContainerStyles(props.size, props.isInReportAction); const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[props.size] || avatarSizeToStylesMap.default, [props.size]); const tooltipTexts = props.shouldShowTooltip ? _.pluck(props.icons, 'name') : ['']; diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js index 1e1ef3c3fad3..d03c36997845 100644 --- a/src/components/NewDatePicker/CalendarPicker/index.js +++ b/src/components/NewDatePicker/CalendarPicker/index.js @@ -125,8 +125,8 @@ class CalendarPicker extends React.PureComponent { const currentMonthView = this.state.currentDateView.getMonth(); const currentYearView = this.state.currentDateView.getFullYear(); const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView); - const hasAvailableDatesNextMonth = moment(this.props.maxDate).endOf('month').startOf('day') > moment(this.state.currentDateView).add(1, 'months'); - const hasAvailableDatesPrevMonth = moment(this.props.minDate).startOf('day') < moment(this.state.currentDateView).subtract(1, 'months').endOf('month'); + const hasAvailableDatesNextMonth = moment(this.props.maxDate).endOf('month').endOf('day') >= moment(this.state.currentDateView).add(1, 'months'); + const hasAvailableDatesPrevMonth = moment(this.props.minDate).startOf('month').startOf('day') <= moment(this.state.currentDateView).subtract(1, 'months'); return ( diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 98a1a1ce7edf..3201388790c9 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -1,14 +1,16 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import moment from 'moment'; import PropTypes from 'prop-types'; +import _ from 'lodash'; import TextInput from '../TextInput'; import CONST from '../../CONST'; import styles from '../../styles/styles'; import * as Expensicons from '../Icon/Expensicons'; -import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '../TextInput/baseTextInputPropTypes'; +import {defaultProps as defaultBaseTextInputPropTypes, propTypes as baseTextInputPropTypes} from '../TextInput/baseTextInputPropTypes'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import CalendarPicker from './CalendarPicker'; +import InputWrapper from '../Form/InputWrapper'; const propTypes = { /** @@ -23,6 +25,8 @@ const propTypes = { */ defaultValue: PropTypes.string, + inputID: PropTypes.string.isRequired, + /** A minimum date of calendar to select */ minDate: PropTypes.objectOf(Date), @@ -40,66 +44,58 @@ const datePickerDefaultProps = { value: undefined, }; -class NewDatePicker extends React.Component { - constructor(props) { - super(props); - - this.state = { - selectedDate: props.value || props.defaultValue || undefined, - }; +function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) { + const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined); - this.setDate = this.setDate.bind(this); - } - - componentDidUpdate(prevProps) { - if (prevProps.value === this.props.value) { + useEffect(() => { + if (selectedDate === value || _.isUndefined(value)) { return; } - this.setDate(this.props.value); - } + setSelectedDate(value); + }, [selectedDate, value]); - /** - * Trigger the `onInputChange` handler when the user input has a complete date or is cleared - * @param {string} selectedDate - */ - setDate(selectedDate) { - this.setState({selectedDate}, () => { - this.props.onTouched(); - this.props.onInputChange(selectedDate); - }); - } + useEffect(() => { + if (_.isFunction(onTouched)) { + onTouched(); + } + if (_.isFunction(onInputChange)) { + onInputChange(selectedDate); + } + // To keep behavior from class component state update callback, we want to run effect only when the selected date is changed. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedDate]); - render() { - return ( - - - - - - - + return ( + + + + + + - ); - } + + ); } NewDatePicker.propTypes = propTypes; 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 ( { + setIsDisabled(props.isDisabled); + }, [props.isDisabled]); - componentDidUpdate(prevProps) { - if (this.props.isDisabled === prevProps.isDisabled) { - return; - } + const textStyle = props.optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; + const textUnreadStyle = props.boldStyle || props.option.boldStyle ? [textStyle, styles.sidebarLinkTextBold] : [textStyle]; + const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, props.style, styles.pre, isDisabled ? styles.optionRowDisabled : {}); + const alternateTextStyle = StyleUtils.combineStyles( + textStyle, + styles.optionAlternateText, + styles.textLabelSupporting, + props.style, + lodashGet(props.option, 'alternateTextMaxLines', 1) === 1 ? styles.pre : styles.preWrap, + ); + const contentContainerStyles = [styles.flex1]; + const sidebarInnerRowStyle = StyleSheet.flatten([styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter]); + const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : props.backgroundColor; + const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; + const isMultipleParticipant = lodashGet(props.option, 'participantsList.length', 0) > 1; + const defaultSubscriptSize = props.option.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; - this.setState({isDisabled: this.props.isDisabled}); + // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. + const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips( + (props.option.participantsList || (props.option.accountID ? [props.option] : [])).slice(0, 10), + isMultipleParticipant, + ); + let subscriptColor = themeColors.appBG; + if (props.optionIsFocused) { + subscriptColor = focusedBackgroundColor; } - render() { - let pressableRef = null; - const textStyle = this.props.optionIsFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText; - const textUnreadStyle = this.props.boldStyle || this.props.option.boldStyle ? [textStyle, styles.sidebarLinkTextBold] : [textStyle]; - const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre, this.state.isDisabled ? styles.optionRowDisabled : {}); - const alternateTextStyle = StyleUtils.combineStyles( - textStyle, - styles.optionAlternateText, - styles.textLabelSupporting, - this.props.style, - lodashGet(this.props.option, 'alternateTextMaxLines', 1) === 1 ? styles.pre : styles.preWrap, - ); - const contentContainerStyles = [styles.flex1]; - const sidebarInnerRowStyle = StyleSheet.flatten([styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter]); - const hoveredBackgroundColor = this.props.hoverStyle && this.props.hoverStyle.backgroundColor ? this.props.hoverStyle.backgroundColor : this.props.backgroundColor; - const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; - const isMultipleParticipant = lodashGet(this.props.option, 'participantsList.length', 0) > 1; - const defaultSubscriptSize = this.props.option.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; - - // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade. - const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips( - (this.props.option.participantsList || (this.props.option.accountID ? [this.props.option] : [])).slice(0, 10), - isMultipleParticipant, - ); - let subscriptColor = themeColors.appBG; - if (this.props.optionIsFocused) { - subscriptColor = focusedBackgroundColor; - } + return ( + + + {(hovered) => ( + (pressableRef.current = el)} + onPress={(e) => { + if (!props.onSelectRow) { + return; + } - return ( - - - {(hovered) => ( - (pressableRef = el)} - onPress={(e) => { - if (!this.props.onSelectRow) { - return; - } - - this.setState({isDisabled: true}); - if (e) { - e.preventDefault(); - } - let result = this.props.onSelectRow(this.props.option, pressableRef); - if (!(result instanceof Promise)) { - result = Promise.resolve(); - } - InteractionManager.runAfterInteractions(() => { - result.finally(() => this.setState({isDisabled: this.props.isDisabled})); - }); - }} - disabled={this.state.isDisabled} - style={[ - styles.flexRow, - styles.alignItemsCenter, - styles.justifyContentBetween, - styles.sidebarLink, - this.props.shouldDisableRowInnerPadding ? null : styles.sidebarLinkInner, - this.props.optionIsFocused ? styles.sidebarLinkActive : null, - this.props.shouldHaveOptionSeparator && styles.borderTop, - !this.props.onSelectRow && !this.props.isDisabled ? styles.cursorDefault : null, - this.props.isSelected && this.props.highlightSelected && styles.optionRowSelected, - ]} - accessibilityLabel={this.props.option.text} - accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} - hoverDimmingValue={1} - hoverStyle={this.props.hoverStyle} - needsOffscreenAlphaCompositing={lodashGet(this.props.option, 'icons.length', 0) >= 2} - onMouseDown={this.props.shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined} - > - - - {!_.isEmpty(this.props.option.icons) && - (this.props.option.shouldShowSubscript ? ( - - ) : ( - - ))} - - { + result.finally(() => setIsDisabled(props.isDisabled)); + }); + }} + disabled={isDisabled} + style={[ + styles.flexRow, + styles.alignItemsCenter, + styles.justifyContentBetween, + styles.sidebarLink, + props.shouldDisableRowInnerPadding ? null : styles.sidebarLinkInner, + props.optionIsFocused ? styles.sidebarLinkActive : null, + props.shouldHaveOptionSeparator && styles.borderTop, + !props.onSelectRow && !props.isDisabled ? styles.cursorDefault : null, + props.isSelected && props.highlightSelected && styles.optionRowSelected, + ]} + accessibilityLabel={props.option.text} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + hoverDimmingValue={1} + hoverStyle={props.hoverStyle} + needsOffscreenAlphaCompositing={lodashGet(props.option, 'icons.length', 0) >= 2} + onMouseDown={props.shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined} + > + + + {!_.isEmpty(props.option.icons) && + (props.option.shouldShowSubscript ? ( + - {this.props.option.alternateText ? ( - - {this.props.option.alternateText} - - ) : null} - - {this.props.option.descriptiveText ? ( - - {this.props.option.descriptiveText} - + ) : ( + + ))} + + + {props.option.alternateText ? ( + + {props.option.alternateText} + ) : null} - {this.props.option.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && ( - - - - )} - {this.props.showSelectedState && ( - <> - {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? ( - - - {Boolean(this.props.option.customIcon) && ( - - + {props.option.descriptiveText ? ( + + {props.option.descriptiveText} + + ) : null} + {props.option.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && ( + + )} + {props.showSelectedState && ( + <> + {props.shouldShowSelectedStateAsButton && !props.isSelected ? ( + + + {Boolean(props.option.customIcon) && ( + + + - )} - - )} - - - ); - } + + )} + + )} + + + ); } OptionRow.propTypes = propTypes; OptionRow.defaultProps = defaultProps; -export default withLocalize(OptionRow); +export default React.memo( + withLocalize(OptionRow), + (prevProps, nextProps) => + prevProps.isDisabled === nextProps.isDisabled && + prevProps.isMultilineSupported === nextProps.isMultilineSupported && + prevProps.isSelected === nextProps.isSelected && + prevProps.shouldHaveOptionSeparator === nextProps.shouldHaveOptionSeparator && + prevProps.selectedStateButtonText === nextProps.selectedStateButtonText && + prevProps.showSelectedState === nextProps.showSelectedState && + prevProps.highlightSelected === nextProps.highlightSelected && + prevProps.showTitleTooltip === nextProps.showTitleTooltip && + !_.isEqual(prevProps.option.icons, nextProps.option.icons) && + prevProps.optionIsFocused === nextProps.optionIsFocused && + prevProps.option.text === nextProps.option.text && + prevProps.option.alternateText === nextProps.option.alternateText && + prevProps.option.descriptiveText === nextProps.option.descriptiveText && + prevProps.option.brickRoadIndicator === nextProps.option.brickRoadIndicator && + prevProps.option.shouldShowSubscript === nextProps.option.shouldShowSubscript && + prevProps.option.ownerAccountID === nextProps.option.ownerAccountID && + prevProps.option.subtitle === nextProps.option.subtitle && + prevProps.option.pendingAction === nextProps.option.pendingAction && + prevProps.option.customIcon === nextProps.option.customIcon, +); diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 23049b65f198..91fd77dbea30 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -66,6 +66,9 @@ function BaseOptionsList({ isDisabled, innerRef, isRowMultilineSupported, + isLoadingNewOptions, + nestedScrollEnabled, + bounces, }) { const flattenedData = useRef(); const previousSections = usePrevious(sections); @@ -245,18 +248,21 @@ function BaseOptionsList({ ) : ( <> - {headerMessage ? ( + {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */} + {/* This is misleading because we might be in the process of loading fresh options from the server. */} + {!isLoadingNewOptions && headerMessage ? ( {headerMessage} ) : null} )} diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js index 165cec699b80..caabf39a41bb 100644 --- a/src/components/OptionsList/optionsListPropTypes.js +++ b/src/components/OptionsList/optionsListPropTypes.js @@ -87,6 +87,15 @@ const propTypes = { /** Whether to wrap large text up to 2 lines */ isRowMultilineSupported: PropTypes.bool, + + /** 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 = { @@ -113,6 +122,9 @@ const defaultProps = { shouldPreventDefaultFocusOnSelectRow: false, 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 65f4bc64cee0..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'; @@ -17,6 +17,7 @@ import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDe import setSelection from '../../libs/setSelection'; import compose from '../../libs/compose'; import getPlatform from '../../libs/getPlatform'; +import FormHelpMessage from '../FormHelpMessage'; const propTypes = { /** padding bottom style of safe area */ @@ -72,7 +73,7 @@ class BaseOptionsSelector extends Component { this.subscribeToKeyboardShortcut(); if (this.props.isFocused && this.props.autoFocus && this.textInput) { - setTimeout(() => { + this.focusTimeout = setTimeout(() => { this.textInput.focus(); }, CONST.ANIMATED_TRANSITION); } @@ -392,6 +393,7 @@ class BaseOptionsSelector extends Component { blurOnSubmit={Boolean(this.state.allOptions.length)} spellCheck={false} shouldInterceptSwipe={this.props.shouldTextInputInterceptSwipe} + isLoading={this.props.isLoadingNewOptions} /> ); const optionsList = ( @@ -428,9 +430,23 @@ class BaseOptionsSelector extends Component { isLoading={!this.props.shouldShowOptions} showScrollIndicator={this.props.showScrollIndicator} 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} {this.props.shouldShowTextInput && textInput} + {Boolean(this.props.textInputAlert) && ( + + )} {optionsList} 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..58a4e64a28a5 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) => { 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/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 3b194ad4b9cf..7287f36e7f2c 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', { @@ -38,13 +37,6 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); - - // We prevent setting closeModal function to null when the component is invisible the first time it is rendered - if (!firstRenderRef.current || !props.isVisible) { - firstRenderRef.current = false; - return; - } - firstRenderRef.current = false; Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 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 ( ); } @@ -38,4 +40,4 @@ class QRShareWithDownload extends Component { QRShareWithDownload.propTypes = qrSharePropTypes; QRShareWithDownload.defaultProps = qrShareDefaultProps; -export default QRShareWithDownload; +export default withNetwork()(QRShareWithDownload); diff --git a/src/components/QRShare/QRShareWithDownload/index.native.js b/src/components/QRShare/QRShareWithDownload/index.native.js index 6154b8137bf3..66fe7a6762d0 100644 --- a/src/components/QRShare/QRShareWithDownload/index.native.js +++ b/src/components/QRShare/QRShareWithDownload/index.native.js @@ -4,6 +4,7 @@ import fileDownload from '../../../libs/fileDownload'; import QRShare from '..'; import {qrShareDefaultProps, qrSharePropTypes} from '../propTypes'; import getQrCodeFileName from '../getQrCodeDownloadFileName'; +import {withNetwork} from '../../OnyxProvider'; class QRShareWithDownload extends Component { qrCodeScreenshotRef = React.createRef(); @@ -24,6 +25,7 @@ class QRShareWithDownload extends Component { ); @@ -32,4 +34,4 @@ class QRShareWithDownload extends Component { QRShareWithDownload.propTypes = qrSharePropTypes; QRShareWithDownload.defaultProps = qrShareDefaultProps; -export default QRShareWithDownload; +export default withNetwork()(QRShareWithDownload); diff --git a/src/components/RNTextInput.js b/src/components/RNTextInput.js index 37020204a6ee..5a790cde91d7 100644 --- a/src/components/RNTextInput.js +++ b/src/components/RNTextInput.js @@ -21,6 +21,7 @@ function RNTextInput(props) { return ( { if (!_.isFunction(props.forwardedRef)) { return; diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index bfdcc59bf89f..f4be86cf12bd 100644 --- a/src/components/ReportActionItem/MoneyReportView.js +++ b/src/components/ReportActionItem/MoneyReportView.js @@ -28,19 +28,27 @@ 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); + 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')} @@ -59,10 +67,50 @@ function MoneyReportView(props) { numberOfLines={1} style={[styles.taskTitleMenuItem, styles.alignSelfCenter]} > - {formattedAmount} + {formattedTotalAmount} + {shouldShowBreakdown ? ( + <> + + + + {translate('cardTransactions.outOfPocket')} + + + + + {formattedOutOfPocketAmount} + + + + + + + {translate('cardTransactions.companySpend')} + + + + + {formattedCompanySpendAmount} + + + + + ) : undefined} ${translate('parentReportAction.deletedRequest')}`} /> + return isDeletedParentAction || isReversedTransaction ? ( + ${translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}`} /> ) : ( { + if (isExpensifyCardTransaction) { + return props.translate('common.done'); + } switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { case CONST.IOU.PAYMENT_TYPE.EXPENSIFY: return props.translate('iou.settledExpensify'); @@ -199,20 +203,26 @@ function MoneyRequestPreview(props) { return props.translate('iou.split'); } + if (isExpensifyCardTransaction) { + let message = props.translate('iou.card'); + if (TransactionUtils.isPending(props.transaction)) { + message += ` β€’ ${props.translate('iou.pending')}`; + } + return message; + } + let message = props.translate('iou.cash'); if (ReportUtils.isControlPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) { message += ` β€’ ${props.translate('iou.approved')}`; } else if (props.iouReport.isWaitingOnBankAccount) { message += ` β€’ ${props.translate('iou.pending')}`; - } else if (ReportUtils.isSettled(props.iouReport.reportID)) { - message += ` β€’ ${props.translate('iou.settledExpensify')}`; } return message; }; const getDisplayAmountText = () => { if (isDistanceRequest) { - return CurrencyUtils.convertToDisplayString(TransactionUtils.getAmount(props.transaction), props.transaction.currency); + return requestAmount ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : props.translate('common.tbd'); } if (isScanning) { @@ -242,7 +252,8 @@ function MoneyRequestPreview(props) { {hasReceipt && ( )} {_.isEmpty(props.transaction) && @@ -252,20 +263,7 @@ function MoneyRequestPreview(props) { ) : ( - - {getPreviewHeaderText()} - {isSettled && ( - <> - - {getSettledMessage()} - - )} - + {getPreviewHeaderText() + (isSettled ? ` β€’ ${getSettledMessage()}` : '')} {hasFieldErrors && ( ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]); @@ -109,11 +121,24 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should const shouldShowTag = isPolicyExpenseChat && Permissions.canUseTags(betas) && (transactionTag || OptionsListUtils.hasEnabledOptions(lodashValues(policyTagsList))); const shouldShowBillable = isPolicyExpenseChat && Permissions.canUseTags(betas) && (transactionBillable || !lodashGet(policy, 'disabledFields.defaultBillable', true)); - let description = `${translate('iou.amount')} β€’ ${translate('iou.cash')}`; - if (isSettled) { - description += ` β€’ ${translate('iou.settledExpensify')}`; - } else if (report.isWaitingOnBankAccount) { - description += ` β€’ ${translate('iou.pending')}`; + let amountDescription = `${translate('iou.amount')}`; + + if (isExpensifyCardTransaction) { + if (formattedOriginalAmount) { + amountDescription += ` β€’ ${translate('iou.original')} ${formattedOriginalAmount}`; + } + if (TransactionUtils.isPending(transaction)) { + amountDescription += ` β€’ ${translate('iou.pending')}`; + } + } else { + if (!isDistanceRequest) { + amountDescription += ` β€’ ${translate('iou.cash')}`; + } + if (isSettled) { + amountDescription += ` β€’ ${translate('iou.settledExpensify')}`; + } else if (report.isWaitingOnBankAccount) { + amountDescription += ` β€’ ${translate('iou.pending')}`; + } } // A temporary solution to hide the transaction detail @@ -126,11 +151,10 @@ 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); } - const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction); const pendingAction = lodashGet(transaction, 'pendingAction'); const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction; @@ -146,6 +170,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should @@ -156,7 +181,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''} shouldShowTitleIcon={isSettled} titleIcon={Expensicons.Checkmark} - description={description} + description={amountDescription} titleStyle={styles.newKansasLarge} interactive={canEdit} shouldShowRightIcon={canEdit} @@ -178,18 +203,6 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should 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') : ''} - /> - {isDistanceRequest ? ( )} + + 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 && ( )} + {isExpensifyCardTransaction ? ( + + + + ) : null} {shouldShowBillable && ( {translate('common.billable')} diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js index 98bdede0fe26..f17a1f1929fe 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.js +++ b/src/components/ReportActionItem/ReportActionItemImage.js @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {View} from 'react-native'; +import _ from 'underscore'; import styles from '../../styles/styles'; import Image from '../Image'; import ThumbnailImage from '../ThumbnailImage'; @@ -10,6 +12,9 @@ import {ShowContextMenuContext} from '../ShowContextMenuContext'; import Navigation from '../../libs/Navigation/Navigation'; import PressableWithoutFocus from '../Pressable/PressableWithoutFocus'; import useLocalize from '../../hooks/useLocalize'; +import EReceiptThumbnail from '../EReceiptThumbnail'; +import transactionPropTypes from '../transactionPropTypes'; +import * as TransactionUtils from '../../libs/TransactionUtils'; const propTypes = { /** thumbnail URI for the image */ @@ -20,10 +25,14 @@ const propTypes = { /** whether or not to enable the image preview modal */ enablePreviewModal: PropTypes.bool, + + /* The transaction associated with this image, if any. Passed for handling eReceipts. */ + transaction: transactionPropTypes, }; const defaultProps = { thumbnail: null, + transaction: {}, enablePreviewModal: false, }; @@ -33,24 +42,37 @@ const defaultProps = { * and optional preview modal as well. */ -function ReportActionItemImage({thumbnail, image, enablePreviewModal}) { +function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction}) { const {translate} = useLocalize(); const imageSource = tryResolveUrlFromApiRoot(image || ''); const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || ''); + const isEReceipt = !_.isEmpty(transaction) && TransactionUtils.hasEReceipt(transaction); + + let receiptImageComponent; - const receiptImageComponent = thumbnail ? ( - - ) : ( - - ); + 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 7e6287720952..bd1ee6d45a07 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.js +++ b/src/components/ReportActionItem/ReportActionItemImages.js @@ -5,6 +5,9 @@ import _ from 'underscore'; import styles from '../../styles/styles'; 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 */ @@ -12,6 +15,7 @@ const propTypes = { PropTypes.shape({ thumbnail: PropTypes.string, image: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + transaction: transactionPropTypes, }), ).isRequired, @@ -45,14 +49,28 @@ 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; + + // The height varies depending on the number of images we are displaying. + let heightStyle = {}; + if (numberOfShownImages === 1) { + heightStyle = StyleUtils.getHeight(variables.reportActionImagesSingleImageHeight); + } else if (numberOfShownImages === 2) { + heightStyle = StyleUtils.getHeight(variables.reportActionImagesDoubleImageHeight); + } else if (numberOfShownImages > 2) { + heightStyle = StyleUtils.getHeight(variables.reportActionImagesMultipleImageHeight); + } const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined; + 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. @@ -66,10 +84,13 @@ function ReportActionItemImages({images, size, total, isHovered}) { {isLastImage && remaining > 0 && ( - - +{remaining} + + + + {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} )} diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index f9001ed51258..2147f0a4362e 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); @@ -125,9 +125,9 @@ function ReportPreview(props) { const hasReceipts = transactionsWithReceipts.length > 0; 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 ? TransactionUtils.getMerchant(transactionsWithReceipts[0]) @@ -136,11 +136,11 @@ 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'); @@ -166,13 +166,17 @@ function ReportPreview(props) { return props.translate('iou.managerApproved', {manager: ReportUtils.getDisplayNameForParticipant(managerID, true)}); } const managerName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true); - return props.translate(iouSettled || props.iouReport.isWaitingOnBankAccount ? 'iou.payerPaid' : 'iou.payerOwes', {payer: managerName}); + let paymentVerb = hasNonReimbursableTransactions ? 'iou.payerSpent' : 'iou.payerOwes'; + if (iouSettled || props.iouReport.isWaitingOnBankAccount) { + paymentVerb = 'iou.payerPaid'; + } + return props.translate(paymentVerb, {payer: managerName}); }; 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 ( @@ -191,9 +195,9 @@ function ReportPreview(props) { {hasReceipts && ( )} @@ -237,7 +241,7 @@ function ReportPreview(props) { onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} - style={[styles.requestPreviewBox]} + style={[styles.mt3]} anchorAlignment={{ horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, @@ -249,7 +253,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/Section.js b/src/components/Section.js index cd390be0d00b..c0b07d1c1453 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -14,6 +14,9 @@ const propTypes = { /** The text to display in the title of the section */ title: PropTypes.string.isRequired, + /** The text to display in the subtitle of the section */ + subtitle: PropTypes.string, + /** The icon to display along with the title */ icon: PropTypes.func, @@ -27,6 +30,18 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types containerStyles: PropTypes.arrayOf(PropTypes.object), + /** Customize the Section container */ + // eslint-disable-next-line react/forbid-prop-types + titleStyles: PropTypes.arrayOf(PropTypes.object), + + /** Customize the Section container */ + // eslint-disable-next-line react/forbid-prop-types + subtitleStyles: PropTypes.arrayOf(PropTypes.object), + + /** Customize the Section container */ + // eslint-disable-next-line react/forbid-prop-types + childrenStyles: PropTypes.arrayOf(PropTypes.object), + /** Customize the Icon container */ // eslint-disable-next-line react/forbid-prop-types iconContainerStyles: PropTypes.arrayOf(PropTypes.object), @@ -39,21 +54,24 @@ const defaultProps = { IconComponent: null, containerStyles: [], iconContainerStyles: [], + titleStyles: [], + subtitleStyles: [], + childrenStyles: [], + subtitle: null, }; -function Section(props) { - const IconComponent = props.IconComponent; +function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) { return ( <> - - + + - {props.title} + {title} - - {Boolean(props.icon) && ( + + {Boolean(icon) && ( @@ -62,9 +80,15 @@ function Section(props) { - {props.children} + {Boolean(subtitle) && ( + + {subtitle} + + )} + + {children} - {Boolean(props.menuItems) && } + {Boolean(menuItems) && } ); 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 && ( item.keyForList} extraData={focusedIndex} - indicatorStyle={themeColors.selectionListIndicatorColor} + indicatorStyle={themeColors.white} keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={showScrollIndicator} initialNumToRender={12} diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js index 3bf8aa4c111d..67673d664ac3 100644 --- a/src/components/SettlementButton.js +++ b/src/components/SettlementButton.js @@ -15,11 +15,16 @@ import KYCWall from './KYCWall'; import withNavigation from './withNavigation'; import * as Expensicons from './Icon/Expensicons'; import ButtonWithDropdownMenu from './ButtonWithDropdownMenu'; +import * as BankAccounts from '../libs/actions/BankAccounts'; +import ROUTES from '../ROUTES'; const propTypes = { /** Callback to execute when this button is pressed. Receives a single payment type argument. */ onPress: PropTypes.func.isRequired, + /** Call the onPress function on main button when Enter key is pressed */ + pressOnEnter: PropTypes.bool, + /** Settlement currency type */ currency: PropTypes.string, @@ -75,6 +80,7 @@ const propTypes = { const defaultProps = { isLoading: false, isDisabled: false, + pressOnEnter: false, addBankAccountRoute: '', addDebitCardRoute: '', currency: CONST.CURRENCY.USD, @@ -111,6 +117,7 @@ function SettlementButton({ formattedAmount, nvp_lastPaymentMethod, onPress, + pressOnEnter, policyID, shouldShowPaymentOptions, style, @@ -186,6 +193,7 @@ function SettlementButton({ const selectPaymentType = (event, iouPaymentType, triggerKYCFlow) => { if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) { triggerKYCFlow(event, iouPaymentType); + BankAccounts.setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS); return; } @@ -209,6 +217,7 @@ function SettlementButton({ isDisabled={isDisabled} isLoading={isLoading} onPress={(event, iouPaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)} + pressOnEnter={pressOnEnter} options={paymentButtonOptions} style={style} buttonSize={buttonSize} diff --git a/src/components/SignInButtons/GoogleSignIn/index.native.js b/src/components/SignInButtons/GoogleSignIn/index.native.js index 9e638f0723cf..099fbfde22fd 100644 --- a/src/components/SignInButtons/GoogleSignIn/index.native.js +++ b/src/components/SignInButtons/GoogleSignIn/index.native.js @@ -25,14 +25,18 @@ function googleSignInRequest() { .then((response) => response.idToken) .then((token) => Session.beginGoogleSignIn(token)) .catch((error) => { + // Handle unexpected error shape + if (error === undefined || error.code === undefined) { + Log.alert(`[Google Sign In] Google sign in failed: ${error}`); + } + /** The logged code is useful for debugging any new errors that are not specifically handled. To decode, see: + - The common status codes documentation: https://developers.google.com/android/reference/com/google/android/gms/common/api/CommonStatusCodes + - The Google Sign In codes documentation: https://developers.google.com/android/reference/com/google/android/gms/auth/api/signin/GoogleSignInStatusCodes + */ if (error.code === statusCodes.SIGN_IN_CANCELLED) { - Log.alert('[Google Sign In] Google sign in cancelled', true, {error}); - } else if (error.code === statusCodes.IN_PROGRESS) { - Log.alert('[Google Sign In] Google sign in already in progress', true, {error}); - } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { - Log.alert('[Google Sign In] Google play services not available or outdated', true, {error}); + Log.info('[Google Sign In] Google Sign In cancelled'); } else { - Log.alert('[Google Sign In] Unknown Google sign in error', true, {error}); + Log.alert(`[Google Sign In] Error Code: ${error.code}. ${error.message}`, {}, false); } }); } 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/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 4102ae5ec043..66d9812d994e 100644 --- a/src/components/SubscriptAvatar.js +++ b/src/components/SubscriptAvatar.js @@ -43,17 +43,10 @@ const defaultProps = { function SubscriptAvatar({size, backgroundColor, mainAvatar, secondaryAvatar, noMargin, showTooltip}) { const isSmall = size === CONST.AVATAR_SIZE.SMALL; const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript; - const containerStyle = isSmall ? styles.emptyAvatarSmall : styles.emptyAvatar; - // Default the margin style to what is normal for small or normal sized avatars - let marginStyle = isSmall ? styles.emptyAvatarMarginSmall : styles.emptyAvatarMargin; - - // Some views like the chat view require that there be no margins - if (noMargin) { - marginStyle = {}; - } + const containerStyle = StyleUtils.getContainerStyles(size); return ( - + { } }; -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 ( input.current.focus(), CONST.ANIMATED_TRANSITION); - return; + const focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION); + return () => clearTimeout(focusTimeout); } input.current.focus(); - - return () => { - if (!focusTimeout) { - return; - } - clearTimeout(focusTimeout); - }; // We only want this to run on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -372,6 +364,13 @@ function BaseTextInput(props) { // `dataset.submitOnEnter` is used to indicate that pressing Enter on this input should call the submit callback. dataSet={{submitOnEnter: isMultiline && props.submitOnEnter}} /> + {props.isLoading && ( + + )} {Boolean(props.secureTextEntry) && ( { + /* 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 f60982f52dd4..1f60560be5ff 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -2,6 +2,7 @@ import _ from 'underscore'; import React, {memo, useCallback, useEffect, useRef, useState} from 'react'; import {Animated} from 'react-native'; import {BoundsObserver} from '@react-ng/bounds-observer'; +import Str from 'expensify-common/lib/str'; import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody'; import Hoverable from '../Hoverable'; import * as tooltipPropTypes from './tooltipPropTypes'; @@ -19,9 +20,39 @@ const hasHoverSupport = DeviceCapabilities.hasHoverSupport(); * @param {propTypes} props * @returns {ReactNodeLike} */ -function Tooltip(props) { - const {children, numberOfLines, maxWidth, text, renderTooltipContent, renderTooltipContentKey} = props; +/** + * Choose the correct bounding box for the tooltip to be positioned against. + * This handles the case where the target is wrapped across two lines, and + * so we need to find the correct part (the one that the user is hovering + * over) and show the tooltip there. + * + * @param {Element} target The DOM element being hovered over. + * @param {number} clientX The X position from the MouseEvent. + * @param {number} clientY The Y position from the MouseEvent. + * @return {DOMRect} The chosen bounding box. + */ + +function chooseBoundingBox(target, clientX, clientY) { + const slop = 5; + const bbs = target.getClientRects(); + const clientXMin = clientX - slop; + const clientXMax = clientX + slop; + const clientYMin = clientY - slop; + const clientYMax = clientY + slop; + + for (let i = 0; i < bbs.length; i++) { + const bb = bbs[i]; + if (clientXMin <= bb.right && clientXMax >= bb.left && clientYMin <= bb.bottom && clientYMax >= bb.top) { + return bb; + } + } + + // If no matching bounding box is found, fall back to getBoundingClientRect. + return target.getBoundingClientRect(); +} + +function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, renderTooltipContentKey, shouldHandleScroll, shiftHorizontal, shiftVertical}) { const {preferredLocale} = useLocalize(); const {windowWidth} = useWindowDimensions(); @@ -43,14 +74,19 @@ function Tooltip(props) { const isAnimationCanceled = useRef(false); const prevText = usePrevious(text); + const target = useRef(null); + const initialMousePosition = useRef({x: 0, y: 0}); + + const updateTargetAndMousePosition = useCallback((e) => { + target.current = e.currentTarget; + initialMousePosition.current = {x: e.clientX, y: e.clientY}; + }, []); + /** * Display the tooltip in an animation. */ const showTooltip = useCallback(() => { - if (!isRendered) { - setIsRendered(true); - } - + setIsRendered(true); setIsVisible(true); animation.current.stopAnimation(); @@ -70,7 +106,7 @@ function Tooltip(props) { }); } TooltipSense.activate(); - }, [isRendered]); + }, []); // eslint-disable-next-line rulesdir/prefer-early-return useEffect(() => { @@ -91,16 +127,27 @@ function Tooltip(props) { if (bounds.width === 0) { setIsRendered(false); } - setWrapperWidth(bounds.width); - setWrapperHeight(bounds.height); - setXOffset(bounds.x); - setYOffset(bounds.y); + 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); + setYOffset(betterBounds.y); }; /** * Hide the tooltip in an animation. */ - const hideTooltip = () => { + const hideTooltip = useCallback(() => { animation.current.stopAnimation(); if (TooltipSense.isActive() && !isTooltipSenseInitiator.current) { @@ -118,7 +165,7 @@ function Tooltip(props) { 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 @@ -136,8 +183,8 @@ function Tooltip(props) { yOffset={yOffset} targetWidth={wrapperWidth} targetHeight={wrapperHeight} - shiftHorizontal={_.result(props, 'shiftHorizontal')} - shiftVertical={_.result(props, 'shiftVertical')} + shiftHorizontal={Str.result(shiftHorizontal)} + shiftVertical={Str.result(shiftVertical)} text={text} maxWidth={maxWidth} numberOfLines={numberOfLines} @@ -152,9 +199,10 @@ function Tooltip(props) { onBoundsChange={updateBounds} > {children} @@ -165,4 +213,6 @@ function Tooltip(props) { Tooltip.propTypes = tooltipPropTypes.propTypes; Tooltip.defaultProps = tooltipPropTypes.defaultProps; +Tooltip.displayName = 'Tooltip'; + export default memo(Tooltip); diff --git a/src/components/UserCurrentLocationButton.js b/src/components/UserCurrentLocationButton.js deleted file mode 100644 index 9ba74ac6c426..000000000000 --- a/src/components/UserCurrentLocationButton.js +++ /dev/null @@ -1,112 +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 ( - <> - - - {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/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js new file mode 100644 index 000000000000..23aac4839d2a --- /dev/null +++ b/src/components/ValuePicker/ValueSelectorModal.js @@ -0,0 +1,84 @@ +import React, {useState, useEffect} from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import CONST from '../../CONST'; +import HeaderWithBackButton from '../HeaderWithBackButton'; +import SelectionList from '../SelectionList'; +import Modal from '../Modal'; +import ScreenWrapper from '../ScreenWrapper'; +import styles from '../../styles/styles'; + +const propTypes = { + /** Whether the modal is visible */ + isVisible: PropTypes.bool.isRequired, + + /** Current value selected */ + currentValue: PropTypes.string, + + /** Items to pick from */ + items: PropTypes.arrayOf(PropTypes.shape({value: PropTypes.string, label: PropTypes.string})), + + /** The selected item */ + selectedItem: PropTypes.shape({value: PropTypes.string, label: PropTypes.string}), + + /** Label for values */ + label: PropTypes.string, + + /** Function to call when the user selects a item */ + onItemSelected: PropTypes.func, + + /** Function to call when the user closes the modal */ + onClose: PropTypes.func, +}; + +const defaultProps = { + currentValue: '', + items: [], + selectedItem: {}, + label: '', + onClose: () => {}, + onItemSelected: () => {}, +}; + +function ValueSelectorModal({currentValue, items, selectedItem, label, isVisible, onClose, onItemSelected}) { + const [sectionsData, setSectionsData] = useState([]); + + useEffect(() => { + const itemsData = _.map(items, (item) => ({value: item.value, keyForList: item.value, text: item.label, isSelected: item === selectedItem})); + setSectionsData(itemsData); + }, [items, selectedItem]); + + return ( + + + + + + + ); +} + +ValueSelectorModal.propTypes = propTypes; +ValueSelectorModal.defaultProps = defaultProps; +ValueSelectorModal.displayName = 'ValueSelectorModal'; + +export default ValueSelectorModal; diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js new file mode 100644 index 000000000000..161fbbfadb8b --- /dev/null +++ b/src/components/ValuePicker/index.js @@ -0,0 +1,102 @@ +import React, {useState} from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import styles from '../../styles/styles'; +import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; +import ValueSelectorModal from './ValueSelectorModal'; +import FormHelpMessage from '../FormHelpMessage'; +import refPropTypes from '../refPropTypes'; + +const propTypes = { + /** Form Error description */ + errorText: PropTypes.string, + + /** Item to display */ + value: PropTypes.string, + + /** A placeholder value to display */ + placeholder: PropTypes.string, + + /** Items to pick from */ + items: PropTypes.arrayOf(PropTypes.shape({value: PropTypes.string, label: PropTypes.string})), + + /** Label of picker */ + label: PropTypes.string, + + /** Callback to call when the input changes */ + onInputChange: PropTypes.func, + + /** A ref to forward to MenuItemWithTopDescription */ + forwardedRef: refPropTypes, +}; + +const defaultProps = { + value: undefined, + label: undefined, + placeholder: '', + items: {}, + forwardedRef: undefined, + errorText: '', + onInputChange: () => {}, +}; + +function ValuePicker({value, label, items, placeholder, errorText, onInputChange, forwardedRef}) { + const [isPickerVisible, setIsPickerVisible] = useState(false); + + const showPickerModal = () => { + setIsPickerVisible(true); + }; + + const hidePickerModal = () => { + setIsPickerVisible(false); + }; + + const updateInput = (item) => { + if (item.value !== value) { + onInputChange(item.value); + } + hidePickerModal(); + }; + + const descStyle = value.length === 0 ? styles.textNormal : null; + const selectedItem = _.find(items, {value}); + const selectedLabel = selectedItem ? selectedItem.label : ''; + + return ( + + + + + + + + ); +} + +ValuePicker.propTypes = propTypes; +ValuePicker.defaultProps = defaultProps; +ValuePicker.displayName = 'ValuePicker'; + +export default React.forwardRef((props, ref) => ( + +)); 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/WalletSection.js b/src/components/WalletSection.js new file mode 100644 index 000000000000..ec8a1680937c --- /dev/null +++ b/src/components/WalletSection.js @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Section from './Section'; +import styles from '../styles/styles'; + +const propTypes = { + /** Contents to display inside the section */ + children: PropTypes.node, + + /** The icon to display along with the title */ + icon: PropTypes.func, + + /** The text to display in the subtitle of the section */ + subtitle: PropTypes.string, + + /** The text to display in the title of the section */ + title: PropTypes.string.isRequired, +}; + +const defaultProps = { + children: null, + icon: null, + subtitle: null, +}; + +function WalletSection({children, icon, subtitle, title}) { + return ( +
+ {children} +
+ ); +} + +WalletSection.defaultProps = defaultProps; +WalletSection.displayName = 'WalletSection'; +WalletSection.propTypes = propTypes; + +export default WalletSection; 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/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/withViewportOffsetTop.js b/src/components/withViewportOffsetTop.js index 113c72ed1e1a..ccf928b3bd13 100644 --- a/src/components/withViewportOffsetTop.js +++ b/src/components/withViewportOffsetTop.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useEffect, forwardRef, useState} from 'react'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import getComponentDisplayName from '../libs/getComponentDisplayName'; @@ -13,43 +13,33 @@ const viewportOffsetTopPropTypes = { }; export default function (WrappedComponent) { - class WithViewportOffsetTop extends Component { - constructor(props) { - super(props); - - this.updateDimensions = this.updateDimensions.bind(this); - - this.state = { - viewportOffsetTop: 0, + function WithViewportOffsetTop(props) { + const [viewportOffsetTop, setViewportOffsetTop] = useState(0); + + useEffect(() => { + /** + * @param {SyntheticEvent} e + */ + const updateDimensions = (e) => { + const targetOffsetTop = lodashGet(e, 'target.offsetTop', 0); + setViewportOffsetTop(targetOffsetTop); }; - } - - componentDidMount() { - this.removeViewportResizeListener = addViewportResizeListener(this.updateDimensions); - } - componentWillUnmount() { - this.removeViewportResizeListener(); - } + const removeViewportResizeListener = addViewportResizeListener(updateDimensions); - /** - * @param {SyntheticEvent} e - */ - updateDimensions(e) { - const viewportOffsetTop = lodashGet(e, 'target.offsetTop', 0); - this.setState({viewportOffsetTop}); - } - - render() { - return ( - - ); - } + return () => { + removeViewportResizeListener(); + }; + }, []); + + return ( + + ); } WithViewportOffsetTop.displayName = `WithViewportOffsetTop(${getComponentDisplayName(WrappedComponent)})`; @@ -59,7 +49,7 @@ export default function (WrappedComponent) { WithViewportOffsetTop.defaultProps = { forwardedRef: undefined, }; - return React.forwardRef((props, ref) => ( + return forwardRef((props, ref) => ( { + if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current) { + return; + } + inputRef.current.focus(); + }, [isScreenTransitionEnded, isInputInitialized]); + + useFocusEffect( + useCallback(() => { + focusTimeoutRef.current = setTimeout(() => { + setIsScreenTransitionEnded(true); + }, CONST.ANIMATED_TRANSITION); + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []), + ); + + const inputCallbackRef = (ref) => { + inputRef.current = ref; + setIsInputInitialized(true); + }; + + return {inputCallbackRef}; +} diff --git a/src/hooks/useDragAndDrop.js b/src/hooks/useDragAndDrop.ts similarity index 83% rename from src/hooks/useDragAndDrop.js rename to src/hooks/useDragAndDrop.ts index fb1d158e4063..27230dd94679 100644 --- a/src/hooks/useDragAndDrop.js +++ b/src/hooks/useDragAndDrop.ts @@ -1,4 +1,4 @@ -import {useEffect, useRef, useState, useCallback} from 'react'; +import React, {useEffect, useRef, useState, useCallback} from 'react'; import {useIsFocused} from '@react-navigation/native'; const COPY_DROP_EFFECT = 'copy'; @@ -8,15 +8,22 @@ const DRAG_OVER_EVENT = 'dragover'; const DRAG_LEAVE_EVENT = 'dragleave'; const DROP_EVENT = 'drop'; +type DragAndDropParams = { + dropZone: React.MutableRefObject; + onDrop?: (event?: DragEvent) => void; + shouldAllowDrop?: boolean; + isDisabled?: boolean; + shouldAcceptDrop?: (event?: DragEvent) => boolean; +}; + +type DragAndDropOptions = { + isDraggingOver: boolean; +}; + /** - * @param {Object} dropZone – ref to the dropZone component - * @param {Function} [onDrop] - * @param {Boolean} [shouldAllowDrop] - * @param {Boolean} [isDisabled] - * @param {Function} [shouldAcceptDrop] - * @returns {{isDraggingOver: Boolean}} + * @param dropZone – ref to the dropZone component */ -export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}) { +export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}: DragAndDropParams): DragAndDropOptions { const isFocused = useIsFocused(); const [isDraggingOver, setIsDraggingOver] = useState(false); @@ -36,23 +43,24 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow }, [isFocused, isDisabled]); const setDropEffect = useCallback( - (event) => { + (event: DragEvent) => { const effect = shouldAllowDrop && shouldAcceptDrop(event) ? COPY_DROP_EFFECT : NONE_DROP_EFFECT; - // eslint-disable-next-line no-param-reassign - event.dataTransfer.dropEffect = effect; - // eslint-disable-next-line no-param-reassign - event.dataTransfer.effectAllowed = effect; + + if (event.dataTransfer) { + // eslint-disable-next-line no-param-reassign + event.dataTransfer.dropEffect = effect; + // eslint-disable-next-line no-param-reassign + event.dataTransfer.effectAllowed = effect; + } }, [shouldAllowDrop, shouldAcceptDrop], ); /** * Handles all types of drag-N-drop events on the drop zone associated with composer - * - * @param {Object} event native Event */ const dropZoneDragHandler = useCallback( - (event) => { + (event: DragEvent) => { if (!isFocused || isDisabled || !shouldAcceptDrop(event)) { return; } 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 72e183fc8561..50f15de2290e 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -27,6 +27,7 @@ import type { SettleExpensifyCardParams, RequestAmountParams, SplitAmountParams, + DidSplitAmountMessageParams, AmountEachParams, PayerOwesAmountParams, PayerOwesParams, @@ -56,7 +57,7 @@ import type { ConfirmThatParams, UntilTimeParams, StepCounterParams, - UserIsAlreadyMemberOfWorkspaceParams, + UserIsAlreadyMemberParams, GoToRoomParams, WelcomeNoteParams, RoomNameReservedErrorParams, @@ -263,6 +264,7 @@ export default { recent: 'Recent', all: 'All', tbd: 'TBD', + card: 'Card', }, location: { useCurrent: 'Use current location', @@ -379,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', @@ -477,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', @@ -506,6 +516,8 @@ export default { flash: 'flash', shutter: 'shutter', gallery: 'gallery', + deleteReceipt: 'Delete receipt', + deleteConfirmation: 'Are you sure you want to delete this receipt?', addReceipt: 'Add receipt', }, iou: { @@ -513,6 +525,8 @@ export default { approve: 'Approve', approved: 'Approved', cash: 'Cash', + card: 'Card', + original: 'Original', split: 'Split', addToSplit: 'Add to split', splitBill: 'Split bill', @@ -523,11 +537,14 @@ export default { pay: 'Pay', viewDetails: 'View details', pending: 'Pending', + posted: 'Posted', deleteReceipt: 'Delete receipt', receiptScanning: 'Receipt scan in progress…', receiptMissingDetails: 'Receipt missing details', receiptStatusTitle: 'Scanning…', receiptStatusText: "Only you can see this receipt when it's scanning. Check back later or enter the details now.", + receiptScanningFailed: 'Receipt scanning failed. Enter the details manually.', + transactionPendingText: 'It takes a few days from the date the card was used for the transaction to post.', requestCount: ({count, scanningReceipts = 0}: RequestCountParams) => `${count} requests${scanningReceipts > 0 ? `, ${scanningReceipts} scanning` : ''}`, deleteRequest: 'Delete request', deleteConfirmation: 'Are you sure that you want to delete this request?', @@ -538,11 +555,14 @@ export default { requestAmount: ({amount}: RequestAmountParams) => `request ${amount}`, requestedAmount: ({formattedAmount, comment}: RequestedAmountMessageParams) => `requested ${formattedAmount}${comment ? ` for ${comment}` : ''}`, splitAmount: ({amount}: SplitAmountParams) => `split ${amount}`, + didSplitAmount: ({formattedAmount, comment}: DidSplitAmountMessageParams) => `split ${formattedAmount}${comment ? ` for ${comment}` : ''}`, amountEach: ({amount}: AmountEachParams) => `${amount} each`, payerOwesAmount: ({payer, amount}: PayerOwesAmountParams) => `${payer} owes ${amount}`, payerOwes: ({payer}: PayerOwesParams) => `${payer} owes: `, payerPaidAmount: ({payer, amount}: PayerPaidAmountParams): string => `${payer} paid ${amount}`, payerPaid: ({payer}: PayerPaidParams) => `${payer} paid: `, + payerSpentAmount: ({payer, amount}: PayerPaidAmountParams): string => `${payer} spent ${amount}`, + payerSpent: ({payer}: PayerPaidParams) => `${payer} spent: `, managerApproved: ({manager}: ManagerApprovedParams) => `${manager} approved:`, payerSettled: ({amount}: PayerSettledParams) => `paid ${amount}`, waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `started settling up, payment is held until ${submitterDisplayName} adds a bank account`, @@ -571,7 +591,11 @@ export default { genericDeleteFailureMessage: 'Unexpected error deleting the money request, please try again later', genericEditFailureMessage: 'Unexpected error editing the money request, please try again later', genericSmartscanFailureMessage: 'Transaction is missing fields', + 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', @@ -828,6 +852,19 @@ export default { setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.', }, addBankAccountFailure: 'An unexpected error occurred while trying to add your bank account. Please try again.', + getPaidFaster: 'Get paid faster', + addPaymentMethod: 'Add a payment method to send and receive payments directly in the app.', + getPaidBackFaster: 'Get paid back faster', + secureAccessToYourMoney: 'Secure access to your money', + receiveMoney: 'Receive money in your local currency', + expensifyWallet: 'Expensify Wallet', + sendAndReceiveMoney: 'Send and receive money from your Expensify Wallet.', + bankAccounts: 'Bank accounts', + addBankAccountToSendAndReceive: 'Add a bank account to send and receive payments directly in the app.', + addBankAccount: 'Add bank account', + assignedCards: 'Assigned cards', + assignedCardsDescription: 'These are cards assigned by a Workspace admin to manage company spend.', + expensifyCard: 'Expensify Card', }, cardPage: { expensifyCard: 'Expensify Card', @@ -842,6 +879,7 @@ export default { address: 'Address', revealDetails: 'Reveal details', copyCardNumber: 'Copy card number', + updateAddress: 'Update address', }, }, reportFraudPage: { @@ -904,6 +942,7 @@ export default { }, welcomeMessagePage: { welcomeMessage: 'Welcome message', + welcomeMessageOptional: 'Welcome message (optional)', explainerText: 'Set a custom welcome message that will be sent to users when they join this room.', }, languagePage: { @@ -1007,7 +1046,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}.`, @@ -1163,7 +1202,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 ', @@ -1553,13 +1592,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', @@ -1589,7 +1633,7 @@ export default { statementPage: { generatingPDF: "We're generating your PDF right now. Please come back later!", }, - keyboardShortcutModal: { + keyboardShortcutsPage: { title: 'Keyboard shortcuts', subtitle: 'Save time with these handy keyboard shortcuts:', shortcuts: { @@ -1604,6 +1648,9 @@ export default { screenShare: 'Screen share', screenShareRequest: 'Expensify is inviting you to a screen share', }, + search: { + resultsAreLimited: 'Search results are limited.', + }, genericErrorPage: { title: 'Uh-oh, something went wrong!', body: { @@ -1750,6 +1797,7 @@ export default { parentReportAction: { deletedMessage: '[Deleted message]', deletedRequest: '[Deleted request]', + reversedTransaction: '[Reversed transaction]', deletedTask: '[Deleted task]', hiddenMessage: '[Hidden message]', }, @@ -1811,7 +1859,7 @@ export default { }, cardTransactions: { notActivated: 'Not activated', - outOfPocketSpend: 'Out-of-pocket spend', + outOfPocket: 'Out of pocket', companySpend: 'Company spend', }, distance: { @@ -1833,6 +1881,24 @@ 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', + }, globalNavigationOptions: { chats: 'Chats', }, diff --git a/src/languages/es.ts b/src/languages/es.ts index eed5c75e2269..8f8addda8273 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -27,6 +27,7 @@ import type { SettleExpensifyCardParams, RequestAmountParams, SplitAmountParams, + DidSplitAmountMessageParams, AmountEachParams, PayerOwesAmountParams, PayerOwesParams, @@ -56,7 +57,7 @@ import type { ConfirmThatParams, UntilTimeParams, StepCounterParams, - UserIsAlreadyMemberOfWorkspaceParams, + UserIsAlreadyMemberParams, GoToRoomParams, WelcomeNoteParams, RoomNameReservedErrorParams, @@ -253,6 +254,7 @@ export default { recent: 'Reciente', all: 'Todo', tbd: 'Por determinar', + card: 'Tarjeta', }, location: { useCurrent: 'Usar ubicaciΓ³n actual', @@ -370,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', @@ -469,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', @@ -498,6 +508,8 @@ export default { flash: 'flash', shutter: 'obturador', gallery: 'galerΓ­a', + deleteReceipt: 'Eliminar recibo', + deleteConfirmation: 'ΒΏEstΓ‘s seguro de que quieres borrar este recibo?', addReceipt: 'AΓ±adir recibo', }, iou: { @@ -505,6 +517,8 @@ export default { approve: 'Aprobar', approved: 'Aprobado', cash: 'Efectivo', + card: 'Tarjeta', + original: 'Original', split: 'Dividir', addToSplit: 'AΓ±adir para dividir', splitBill: 'Dividir factura', @@ -515,11 +529,14 @@ export default { pay: 'Pagar', viewDetails: 'Ver detalles', pending: 'Pendiente', + posted: 'Contabilizado', deleteReceipt: 'Eliminar recibo', receiptScanning: 'Escaneo de recibo en curso…', receiptMissingDetails: 'Recibo con campos vacΓ­os', receiptStatusTitle: 'Escaneando…', receiptStatusText: 'Solo tΓΊ puedes ver este recibo cuando se estΓ‘ escaneando. Vuelve mΓ‘s tarde o introduce los detalles ahora.', + receiptScanningFailed: 'El escaneo de recibo ha fallado. Introduce los detalles manualmente.', + transactionPendingText: 'La transacciΓ³n tarda unos dΓ­as en contabilizarse desde la fecha en que se utilizΓ³ la tarjeta.', requestCount: ({count, scanningReceipts = 0}: RequestCountParams) => `${count} solicitudes${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}`, deleteRequest: 'Eliminar pedido', deleteConfirmation: 'ΒΏEstΓ‘s seguro de que quieres eliminar este pedido?', @@ -530,11 +547,14 @@ export default { requestAmount: ({amount}: RequestAmountParams) => `solicitar ${amount}`, requestedAmount: ({formattedAmount, comment}: RequestedAmountMessageParams) => `solicitΓ© ${formattedAmount}${comment ? ` para ${comment}` : ''}`, splitAmount: ({amount}: SplitAmountParams) => `dividir ${amount}`, + didSplitAmount: ({formattedAmount, comment}: DidSplitAmountMessageParams) => `dividiΓ³ ${formattedAmount}${comment ? ` para ${comment}` : ''}`, amountEach: ({amount}: AmountEachParams) => `${amount} cada uno`, payerOwesAmount: ({payer, amount}: PayerOwesAmountParams) => `${payer} debe ${amount}`, payerOwes: ({payer}: PayerOwesParams) => `${payer} debe: `, payerPaidAmount: ({payer, amount}: PayerPaidAmountParams) => `${payer} pagΓ³ ${amount}`, payerPaid: ({payer}: PayerPaidParams) => `${payer} pagΓ³: `, + payerSpentAmount: ({payer, amount}: PayerPaidAmountParams): string => `${payer} gastΓ³ ${amount}`, + payerSpent: ({payer}: PayerPaidParams) => `${payer} gastΓ³: `, managerApproved: ({manager}: ManagerApprovedParams) => `${manager} aprobΓ³:`, payerSettled: ({amount}: PayerSettledParams) => `pagΓ³ ${amount}`, waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `inicio el pago, pero no se procesarΓ‘ hasta que ${submitterDisplayName} aΓ±ada una cuenta bancaria`, @@ -565,7 +585,11 @@ export default { genericDeleteFailureMessage: 'Error inesperado eliminando la solicitud de dinero. Por favor, intΓ©ntalo mΓ‘s tarde', genericEditFailureMessage: 'Error inesperado al guardar la solicitud de dinero. Por favor, intΓ©ntalo mΓ‘s tarde', genericSmartscanFailureMessage: 'La transacciΓ³n tiene campos vacΓ­os', + 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', @@ -824,6 +848,19 @@ export default { setDefaultFailure: 'No se ha podido configurar el mΓ©todo de pago.', }, addBankAccountFailure: 'OcurriΓ³ un error inesperado al intentar aΓ±adir la cuenta bancaria. IntΓ©ntalo de nuevo.', + getPaidFaster: 'Cobra mΓ‘s rΓ‘pido', + addPaymentMethod: 'AΓ±ade un mΓ©todo de pago para enviar y recibir pagos directamente en la aplicaciΓ³n.', + getPaidBackFaster: 'Recibe tus pagos mΓ‘s rΓ‘pido', + secureAccessToYourMoney: 'Acceso seguro a tu dinero', + receiveMoney: 'Recibe dinero en tu moneda local', + expensifyWallet: 'Billetera Expensify', + sendAndReceiveMoney: 'EnvΓ­a y recibe dinero desde tu Billetera Expensify.', + bankAccounts: 'Cuentas bancarias', + addBankAccountToSendAndReceive: 'AΓ±ade una cuenta bancaria para enviar y recibir pagos directamente en la aplicaciΓ³n.', + addBankAccount: 'Agregar cuenta bancaria', + assignedCards: 'Tarjetas asignadas', + assignedCardsDescription: 'Son tarjetas asignadas por un administrador del Espacio de Trabajo para gestionar los gastos de la empresa.', + expensifyCard: 'Tarjeta Expensify', }, cardPage: { expensifyCard: 'Tarjeta Expensify', @@ -838,6 +875,7 @@ export default { address: 'DirecciΓ³n', revealDetails: 'Revelar detalles', copyCardNumber: 'Copiar nΓΊmero de la tarjeta', + updateAddress: 'Actualizar direcciΓ³n', }, }, reportFraudPage: { @@ -902,6 +940,7 @@ export default { }, welcomeMessagePage: { welcomeMessage: 'Mensaje de bienvenida', + welcomeMessageOptional: 'Mensaje de bienvenida (opcional)', explainerText: 'Configura un mensaje de bienvenida privado y personalizado que se enviarΓ‘ cuando los usuarios se unan a esta sala de chat.', }, languagePage: { @@ -1005,7 +1044,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}.`, @@ -1181,7 +1220,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 ', @@ -1577,13 +1616,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', @@ -1613,7 +1657,7 @@ export default { statementPage: { generatingPDF: 'Estamos generando tu PDF ahora mismo. Β‘Por favor, vuelve mΓ‘s tarde!', }, - keyboardShortcutModal: { + keyboardShortcutsPage: { title: 'Atajos de teclado', subtitle: 'Ahorra tiempo con estos atajos de teclado:', shortcuts: { @@ -1628,6 +1672,9 @@ export default { screenShare: 'Compartir pantalla', screenShareRequest: 'Expensify te estΓ‘ invitando a compartir la pantalla', }, + search: { + resultsAreLimited: 'Los resultados de bΓΊsqueda estΓ‘n limitados.', + }, genericErrorPage: { title: 'Β‘Uh-oh, algo saliΓ³ mal!', body: { @@ -2234,6 +2281,7 @@ export default { parentReportAction: { deletedMessage: '[Mensaje eliminado]', deletedRequest: '[Pedido eliminado]', + reversedTransaction: '[TransacciΓ³n anulada]', deletedTask: '[Tarea eliminado]', hiddenMessage: '[Mensaje oculto]', }, @@ -2296,7 +2344,7 @@ export default { }, cardTransactions: { notActivated: 'No activado', - outOfPocketSpend: 'Gastos por cuenta propia', + outOfPocket: 'Por cuenta propia', companySpend: 'Gastos de empresa', }, distance: { @@ -2318,7 +2366,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 3ee504ccddd7..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 = { @@ -106,6 +107,8 @@ type RequestedAmountMessageParams = {formattedAmount: string; comment: string}; type SplitAmountParams = {amount: number}; +type DidSplitAmountMessageParams = {formattedAmount: string; comment: string}; + type AmountEachParams = {amount: number}; type PayerOwesAmountParams = {payer: string; amount: number}; @@ -166,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}; @@ -269,6 +272,7 @@ export type { RequestAmountParams, RequestedAmountMessageParams, SplitAmountParams, + DidSplitAmountMessageParams, AmountEachParams, PayerOwesAmountParams, PayerOwesParams, @@ -299,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 e138034ed327..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({ @@ -29,7 +29,7 @@ function getMonthFromExpirationDateString(expirationDateString: string) { * @param cardID * @returns boolean */ -function isExpensifyCard(cardID: string) { +function isExpensifyCard(cardID: number) { const card = allCards[cardID]; if (!card) { return false; @@ -41,13 +41,13 @@ function isExpensifyCard(cardID: string) { * @param cardID * @returns string in format % - %. */ -function getCardDescription(cardID: string) { +function getCardDescription(cardID: number) { const card = allCards[cardID]; if (!card) { 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,21 +60,15 @@ 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) => [2, 3, 4, 7].includes(card.state)); - return lodash.groupBy(activeCards, (card) => card.domainName.toLowerCase()); + 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/Clipboard/index.js b/src/libs/Clipboard/index.js index b770b2f2c787..6fbaa8eccd31 100644 --- a/src/libs/Clipboard/index.js +++ b/src/libs/Clipboard/index.js @@ -1,5 +1,4 @@ -// on Web/desktop this import will be replaced with `react-native-web` -import {Clipboard} from 'react-native-web'; +import Clipboard from '@react-native-clipboard/clipboard'; import lodashGet from 'lodash/get'; import CONST from '../../CONST'; import * as Browser from '../Browser'; diff --git a/src/libs/Clipboard/index.native.js b/src/libs/Clipboard/index.native.js index d6345ac94a36..fe79e38585c4 100644 --- a/src/libs/Clipboard/index.native.js +++ b/src/libs/Clipboard/index.native.js @@ -1,7 +1,7 @@ -import Clipboard from '@react-native-community/clipboard'; +import Clipboard from '@react-native-clipboard/clipboard'; /** - * Sets a string on the Clipboard object via @react-native-community/clipboard + * Sets a string on the Clipboard object via @react-native-clipboard/clipboard * * @param {String} text */ diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index b22135b4f767..b5c28cfc79e8 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts @@ -8,7 +8,7 @@ import UpdateNumberOfLines from './types'; * divide by line height to get the total number of rows for the textarea. */ const updateNumberOfLines: UpdateNumberOfLines = (props, event) => { - const lineHeight = styles.textInputCompose.lineHeight; + const lineHeight = styles.textInputCompose.lineHeight ?? 0; const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2; const inputHeight = event?.nativeEvent?.contentSize?.height ?? null; if (!inputHeight) { diff --git a/src/libs/DistanceRequestUtils.js b/src/libs/DistanceRequestUtils.js index 9b875fb82004..32de571c218c 100644 --- a/src/libs/DistanceRequestUtils.js +++ b/src/libs/DistanceRequestUtils.js @@ -89,8 +89,7 @@ const getDistanceMerchant = (hasRoute, distanceInMeters, unit, rate, currency, t const distanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.miles') : translate('common.kilometers'); const singularDistanceUnit = unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer'); const unitString = distanceInUnits === 1 ? singularDistanceUnit : distanceUnit; - - const ratePerUnit = PolicyUtils.getUnitRateValue({rate}, toLocaleDigit); + const ratePerUnit = rate ? PolicyUtils.getUnitRateValue({rate}, toLocaleDigit) : translate('common.tbd'); const currencySymbol = CurrencyUtils.getCurrencySymbol(currency) || `${currency} `; return `${distanceInUnits} ${unitString} @ ${currencySymbol}${ratePerUnit} / ${singularDistanceUnit}`; diff --git a/src/libs/DomUtils/index.native.ts b/src/libs/DomUtils/index.native.ts index d3774baec208..9a9758228776 100644 --- a/src/libs/DomUtils/index.native.ts +++ b/src/libs/DomUtils/index.native.ts @@ -1,10 +1,7 @@ -import {BlurActiveElement, GetActiveElement} from './types'; - -const blurActiveElement: BlurActiveElement = () => {}; +import GetActiveElement from './types'; const getActiveElement: GetActiveElement = () => null; export default { - blurActiveElement, getActiveElement, }; diff --git a/src/libs/DomUtils/index.ts b/src/libs/DomUtils/index.ts index 784a01bd7885..94dd54547454 100644 --- a/src/libs/DomUtils/index.ts +++ b/src/libs/DomUtils/index.ts @@ -1,18 +1,7 @@ -import {BlurActiveElement, GetActiveElement} from './types'; - -const blurActiveElement: BlurActiveElement = () => { - const activeElement = document.activeElement as HTMLElement; - - if (!activeElement?.blur) { - return; - } - - activeElement.blur(); -}; +import GetActiveElement from './types'; const getActiveElement: GetActiveElement = () => document.activeElement; export default { - blurActiveElement, getActiveElement, }; diff --git a/src/libs/DomUtils/types.ts b/src/libs/DomUtils/types.ts index 8be7b3cddae5..fe121bc07f3c 100644 --- a/src/libs/DomUtils/types.ts +++ b/src/libs/DomUtils/types.ts @@ -1,4 +1,3 @@ -type BlurActiveElement = () => void; type GetActiveElement = () => Element | null; -export type {BlurActiveElement, GetActiveElement}; +export default GetActiveElement; diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index af498831f4a4..344d0c3bd397 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -110,6 +110,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 * @@ -426,7 +443,7 @@ function suggestEmojis(text, lang, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMO * @returns {Number} */ const getPreferredSkinToneIndex = (val) => { - if (!_.isNull(val) && Number.isInteger(Number(val))) { + if (!_.isNull(val) && !_.isUndefined(val) && Number.isInteger(Number(val))) { return val; } @@ -497,4 +514,5 @@ export { replaceAndExtractEmojis, extractEmojis, getAddedEmojis, + isFirstLetterEmoji, }; diff --git a/src/libs/HeaderUtils.js b/src/libs/HeaderUtils.js new file mode 100644 index 000000000000..16d375ea1124 --- /dev/null +++ b/src/libs/HeaderUtils.js @@ -0,0 +1,28 @@ +import * as Localize from './Localize'; +import * as Session from './actions/Session'; +import * as Report from './actions/Report'; +import * as Expensicons from '../components/Icon/Expensicons'; + +/** + * @param {Object} report + * @returns {Object} pin/unpin object + */ +function getPinMenuItem(report) { + if (!report.isPinned) { + return { + icon: Expensicons.Pin, + text: Localize.translateLocal('common.pin'), + onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), + }; + } + return { + icon: Expensicons.Pin, + text: Localize.translateLocal('common.unPin'), + onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), + }; +} + +export { + // eslint-disable-next-line import/prefer-default-export + getPinMenuItem, +}; 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/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js index f91c81a1b856..bce65744801c 100644 --- a/src/libs/KeyboardShortcut/index.js +++ b/src/libs/KeyboardShortcut/index.js @@ -164,7 +164,9 @@ function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOn */ const KeyboardShortcut = { subscribe, + getDisplayName, getDocumentedShortcuts, + getPlatformEquivalentForKeys, }; export default KeyboardShortcut; 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 428550a43aa8..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); @@ -176,22 +198,30 @@ class AuthScreens extends React.Component { Download.clearDownloads(); Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER); + const shortcutsOverviewShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUTS; const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH; const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT; - // Listen for the key K being pressed so that focus can be given to - // the chat switcher, or new group chat - // based on the key modifiers pressed and the operating system - this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe( - searchShortcutConfig.shortcutKey, + // Listen to keyboard shortcuts for opening certain pages + this.unsubscribeShortcutsOverviewShortcut = KeyboardShortcut.subscribe( + shortcutsOverviewShortcutConfig.shortcutKey, () => { Modal.close(() => { - if (Navigation.isActiveRoute(ROUTES.SEARCH)) { + if (Navigation.isActiveRoute(ROUTES.KEYBOARD_SHORTCUTS)) { return; } - return Navigation.navigate(ROUTES.SEARCH); + return Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS); }); }, + shortcutsOverviewShortcutConfig.descriptionKey, + shortcutsOverviewShortcutConfig.modifiers, + true, + ); + this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe( + searchShortcutConfig.shortcutKey, + () => { + Modal.close(() => Navigation.navigate(ROUTES.SEARCH)); + }, searchShortcutConfig.descriptionKey, searchShortcutConfig.modifiers, true, @@ -199,12 +229,7 @@ class AuthScreens extends React.Component { this.unsubscribeChatShortcut = KeyboardShortcut.subscribe( chatShortcutConfig.shortcutKey, () => { - Modal.close(() => { - if (Navigation.isActiveRoute(ROUTES.NEW)) { - return; - } - Navigation.navigate(ROUTES.NEW); - }); + Modal.close(() => Navigation.navigate(ROUTES.NEW)); }, chatShortcutConfig.descriptionKey, chatShortcutConfig.modifiers, @@ -217,6 +242,9 @@ class AuthScreens extends React.Component { } componentWillUnmount() { + if (this.unsubscribeShortcutsOverviewShortcut) { + this.unsubscribeShortcutsOverviewShortcut(); + } if (this.unsubscribeSearchShortcut) { this.unsubscribeSearchShortcut(); } @@ -293,6 +321,11 @@ class AuthScreens extends React.Component { options={defaultScreenOptions} component={DemoSetupPage} /> + require('../../../pages/iou/SplitBillDetailsPage').default, + SplitDetails_Edit_Request: () => require('../../../pages/EditSplitBillPage').default, + SplitDetails_Edit_Currency: () => require('../../../pages/iou/IOUCurrencySelection').default, }); const DetailsModalStackNavigator = createModalStackNavigator({ @@ -89,6 +91,14 @@ const ReportParticipantsModalStackNavigator = createModalStackNavigator({ ReportParticipants_Root: () => 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, }); @@ -141,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, @@ -153,6 +164,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ Settings_Status_Set: () => require('../../../pages/settings/Profile/CustomStatus/StatusSetPage').default, Workspace_Initial: () => require('../../../pages/workspace/WorkspaceInitialPage').default, Workspace_Settings: () => require('../../../pages/workspace/WorkspaceSettingsPage').default, + Workspace_Settings_Currency: () => require('../../../pages/workspace/WorkspaceSettingsCurrencyPage').default, Workspace_Card: () => require('../../../pages/workspace/card/WorkspaceCardPage').default, Workspace_Reimburse: () => require('../../../pages/workspace/reimburse/WorkspaceReimbursePage').default, Workspace_RateAndUnit: () => require('../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage').default, @@ -165,6 +177,8 @@ 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, }); const EnablePaymentsStackNavigator = createModalStackNavigator({ @@ -225,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..e371274f89fb 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js @@ -5,7 +5,6 @@ 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'; @@ -40,7 +39,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/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 3e3dc59dcd80..6bbf53ffa6ea 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -3,7 +3,6 @@ import lodashGet from 'lodash/get'; import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native'; import {getActionFromState} from '@react-navigation/core'; import Log from '../Log'; -import DomUtils from '../DomUtils'; import linkTo from './linkTo'; import ROUTES from '../../ROUTES'; import linkingConfig from './linkingConfig'; @@ -81,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})) { @@ -92,11 +91,6 @@ function navigate(route = ROUTES.HOME, type) { return; } - // A pressed navigation button will remain focused, keeping its tooltip visible, even if it's supposed to be out of view. - // To prevent that we blur the button manually (especially for Safari, where the mouse leave event is missing). - // More info: https://github.com/Expensify/App/issues/13146 - DomUtils.blurActiveElement(); - linkTo(navigationRef.current, route, type); } @@ -178,6 +172,11 @@ function dismissModal(targetReportID) { const action = getActionFromState(state, linkingConfig.config); action.type = 'REPLACE'; navigationRef.current.dispatch(action); + // If not-found page is in the route stack, we need to close it + } else if (targetReportID && _.some(rootState.routes, (route) => route.name === SCREENS.NOT_FOUND)) { + const lastRouteIndex = rootState.routes.length - 1; + const centralRouteIndex = _.findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + navigationRef.current.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); } else { navigationRef.current.dispatch({...StackActions.pop(), target: rootState.key}); } diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 34a52adfeca9..c7a3b14e4fb0 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -101,7 +101,7 @@ function NavigationRoot(props) { const animateStatusBarBackgroundColor = () => { const currentRoute = navigationRef.getCurrentRoute(); - const currentScreenBackgroundColor = themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; + const currentScreenBackgroundColor = (currentRoute.params && currentRoute.params.backgroundColor) || themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG; prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current; statusBarBackgroundColor.current = currentScreenBackgroundColor; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 5616e8d63797..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, @@ -185,6 +197,9 @@ export default { Workspace_Settings: { path: ROUTES.WORKSPACE_SETTINGS.route, }, + Workspace_Settings_Currency: { + path: ROUTES.WORKSPACE_SETTINGS_CURRENCY.route, + }, Workspace_Card: { path: ROUTES.WORKSPACE_CARD.route, }, @@ -219,6 +234,9 @@ export default { GetAssistance: { path: ROUTES.GET_ASSISTANCE.route, }, + KeyboardShortcuts: { + path: ROUTES.KEYBOARD_SHORTCUTS, + }, }, }, Private_Notes: { @@ -311,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: { @@ -352,6 +380,8 @@ export default { SplitDetails: { screens: { SplitDetails_Root: ROUTES.SPLIT_BILL_DETAILS.route, + SplitDetails_Edit_Request: ROUTES.EDIT_SPLIT_BILL.route, + SplitDetails_Edit_Currency: ROUTES.EDIT_SPLIT_BILL_CURRENCY.route, }, }, Task_Details: { 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/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 82285545b303..0b39bbe5b5d5 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,32 +94,17 @@ Onyx.connect({ }, }); -/** - * Get the option for a policy expense report. - * @param {Object} report - * @returns {Object} - */ -function getPolicyExpenseReportOption(report) { - const expenseReport = policyExpenseReports[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`]; - const policyExpenseChatAvatarSource = ReportUtils.getWorkspaceAvatar(expenseReport); - const reportName = ReportUtils.getReportName(expenseReport); - return { - ...expenseReport, - keyForList: expenseReport.policyID, - text: reportName, - alternateText: Localize.translateLocal('workspace.common.workspace'), - icons: [ - { - source: policyExpenseChatAvatarSource, - name: reportName, - type: CONST.ICON_TYPE_WORKSPACE, - }, - ], - selected: report.selected, - isPolicyExpenseChat: true, - searchText: report.searchText, - }; -} +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 @@ -347,20 +335,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 = { @@ -391,7 +384,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( @@ -402,6 +396,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); @@ -471,6 +467,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { isArchivedRoom: false, shouldShowSubscript: false, isPolicyExpenseChat: false, + isOwnPolicyExpenseChat: false, isExpenseReport: false, policyID: null, isOptimisticPersonalDetail: false, @@ -490,12 +487,13 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { result.isChatRoom = ReportUtils.isChatRoom(report); result.isDefaultRoom = ReportUtils.isDefaultRoom(report); result.isArchivedRoom = ReportUtils.isArchivedRoom(report); - result.isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report); result.isExpenseReport = ReportUtils.isExpenseReport(report); result.isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report); result.isThread = ReportUtils.isChatThread(report); result.isTaskReport = ReportUtils.isTaskReport(report); result.shouldShowSubscript = ReportUtils.shouldReportShowSubscript(report); + result.isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report); + result.isOwnPolicyExpenseChat = report.isOwnPolicyExpenseChat || false; result.allReportErrors = getAllReportErrors(report, reportActions); result.brickRoadIndicator = !_.isEmpty(result.allReportErrors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; result.pendingAction = report.pendingFields ? report.pendingFields.addWorkspaceRoom || report.pendingFields.createChat : null; @@ -546,7 +544,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; @@ -562,6 +560,32 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, { return result; } +/** + * Get the option for a policy expense report. + * @param {Object} report + * @returns {Object} + */ +function getPolicyExpenseReportOption(report) { + const expenseReport = policyExpenseReports[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`]; + + const option = createOption( + expenseReport.participantAccountIDs, + allPersonalDetails, + expenseReport, + {}, + { + showChatPreviewLine: false, + forcePolicyNamePreview: false, + }, + ); + + // Update text & alternateText because createOption returns workspace name only if report is owned by the user + option.text = ReportUtils.getPolicyName(expenseReport); + option.alternateText = Localize.translateLocal('workspace.common.workspace'); + option.selected = report.selected; + return option; +} + /** * Searches for a match when provided with a value * @@ -970,6 +994,7 @@ function getOptions( tags = {}, recentlyUsedTags = [], canInviteUser = true, + includeSelectedOptions = false, }, ) { if (includeCategories) { @@ -1106,8 +1131,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}); @@ -1353,6 +1385,7 @@ function getIOUConfirmationOptionsFromParticipants(participants, amountText) { * @param {Object} [tags] * @param {Array} [recentlyUsedTags] * @param {boolean} [canInviteUser] + * @param {boolean} [includeSelectedOptions] * @returns {Object} */ function getFilteredOptions( @@ -1371,6 +1404,7 @@ function getFilteredOptions( tags = {}, recentlyUsedTags = [], canInviteUser = true, + includeSelectedOptions = false, ) { return getOptions(reports, personalDetails, { betas, @@ -1389,6 +1423,7 @@ function getFilteredOptions( tags, recentlyUsedTags, canInviteUser, + includeSelectedOptions, }); } @@ -1524,6 +1559,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 @@ -1543,6 +1592,7 @@ export { getShareDestinationOptions, getMemberInviteOptions, getHeaderMessage, + getHeaderMessageForNonUserList, getPersonalDetailsForAccountIDs, getIOUConfirmationOptionsFromPayeePersonalDetail, getIOUConfirmationOptionsFromParticipants, diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts index 64260569639e..295394f37140 100644 --- a/src/libs/PaymentUtils.ts +++ b/src/libs/PaymentUtils.ts @@ -1,19 +1,13 @@ -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 */ @@ -53,22 +47,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/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/Pusher/EventType.js b/src/libs/Pusher/EventType.ts similarity index 97% rename from src/libs/Pusher/EventType.js rename to src/libs/Pusher/EventType.ts index 85ccc5e17242..89e8a0ca0260 100644 --- a/src/libs/Pusher/EventType.js +++ b/src/libs/Pusher/EventType.ts @@ -11,4 +11,4 @@ export default { MULTIPLE_EVENT_TYPE: { ONYX_API_UPDATE: 'onyxApiUpdate', }, -}; +} as const; diff --git a/src/libs/Pusher/library/index.js b/src/libs/Pusher/library/index.js deleted file mode 100644 index 12cfae7df02f..000000000000 --- a/src/libs/Pusher/library/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * We use the standard pusher-js module to support pusher on web environments. - * @see: https://github.com/pusher/pusher-js - */ -import Pusher from 'pusher-js/with-encryption'; - -export default Pusher; diff --git a/src/libs/Pusher/library/index.native.js b/src/libs/Pusher/library/index.native.js deleted file mode 100644 index 7b87d0c8bdfb..000000000000 --- a/src/libs/Pusher/library/index.native.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * We use the pusher-js/react-native module to support pusher on native environments. - * @see: https://github.com/pusher/pusher-js - */ -import Pusher from 'pusher-js/react-native'; - -export default Pusher; diff --git a/src/libs/Pusher/library/index.native.ts b/src/libs/Pusher/library/index.native.ts new file mode 100644 index 000000000000..f50834366515 --- /dev/null +++ b/src/libs/Pusher/library/index.native.ts @@ -0,0 +1,10 @@ +/** + * We use the pusher-js/react-native module to support pusher on native environments. + * @see: https://github.com/pusher/pusher-js + */ +import PusherImplementation from 'pusher-js/react-native'; +import Pusher from './types'; + +const PusherNative: Pusher = PusherImplementation; + +export default PusherNative; diff --git a/src/libs/Pusher/library/index.ts b/src/libs/Pusher/library/index.ts new file mode 100644 index 000000000000..6a7104a1d2a5 --- /dev/null +++ b/src/libs/Pusher/library/index.ts @@ -0,0 +1,10 @@ +/** + * We use the standard pusher-js module to support pusher on web environments. + * @see: https://github.com/pusher/pusher-js + */ +import PusherImplementation from 'pusher-js/with-encryption'; +import type Pusher from './types'; + +const PusherWeb: Pusher = PusherImplementation; + +export default PusherWeb; diff --git a/src/libs/Pusher/library/types.ts b/src/libs/Pusher/library/types.ts new file mode 100644 index 000000000000..cc8c70fccdbb --- /dev/null +++ b/src/libs/Pusher/library/types.ts @@ -0,0 +1,10 @@ +import PusherClass from 'pusher-js/with-encryption'; +import {LiteralUnion} from 'type-fest'; + +type Pusher = typeof PusherClass; + +type SocketEventName = LiteralUnion<'error' | 'connected' | 'disconnected' | 'state_change', string>; + +export default Pusher; + +export type {SocketEventName}; diff --git a/src/libs/Pusher/pusher.js b/src/libs/Pusher/pusher.ts similarity index 72% rename from src/libs/Pusher/pusher.js rename to src/libs/Pusher/pusher.ts index 4f2b63d36c0c..dad963e933fe 100644 --- a/src/libs/Pusher/pusher.js +++ b/src/libs/Pusher/pusher.ts @@ -1,9 +1,48 @@ import Onyx from 'react-native-onyx'; -import _ from 'underscore'; +import {Channel, ChannelAuthorizerGenerator, Options} from 'pusher-js/with-encryption'; +import isObject from 'lodash/isObject'; +import {LiteralUnion, ValueOf} from 'type-fest'; import ONYXKEYS from '../../ONYXKEYS'; import Pusher from './library'; import TYPE from './EventType'; import Log from '../Log'; +import DeepValueOf from '../../types/utils/DeepValueOf'; +import {SocketEventName} from './library/types'; +import CONST from '../../CONST'; +import {OnyxUpdateEvent, OnyxUpdatesFromServer} from '../../types/onyx'; + +type States = { + previous: string; + current: string; +}; + +type Args = { + appKey: string; + cluster: string; + authEndpoint: string; +}; + +type PushJSON = OnyxUpdateEvent[] | OnyxUpdatesFromServer; + +type EventCallbackError = {type: ValueOf; data: {code: number}}; + +type ChunkedDataEvents = {chunks: unknown[]; receivedFinal: boolean}; + +type EventData = {id?: string; chunk?: unknown; final?: boolean; index: number}; + +type SocketEventCallback = (eventName: SocketEventName, data?: States | EventCallbackError) => void; + +type PusherWithAuthParams = InstanceType & { + config: { + auth?: { + params?: unknown; + }; + }; +}; + +type PusherEventName = LiteralUnion, string>; + +type PusherSubscribtionErrorData = {type?: string; error?: string; status?: string}; let shouldForceOffline = false; Onyx.connect({ @@ -16,33 +55,23 @@ Onyx.connect({ }, }); -let socket; +let socket: PusherWithAuthParams | null; let pusherSocketID = ''; -const socketEventCallbacks = []; -let customAuthorizer; +const socketEventCallbacks: SocketEventCallback[] = []; +let customAuthorizer: ChannelAuthorizerGenerator; /** * Trigger each of the socket event callbacks with the event information - * - * @param {String} eventName - * @param {*} data */ -function callSocketEventCallbacks(eventName, data) { - _.each(socketEventCallbacks, (cb) => cb(eventName, data)); +function callSocketEventCallbacks(eventName: SocketEventName, data?: EventCallbackError | States) { + socketEventCallbacks.forEach((cb) => cb(eventName, data)); } /** * Initialize our pusher lib - * - * @param {Object} args - * @param {String} args.appKey - * @param {String} args.cluster - * @param {String} args.authEndpoint - * @param {Object} [params] - * @public - * @returns {Promise} resolves when Pusher has connected + * @returns resolves when Pusher has connected */ -function init(args, params) { +function init(args: Args, params?: unknown): Promise { return new Promise((resolve) => { if (socket) { return resolve(); @@ -55,7 +84,7 @@ function init(args, params) { // } // }; - const options = { + const options: Options = { cluster: args.cluster, authEndpoint: args.authEndpoint, }; @@ -65,7 +94,6 @@ function init(args, params) { } socket = new Pusher(args.appKey, options); - // If we want to pass params in our requests to api.php we'll need to add it to socket.config.auth.params // as per the documentation // (https://pusher.com/docs/channels/using_channels/connection#channels-options-parameter). @@ -77,21 +105,21 @@ function init(args, params) { } // Listen for connection errors and log them - socket.connection.bind('error', (error) => { + socket?.connection.bind('error', (error: EventCallbackError) => { callSocketEventCallbacks('error', error); }); - socket.connection.bind('connected', () => { - pusherSocketID = socket.connection.socket_id; + socket?.connection.bind('connected', () => { + pusherSocketID = socket?.connection.socket_id ?? ''; callSocketEventCallbacks('connected'); resolve(); }); - socket.connection.bind('disconnected', () => { + socket?.connection.bind('disconnected', () => { callSocketEventCallbacks('disconnected'); }); - socket.connection.bind('state_change', (states) => { + socket?.connection.bind('state_change', (states: States) => { callSocketEventCallbacks('state_change', states); }); }); @@ -99,12 +127,8 @@ function init(args, params) { /** * Returns a Pusher channel for a channel name - * - * @param {String} channelName - * - * @returns {Channel} */ -function getChannel(channelName) { +function getChannel(channelName: string): Channel | undefined { if (!socket) { return; } @@ -114,19 +138,14 @@ function getChannel(channelName) { /** * Binds an event callback to a channel + eventName - * @param {Pusher.Channel} channel - * @param {String} eventName - * @param {Function} [eventCallback] - * - * @private */ -function bindEventToChannel(channel, eventName, eventCallback = () => {}) { +function bindEventToChannel(channel: Channel | undefined, eventName: PusherEventName, eventCallback: (data: PushJSON) => void = () => {}) { if (!eventName) { return; } - const chunkedDataEvents = {}; - const callback = (eventData) => { + const chunkedDataEvents: Record = {}; + const callback = (eventData: string | Record | EventData) => { if (shouldForceOffline) { Log.info('[Pusher] Ignoring a Push event because shouldForceOffline = true'); return; @@ -134,7 +153,7 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) { let data; try { - data = _.isObject(eventData) ? eventData : JSON.parse(eventData); + data = isObject(eventData) ? eventData : JSON.parse(eventData); } catch (err) { Log.alert('[Pusher] Unable to parse single JSON event data from Pusher', {error: err, eventData}); return; @@ -164,7 +183,7 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) { // Only call the event callback if we've received the last packet and we don't have any holes in the complete // packet. - if (chunkedEvent.receivedFinal && chunkedEvent.chunks.length === _.keys(chunkedEvent.chunks).length) { + if (chunkedEvent.receivedFinal && chunkedEvent.chunks.length === Object.keys(chunkedEvent.chunks).length) { try { eventCallback(JSON.parse(chunkedEvent.chunks.join(''))); } catch (err) { @@ -181,22 +200,14 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) { } }; - channel.bind(eventName, callback); + channel?.bind(eventName, callback); } /** * Subscribe to a channel and an event - * - * @param {String} channelName - * @param {String} eventName - * @param {Function} [eventCallback] - * @param {Function} [onResubscribe] Callback to be called when reconnection happen - * - * @return {Promise} - * - * @public + * @param [onResubscribe] Callback to be called when reconnection happen */ -function subscribe(channelName, eventName, eventCallback = () => {}, onResubscribe = () => {}) { +function subscribe(channelName: string, eventName: PusherEventName, eventCallback: (data: PushJSON) => void = () => {}, onResubscribe = () => {}): Promise { return new Promise((resolve, reject) => { // We cannot call subscribe() before init(). Prevent any attempt to do this on dev. if (!socket) { @@ -226,7 +237,7 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri onResubscribe(); }); - channel.bind('pusher:subscription_error', (data = {}) => { + channel.bind('pusher:subscription_error', (data: PusherSubscribtionErrorData = {}) => { const {type, error, status} = data; Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', { channelName, @@ -245,12 +256,8 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri /** * Unsubscribe from a channel and optionally a specific event - * - * @param {String} channelName - * @param {String} [eventName] - * @public */ -function unsubscribe(channelName, eventName = '') { +function unsubscribe(channelName: string, eventName: PusherEventName = '') { const channel = getChannel(channelName); if (!channel) { @@ -269,18 +276,14 @@ function unsubscribe(channelName, eventName = '') { Log.info('[Pusher] Unsubscribing from channel', false, {channelName}); channel.unbind(); - socket.unsubscribe(channelName); + socket?.unsubscribe(channelName); } } /** * Are we already in the process of subscribing to this channel? - * - * @param {String} channelName - * - * @returns {Boolean} */ -function isAlreadySubscribing(channelName) { +function isAlreadySubscribing(channelName: string): boolean { if (!socket) { return false; } @@ -291,12 +294,8 @@ function isAlreadySubscribing(channelName) { /** * Are we already subscribed to this channel? - * - * @param {String} channelName - * - * @returns {Boolean} */ -function isSubscribed(channelName) { +function isSubscribed(channelName: string): boolean { if (!socket) { return false; } @@ -307,12 +306,8 @@ function isSubscribed(channelName) { /** * Sends an event over a specific event/channel in pusher. - * - * @param {String} channelName - * @param {String} eventName - * @param {Object} payload */ -function sendEvent(channelName, eventName, payload) { +function sendEvent(channelName: string, eventName: PusherEventName, payload: Record) { // Check to see if we are subscribed to this channel before sending the event. Sending client events over channels // we are not subscribed too will throw errors and cause reconnection attempts. Subscriptions are not instant and // can happen later than we expect. @@ -325,15 +320,13 @@ function sendEvent(channelName, eventName, payload) { return; } - socket.send_event(eventName, payload, channelName); + socket?.send_event(eventName, payload, channelName); } /** * Register a method that will be triggered when a socket event happens (like disconnecting) - * - * @param {Function} cb */ -function registerSocketEventCallback(cb) { +function registerSocketEventCallback(cb: SocketEventCallback) { socketEventCallbacks.push(cb); } @@ -341,10 +334,8 @@ function registerSocketEventCallback(cb) { * A custom authorizer allows us to take a more fine-grained approach to * authenticating Pusher. e.g. we can handle failed attempts to authorize * with an expired authToken and retry the attempt. - * - * @param {Function} authorizer */ -function registerCustomAuthorizer(authorizer) { +function registerCustomAuthorizer(authorizer: ChannelAuthorizerGenerator) { customAuthorizer = authorizer; } @@ -376,18 +367,13 @@ function reconnect() { socket.connect(); } -/** - * @returns {String} - */ -function getPusherSocketID() { +function getPusherSocketID(): string { return pusherSocketID; } if (window) { /** * Pusher socket for debugging purposes - * - * @returns {Function} */ window.getPusherInstance = () => socket; } @@ -407,3 +393,5 @@ export { TYPE, getPusherSocketID, }; + +export type {EventCallbackError, States, PushJSON}; diff --git a/src/libs/PusherConnectionManager.ts b/src/libs/PusherConnectionManager.ts index 4ab08d6dc760..9b1f6ebe1b2a 100644 --- a/src/libs/PusherConnectionManager.ts +++ b/src/libs/PusherConnectionManager.ts @@ -1,11 +1,10 @@ -import {ValueOf} from 'type-fest'; +import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption'; import * as Pusher from './Pusher/pusher'; import * as Session from './actions/Session'; import Log from './Log'; import CONST from '../CONST'; - -type EventCallbackError = {type: ValueOf; data: {code: number}}; -type CustomAuthorizerChannel = {name: string}; +import {SocketEventName} from './Pusher/library/types'; +import {EventCallbackError, States} from './Pusher/pusher'; function init() { /** @@ -14,30 +13,32 @@ function init() { * current valid token to generate the signed auth response * needed to subscribe to Pusher channels. */ - Pusher.registerCustomAuthorizer((channel: CustomAuthorizerChannel) => ({ - authorize: (socketID: string, callback: () => void) => { - Session.authenticatePusher(socketID, channel.name, callback); + Pusher.registerCustomAuthorizer((channel) => ({ + authorize: (socketId: string, callback: ChannelAuthorizationCallback) => { + Session.authenticatePusher(socketId, channel.name, callback); }, })); - Pusher.registerSocketEventCallback((eventName: string, error: EventCallbackError) => { + Pusher.registerSocketEventCallback((eventName: SocketEventName, error?: EventCallbackError | States) => { switch (eventName) { case 'error': { - const errorType = error?.type; - const code = error?.data?.code; - if (errorType === CONST.ERROR.PUSHER_ERROR && code === 1006) { - // 1006 code happens when a websocket connection is closed. There may or may not be a reason attached indicating why the connection was closed. - // https://datatracker.ietf.org/doc/html/rfc6455#section-7.1.5 - Log.hmmm('[PusherConnectionManager] Channels Error 1006', {error}); - } else if (errorType === CONST.ERROR.PUSHER_ERROR && code === 4201) { - // This means the connection was closed because Pusher did not receive a reply from the client when it pinged them for a response - // https://pusher.com/docs/channels/library_auth_reference/pusher-websockets-protocol/#4200-4299 - Log.hmmm('[PusherConnectionManager] Pong reply not received', {error}); - } else if (errorType === CONST.ERROR.WEB_SOCKET_ERROR) { - // It's not clear why some errors are wrapped in a WebSocketError type - this error could mean different things depending on the contents. - Log.hmmm('[PusherConnectionManager] WebSocketError', {error}); - } else { - Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} [PusherConnectionManager] Unknown error event`, {error}); + if (error && 'type' in error) { + const errorType = error?.type; + const code = error?.data?.code; + if (errorType === CONST.ERROR.PUSHER_ERROR && code === 1006) { + // 1006 code happens when a websocket connection is closed. There may or may not be a reason attached indicating why the connection was closed. + // https://datatracker.ietf.org/doc/html/rfc6455#section-7.1.5 + Log.hmmm('[PusherConnectionManager] Channels Error 1006', {error}); + } else if (errorType === CONST.ERROR.PUSHER_ERROR && code === 4201) { + // This means the connection was closed because Pusher did not receive a reply from the client when it pinged them for a response + // https://pusher.com/docs/channels/library_auth_reference/pusher-websockets-protocol/#4200-4299 + Log.hmmm('[PusherConnectionManager] Pong reply not received', {error}); + } else if (errorType === CONST.ERROR.WEB_SOCKET_ERROR) { + // It's not clear why some errors are wrapped in a WebSocketError type - this error could mean different things depending on the contents. + Log.hmmm('[PusherConnectionManager] WebSocketError', {error}); + } else { + Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} [PusherConnectionManager] Unknown error event`, {error}); + } } break; } diff --git a/src/libs/PusherUtils.ts b/src/libs/PusherUtils.ts index 5baa4b68d5f8..d47283f21bbf 100644 --- a/src/libs/PusherUtils.ts +++ b/src/libs/PusherUtils.ts @@ -4,9 +4,7 @@ import Log from './Log'; import NetworkConnection from './NetworkConnection'; import * as Pusher from './Pusher/pusher'; import CONST from '../CONST'; -import {OnyxUpdateEvent, OnyxUpdatesFromServer} from '../types/onyx'; - -type PushJSON = OnyxUpdateEvent[] | OnyxUpdatesFromServer; +import {PushJSON} from './Pusher/pusher'; type Callback = (data: OnyxUpdate[]) => Promise; 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/ReportActionComposeFocusManager.ts b/src/libs/ReportActionComposeFocusManager.ts index ca4f9d77898b..65466fa4a204 100644 --- a/src/libs/ReportActionComposeFocusManager.ts +++ b/src/libs/ReportActionComposeFocusManager.ts @@ -1,5 +1,7 @@ import React from 'react'; import {TextInput} from 'react-native'; +import ROUTES from '../ROUTES'; +import Navigation from './Navigation/Navigation'; type FocusCallback = () => void; @@ -28,6 +30,11 @@ function onComposerFocus(callback: FocusCallback, isMainComposer = false) { * Request focus on the ReportActionComposer */ function focus() { + /** Do not trigger the refocusing when the active route is not the report route, */ + if (!Navigation.isActiveRoute(ROUTES.REPORT_WITH_ID.getRoute(Navigation.getTopmostReportId() ?? ''))) { + return; + } + if (typeof focusCallback !== 'function') { if (typeof mainComposerFocusCallback !== 'function') { return; diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js deleted file mode 100644 index aa8b9cb2c516..000000000000 --- a/src/libs/ReportActionsUtils.js +++ /dev/null @@ -1,690 +0,0 @@ -/* eslint-disable rulesdir/prefer-underscore-method */ -import lodashGet from 'lodash/get'; -import _ from 'underscore'; -import {max, 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 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); -} - -/** - * 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) => new Date(action.created))); - const maxAction = visibleActions.find((action) => isEqual(new Date(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, - 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..16260e0edea6 --- /dev/null +++ b/src/libs/ReportActionsUtils.ts @@ -0,0 +1,644 @@ +import {isEqual, max, parseISO} 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 { + 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) => parseISO(action.created))); + const maxAction = visibleActions.find((action) => isEqual(parseISO(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 924212e66197..f0f859e8a299 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1212,6 +1212,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) * @@ -1267,12 +1307,23 @@ function isWaitingForTaskCompleteFromAssignee(report, parentReportAction = {}) { return isTaskReport(report) && isReportManager(report) && isOpenTaskReport(report, parentReportAction); } +/** + * Returns number of transactions that are nonReimbursable + * + * @param {Object|null} iouReportID + * @returns {Number} + */ +function hasNonReimbursableTransactions(iouReportID) { + const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID); + return _.filter(allTransactions, (transaction) => transaction.reimbursable === false).length > 0; +} + /** * @param {Object} report * @param {Object} allReportsDict * @returns {Number} */ -function getMoneyRequestTotal(report, allReportsDict = null) { +function getMoneyRequestReimbursableTotal(report, allReportsDict = null) { const allAvailableReports = allReportsDict || allReports; let moneyRequestReport; if (isMoneyRequestReport(report)) { @@ -1283,7 +1334,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, @@ -1294,6 +1344,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 * @@ -1333,7 +1422,7 @@ function getPolicyExpenseChatName(report, policy = undefined) { * @returns {String} */ function getMoneyRequestReportName(report, policy = undefined) { - const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestTotal(report), report.currency); + const formattedAmount = CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(report), report.currency); const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report.managerID); const payerPaidAmountMesssage = Localize.translateLocal('iou.payerPaidAmount', { payer: payerName, @@ -1344,6 +1433,10 @@ function getMoneyRequestReportName(report, policy = undefined) { return `${payerPaidAmountMesssage} β€’ ${Localize.translateLocal('iou.pending')}`; } + if (hasNonReimbursableTransactions(report.reportID)) { + return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount}); + } + if (report.hasOutstandingIOU) { return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount}); } @@ -1356,12 +1449,13 @@ function getMoneyRequestReportName(report, policy = undefined) { * into a flat object. Used for displaying transactions and sending them in API commands * * @param {Object} transaction + * @param {Object} createdDateFormat * @returns {Object} */ -function getTransactionDetails(transaction) { +function getTransactionDetails(transaction, createdDateFormat = CONST.DATE.FNS_FORMAT_STRING) { const report = getReport(transaction.reportID); return { - created: TransactionUtils.getCreated(transaction), + created: TransactionUtils.getCreated(transaction, createdDateFormat), amount: TransactionUtils.getAmount(transaction, isExpenseReport(report)), currency: TransactionUtils.getCurrency(transaction), comment: TransactionUtils.getDescription(transaction), @@ -1370,6 +1464,10 @@ function getTransactionDetails(transaction) { category: TransactionUtils.getCategory(transaction), billable: TransactionUtils.getBillable(transaction), tag: TransactionUtils.getTag(transaction), + mccGroup: TransactionUtils.getMCCGroup(transaction), + cardID: TransactionUtils.getCardID(transaction), + originalAmount: TransactionUtils.getOriginalAmount(transaction), + originalCurrency: TransactionUtils.getOriginalCurrency(transaction), }; } @@ -1474,7 +1572,11 @@ function hasMissingSmartscanFields(iouReportID) { * @returns {String} */ function getTransactionReportName(reportAction) { - if (ReportActionsUtils.isDeletedParentAction(reportAction)) { + if (ReportActionsUtils.isReversedTransaction(reportAction)) { + return Localize.translateLocal('parentReportAction.reversedTransaction'); + } + + if (ReportActionsUtils.isDeletedAction(reportAction)) { return Localize.translateLocal('parentReportAction.deletedRequest'); } @@ -1512,7 +1614,21 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip return reportActionMessage; } - const totalAmount = getMoneyRequestTotal(report); + if (!isIOUReport(report) && ReportActionsUtils.isSplitBillAction(reportAction)) { + // This covers group chats where the last action is a split bill action + const linkedTransaction = TransactionUtils.getLinkedTransaction(reportAction); + 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 = getMoneyRequestReimbursableTotal(report); const payerName = isExpenseReport(report) ? getPolicyName(report) : getDisplayNameForParticipant(report.managerID, true); const formattedAmount = CurrencyUtils.convertToDisplayString(totalAmount, report.currency); @@ -1545,7 +1661,8 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip return Localize.translateLocal('iou.waitingOnBankAccount', {submitterDisplayName}); } - return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount}); + const containsNonReimbursable = hasNonReimbursableTransactions(report.reportID); + return Localize.translateLocal(containsNonReimbursable ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', {payer: payerName, amount: formattedAmount}); } /** @@ -2118,6 +2235,7 @@ function buildOptimisticIOUReport(payeeAccountID, payerAccountID, total, chatRep reportID: generateReportID(), state: CONST.REPORT.STATE.SUBMITTED, stateNum: isSendingMoney ? CONST.REPORT.STATE_NUM.SUBMITTED : CONST.REPORT.STATE_NUM.PROCESSING, + statusNum: isSendingMoney ? CONST.REPORT.STATUS.REIMBURSED : CONST.REPORT.STATE_NUM.PROCESSING, total, // We don't translate reportName because the server response is always in English @@ -2179,7 +2297,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; @@ -2573,6 +2691,7 @@ function buildOptimisticTaskReportAction(taskReportID, actionName, message = '') * @param {String} notificationPreference * @param {String} parentReportActionID * @param {String} parentReportID + * @param {String} welcomeMessage * @returns {Object} */ function buildOptimisticChatReport( @@ -2588,6 +2707,7 @@ function buildOptimisticChatReport( notificationPreference = CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, parentReportActionID = '', parentReportID = '', + welcomeMessage = '', ) { const currentTime = DateUtils.getDBTime(); return { @@ -2614,7 +2734,7 @@ function buildOptimisticChatReport( stateNum: 0, statusNum: 0, visibility, - welcomeMessage: '', + welcomeMessage, writeCapability, }; } @@ -2829,6 +2949,7 @@ function buildOptimisticTaskReport(ownerAccountID, assigneeAccountID = 0, parent policyID, stateNum: CONST.REPORT.STATE_NUM.OPEN, statusNum: CONST.REPORT.STATUS.OPEN, + notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, }; } @@ -3030,11 +3151,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)) @@ -3392,19 +3514,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] : []), ]; } @@ -3549,7 +3675,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; } /** @@ -3752,29 +3879,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 * @@ -3788,7 +3892,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: @@ -3823,6 +3927,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, @@ -3855,7 +3967,8 @@ export { hasExpensifyGuidesEmails, isWaitingForIOUActionFromCurrentUser, isIOUOwnedByCurrentUser, - getMoneyRequestTotal, + getMoneyRequestReimbursableTotal, + getMoneyRequestSpendBreakdown, canShowReportRecipientLocalTime, formatReportLastMessageText, chatIncludesConcierge, @@ -3870,6 +3983,8 @@ export { getReport, getReportIDFromLink, getRouteFromLink, + getDeletedParentActionMessageForChatReport, + getLastVisibleMessage, navigateToDetailsPage, generateReportID, hasReportNameError, @@ -3962,10 +4077,11 @@ export { canEditMoneyRequest, buildTransactionThread, areAllRequestsBeingSmartScanned, - getReportPreviewDisplayTransactions, getTransactionsWithReceipts, + hasNonReimbursableTransactions, hasMissingSmartscanFields, getIOUReportActionDisplayMessage, isWaitingForTaskCompleteFromAssignee, isReportDraft, + shouldUseFullTitleToDisplay, }; 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/SuggestionUtils.js b/src/libs/SuggestionUtils.js index aa2640d006c8..9c3e92799334 100644 --- a/src/libs/SuggestionUtils.js +++ b/src/libs/SuggestionUtils.js @@ -26,4 +26,22 @@ function trimLeadingSpace(str) { return str.slice(0, 1) === ' ' ? str.slice(1) : str; } -export {getMaxArrowIndex, trimLeadingSpace}; +/** + * Checks if space is available to render large suggestion menu + * @param {Number} listHeight + * @param {Number} composerHeight + * @param {Number} totalSuggestions + * @returns {Boolean} + */ +function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, totalSuggestions) { + const maxSuggestions = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER; + const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING; + const availableHeight = listHeight - composerHeight - chatFooterHeight; + const menuHeight = + (!totalSuggestions || totalSuggestions > maxSuggestions ? maxSuggestions : totalSuggestions) * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT + + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2; + + return availableHeight > menuHeight; +} + +export {getMaxArrowIndex, trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu}; diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index 7c2b407ecb8e..5f1114d4b03e 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -3,9 +3,10 @@ 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}; @@ -58,16 +59,13 @@ function buildOptimisticTransaction( commentJSON.originalTransactionID = originalTransactionID; } - // For the SmartScan to run successfully, we need to pass the merchant field empty to the API - const defaultMerchant = !receipt || Object.keys(receipt).length === 0 ? CONST.TRANSACTION.DEFAULT_MERCHANT : ''; - return { transactionID, amount, currency, reportID, comment: commentJSON, - merchant: merchant || defaultMerchant, + merchant: merchant || CONST.TRANSACTION.DEFAULT_MERCHANT, created: created || DateUtils.getDBTime(), pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD, receipt, @@ -78,25 +76,46 @@ 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 { - return ( +function isMerchantMissing(transaction: Transaction) { + const isMerchantEmpty = + transaction.merchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === ''; + + const isModifiedMerchantEmpty = + !transaction.modifiedMerchant || transaction.modifiedMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || - (transaction.modifiedMerchant === '' && - (transaction.merchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transaction.merchant === '' || transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT)) || - (transaction.modifiedAmount === 0 && transaction.amount === 0) || - (transaction.modifiedCreated === '' && transaction.created === '') - ); + transaction.modifiedMerchant === ''; + + return isMerchantEmpty && isModifiedMerchantEmpty; +} + +function isAmountMissing(transaction: Transaction) { + return transaction.amount === 0 && (!transaction.modifiedAmount || transaction.modifiedAmount === 0); +} + +function isCreatedMissing(transaction: Transaction) { + return transaction.created === '' && (!transaction.created || transaction.modifiedCreated === ''); +} + +function areRequiredFieldsEmpty(transaction: Transaction): boolean { + return isMerchantMissing(transaction) || isAmountMissing(transaction) || isCreatedMissing(transaction); } /** * Given the edit made to the money request, return an updated transaction object. */ -function getUpdatedTransaction(transaction: Transaction, transactionChanges: TransactionChanges, isFromExpenseReport: boolean): Transaction { +function getUpdatedTransaction(transaction: Transaction, transactionChanges: TransactionChanges, isFromExpenseReport: boolean, shouldUpdateReceiptState = true): Transaction { // Only changing the first level fields so no need for deep clone now const updatedTransaction = {...transaction}; let shouldStopSmartscan = false; @@ -143,7 +162,13 @@ function getUpdatedTransaction(transaction: Transaction, transactionChanges: Tra updatedTransaction.tag = transactionChanges.tag; } - if (shouldStopSmartscan && transaction?.receipt && Object.keys(transaction.receipt).length > 0 && transaction?.receipt?.state !== CONST.IOU.RECEIPT_STATE.OPEN) { + if ( + shouldUpdateReceiptState && + shouldStopSmartscan && + transaction?.receipt && + Object.keys(transaction.receipt).length > 0 && + transaction?.receipt?.state !== CONST.IOU.RECEIPT_STATE.OPEN + ) { updatedTransaction.receipt.state = CONST.IOU.RECEIPT_STATE.OPEN; } @@ -216,6 +241,21 @@ function getCurrency(transaction: Transaction): string { return transaction?.currency ?? CONST.CURRENCY.USD; } +/** + * Return the original currency field from the transaction. + */ +function getOriginalCurrency(transaction: Transaction): string { + return transaction?.originalCurrency ?? ''; +} + +/** + * Return the absolute value of the original amount field from the transaction. + */ +function getOriginalAmount(transaction: Transaction): number { + const amount = transaction?.originalAmount ?? 0; + return Math.abs(amount); +} + /** * Return the merchant field from the transaction, return the modifiedMerchant if present. */ @@ -244,6 +284,13 @@ function getCategory(transaction: Transaction): string { return transaction?.category ?? ''; } +/** + * Return the cardID from the transaction. + */ +function getCardID(transaction: Transaction): number { + return transaction?.cardID ?? 0; +} + /** * Return the billable field from the transaction. This "billable" field has no "modified" complement. */ @@ -261,11 +308,11 @@ function getTag(transaction: Transaction): string { /** * Return the created field from the transaction, return the modifiedCreated if present. */ -function getCreated(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 = new Date(created); if (isValid(createdDate)) { - return format(createdDate, CONST.DATE.FNS_FORMAT_STRING); + return format(createdDate, dateFormat); } return ''; @@ -277,6 +324,36 @@ function isDistanceRequest(transaction: Transaction): boolean { return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE; } +/** + * Determine whether a transaction is made with an Expensify card. + */ +function isExpensifyCardTransaction(transaction: Transaction): boolean { + if (!transaction.cardID) { + return false; + } + return isExpensifyCard(transaction.cardID); +} + +/** + * Check if the transaction status is set to Pending. + */ +function isPending(transaction: Transaction): boolean { + if (!transaction.status) { + return false; + } + return transaction.status === CONST.TRANSACTION.STATUS.PENDING; +} + +/** + * Check if the transaction status is set to Posted. + */ +function isPosted(transaction: Transaction): boolean { + if (!transaction.status) { + return false; + } + return transaction.status === CONST.TRANSACTION.STATUS.POSTED; +} + function isReceiptBeingScanned(transaction: Transaction): boolean { return [CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING].some((value) => value === transaction.receipt.state); } @@ -295,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 @@ -329,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(); } @@ -353,7 +423,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 @@ -390,6 +460,9 @@ export { getDescription, getAmount, getCurrency, + getCardID, + getOriginalCurrency, + getOriginalAmount, getMerchant, getMCCGroup, getCreated, @@ -399,12 +472,19 @@ export { getLinkedTransaction, getAllReportTransactions, hasReceipt, - hasEreceipt, + hasEReceipt, hasRoute, isReceiptBeingScanned, getValidWaypoints, isDistanceRequest, + isExpensifyCardTransaction, + isPending, + isPosted, getWaypoints, + isAmountMissing, + isMerchantMissing, + isCreatedMissing, + areRequiredFieldsEmpty, hasMissingSmartscanFields, getWaypointIndex, waypointHasValidAddress, diff --git a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js index 244eaf805d10..4c829239ef14 100644 --- a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js +++ b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js @@ -3,6 +3,7 @@ */ import CONFIG from '../../../CONFIG'; +let unreadTotalCount = 0; /** * Set the page title on web * @@ -10,7 +11,7 @@ import CONFIG from '../../../CONFIG'; */ function updateUnread(totalCount) { const hasUnread = totalCount !== 0; - + unreadTotalCount = totalCount; // This setTimeout is required because due to how react rendering messes with the DOM, the document title can't be modified synchronously, and we must wait until all JS is done // running before setting the title. setTimeout(() => { @@ -22,4 +23,8 @@ function updateUnread(totalCount) { }, 0); } +window.addEventListener('popstate', () => { + updateUnread(unreadTotalCount); +}); + export default updateUnread; 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 7500af6d829e..75520d483f98 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -44,6 +44,19 @@ Onyx.connect({ callback: (val) => (preferredLocale = val), }); +let priorityMode; +Onyx.connect({ + key: ONYXKEYS.NVP_PRIORITY_MODE, + callback: (nextPriorityMode) => { + // When someone switches their priority mode we need to fetch all their chats because only #focus mode works with a subset of a user's chats. This is only possible via the OpenApp command. + if (nextPriorityMode === CONST.PRIORITY_MODE.DEFAULT && priorityMode === CONST.PRIORITY_MODE.GSD) { + // eslint-disable-next-line no-use-before-define + openApp(); + } + priorityMode = nextPriorityMode; + }, +}); + let resolveIsReadyPromise; const isReadyToOpenApp = new Promise((resolve) => { resolveIsReadyPromise = resolve; @@ -207,7 +220,8 @@ function getOnyxDataForOpenOrReconnect(isOpenApp = false) { */ function openApp() { getPolicyParamsForOpenOrReconnect().then((policyParams) => { - API.read('OpenApp', policyParams, getOnyxDataForOpenOrReconnect(true)); + const params = {enablePriorityModeFilter: true, ...policyParams}; + API.read('OpenApp', params, getOnyxDataForOpenOrReconnect(true)); }); } @@ -336,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 * @@ -375,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) { @@ -513,4 +558,6 @@ export { createWorkspaceAndNavigateToIt, getMissingOnyxUpdates, finalReconnectAppAfterActivatingReliableUpdates, + savePolicyDraftByNewWorkspace, + createWorkspaceWithPolicyDraftAndNavigateToIt, }; diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js deleted file mode 100644 index b1cb09a8a5e2..000000000000 --- a/src/libs/actions/BankAccounts.js +++ /dev/null @@ -1,441 +0,0 @@ -import Onyx from 'react-native-onyx'; -import CONST from '../../CONST'; -import * as API from '../API'; -import ONYXKEYS from '../../ONYXKEYS'; -import * as ErrorUtils from '../ErrorUtils'; -import * as PlaidDataProps from '../../pages/ReimbursementAccount/plaidDataPropTypes'; -import Navigation from '../Navigation/Navigation'; -import ROUTES from '../../ROUTES'; -import * as ReimbursementAccount from './ReimbursementAccount'; - -export { - goToWithdrawalAccountSetupStep, - setBankAccountFormValidationErrors, - resetReimbursementAccount, - resetFreePlanBankAccount, - hideBankAccountErrors, - setWorkspaceIDForReimbursementAccount, - setBankAccountSubStep, - updateReimbursementAccountDraft, - requestResetFreePlanBankAccount, - cancelResetFreePlanBankAccount, -} from './ReimbursementAccount'; -export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid'; -export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet'; - -function clearPlaid() { - Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, ''); - - return Onyx.set(ONYXKEYS.PLAID_DATA, PlaidDataProps.plaidDataDefaultProps); -} - -function openPlaidView() { - clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)); -} - -/** - * 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) { - clearPlaid().then(() => { - if (exitReportID) { - Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID}); - } - Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); - }); -} - -function clearPersonalBankAccount() { - clearPlaid(); - Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {}); -} - -function clearOnfidoToken() { - Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, ''); -} - -/** - * Helper method to build the Onyx data required during setup of a Verified Business Bank Account - * - * @returns {Object} - */ -function getVBBADataForOnyx() { - return { - 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, - errors: null, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - errors: ErrorUtils.getMicroSecondOnyxError('walletPage.addBankAccountFailure'), - }, - }, - ], - }; -} - -/** - * Submit Bank Account step with Plaid data so php can perform some checks. - * - * @param {Number} bankAccountID - * @param {Object} selectedPlaidBankAccount - */ -function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) { - const commandName = 'ConnectBankAccountWithPlaid'; - - const parameters = { - bankAccountID, - routingNumber: selectedPlaidBankAccount.routingNumber, - accountNumber: selectedPlaidBankAccount.accountNumber, - bank: selectedPlaidBankAccount.bankName, - plaidAccountID: selectedPlaidBankAccount.plaidAccountID, - plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken, - }; - - API.write(commandName, parameters, getVBBADataForOnyx()); -} - -/** - * 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) { - const commandName = 'AddPersonalBankAccount'; - - const parameters = { - addressName: account.addressName, - routingNumber: account.routingNumber, - accountNumber: account.accountNumber, - isSavings: account.isSavings, - setupType: 'plaid', - bank: account.bankName, - plaidAccountID: account.plaidAccountID, - plaidAccessToken: account.plaidAccessToken, - }; - - const onyxData = { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, - value: { - isLoading: true, - errors: null, - plaidAccountID: account.plaidAccountID, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, - value: { - isLoading: false, - errors: null, - shouldShowSuccess: true, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, - value: { - isLoading: false, - errors: ErrorUtils.getMicroSecondOnyxError('walletPage.addBankAccountFailure'), - }, - }, - ], - }; - - 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}, - }, - ], - }, - ); -} - -/** - * 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) { - API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx()); -} - -/** - * @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, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, - }, - ], - }, - ); -} - -function openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep) { - const onyxData = { - optimisticData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: true, - }, - }, - ], - successData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, - }, - ], - failureData: [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - value: { - isLoading: false, - }, - }, - ], - }; - - const param = { - stepToOpen, - subStep, - localCurrentStep, - }; - - return API.read('OpenReimbursementAccountPage', param, 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()); -} - -/** - * 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()); -} - -/** - * 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(), - ); -} - -/** - * 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 openWorkspaceView() { - API.read('OpenWorkspaceView'); -} - -function handlePlaidError(bankAccountID, error, error_description, plaidRequestID) { - API.write('BankAccount_HandlePlaidError', { - bankAccountID, - error, - error_description, - plaidRequestID, - }); -} - -/** - * 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) { - Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isLoading}); -} - -export { - addPersonalBankAccount, - clearOnfidoToken, - clearPersonalBankAccount, - clearPlaid, - openPlaidView, - connectBankAccountManually, - connectBankAccountWithPlaid, - deletePaymentBankAccount, - handlePlaidError, - openPersonalBankAccountSetupView, - openReimbursementAccountPage, - updateBeneficialOwnersForBankAccount, - updateCompanyInformationForBankAccount, - updatePersonalInformationForBankAccount, - openWorkspaceView, - validateBankAccount, - verifyIdentityForBankAccount, - setReimbursementAccountLoading, -}; diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts new file mode 100644 index 000000000000..a0d035292773 --- /dev/null +++ b/src/libs/actions/BankAccounts.ts @@ -0,0 +1,452 @@ +import Onyx from 'react-native-onyx'; +import CONST from '../../CONST'; +import * as API from '../API'; +import ONYXKEYS from '../../ONYXKEYS'; +import * as ErrorUtils from '../ErrorUtils'; +import * as PlaidDataProps from '../../pages/ReimbursementAccount/plaidDataPropTypes'; +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, + setBankAccountFormValidationErrors, + resetReimbursementAccount, + resetFreePlanBankAccount, + hideBankAccountErrors, + setWorkspaceIDForReimbursementAccount, + setBankAccountSubStep, + updateReimbursementAccountDraft, + requestResetFreePlanBankAccount, + cancelResetFreePlanBankAccount, +} from './ReimbursementAccount'; +export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid'; +export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet'; + +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); +} + +function openPlaidView() { + clearPlaid().then(() => ReimbursementAccount.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)); +} + +/** + * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished. + */ +function openPersonalBankAccountSetupView(exitReportID: string) { + clearPlaid().then(() => { + if (exitReportID) { + Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID}); + } + Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); + }); +} + +/** + * Whether after adding a bank account we should continue with the KYC flow + */ +function setPersonalBankAccountContinueKYCOnSuccess(onSuccessFallbackRoute: string) { + Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {onSuccessFallbackRoute}); +} + +function clearPersonalBankAccount() { + clearPlaid(); + Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {}); +} + +function clearOnfidoToken() { + Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, ''); +} + +/** + * Helper method to build the Onyx data required during setup of a Verified Business Bank Account + */ +function getVBBADataForOnyx(currentStep?: BankAccountStep): OnyxData { + return { + 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, + errors: null, + // When setting up a bank account, we save the draft form values in Onyx. + // When we update the information for a step, the value of some fields that are returned from the API + // can be different from the value that we stored as the draft in Onyx (i.e. the phone number is formatted). + // This is why we store the current step used to call the API in order to update the corresponding draft data in Onyx. + // If currentStep is undefined that means this step don't need to update the data of the draft in Onyx. + draftStep: currentStep, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: false, + errors: ErrorUtils.getMicroSecondOnyxError('walletPage.addBankAccountFailure'), + }, + }, + ], + }; +} + +/** + * Submit Bank Account step with Plaid data so php can perform some checks. + */ +function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAccount: PlaidBankAccount) { + const commandName = 'ConnectBankAccountWithPlaid'; + + type ConnectBankAccountWithPlaidParams = { + bankAccountID: number; + routingNumber: string; + accountNumber: string; + bank?: string; + plaidAccountID: string; + plaidAccessToken: string; + }; + + const parameters: ConnectBankAccountWithPlaidParams = { + bankAccountID, + routingNumber: selectedPlaidBankAccount.routingNumber, + accountNumber: selectedPlaidBankAccount.accountNumber, + bank: selectedPlaidBankAccount.bankName, + plaidAccountID: selectedPlaidBankAccount.plaidAccountID, + plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken, + }; + + API.write(commandName, parameters, getVBBADataForOnyx()); +} + +/** + * Adds a bank account via Plaid + * + * @TODO offline pattern for this command will have to be added later once the pattern B design doc is complete + */ +function addPersonalBankAccount(account: PlaidBankAccount) { + const commandName = 'AddPersonalBankAccount'; + + 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, + isSavings: account.isSavings, + setupType: 'plaid', + bank: account.bankName, + plaidAccountID: account.plaidAccountID, + plaidAccessToken: account.plaidAccessToken, + }; + + const onyxData: OnyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + value: { + isLoading: true, + errors: null, + plaidAccountID: account.plaidAccountID, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + value: { + isLoading: false, + errors: null, + shouldShowSuccess: true, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + value: { + isLoading: false, + errors: ErrorUtils.getMicroSecondOnyxError('walletPage.addBankAccountFailure'), + }, + }, + ], + }; + + API.write(commandName, parameters, onyxData); +} + +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 + */ +function updatePersonalInformationForBankAccount(params: RequestorStepProps) { + API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR)); +} + +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, + }, + }, + ], + 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: ReimbursementAccountStep, subStep: ReimbursementAccountSubStep, localCurrentStep: ReimbursementAccountStep) { + const onyxData: OnyxData = { + optimisticData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: true, + }, + }, + ], + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: false, + }, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: { + isLoading: false, + }, + }, + ], + }; + + type OpenReimbursementAccountPageParams = { + stepToOpen: ReimbursementAccountStep; + subStep: ReimbursementAccountSubStep; + localCurrentStep: ReimbursementAccountStep; + }; + + const parameters: OpenReimbursementAccountPageParams = { + stepToOpen, + subStep, + localCurrentStep, + }; + + return API.read('OpenReimbursementAccountPage', parameters, onyxData); +} + +/** + * Updates the bank account in the database with the company step data + */ +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 + */ +function updateBeneficialOwnersForBankAccount(params: ACHContractStepProps) { + API.write('UpdateBeneficialOwnersForBankAccount', params, getVBBADataForOnyx()); +} + +/** + * Create the bank account with manually entered data. + * + */ +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 + */ +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', {}, {}); +} + +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, + 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. + */ +function setReimbursementAccountLoading(isLoading: boolean) { + Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isLoading}); +} + +export { + addPersonalBankAccount, + clearOnfidoToken, + clearPersonalBankAccount, + clearPlaid, + openPlaidView, + connectBankAccountManually, + connectBankAccountWithPlaid, + deletePaymentBankAccount, + handlePlaidError, + setPersonalBankAccountContinueKYCOnSuccess, + openPersonalBankAccountSetupView, + clearReimbursementAccount, + openReimbursementAccountPage, + updateBeneficialOwnersForBankAccount, + updateCompanyInformationForBankAccount, + updatePersonalInformationForBankAccount, + openWorkspaceView, + validateBankAccount, + verifyIdentityForBankAccount, + setReimbursementAccountLoading, +}; 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 d5676672dd33..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'; @@ -53,6 +54,15 @@ Onyx.connect({ }, }); +let allDraftSplitTransactions; +Onyx.connect({ + key: ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT, + waitForCollectionCallback: true, + callback: (val) => { + allDraftSplitTransactions = val || {}; + }, +}); + let allRecentlyUsedTags = {}; Onyx.connect({ key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS, @@ -1055,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 @@ -1063,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]); } @@ -1095,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, @@ -1294,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); @@ -1410,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'), }, }, }, @@ -1489,6 +1511,237 @@ function startSplitBill(participants, currentUserLogin, currentUserAccountID, co Report.notifyNewAction(splitChatReport.chatReportID, currentUserAccountID); } +/** Used for editing a split bill while it's still scanning or when SmartScan fails, it completes a split bill started by startSplitBill above. + * + * @param {number} chatReportID - The group chat or workspace reportID + * @param {Object} reportAction - The split action that lives in the chatReport above + * @param {Object} updatedTransaction - The updated **draft** split transaction + * @param {Number} sessionAccountID - accountID of the current user + * @param {String} sessionEmail - email of the current user + */ +function completeSplitBill(chatReportID, reportAction, updatedTransaction, sessionAccountID, sessionEmail) { + const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(sessionEmail); + const {transactionID} = updatedTransaction; + const unmodifiedTransaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; + + // Save optimistic updated transaction and action + const optimisticData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + ...updatedTransaction, + receipt: { + state: CONST.IOU.RECEIPT_STATE.OPEN, + }, + }, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`, + value: { + [reportAction.reportActionID]: { + lastModified: DateUtils.getDBTime(), + whisperedToAccountIDs: [], + }, + }, + }, + ]; + + const successData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: {pendingAction: null}, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, + value: null, + }, + ]; + + const failureData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: { + ...unmodifiedTransaction, + errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'), + }, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`, + value: { + [reportAction.reportActionID]: { + ...reportAction, + errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'), + }, + }, + }, + ]; + + const splitParticipants = updatedTransaction.comment.splits; + const {modifiedAmount: amount, modifiedCurrency: currency} = updatedTransaction; + + // Exclude the current user when calculating the split amount, `calculateAmount` takes it into account + const splitAmount = IOUUtils.calculateAmount(splitParticipants.length - 1, amount, currency, false); + + const splits = [{email: currentUserEmailForIOUSplit}]; + _.each(splitParticipants, (participant) => { + // Skip creating the transaction for the current user + if (participant.email === currentUserEmailForIOUSplit) { + return; + } + const isPolicyExpenseChat = !_.isEmpty(participant.policyID); + + if (!isPolicyExpenseChat) { + // In case this is still the optimistic accountID saved in the splits array, return early as we cannot know + // if there is an existing chat between the split creator and this participant + // Instead, we will rely on Auth generating the report IDs and the user won't see any optimistic chats or reports created + const participantPersonalDetails = allPersonalDetails[participant.accountID] || {}; + if (!participantPersonalDetails || participantPersonalDetails.isOptimisticPersonalDetail) { + splits.push({ + email: participant.email, + }); + return; + } + } + + let oneOnOneChatReport; + let isNewOneOnOneChatReport = false; + if (isPolicyExpenseChat) { + // The workspace chat reportID is saved in the splits array when starting a split bill with a workspace + oneOnOneChatReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${participant.chatReportID}`]; + } else { + const existingChatReport = ReportUtils.getChatByParticipants([participant.accountID]); + isNewOneOnOneChatReport = !existingChatReport; + oneOnOneChatReport = existingChatReport || ReportUtils.buildOptimisticChatReport([participant.accountID]); + } + + let oneOnOneIOUReport = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${oneOnOneChatReport.iouReportID}`, undefined); + const shouldCreateNewOneOnOneIOUReport = + _.isUndefined(oneOnOneIOUReport) || (isPolicyExpenseChat && ReportUtils.isControlPolicyExpenseReport(oneOnOneIOUReport) && ReportUtils.isReportApproved(oneOnOneIOUReport)); + + if (shouldCreateNewOneOnOneIOUReport) { + oneOnOneIOUReport = isPolicyExpenseChat + ? ReportUtils.buildOptimisticExpenseReport(oneOnOneChatReport.reportID, participant.policyID, sessionAccountID, splitAmount, currency) + : ReportUtils.buildOptimisticIOUReport(sessionAccountID, participant.accountID, splitAmount, oneOnOneChatReport.reportID, currency); + } else if (isPolicyExpenseChat) { + // Because of the Expense reports are stored as negative values, we subtract the total from the amount + oneOnOneIOUReport.total -= splitAmount; + } else { + oneOnOneIOUReport = IOUUtils.updateIOUOwnerAndTotal(oneOnOneIOUReport, sessionAccountID, splitAmount, currency); + } + + const oneOnOneTransaction = TransactionUtils.buildOptimisticTransaction( + isPolicyExpenseChat ? -splitAmount : splitAmount, + currency, + oneOnOneIOUReport.reportID, + updatedTransaction.comment.comment, + updatedTransaction.modifiedCreated, + CONST.IOU.TYPE.SPLIT, + transactionID, + updatedTransaction.modifiedMerchant, + {...updatedTransaction.receipt, state: CONST.IOU.RECEIPT_STATE.OPEN}, + updatedTransaction.filename, + ); + + const oneOnOneCreatedActionForChat = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit); + const oneOnOneCreatedActionForIOU = ReportUtils.buildOptimisticCreatedReportAction(currentUserEmailForIOUSplit); + const oneOnOneIOUAction = ReportUtils.buildOptimisticIOUReportAction( + CONST.IOU.REPORT_ACTION_TYPE.CREATE, + splitAmount, + currency, + updatedTransaction.comment.comment, + [participant], + oneOnOneTransaction.transactionID, + '', + oneOnOneIOUReport.reportID, + ); + + let oneOnOneReportPreviewAction = ReportActionsUtils.getReportPreviewAction(oneOnOneChatReport.reportID, oneOnOneIOUReport.reportID); + if (oneOnOneReportPreviewAction) { + oneOnOneReportPreviewAction = ReportUtils.updateReportPreview(oneOnOneIOUReport, oneOnOneReportPreviewAction); + } else { + oneOnOneReportPreviewAction = ReportUtils.buildOptimisticReportPreview(oneOnOneChatReport, oneOnOneIOUReport, '', oneOnOneTransaction); + } + + const [oneOnOneOptimisticData, oneOnOneSuccessData, oneOnOneFailureData] = buildOnyxDataForMoneyRequest( + oneOnOneChatReport, + oneOnOneIOUReport, + oneOnOneTransaction, + oneOnOneCreatedActionForChat, + oneOnOneCreatedActionForIOU, + oneOnOneIOUAction, + {}, + oneOnOneReportPreviewAction, + {}, + {}, + isNewOneOnOneChatReport, + shouldCreateNewOneOnOneIOUReport, + ); + + splits.push({ + email: participant.email, + accountID: participant.accountID, + policyID: participant.policyID, + iouReportID: oneOnOneIOUReport.reportID, + chatReportID: oneOnOneChatReport.reportID, + transactionID: oneOnOneTransaction.transactionID, + reportActionID: oneOnOneIOUAction.reportActionID, + createdChatReportActionID: oneOnOneCreatedActionForChat.reportActionID, + createdIOUReportActionID: oneOnOneCreatedActionForIOU.reportActionID, + reportPreviewReportActionID: oneOnOneReportPreviewAction.reportActionID, + }); + + optimisticData.push(...oneOnOneOptimisticData); + successData.push(...oneOnOneSuccessData); + failureData.push(...oneOnOneFailureData); + }); + + const { + amount: transactionAmount, + currency: transactionCurrency, + created: transactionCreated, + merchant: transactionMerchant, + comment: transactionComment, + } = ReportUtils.getTransactionDetails(updatedTransaction); + + API.write( + 'CompleteSplitBill', + { + transactionID, + amount: transactionAmount, + currency: transactionCurrency, + created: transactionCreated, + merchant: transactionMerchant, + comment: transactionComment, + splits: JSON.stringify(splits), + }, + {optimisticData, successData, failureData}, + ); + Navigation.dismissModal(chatReportID); + Report.notifyNewAction(chatReportID, sessionAccountID); +} + +/** + * @param {String} transactionID + * @param {Object} transactionChanges + */ +function setDraftSplitTransaction(transactionID, transactionChanges = {}) { + let draftSplitTransaction = allDraftSplitTransactions[`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`]; + + if (!draftSplitTransaction) { + draftSplitTransaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`]; + } + + const updatedTransaction = TransactionUtils.getUpdatedTransaction(draftSplitTransaction, transactionChanges, false, false); + + Onyx.merge(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, updatedTransaction); +} + /** * @param {String} transactionID * @param {Number} transactionThreadReportID @@ -1535,7 +1788,8 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC updatedMoneyRequestReport.lastMessageHtml = lastMessage[0].html; // Update the last message of the chat report - const messageText = Localize.translateLocal('iou.payerOwesAmount', { + const hasNonReimbursableTransactions = ReportUtils.hasNonReimbursableTransactions(iouReport); + const messageText = Localize.translateLocal(hasNonReimbursableTransactions ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', { payer: updatedMoneyRequestReport.managerEmail, amount: CurrencyUtils.convertToDisplayString(updatedMoneyRequestReport.total, updatedMoneyRequestReport.currency), }); @@ -1752,10 +2006,11 @@ function deleteMoneyRequest(transactionID, reportAction, isSingleTransactionView } updatedIOUReport.lastMessageText = iouReportLastMessageText; - updatedIOUReport.lastVisibleActionCreated = lastVisibleAction.created; + updatedIOUReport.lastVisibleActionCreated = lodashGet(lastVisibleAction, 'created'); updatedReportPreviewAction = {...reportPreviewAction}; - const messageText = Localize.translateLocal('iou.payerOwesAmount', { + const hasNonReimbursableTransactions = ReportUtils.hasNonReimbursableTransactions(iouReport); + const messageText = Localize.translateLocal(hasNonReimbursableTransactions ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', { payer: updatedIOUReport.managerEmail, amount: CurrencyUtils.convertToDisplayString(updatedIOUReport.total, updatedIOUReport.currency), }); @@ -1813,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'), }, }, ] @@ -1936,7 +2191,7 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType } const optimisticIOUReport = ReportUtils.buildOptimisticIOUReport(recipientAccountID, managerID, amount, chatReport.reportID, currency, true); - const optimisticTransaction = TransactionUtils.buildOptimisticTransaction(amount * 100, currency, optimisticIOUReport.reportID, comment); + const optimisticTransaction = TransactionUtils.buildOptimisticTransaction(amount, currency, optimisticIOUReport.reportID, comment); const optimisticTransactionData = { onyxMethod: Onyx.METHOD.SET, key: `${ONYXKEYS.COLLECTION.TRANSACTION}${optimisticTransaction.transactionID}`, @@ -2392,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, }, }, @@ -2431,6 +2686,29 @@ function payMoneyRequest(paymentType, chatReport, iouReport) { Navigation.dismissModal(chatReport.reportID); } +function detachReceipt(transactionID) { + const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {}; + const newTransaction = {...transaction, filename: '', receipt: {}}; + + const optimisticData = [ + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: newTransaction, + }, + ]; + + const failureData = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, + value: transaction, + }, + ]; + + API.write('DetachReceipt', {transactionID}, {optimisticData, failureData}); +} + /** * @param {String} transactionID * @param {Object} receipt @@ -2564,9 +2842,12 @@ function setMoneyRequestReceipt(receiptPath, receiptFilename) { Onyx.merge(ONYXKEYS.IOU, {receiptPath, receiptFilename, merchant: ''}); } -function createEmptyTransaction() { +function setUpDistanceTransaction() { const transactionID = NumberUtils.rand64(); - Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {transactionID}); + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, { + transactionID, + comment: {type: CONST.TRANSACTION.TYPE.CUSTOM_UNIT, customUnit: {name: CONST.CUSTOM_UNITS.NAME_DISTANCE}}, + }); Onyx.merge(ONYXKEYS.IOU, {transactionID}); } @@ -2637,7 +2918,9 @@ export { deleteMoneyRequest, splitBill, splitBillAndOpenReport, + setDraftSplitTransaction, startSplitBill, + completeSplitBill, requestMoney, sendMoneyElsewhere, approveMoneyRequest, @@ -2659,9 +2942,10 @@ export { setMoneyRequestBillable, setMoneyRequestParticipants, setMoneyRequestReceipt, - createEmptyTransaction, + setUpDistanceTransaction, navigateToNextPage, updateDistanceRequest, replaceReceipt, + detachReceipt, getIOUReportID, }; diff --git a/src/libs/actions/InputFocus/index.desktop.ts b/src/libs/actions/InputFocus/index.desktop.ts new file mode 100644 index 000000000000..b6cf1aba6138 --- /dev/null +++ b/src/libs/actions/InputFocus/index.desktop.ts @@ -0,0 +1,29 @@ +import Onyx from 'react-native-onyx'; +import ONYXKEYS from '../../../ONYXKEYS'; +import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager'; + +function inputFocusChange(focus: boolean) { + Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus); +} + +let refSave: HTMLElement | undefined; +function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) { + if (isFocused && !onyxFocused) { + inputFocusChange(true); + ref.focus(); + } + if (isFocused) { + refSave = ref; + } + if (!isFocused && !onyxFocused && !modal.willAlertModalBecomeVisible && !modal.isVisible && refSave) { + if (!ReportActionComposeFocusManager.isFocused()) { + refSave.focus(); + } else { + refSave = undefined; + } + } +} + +const callback = (method: () => void) => method(); + +export {composerFocusKeepFocusOn, inputFocusChange, callback}; diff --git a/src/libs/actions/InputFocus/index.ts b/src/libs/actions/InputFocus/index.ts new file mode 100644 index 000000000000..1840b0625626 --- /dev/null +++ b/src/libs/actions/InputFocus/index.ts @@ -0,0 +1,5 @@ +function inputFocusChange() {} +function composerFocusKeepFocusOn() {} +const callback = () => {}; + +export {composerFocusKeepFocusOn, inputFocusChange, callback}; diff --git a/src/libs/actions/InputFocus/index.website.ts b/src/libs/actions/InputFocus/index.website.ts new file mode 100644 index 000000000000..7c044b169a03 --- /dev/null +++ b/src/libs/actions/InputFocus/index.website.ts @@ -0,0 +1,30 @@ +import Onyx from 'react-native-onyx'; +import ONYXKEYS from '../../../ONYXKEYS'; +import * as Browser from '../../Browser'; +import ReportActionComposeFocusManager from '../../ReportActionComposeFocusManager'; + +function inputFocusChange(focus: boolean) { + Onyx.set(ONYXKEYS.INPUT_FOCUSED, focus); +} + +let refSave: HTMLElement | undefined; +function composerFocusKeepFocusOn(ref: HTMLElement, isFocused: boolean, modal: {willAlertModalBecomeVisible: boolean; isVisible: boolean}, onyxFocused: boolean) { + if (isFocused && !onyxFocused) { + inputFocusChange(true); + ref.focus(); + } + if (isFocused) { + refSave = ref; + } + if (!isFocused && !onyxFocused && !modal.willAlertModalBecomeVisible && !modal.isVisible && refSave) { + if (!ReportActionComposeFocusManager.isFocused()) { + refSave.focus(); + } else { + refSave = undefined; + } + } +} + +const callback = (method: () => void) => !Browser.isMobile() && method(); + +export {composerFocusKeepFocusOn, inputFocusChange, callback}; diff --git a/src/libs/actions/KeyboardShortcuts.ts b/src/libs/actions/KeyboardShortcuts.ts deleted file mode 100644 index f401e3dd89aa..000000000000 --- a/src/libs/actions/KeyboardShortcuts.ts +++ /dev/null @@ -1,31 +0,0 @@ -import Onyx from 'react-native-onyx'; -import ONYXKEYS from '../../ONYXKEYS'; - -let isShortcutsModalOpen: boolean | null; -Onyx.connect({ - key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN, - callback: (flag) => (isShortcutsModalOpen = flag), - initWithStoredValues: false, -}); - -/** - * Set keyboard shortcuts flag to show modal - */ -function showKeyboardShortcutModal() { - if (isShortcutsModalOpen) { - return; - } - Onyx.set(ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN, true); -} - -/** - * Unset keyboard shortcuts flag to hide modal - */ -function hideKeyboardShortcutModal() { - if (!isShortcutsModalOpen) { - return; - } - Onyx.set(ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN, false); -} - -export {showKeyboardShortcutModal, hideKeyboardShortcutModal}; 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/ReimbursementAccount/index.js b/src/libs/actions/ReimbursementAccount/index.js index 49ff30e7be8e..68774d0ba8b0 100644 --- a/src/libs/actions/ReimbursementAccount/index.js +++ b/src/libs/actions/ReimbursementAccount/index.js @@ -31,6 +31,7 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) { */ function updateReimbursementAccountDraft(bankAccountData) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, bankAccountData); + Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {draftStep: undefined}); } /** diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js index edb169fc96aa..388010e99569 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js @@ -1,20 +1,20 @@ import Onyx from 'react-native-onyx'; import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; -import * as store from './store'; import * as API from '../../API'; import * as PlaidDataProps from '../../../pages/ReimbursementAccount/plaidDataPropTypes'; import * as ReimbursementAccountProps from '../../../pages/ReimbursementAccount/reimbursementAccountPropTypes'; /** * Reset user's reimbursement account. This will delete the bank account. - * @param {number} bankAccountID + * @param {Number} bankAccountID + * @param {Object} session */ -function resetFreePlanBankAccount(bankAccountID) { +function resetFreePlanBankAccount(bankAccountID, session) { if (!bankAccountID) { throw new Error('Missing bankAccountID when attempting to reset free plan bank account'); } - if (!store.getCredentials() || !store.getCredentials().login) { + if (!session.email) { throw new Error('Missing credentials when attempting to reset free plan bank account'); } @@ -22,7 +22,7 @@ function resetFreePlanBankAccount(bankAccountID) { 'RestartBankAccountSetup', { bankAccountID, - ownerEmail: store.getCredentials().login, + ownerEmail: session.email, }, { optimisticData: [ diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index 27a02b1fc75f..6f8f6840eaea 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1,6 +1,7 @@ import {InteractionManager} from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; +import lodashDebounce from 'lodash/debounce'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; import Onyx from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; @@ -374,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, @@ -1053,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, @@ -1161,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); }; @@ -1190,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 @@ -1198,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 @@ -1238,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: '', @@ -1401,9 +1408,15 @@ function updateWriteCapabilityAndNavigate(report, newValue) { /** * Navigates to the 1:1 report with Concierge + * + * @param {Boolean} ignoreConciergeReportID - Flag to ignore conciergeChatReportID during navigation. The default behavior is to not ignore. */ -function navigateToConciergeChat() { - if (!conciergeChatReportID) { +function navigateToConciergeChat(ignoreConciergeReportID = false) { + // If conciergeChatReportID contains a concierge report ID, we navigate to the concierge chat using the stored report ID. + // Otherwise, we would find the concierge chat and navigate to it. + // Now, when user performs sign-out and a sign-in again, conciergeChatReportID may contain a stale value. + // In order to prevent navigation to a stale value, we use ignoreConciergeReportID to forcefully find and navigate to concierge chat. + if (!conciergeChatReportID || ignoreConciergeReportID) { // In order to avoid creating concierge repeatedly, // we need to ensure that the server data has been successfully pulled Welcome.serverDataIsReadyPromise().then(() => { @@ -1423,8 +1436,9 @@ function navigateToConciergeChat() { * @param {String} visibility * @param {Array} policyMembersAccountIDs * @param {String} writeCapability + * @param {String} welcomeMessage */ -function addPolicyReport(policyID, reportName, visibility, policyMembersAccountIDs, writeCapability = CONST.REPORT.WRITE_CAPABILITIES.ALL) { +function addPolicyReport(policyID, reportName, visibility, policyMembersAccountIDs, writeCapability = CONST.REPORT.WRITE_CAPABILITIES.ALL, welcomeMessage = '') { // The participants include the current user (admin), and for restricted rooms, the policy members. Participants must not be empty. const members = visibility === CONST.REPORT.VISIBILITY.RESTRICTED ? policyMembersAccountIDs : []; const participants = _.unique([currentUserAccountID, ...members]); @@ -1441,6 +1455,9 @@ function addPolicyReport(policyID, reportName, visibility, policyMembersAccountI // The room might contain all policy members so notifying always should be opt-in only. CONST.REPORT.NOTIFICATION_PREFERENCE.DAILY, + '', + '', + welcomeMessage, ); const createdReportAction = ReportUtils.buildOptimisticCreatedReportAction(CONST.POLICY.OWNER_EMAIL_FAKE); @@ -1505,6 +1522,7 @@ function addPolicyReport(policyID, reportName, visibility, policyMembersAccountI reportID: policyReport.reportID, createdReportActionID: createdReportAction.reportActionID, writeCapability, + welcomeMessage, }, {optimisticData, successData, failureData}, ); @@ -1897,7 +1915,7 @@ function openReportFromDeepLink(url, isAuthenticated) { InteractionManager.runAfterInteractions(() => { Session.waitForUserSignIn().then(() => { if (route === ROUTES.CONCIERGE) { - navigateToConciergeChat(); + navigateToConciergeChat(true); return; } Navigation.navigate(route, CONST.NAVIGATION.TYPE.PUSH); @@ -1913,8 +1931,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); @@ -1923,38 +1942,144 @@ 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, + }, + ], + }, + ); +} + +/** + * 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: _.object(reportKeys, Array(reportKeys.length).fill(null)), + 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: { + 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, }, }, ], @@ -2175,6 +2300,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 * @@ -2211,7 +2347,63 @@ function savePrivateNotesDraft(reportID, note) { Onyx.merge(`${ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT}${reportID}`, note); } +/** + * @private + * @param {string} searchInput + */ +function searchForReports(searchInput) { + // We do not try to make this request while offline because it sets a loading indicator optimistically + if (isNetworkOffline) { + Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false); + return; + } + + API.read( + 'SearchForReports', + {searchInput}, + { + successData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + value: false, + }, + ], + failureData: [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + value: false, + }, + ], + }, + ); +} + +/** + * @private + * @param {string} searchInput + */ +const debouncedSearchInServer = lodashDebounce(searchForReports, CONST.TIMING.SEARCH_FOR_REPORTS_DEBOUNCE_TIME, {leading: false}); + +/** + * @param {string} searchInput + */ +function searchInServer(searchInput) { + if (isNetworkOffline) { + Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false); + return; + } + + // Why not set this in optimistic data? It won't run until the API request happens and while the API request is debounced + // we want to show the loading state right away. Otherwise, we will see a flashing UI where the client options are sorted and + // tell the user there are no options, then we start searching, and tell them there are no options again. + Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, true); + debouncedSearchInServer(searchInput); +} + export { + searchInServer, addComment, addAttachment, reconnect, @@ -2257,6 +2449,8 @@ export { hasAccountIDEmojiReacted, shouldShowReportActionNotification, leaveRoom, + inviteToRoom, + removeFromRoom, getCurrentUserAccountID, setLastOpenedPublicRoom, flagComment, @@ -2265,6 +2459,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/fileDownload/FileUtils.js b/src/libs/fileDownload/FileUtils.js index e508d096128d..ba06b80f7c43 100644 --- a/src/libs/fileDownload/FileUtils.js +++ b/src/libs/fileDownload/FileUtils.js @@ -48,6 +48,27 @@ function showPermissionErrorAlert() { ]); } +/** + * Inform the users when they need to grant camera access and guide them to settings + */ +function showCameraPermissionsAlert() { + Alert.alert( + Localize.translateLocal('attachmentPicker.cameraPermissionRequired'), + Localize.translateLocal('attachmentPicker.expensifyDoesntHaveAccessToCamera'), + [ + { + text: Localize.translateLocal('common.cancel'), + style: 'cancel', + }, + { + text: Localize.translateLocal('common.settings'), + onPress: () => Linking.openSettings(), + }, + ], + {cancelable: false}, + ); +} + /** * Generate a random file name with timestamp and file extension * @param {String} url @@ -170,4 +191,55 @@ const readFileAsync = (path, fileName) => }); }); -export {showGeneralErrorAlert, showSuccessAlert, showPermissionErrorAlert, splitExtensionFromFileName, getAttachmentName, getFileType, cleanFileName, appendTimeToFileName, readFileAsync}; +/** + * Converts a base64 encoded image string to a File instance. + * Adds a `uri` property to the File instance for accessing the blob as a URI. + * + * @param {string} base64 - The base64 encoded image string. + * @param {string} filename - Desired filename for the File instance. + * @returns {File} The File instance created from the base64 string with an additional `uri` property. + * + * @example + * const base64Image = "data:image/png;base64,..."; // your base64 encoded image + * const imageFile = base64ToFile(base64Image, "example.png"); + * console.log(imageFile.uri); // Blob URI + */ +function base64ToFile(base64, filename) { + // Decode the base64 string + const byteString = atob(base64.split(',')[1]); + + // Get the mime type from the base64 string + const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; + + // Convert byte string to Uint8Array + const arrayBuffer = new ArrayBuffer(byteString.length); + const uint8Array = new Uint8Array(arrayBuffer); + for (let i = 0; i < byteString.length; i++) { + uint8Array[i] = byteString.charCodeAt(i); + } + + // Create a blob from the Uint8Array + const blob = new Blob([uint8Array], {type: mimeString}); + + // Create a File instance from the Blob + const file = new File([blob], filename, {type: mimeString, lastModified: Date.now()}); + + // Add a uri property to the File instance for accessing the blob as a URI + file.uri = URL.createObjectURL(blob); + + return file; +} + +export { + showGeneralErrorAlert, + showSuccessAlert, + showPermissionErrorAlert, + showCameraPermissionsAlert, + splitExtensionFromFileName, + getAttachmentName, + getFileType, + cleanFileName, + appendTimeToFileName, + readFileAsync, + base64ToFile, +}; 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/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 7c04970c3980..a560a467bc7b 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -17,6 +17,7 @@ import Form from '../components/Form'; import ROUTES from '../ROUTES'; import * as PlaidDataProps from './ReimbursementAccount/plaidDataPropTypes'; import ConfirmationPage from '../components/ConfirmationPage'; +import * as PaymentMethods from '../libs/actions/PaymentMethods'; const propTypes = { ...withLocalizePropTypes, @@ -86,10 +87,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 +120,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)} /> ) : (

{ if (_.has(props.session, 'authToken')) { // Pop the concierge loading page before opening the concierge report. - Navigation.goBack(ROUTES.HOME); - Report.navigateToConciergeChat(); + Navigation.isNavigationReady().then(() => { + Navigation.goBack(ROUTES.HOME); + Report.navigateToConciergeChat(); + }); } else { Navigation.navigate(); } diff --git a/src/pages/DemoSetupPage.js b/src/pages/DemoSetupPage.js index 5d4b99a0daf9..5432bea0c806 100644 --- a/src/pages/DemoSetupPage.js +++ b/src/pages/DemoSetupPage.js @@ -1,9 +1,11 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import PropTypes from 'prop-types'; import {useFocusEffect} from '@react-navigation/native'; import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; +import CONST from '../CONST'; +import * as DemoActions from '../libs/actions/DemoActions'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -18,12 +20,16 @@ const propTypes = { * route that led the user here. Now, it's just used to route the user home so we * don't show them a "Hmm... It's not here" message (which looks broken). */ -function DemoSetupPage() { - useFocusEffect(() => { - 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/EditRequestAmountPage.js b/src/pages/EditRequestAmountPage.js index 9f72c9afbc23..d65fdafb3b59 100644 --- a/src/pages/EditRequestAmountPage.js +++ b/src/pages/EditRequestAmountPage.js @@ -1,13 +1,11 @@ import React, {useCallback, useRef} from 'react'; -import {InteractionManager} from 'react-native'; import {useFocusEffect} from '@react-navigation/native'; import PropTypes from 'prop-types'; +import CONST from '../CONST'; +import useLocalize from '../hooks/useLocalize'; import ScreenWrapper from '../components/ScreenWrapper'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; -import Navigation from '../libs/Navigation/Navigation'; -import useLocalize from '../hooks/useLocalize'; import MoneyRequestAmountForm from './iou/steps/MoneyRequestAmountForm'; -import ROUTES from '../ROUTES'; const propTypes = { /** Transaction default amount value */ @@ -19,36 +17,25 @@ const propTypes = { /** Callback to fire when the Save button is pressed */ onSubmit: PropTypes.func.isRequired, - /** reportID for the transaction thread */ - reportID: PropTypes.string.isRequired, + /** Callback to fire when we press on the currency */ + onNavigateToCurrency: PropTypes.func.isRequired, }; -function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, reportID}) { +function EditRequestAmountPage({defaultAmount, defaultCurrency, onNavigateToCurrency, onSubmit}) { const {translate} = useLocalize(); - const textInput = useRef(null); - const focusTextInput = () => { - // Component may not be initialized due to navigation transitions - // Wait until interactions are complete before trying to focus - InteractionManager.runAfterInteractions(() => { - // Focus text input - if (!textInput.current) { - return; - } - - textInput.current.focus(); - }); - }; - - const navigateToCurrencySelectionPage = () => { - // Remove query from the route and encode it. - const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, '')); - Navigation.navigate(ROUTES.EDIT_CURRENCY_REQUEST.getRoute(reportID, defaultCurrency, activeRoute)); - }; + const textInput = useRef(null); + const focusTimeoutRef = useRef(null); useFocusEffect( useCallback(() => { - focusTextInput(); + focusTimeoutRef.current = setTimeout(() => textInput.current && textInput.current.focus(), CONST.ANIMATED_TRANSITION); + return () => { + if (!focusTimeoutRef.current) { + return; + } + clearTimeout(focusTimeoutRef.current); + }; }, []), ); @@ -64,7 +51,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report currency={defaultCurrency} amount={defaultAmount} ref={(e) => (textInput.current = e)} - onCurrencyButtonPress={navigateToCurrencySelectionPage} + onCurrencyButtonPress={onNavigateToCurrency} onSubmitButtonPress={onSubmit} /> diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js index 9edce7350400..d326e9115afc 100644 --- a/src/pages/EditRequestCreatedPage.js +++ b/src/pages/EditRequestCreatedPage.js @@ -2,11 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import ScreenWrapper from '../components/ScreenWrapper'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; -import Form from '../components/Form'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; import useLocalize from '../hooks/useLocalize'; import NewDatePicker from '../components/NewDatePicker'; +import FormProvider from '../components/Form/FormProvider'; const propTypes = { /** Transaction defailt created value */ @@ -26,7 +26,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) { testID={EditRequestCreatedPage.displayName} > - - + ); } 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/EditRequestPage.js b/src/pages/EditRequestPage.js index 28e70dc1a47e..a85f490bbb42 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -5,6 +5,7 @@ import lodashValues from 'lodash/values'; import {withOnyx} from 'react-native-onyx'; import CONST from '../CONST'; import ONYXKEYS from '../ONYXKEYS'; +import ROUTES from '../ROUTES'; import compose from '../libs/compose'; import Navigation from '../libs/Navigation/Navigation'; import * as ReportActionsUtils from '../libs/ReportActionsUtils'; @@ -30,6 +31,7 @@ import EditRequestCategoryPage from './EditRequestCategoryPage'; import EditRequestTagPage from './EditRequestTagPage'; import categoryPropTypes from '../components/categoryPropTypes'; import ScreenWrapper from '../components/ScreenWrapper'; +import transactionPropTypes from '../components/transactionPropTypes'; const propTypes = { /** Route from navigation */ @@ -75,6 +77,9 @@ const propTypes = { /** Collection of tags attached to a policy */ policyTags: tagPropTypes, + /** The original transaction that is being edited */ + transaction: transactionPropTypes, + ...withCurrentUserPersonalDetailsPropTypes, }; @@ -88,10 +93,12 @@ const defaultProps = { }, policyCategories: {}, policyTags: {}, + transaction: {}, }; function EditRequestPage({betas, report, route, parentReport, policy, session, policyCategories, policyTags, parentReportActions, transaction}) { - const parentReportAction = parentReportActions[report.parentReportActionID]; + const parentReportActionID = lodashGet(report, 'parentReportActionID', '0'); + const parentReportAction = lodashGet(parentReportActions, parentReportActionID); const { amount: transactionAmount, currency: transactionCurrency, @@ -199,6 +206,10 @@ function EditRequestPage({betas, report, route, parentReport, policy, session, p currency: defaultCurrency, }); }} + onNavigateToCurrency={() => { + const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, '')); + Navigation.navigate(ROUTES.EDIT_CURRENCY_REQUEST.getRoute(report.reportID, defaultCurrency, activeRoute)); + }} /> ); } @@ -321,7 +332,8 @@ export default compose( withOnyx({ transaction: { key: ({report, parentReportActions}) => { - const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]); + const parentReportActionID = lodashGet(report, 'parentReportActionID', '0'); + const parentReportAction = lodashGet(parentReportActions, parentReportActionID); return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`; }, }, 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 new file mode 100644 index 000000000000..d10803cd40ea --- /dev/null +++ b/src/pages/EditSplitBillPage.js @@ -0,0 +1,161 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../CONST'; +import ROUTES from '../ROUTES'; +import ONYXKEYS from '../ONYXKEYS'; +import compose from '../libs/compose'; +import transactionPropTypes from '../components/transactionPropTypes'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as IOU from '../libs/actions/IOU'; +import * as CurrencyUtils from '../libs/CurrencyUtils'; +import Navigation from '../libs/Navigation/Navigation'; +import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import EditRequestDescriptionPage from './EditRequestDescriptionPage'; +import EditRequestMerchantPage from './EditRequestMerchantPage'; +import EditRequestCreatedPage from './EditRequestCreatedPage'; +import EditRequestAmountPage from './EditRequestAmountPage'; + +const propTypes = { + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The transaction field we are editing */ + field: PropTypes.string, + + /** The chat reportID of the split */ + reportID: PropTypes.string, + + /** reportActionID of the split action */ + reportActionID: PropTypes.string, + }), + }).isRequired, + + /** The current transaction */ + transaction: transactionPropTypes.isRequired, + + /** The draft transaction that holds data to be persisted on the current transaction */ + draftTransaction: transactionPropTypes, +}; + +const defaultProps = { + draftTransaction: undefined, +}; + +function EditSplitBillPage({route, transaction, draftTransaction}) { + const fieldToEdit = lodashGet(route, ['params', 'field'], ''); + const reportID = lodashGet(route, ['params', 'reportID'], ''); + const reportActionID = lodashGet(route, ['params', 'reportActionID'], ''); + + const { + amount: transactionAmount, + currency: transactionCurrency, + comment: transactionDescription, + merchant: transactionMerchant, + created: transactionCreated, + } = draftTransaction ? ReportUtils.getTransactionDetails(draftTransaction) : ReportUtils.getTransactionDetails(transaction); + + const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency; + + function navigateBackToSplitDetails() { + Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(reportID, reportActionID)); + } + + function setDraftSplitTransaction(transactionChanges) { + IOU.setDraftSplitTransaction(transaction.transactionID, transactionChanges); + navigateBackToSplitDetails(); + } + + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DESCRIPTION) { + return ( + { + setDraftSplitTransaction({ + comment: transactionChanges.comment.trim(), + }); + }} + /> + ); + } + + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DATE) { + return ( + { + setDraftSplitTransaction({ + created: transactionChanges.created, + }); + }} + /> + ); + } + + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.AMOUNT) { + return ( + { + const amount = CurrencyUtils.convertToBackendAmount(Number.parseFloat(transactionChanges)); + + setDraftSplitTransaction({ + amount, + currency: defaultCurrency, + }); + }} + onNavigateToCurrency={() => { + const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, '')); + Navigation.navigate(ROUTES.EDIT_SPLIT_BILL_CURRENCY.getRoute(reportID, reportActionID, defaultCurrency, activeRoute)); + }} + /> + ); + } + + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.MERCHANT) { + return ( + { + setDraftSplitTransaction({merchant: transactionChanges.merchant.trim()}); + }} + /> + ); + } + + return ; +} + +EditSplitBillPage.displayName = 'EditSplitBillPage'; +EditSplitBillPage.propTypes = propTypes; +EditSplitBillPage.defaultProps = defaultProps; +export default compose( + withOnyx({ + reportActions: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, + canEvict: false, + }, + }), + // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file + withOnyx({ + transaction: { + key: ({route, reportActions}) => { + const reportAction = reportActions[`${route.params.reportActionID.toString()}`]; + return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`; + }, + }, + draftTransaction: { + key: ({route, reportActions}) => { + const reportAction = reportActions[`${route.params.reportActionID.toString()}`]; + return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`; + }, + }, + }), +)(EditSplitBillPage); diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js index 268c2664e01d..2d23f39d25e5 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'; @@ -29,8 +30,8 @@ const defaultProps = { }; function ActivateStep(props) { - const isGoldWallet = props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD; - const animation = isGoldWallet ? LottieAnimations.Fireworks : LottieAnimations.ReviewingBankInfo; + const isActivatedWallet = _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], props.userWallet.tierName); + const animation = isActivatedWallet ? LottieAnimations.Fireworks : LottieAnimations.ReviewingBankInfo; const continueButtonText = props.walletTerms.chatReportID ? props.translate('activateStep.continueToPayment') : props.translate('activateStep.continueToTransfer'); return ( @@ -38,9 +39,9 @@ function ActivateStep(props) { 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/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js new file mode 100644 index 000000000000..8ac26301e9fb --- /dev/null +++ b/src/pages/KeyboardShortcutsPage.js @@ -0,0 +1,61 @@ +import React from 'react'; +import {View, ScrollView} from 'react-native'; +import _ from 'underscore'; +import HeaderWithBackButton from '../components/HeaderWithBackButton'; +import ScreenWrapper from '../components/ScreenWrapper'; +import Text from '../components/Text'; +import styles from '../styles/styles'; +import CONST from '../CONST'; +import useLocalize from '../hooks/useLocalize'; +import KeyboardShortcut from '../libs/KeyboardShortcut'; +import MenuItem from '../components/MenuItem'; + +function KeyboardShortcutsPage() { + const {translate} = useLocalize(); + const shortcuts = _.chain(CONST.KEYBOARD_SHORTCUTS) + .filter((shortcut) => !_.isEmpty(shortcut.descriptionKey)) + .map((shortcut) => { + const platformAdjustedModifiers = KeyboardShortcut.getPlatformEquivalentForKeys(shortcut.modifiers); + return { + displayName: KeyboardShortcut.getDisplayName(shortcut.shortcutKey, platformAdjustedModifiers), + descriptionKey: shortcut.descriptionKey, + }; + }) + .value(); + + /** + * Render the information of a single shortcut + * @param {Object} shortcut + * @param {String} shortcut.displayName + * @param {String} shortcut.descriptionKey + * @returns {React.Component} + */ + const renderShortcut = (shortcut) => ( + + ); + + return ( + + + + + {translate('keyboardShortcutsPage.subtitle')} + {_.map(shortcuts, renderShortcut)} + + + + ); +} + +KeyboardShortcutsPage.displayName = 'KeyboardShortcutsPage'; + +export default KeyboardShortcutsPage; 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 565f36d69e54..a9401bce684e 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useState, useEffect, useMemo} from 'react'; +import React, {useState, useEffect, useMemo, useCallback} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -20,6 +20,7 @@ import compose from '../libs/compose'; import personalDetailsPropType from './personalDetailsPropType'; import reportPropTypes from './reportPropTypes'; import variables from '../styles/variables'; +import useNetwork from '../hooks/useNetwork'; const propTypes = { /** Beta features list */ @@ -34,22 +35,27 @@ const propTypes = { ...windowDimensionsPropTypes, ...withLocalizePropTypes, + + /** Whether we are searching for reports in the server */ + isSearchingForReports: PropTypes.bool, }; const defaultProps = { betas: [], personalDetails: {}, reports: {}, + isSearchingForReports: false, }; const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE); -function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) { +function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, isSearchingForReports}) { const [searchTerm, setSearchTerm] = useState(''); const [filteredRecentReports, setFilteredRecentReports] = useState([]); const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]); const [filteredUserToInvite, setFilteredUserToInvite] = useState(); const [selectedOptions, setSelectedOptions] = useState([]); + const {isOffline} = useNetwork(); const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; const headerMessage = OptionsListUtils.getHeaderMessage( @@ -65,13 +71,16 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) const sectionsList = []; let indexOffset = 0; - sectionsList.push({ - title: undefined, - data: selectedOptions, - shouldShow: !_.isEmpty(selectedOptions), - indexOffset, - }); - indexOffset += selectedOptions.length; + // Only show the selected participants if the search is empty + if (searchTerm === '') { + sectionsList.push({ + title: undefined, + data: selectedOptions, + shouldShow: !_.isEmpty(selectedOptions), + indexOffset, + }); + indexOffset += selectedOptions.length; + } if (maxParticipantsReached) { return sectionsList; @@ -103,7 +112,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) } 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. @@ -124,7 +133,24 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) 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); @@ -159,7 +185,24 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) 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); @@ -167,6 +210,13 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) // eslint-disable-next-line react-hooks/exhaustive-deps }, [reports, personalDetails, searchTerm]); + // When search term updates we will fetch any reports + const setSearchTermAndSearchInServer = useCallback((text = '') => { + if (text.length) { + Report.searchInServer(text); + } + setSearchTerm(text); + }, []); return ( createChat(option)} - onChangeText={setSearchTerm} + onChangeText={setSearchTermAndSearchInServer} headerMessage={headerMessage} boldStyle shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()} shouldShowOptions={isOptionsDataReady} shouldShowConfirmButton confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')} + textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} onConfirmSelection={createGroup} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} + isLoadingNewOptions={isSearchingForReports} /> @@ -230,5 +282,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, }), )(NewChatPage); 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/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index d8fbc0290136..5ddea09c6f4e 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -145,6 +145,7 @@ function AddressForm(props) { errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''} maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE} hint={props.translate('common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples})} + containerStyles={[styles.mt2]} /> ); diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index c6f53c2474f4..a99e3d7332a0 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -105,10 +105,12 @@ class ReimbursementAccountPage extends React.Component { this.goBack = this.goBack.bind(this); this.requestorStepRef = React.createRef(); - // The first time we open this page, the props.reimbursementAccount has not been loaded from the server. - // Calculating shouldShowContinueSetupButton on the default data doesn't make sense, and we should recalculate + // The first time we open this page, props.reimbursementAccount is either not available in Onyx + // or only partial data loaded where props.reimbursementAccount.achData.currentStep is not available + // Calculating shouldShowContinueSetupButton on first page open doesn't make sense, and we should recalculate // it once we get the response from the server the first time in componentDidUpdate. - const hasACHDataBeenLoaded = this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps; + const hasACHDataBeenLoaded = + this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && _.has(this.props.reimbursementAccount, 'achData.currentStep'); this.state = { hasACHDataBeenLoaded, shouldShowContinueSetupButton: hasACHDataBeenLoaded ? this.getShouldShowContinueSetupButtonInitialValue() : false, @@ -157,6 +159,12 @@ class ReimbursementAccountPage extends React.Component { return; } + // Update the data that is returned from back-end to draft value + const draftStep = this.props.reimbursementAccount.draftStep; + if (draftStep) { + BankAccounts.updateReimbursementAccountDraft(this.getBankAccountFields(this.getFieldsForStep(draftStep))); + } + const currentStepRouteParam = this.getStepToOpenFromRouteParams(); if (currentStepRouteParam === currentStep) { // The route is showing the correct step, no need to update the route param or clear errors. @@ -177,6 +185,46 @@ class ReimbursementAccountPage extends React.Component { Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(this.getRouteForCurrentStep(currentStep), policyId, backTo)); } + componentWillUnmount() { + BankAccounts.clearReimbursementAccount(); + } + + getFieldsForStep(step) { + switch (step) { + case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT: + return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']; + case CONST.BANK_ACCOUNT.STEP.COMPANY: + return [ + 'companyName', + 'addressStreet', + 'addressZipCode', + 'addressCity', + 'addressState', + 'companyPhone', + 'website', + 'companyTaxID', + 'incorporationType', + 'incorporationDate', + 'incorporationState', + ]; + case CONST.BANK_ACCOUNT.STEP.REQUESTOR: + return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode']; + default: + return []; + } + } + + /** + * @param {Array} fieldNames + * + * @returns {*} + */ + getBankAccountFields(fieldNames) { + return { + ..._.pick(lodashGet(this.props.reimbursementAccount, 'achData'), ...fieldNames), + }; + } + /* * Calculates the state used to show the "Continue with setup" view. If a bank account setup is already in progress and * no specific further step was passed in the url we'll show the workspace bank account reset modal if the user wishes to start over diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js index 72e3850aabd0..3405ad2d80f8 100644 --- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js +++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js @@ -4,10 +4,8 @@ import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import styles from '../../styles/styles'; -import withLocalize from '../../components/withLocalize'; import * as BankAccounts from '../../libs/actions/BankAccounts'; import Onfido from '../../components/Onfido'; -import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import Growl from '../../libs/Growl'; import CONST from '../../CONST'; @@ -15,6 +13,7 @@ import FullPageOfflineBlockingView from '../../components/BlockingViews/FullPage import StepPropTypes from './StepPropTypes'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; import ScreenWrapper from '../../components/ScreenWrapper'; +import useLocalize from '../../hooks/useLocalize'; const propTypes = { ...StepPropTypes, @@ -27,65 +26,62 @@ const defaultProps = { onfidoToken: null, }; -class RequestorOnfidoStep extends React.Component { - constructor(props) { - super(props); - this.submit = this.submit.bind(this); - } +const HEADER_STEP_COUNTER = {step: 3, total: 5}; +const ONFIDO_ERROR_DISPLAY_DURATION = 10000; - submit(onfidoData) { - BankAccounts.verifyIdentityForBankAccount(lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0, onfidoData); +function RequestorOnfidoStep({onBackButtonPress, reimbursementAccount, onfidoToken}) { + const {translate} = useLocalize(); + const submitOnfidoData = (onfidoData) => { + BankAccounts.verifyIdentityForBankAccount(lodashGet(reimbursementAccount, 'achData.bankAccountID', 0), onfidoData); BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true}); - } + }; - render() { - return ( - - - - - { - BankAccounts.clearOnfidoToken(); - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); - }} - onError={() => { - // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again. - Growl.error(this.props.translate('onfidoStep.genericError'), 10000); - BankAccounts.clearOnfidoToken(); - BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); - }} - onSuccess={(onfidoData) => { - this.submit(onfidoData); - }} - /> - - - - ); - } + const handleOnfidoError = () => { + // In case of any unexpected error we log it to the server, show a growl, and return the user back to the requestor step so they can try again. + Growl.error(translate('onfidoStep.genericError'), ONFIDO_ERROR_DISPLAY_DURATION); + BankAccounts.clearOnfidoToken(); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); + }; + + const handleOnfidoUserExit = () => { + BankAccounts.clearOnfidoToken(); + BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR); + }; + + return ( + + + + + + + + + ); } +RequestorOnfidoStep.displayName = 'RequestorOnfidoStep'; RequestorOnfidoStep.propTypes = propTypes; RequestorOnfidoStep.defaultProps = defaultProps; -export default compose( - withLocalize, - withOnyx({ - onfidoToken: { - key: ONYXKEYS.ONFIDO_TOKEN, - }, - }), -)(RequestorOnfidoStep); +export default withOnyx({ + onfidoToken: { + key: ONYXKEYS.ONFIDO_TOKEN, + }, +})(RequestorOnfidoStep); diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 851c4a4b2496..a63916db0784 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -51,23 +51,38 @@ const defaultProps = { }, }; -class ValidationStep extends React.Component { - constructor(props) { - super(props); +/** + * Filter input for validation amount + * Anything that isn't a number is returned as an empty string + * Any dollar amount (e.g. 1.12) will be returned as 112 + * + * @param {String} amount field input + * @returns {String} + */ +const filterInput = (amount) => { + let value = amount ? amount.toString().trim() : ''; + if (value === '' || _.isNaN(Number(value)) || !Math.abs(Str.fromUSDToNumber(value))) { + return ''; + } - this.submit = this.submit.bind(this); - this.validate = this.validate.bind(this); + // If the user enters the values in dollars, convert it to the respective cents amount + if (_.contains(value, '.')) { + value = Str.fromUSDToNumber(value); } + return value; +}; + +function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) { /** * @param {Object} values - form input values passed by the Form component * @returns {Object} */ - validate(values) { + const validate = (values) => { const errors = {}; _.each(values, (value, key) => { - const filteredValue = typeof value === 'string' ? this.filterInput(value) : value; + const filteredValue = typeof value === 'string' ? filterInput(value) : value; if (ValidationUtils.isRequiredFulfilled(filteredValue)) { return; } @@ -75,160 +90,136 @@ class ValidationStep extends React.Component { }); return errors; - } + }; /** * @param {Object} values - form input values passed by the Form component */ - submit(values) { - const amount1 = this.filterInput(values.amount1); - const amount2 = this.filterInput(values.amount2); - const amount3 = this.filterInput(values.amount3); + const submit = (values) => { + const amount1 = filterInput(values.amount1); + const amount2 = filterInput(values.amount2); + const amount3 = filterInput(values.amount3); const validateCode = [amount1, amount2, amount3].join(','); // Send valid amounts to BankAccountAPI::validateBankAccount in Web-Expensify - const bankaccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID'); + const bankaccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID'); BankAccounts.validateBankAccount(bankaccountID, validateCode); - } + }; - /** - * Filter input for validation amount - * Anything that isn't a number is returned as an empty string - * Any dollar amount (e.g. 1.12) will be returned as 112 - * - * @param {String} amount field input - * - * @returns {String} - */ - filterInput(amount) { - let value = amount ? amount.toString().trim() : ''; - if (value === '' || _.isNaN(Number(value)) || !Math.abs(Str.fromUSDToNumber(value))) { - return ''; - } - - // If the user enters the values in dollars, convert it to the respective cents amount - if (_.contains(value, '.')) { - value = Str.fromUSDToNumber(value); - } - - return value; + const state = lodashGet(reimbursementAccount, 'achData.state'); + + // If a user tries to navigate directly to the validate page we'll show them the EnableStep + if (state === BankAccount.STATE.OPEN) { + return ; } - render() { - const state = lodashGet(this.props.reimbursementAccount, 'achData.state'); - - // If a user tries to navigate directly to the validate page we'll show them the EnableStep - if (state === BankAccount.STATE.OPEN) { - return ; - } - - const maxAttemptsReached = lodashGet(this.props.reimbursementAccount, 'maxAttemptsReached'); - const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING; - const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth'); - - return ( - - - {maxAttemptsReached && ( - - - {this.props.translate('validationStep.maxAttemptsReached')} {this.props.translate('common.please')}{' '} - {this.props.translate('common.contactUs')}. - + const maxAttemptsReached = lodashGet(reimbursementAccount, 'maxAttemptsReached'); + const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING; + const requiresTwoFactorAuth = lodashGet(account, 'requiresTwoFactorAuth'); + + return ( + + + {maxAttemptsReached && ( + + + {translate('validationStep.maxAttemptsReached')} {translate('common.please')}{' '} + {translate('common.contactUs')}. + + + )} + {!maxAttemptsReached && state === BankAccount.STATE.PENDING && ( +
+ + {translate('validationStep.description')} + {translate('validationStep.descriptionCTA')} - )} - {!maxAttemptsReached && state === BankAccount.STATE.PENDING && ( - - - {this.props.translate('validationStep.description')} - {this.props.translate('validationStep.descriptionCTA')} - - - - - + + + + + + {!requiresTwoFactorAuth && ( + + - {!requiresTwoFactorAuth && ( - - - - )} - - )} - {isVerifying && ( - -
- {this.props.translate('validationStep.letsChatText')} -
- {this.props.reimbursementAccount.shouldShowResetModal && } - {!requiresTwoFactorAuth && } -
- )} -
- ); - } + )} + + )} + {isVerifying && ( + +
+ {translate('validationStep.letsChatText')} +
+ {reimbursementAccount.shouldShowResetModal && } + {!requiresTwoFactorAuth && } +
+ )} +
+ ); } ValidationStep.propTypes = propTypes; ValidationStep.defaultProps = defaultProps; +ValidationStep.displayName = 'ValidationStep'; export default compose( withLocalize, 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')} + /> + + +