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/actions/javascript/bumpVersion/index.js b/.github/actions/javascript/bumpVersion/index.js index 830dbf626548..da08d1a060b6 100644 --- a/.github/actions/javascript/bumpVersion/index.js +++ b/.github/actions/javascript/bumpVersion/index.js @@ -298,6 +298,9 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } + if (major === 1 && minor === 3 && patch === 83) { + return getVersionStringFromNumber(major, minor, patch - 2, 0); + } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/createOrUpdateStagingDeploy/index.js b/.github/actions/javascript/createOrUpdateStagingDeploy/index.js index 561b8e61bc21..22ad59ed9588 100644 --- a/.github/actions/javascript/createOrUpdateStagingDeploy/index.js +++ b/.github/actions/javascript/createOrUpdateStagingDeploy/index.js @@ -998,6 +998,9 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } + if (major === 1 && minor === 3 && patch === 83) { + return getVersionStringFromNumber(major, minor, patch - 2, 0); + } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/getDeployPullRequestList/index.js b/.github/actions/javascript/getDeployPullRequestList/index.js index e42f97508bc5..3aafda798c54 100644 --- a/.github/actions/javascript/getDeployPullRequestList/index.js +++ b/.github/actions/javascript/getDeployPullRequestList/index.js @@ -961,6 +961,9 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } + if (major === 1 && minor === 3 && patch === 83) { + return getVersionStringFromNumber(major, minor, patch - 2, 0); + } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/actions/javascript/getPreviousVersion/index.js b/.github/actions/javascript/getPreviousVersion/index.js index 37db08db93e9..6770ba99ba69 100644 --- a/.github/actions/javascript/getPreviousVersion/index.js +++ b/.github/actions/javascript/getPreviousVersion/index.js @@ -148,6 +148,9 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } + if (major === 1 && minor === 3 && patch === 83) { + return getVersionStringFromNumber(major, minor, patch - 2, 0); + } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/libs/versionUpdater.js b/.github/libs/versionUpdater.js index 78e8085621bd..b78178f443e6 100644 --- a/.github/libs/versionUpdater.js +++ b/.github/libs/versionUpdater.js @@ -118,6 +118,9 @@ function getPreviousVersion(currentVersion, level) { if (patch === 0) { return getPreviousVersion(currentVersion, SEMANTIC_VERSION_LEVELS.MINOR); } + if (major === 1 && minor === 3 && patch === 83) { + return getVersionStringFromNumber(major, minor, patch - 2, 0); + } return getVersionStringFromNumber(major, minor, patch - 1, 0); } diff --git a/.github/workflows/cherryPick.yml b/.github/workflows/cherryPick.yml index b6558b049647..75f46e68fe5a 100644 --- a/.github/workflows/cherryPick.yml +++ b/.github/workflows/cherryPick.yml @@ -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/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/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/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/android/app/build.gradle b/android/app/build.gradle index 7d895bf752ad..1125b1e8c345 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 1001038106 - versionName "1.3.81-6" + versionCode 1001038304 + versionName "1.3.83-4" } flavorDimensions "default" 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/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/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/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/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/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/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/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/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/other-integrations/Google-Apps-SSO.md b/docs/articles/expensify-classic/integrations/other-integrations/Google-Apps-SSO.md index 3ee1c8656b4b..9fd745838caf 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,34 @@ --- -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/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/policy-and-domain-settings/SAML-SSO.md b/docs/articles/expensify-classic/policy-and-domain-settings/SAML-SSO.md new file mode 100644 index 000000000000..758cb70067e1 --- /dev/null +++ b/docs/articles/expensify-classic/policy-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/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/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/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 5f25018a5c9d..61f46e01f450 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType APPL CFBundleShortVersionString - 1.3.81 + 1.3.83 CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +40,7 @@ CFBundleVersion - 1.3.81.6 + 1.3.83.4 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index c322f1e99957..a5bc3f4b814b 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,10 @@ CFBundlePackageType BNDL CFBundleShortVersionString - 1.3.81 + 1.3.83 CFBundleSignature ???? CFBundleVersion - 1.3.81.6 + 1.3.83.4 diff --git a/package-lock.json b/package-lock.json index c58c8f6a6f07..3bb4d68aa7a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.3.81-6", + "version": "1.3.83-4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.3.81-6", + "version": "1.3.83-4", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -111,7 +111,7 @@ "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", @@ -44984,9 +44984,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": "*" @@ -85432,9 +85432,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": { diff --git a/package.json b/package.json index 7ddfb7b7f6eb..d1a545ee4945 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.3.81-6", + "version": "1.3.83-4", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", @@ -8,6 +8,8 @@ "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", @@ -154,7 +156,7 @@ "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", 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/CONST.ts b/src/CONST.ts index cbfe07ae5aab..58fdea7654cb 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', @@ -304,7 +305,7 @@ const CONST = { }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, }, - SHORTCUT_MODAL: { + SHORTCUTS: { descriptionKey: 'openShortcutDialog', shortcutKey: 'J', modifiers: ['CTRL'], @@ -1475,6 +1476,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, diff --git a/src/Expensify.js b/src/Expensify.js index 9e6ae1ff27b4..642b8ceb456c 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -26,7 +26,6 @@ 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'; @@ -194,7 +193,6 @@ function Expensify(props) { {shouldInit && ( <> - diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index e01319cc2f66..f7c4a11bc52f 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -169,9 +169,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', @@ -252,6 +249,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 @@ -353,7 +351,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; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 2069f773075b..7127c1483c26 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -112,6 +112,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 +171,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`, @@ -294,6 +304,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`, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 0346168f0407..7df37045b959 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -2,15 +2,17 @@ * This is a file containing constants for all of the screen names. In most cases, we should use the routes for * navigation. But there are situations where we may need to access screen names directly. */ -export default { +const PROTECTED_SCREENS = { HOME: 'Home', + CONCIERGE: 'Concierge', + REPORT_ATTACHMENTS: 'ReportAttachments', +} as const; + +export default { + ...PROTECTED_SCREENS, LOADING: 'Loading', REPORT: 'Report', - REPORT_ATTACHMENTS: 'ReportAttachments', NOT_FOUND: 'not-found', - TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps', - VALIDATE_LOGIN: 'ValidateLogin', - CONCIERGE: 'Concierge', SETTINGS: { ROOT: 'Settings_Root', PREFERENCES: 'Settings_Preferences', @@ -21,9 +23,11 @@ export default { SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', }, + TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps', SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', + VALIDATE_LOGIN: 'ValidateLogin', // Iframe screens from olddot HOME_OLDDOT: 'Home_OLDDOT', @@ -38,3 +42,5 @@ export default { GROUPS_WORKSPACES_OLDDOT: 'GroupWorkspaces_OLDDOT', CARDS_AND_DOMAINS_OLDDOT: 'CardsAndDomains_OLDDOT', } as const; + +export {PROTECTED_SCREENS}; diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.js index 034d14eb508b..dd1a0864b0cf 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,7 +34,7 @@ function AnonymousReportFooter(props) { diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 1cc12fca24ae..b8bfb4c36122 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)) { + 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,18 +469,30 @@ function AttachmentModal(props) { )} )} + {isAttachmentReceipt ? ( + + ) : ( + + )} - - {props.children && props.children({ displayFileInModal: validateAndDisplayFileToUpload, @@ -470,6 +509,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/EReceipt.js b/src/components/EReceipt.js new file mode 100644 index 000000000000..e6b3a9809c7e --- /dev/null +++ b/src/components/EReceipt.js @@ -0,0 +1,107 @@ +import React 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 Icon from './Icon'; +import Text from './Text'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as CurrencyUtils from '../libs/CurrencyUtils'; +import * as CardUtils from '../libs/CardUtils'; +import variables from '../styles/variables'; +import useLocalize from '../hooks/useLocalize'; +import EReceiptThumbnail from './EReceiptThumbnail'; +import CONST from '../CONST'; + +const propTypes = { + /* TransactionID of the transaction this EReceipt corresponds to */ + transactionID: PropTypes.string.isRequired, + + /* Onyx Props */ + transaction: transactionPropTypes, +}; + +const defaultProps = { + transaction: {}, +}; + +function EReceipt({transaction, transactionID}) { + const {translate} = useLocalize(); + + // Get receipt colorway, or default to Yellow. + const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + + const { + amount: transactionAmount, + currency: transactionCurrency, + merchant: transactionMerchant, + created: transactionDate, + cardID: transactionCardID, + } = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); + const formattedAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); + const currency = CurrencyUtils.getCurrencySymbol(transactionCurrency); + const amount = formattedAmount.replace(currency, ''); + const cardDescription = CardUtils.getCardDescription(transactionCardID); + + const secondaryTextColorStyle = StyleUtils.getColorStyle(secondaryColor); + + return ( + + + + + + + + + + + + {currency} + + + {amount} + + + {transactionMerchant} + + + + {translate('eReceipt.transactionDate')} + {transactionDate} + + + {translate('common.card')} + {cardDescription} + + + + + {translate('eReceipt.guaranteed')} + + + + ); +} + +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/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..76471aeab51a 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -106,7 +106,7 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c const onValidate = useCallback( (values) => { - const validateErrors = validate(values); + const validateErrors = validate(values) || {}; setErrors(validateErrors); return validateErrors; }, 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..5cba52db5a7b 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -155,6 +155,10 @@ class Hoverable extends Component { } }, onMouseEnter: (el) => { + if (_.isFunction(this.props.onMouseEnter)) { + this.props.onMouseEnter(el); + } + this.setIsHovered(true); if (_.isFunction(child.props.onMouseEnter)) { @@ -162,6 +166,10 @@ class Hoverable extends Component { } }, onMouseLeave: (el) => { + if (_.isFunction(this.props.onMouseLeave)) { + this.props.onMouseLeave(el); + } + this.setIsHovered(false); if (_.isFunction(child.props.onMouseLeave)) { 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/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/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/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/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index acaa83181bbf..98ec01de16f8 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -141,8 +141,8 @@ 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 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, @@ -182,17 +182,20 @@ const defaultProps = { transaction: {}, mileageRate: {unit: CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES, rate: 0, currency: 'USD'}, isDistanceRequest: false, - isScanning: 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 isSplitBill = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT; + const isTypeSend = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND; const {unit, rate, currency} = props.mileageRate; const distance = lodashGet(transaction, 'routes.route0.distance', 0); @@ -202,13 +205,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 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; + const shouldShowMerchant = shouldShowAllFields && !isTypeSend && !props.isDistanceRequest; // Fetches the first tag list of the policy const policyTag = PolicyUtils.getTag(props.policyTags); @@ -232,10 +237,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 +287,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]); @@ -417,11 +445,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(() => { @@ -434,6 +479,7 @@ function MoneyRequestConfirmationList(props) { const button = shouldShowSettlementButton ? ( )} - {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 && !transaction.modifiedAmount ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && !transaction.modifiedAmount ? 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 +614,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 && _.isEmpty(transaction.modifiedCreated) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''} + error={shouldDisplayFieldError && _.isEmpty(transaction.modifiedCreated) ? translate('common.error.enterDate') : ''} /> )} {props.isDistanceRequest && ( @@ -568,18 +642,36 @@ 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 && (transaction.modifiedMerchant === '' || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT) + ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR + : '' + } + error={ + shouldDisplayFieldError && (transaction.modifiedMerchant === '' || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT) + ? translate('common.error.enterMerchant') + : '' + } /> )} {shouldShowCategories && ( @@ -589,7 +681,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 +692,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 +734,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..0f2d19d424b6 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -19,6 +19,7 @@ import ConfirmModal from './ConfirmModal'; import useLocalize from '../hooks/useLocalize'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import * as TransactionUtils from '../libs/TransactionUtils'; +import * as HeaderUtils from '../libs/HeaderUtils'; import reportActionPropTypes from '../pages/home/report/reportActionPropTypes'; import transactionPropTypes from './transactionPropTypes'; import useWindowDimensions from '../hooks/useWindowDimensions'; @@ -80,7 +81,6 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, }, [parentReportAction, setIsDeleteModalVisible]); const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); - const canModifyRequest = isActionOwner && !isSettled && !isApproved; useEffect(() => { @@ -90,6 +90,21 @@ 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 ( <> @@ -97,23 +112,8 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, 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, 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/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/OptionRow.js b/src/components/OptionRow.js index 85d3e83c1360..e3ea3acfc2ee 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; -import React, {Component} from 'react'; +import React, {useState, useEffect, useRef} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet, InteractionManager} from 'react-native'; import styles from '../styles/styles'; @@ -101,233 +101,218 @@ const defaultProps = { shouldPreventDefaultFocusOnSelectRow: false, }; -class OptionRow extends Component { - constructor(props) { - super(props); - this.state = { - isDisabled: this.props.isDisabled, - }; - } +function OptionRow(props) { + const pressableRef = useRef(null); + const [isDisabled, setIsDisabled] = useState(props.isDisabled); - // It is very important to use shouldComponentUpdate here so SectionList items will not unnecessarily re-render - shouldComponentUpdate(nextProps, nextState) { - return ( - this.state.isDisabled !== nextState.isDisabled || - this.props.isDisabled !== nextProps.isDisabled || - this.props.isMultilineSupported !== nextProps.isMultilineSupported || - this.props.isSelected !== nextProps.isSelected || - this.props.shouldHaveOptionSeparator !== nextProps.shouldHaveOptionSeparator || - this.props.selectedStateButtonText !== nextProps.selectedStateButtonText || - this.props.showSelectedState !== nextProps.showSelectedState || - this.props.highlightSelected !== nextProps.highlightSelected || - this.props.showTitleTooltip !== nextProps.showTitleTooltip || - !_.isEqual(this.props.option.icons, nextProps.option.icons) || - this.props.optionIsFocused !== nextProps.optionIsFocused || - this.props.option.text !== nextProps.option.text || - this.props.option.alternateText !== nextProps.option.alternateText || - this.props.option.descriptiveText !== nextProps.option.descriptiveText || - this.props.option.brickRoadIndicator !== nextProps.option.brickRoadIndicator || - this.props.option.shouldShowSubscript !== nextProps.option.shouldShowSubscript || - this.props.option.ownerAccountID !== nextProps.option.ownerAccountID || - this.props.option.subtitle !== nextProps.option.subtitle || - this.props.option.pendingAction !== nextProps.option.pendingAction || - this.props.option.customIcon !== nextProps.option.customIcon - ); - } + useEffect(() => { + 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/QRShare/QRShareWithDownload/index.js b/src/components/QRShare/QRShareWithDownload/index.js index 665115823357..b16f22dc6483 100644 --- a/src/components/QRShare/QRShareWithDownload/index.js +++ b/src/components/QRShare/QRShareWithDownload/index.js @@ -3,6 +3,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 { qrShareRef = React.createRef(); @@ -31,6 +32,7 @@ class QRShareWithDownload extends Component { ref={this.qrShareRef} // eslint-disable-next-line react/jsx-props-no-spreading {...this.props} + logo={this.props.network.isOffline ? null : this.props.logo} /> ); } @@ -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/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js index b4a5e010b7a8..136e6a753e67 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.js +++ b/src/components/ReportActionItem/MoneyRequestAction.js @@ -117,6 +117,7 @@ function MoneyRequestAction({ let shouldShowPendingConversionMessage = false; const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action); + const isReversedTransaction = ReportActionsUtils.isReversedTransaction(action); if ( !_.isEmpty(iouReport) && !_.isEmpty(reportActions) && @@ -128,8 +129,8 @@ function MoneyRequestAction({ shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(iouReport); } - return isDeletedParentAction ? ( - ${translate('parentReportAction.deletedRequest')}`} /> + return isDeletedParentAction || isReversedTransaction ? ( + ${translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}`} /> ) : ( { + if (isExpensifyCardTransaction || isDistanceRequest) { + return props.translate('common.done'); + } switch (lodashGet(props.action, 'originalMessage.paymentType', '')) { case CONST.IOU.PAYMENT_TYPE.EXPENSIFY: return props.translate('iou.settledExpensify'); @@ -199,13 +203,19 @@ 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; }; diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js index 3bf8aa4c111d..043c27de9a48 100644 --- a/src/components/SettlementButton.js +++ b/src/components/SettlementButton.js @@ -20,6 +20,9 @@ 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 +78,7 @@ const propTypes = { const defaultProps = { isLoading: false, isDisabled: false, + pressOnEnter: false, addBankAccountRoute: '', addDebitCardRoute: '', currency: CONST.CURRENCY.USD, @@ -111,6 +115,7 @@ function SettlementButton({ formattedAmount, nvp_lastPaymentMethod, onPress, + pressOnEnter, policyID, shouldShowPaymentOptions, style, @@ -209,6 +214,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/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 ( - + = bb.left && clientYMin <= bb.bottom && clientYMax >= bb.top) { + return bb; + } + } + + // If no matching bounding box is found, fall back to the first one. + // This could only happen if the user is moving the mouse very quickly + // and they got it outside our slop above. + return bbs[0]; +} + +function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, renderTooltipContentKey, shouldHandleScroll, shiftHorizontal, shiftVertical}) { const {preferredLocale} = useLocalize(); const {windowWidth} = useWindowDimensions(); @@ -43,6 +76,14 @@ 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.target; + initialMousePosition.current = {x: e.clientX, y: e.clientY}; + }, []); + /** * Display the tooltip in an animation. */ @@ -91,10 +132,15 @@ function Tooltip(props) { if (bounds.width === 0) { setIsRendered(false); } - setWrapperWidth(bounds.width); - setWrapperHeight(bounds.height); - setXOffset(bounds.x); - setYOffset(bounds.y); + // 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); + setWrapperWidth(betterBounds.width); + setWrapperHeight(betterBounds.height); + setXOffset(betterBounds.x); + setYOffset(betterBounds.y); }; /** @@ -136,8 +182,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 +198,10 @@ function Tooltip(props) { onBoundsChange={updateBounds} > {children} @@ -165,4 +212,6 @@ function Tooltip(props) { Tooltip.propTypes = tooltipPropTypes.propTypes; Tooltip.defaultProps = tooltipPropTypes.defaultProps; +Tooltip.displayName = 'Tooltip'; + export default memo(Tooltip); 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/languages/en.ts b/src/languages/en.ts index 613efc2956b8..62220cc53f10 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -263,6 +263,7 @@ export default { recent: 'Recent', all: 'All', tbd: 'TBD', + card: 'Card', }, location: { useCurrent: 'Use current location', @@ -506,6 +507,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 +516,7 @@ export default { approve: 'Approve', approved: 'Approved', cash: 'Cash', + card: 'Card', split: 'Split', addToSplit: 'Add to split', splitBill: 'Split bill', @@ -523,11 +527,13 @@ 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.', 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?', @@ -1589,7 +1595,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: { @@ -1750,6 +1756,7 @@ export default { parentReportAction: { deletedMessage: '[Deleted message]', deletedRequest: '[Deleted request]', + reversedTransaction: '[Reversed transaction]', deletedTask: '[Deleted task]', hiddenMessage: '[Hidden message]', }, @@ -1839,4 +1846,8 @@ export default { globalNavigationOptions: { chats: 'Chats', }, + eReceipt: { + guaranteed: 'Guaranteed eReceipt', + transactionDate: 'Transaction date', + }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index d1cfc198589b..997c59bd68a8 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -253,6 +253,7 @@ export default { recent: 'Reciente', all: 'Todo', tbd: 'Por determinar', + card: 'Tarjeta', }, location: { useCurrent: 'Usar ubicación actual', @@ -498,6 +499,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 +508,7 @@ export default { approve: 'Aprobar', approved: 'Aprobado', cash: 'Efectivo', + card: 'Tarjeta', split: 'Dividir', addToSplit: 'Añadir para dividir', splitBill: 'Dividir factura', @@ -515,11 +519,13 @@ 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.', requestCount: ({count, scanningReceipts = 0}: RequestCountParams) => `${count} solicitudes${scanningReceipts > 0 ? `, ${scanningReceipts} escaneando` : ''}`, deleteRequest: 'Eliminar pedido', deleteConfirmation: '¿Estás seguro de que quieres eliminar este pedido?', @@ -1613,7 +1619,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: { @@ -2234,6 +2240,7 @@ export default { parentReportAction: { deletedMessage: '[Mensaje eliminado]', deletedRequest: '[Pedido eliminado]', + reversedTransaction: '[Transacción anulada]', deletedTask: '[Tarea eliminado]', hiddenMessage: '[Mensaje oculto]', }, @@ -2324,4 +2331,8 @@ export default { globalNavigationOptions: { chats: 'Chats', }, + eReceipt: { + guaranteed: 'eRecibo garantizado', + transactionDate: 'Fecha de transacción', + }, } satisfies EnglishTranslation; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index e138034ed327..e6c7480974ca 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -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,7 +41,7 @@ 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 ''; 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/HeaderUtils.js b/src/libs/HeaderUtils.js new file mode 100644 index 000000000000..ccc7bac3f571 --- /dev/null +++ b/src/libs/HeaderUtils.js @@ -0,0 +1,31 @@ +import * as Localize from './Localize'; +import themeColors from '../styles/themes/default'; +import * as Session from './actions/Session'; +import * as Report from './actions/Report'; +import * as Expensicons from '../components/Icon/Expensicons'; + +/** + * @param {Object} report + * @returns {Object} pin/unpin object + */ +function getPinMenuItem(report) { + if (!report.isPinned) { + return { + icon: Expensicons.Pin, + iconFill: themeColors.icon, + text: Localize.translateLocal('common.pin'), + onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), + }; + } + return { + icon: Expensicons.Pin, + iconFill: themeColors.icon, + text: Localize.translateLocal('common.unPin'), + onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(report.reportID, report.isPinned)), + }; +} + +export { + // eslint-disable-next-line import/prefer-default-export + getPinMenuItem, +}; 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/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 428550a43aa8..0869306bb491 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -176,22 +176,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 +207,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 +220,9 @@ class AuthScreens extends React.Component { } componentWillUnmount() { + if (this.unsubscribeShortcutsOverviewShortcut) { + this.unsubscribeShortcutsOverviewShortcut(); + } if (this.unsubscribeSearchShortcut) { this.unsubscribeSearchShortcut(); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index c32120db2e45..2d0fdd281422 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -53,6 +53,8 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ const SplitDetailsModalStackNavigator = createModalStackNavigator({ SplitDetails_Root: () => require('../../../pages/iou/SplitBillDetailsPage').default, + SplitDetails_Edit_Request: () => require('../../../pages/EditSplitBillPage').default, + SplitDetails_Edit_Currency: () => require('../../../pages/iou/IOUCurrencySelection').default, }); const DetailsModalStackNavigator = createModalStackNavigator({ @@ -153,6 +155,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 +168,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({ ReimbursementAccount: () => require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default, GetAssistance: () => require('../../../pages/GetAssistancePage').default, Settings_TwoFactorAuth: () => require('../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default, + KeyboardShortcuts: () => require('../../../pages/KeyboardShortcutsPage').default, }); const EnablePaymentsStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index 3e3dc59dcd80..65ba40886fda 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'; @@ -13,7 +12,7 @@ import originalGetTopmostReportId from './getTopmostReportId'; import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import getStateFromPath from './getStateFromPath'; -import SCREENS from '../../SCREENS'; +import SCREENS, {PROTECTED_SCREENS} from '../../SCREENS'; import CONST from '../../CONST'; let resolveNavigationIsReadyPromise; @@ -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); } @@ -263,6 +257,61 @@ function setIsNavigationReady() { resolveNavigationIsReadyPromise(); } +/** + * Checks if the navigation state contains routes that are protected (over the auth wall). + * + * @function + * @param {Object} state - react-navigation state object + * + * @returns {Boolean} + */ +function navContainsProtectedRoutes(state) { + if (!state || !state.routeNames || !_.isArray(state.routeNames)) { + return false; + } + const protectedScreensNames = _.values(PROTECTED_SCREENS); + const difference = _.difference(protectedScreensNames, state.routeNames); + + return !difference.length; +} + +/** + * Waits for the navigation state to contain protected routes specified in PROTECTED_SCREENS constant + * If the navigation is in a state, where protected routes are available, the promise will resolve immediately. + * + * @function + * @returns {Promise} A promise that resolves to `true` when the Concierge route is present. + * Rejects with an error if the navigation is not ready. + * + * @example + * waitForProtectedRoutes() + * .then(() => console.log('Protected routes are present!')) + * .catch(error => console.error(error.message)); + */ +function waitForProtectedRoutes() { + return new Promise((resolve, reject) => { + const isReady = navigationRef.current && navigationRef.current.isReady(); + if (!isReady) { + reject(new Error('[Navigation] is not ready yet!')); + return; + } + const currentState = navigationRef.current.getState(); + if (navContainsProtectedRoutes(currentState)) { + resolve(); + return; + } + let unsubscribe; + const handleStateChange = ({data}) => { + const state = lodashGet(data, 'state'); + if (navContainsProtectedRoutes(state)) { + unsubscribe(); + resolve(); + } + }; + unsubscribe = navigationRef.current.addListener('state', handleStateChange); + }); +} + export default { setShouldPopAllStateOnUP, canNavigate, @@ -276,6 +325,7 @@ export default { setIsNavigationReady, getTopmostReportId, getRouteNameFromStateEvent, + waitForProtectedRoutes, getTopMostCentralPaneRouteName, getTopmostReportActionId, }; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 5616e8d63797..fde5fe400c76 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -185,6 +185,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 +222,9 @@ export default { GetAssistance: { path: ROUTES.GET_ASSISTANCE.route, }, + KeyboardShortcuts: { + path: ROUTES.KEYBOARD_SHORTCUTS, + }, }, }, Private_Notes: { @@ -352,6 +358,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/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 82285545b303..4467746475aa 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -91,33 +91,6 @@ 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, - }; -} - /** * Adds expensify SMS domain (@expensify.sms) if login is a phone number and if it's not included yet * @@ -562,6 +535,28 @@ 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, + }, + ); + option.selected = report.selected; + return option; +} + /** * Searches for a match when provided with a value * 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 index 258582d9f653..fa1883dd9b98 100644 --- a/src/libs/ReportActionsUtils.js +++ b/src/libs/ReportActionsUtils.js @@ -68,6 +68,14 @@ function isDeletedParentAction(reportAction) { return lodashGet(reportAction, ['message', 0, 'isDeletedParentAction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0; } +/** + * @param {Object} reportAction + * @returns {Boolean} + */ +function isReversedTransaction(reportAction) { + return lodashGet(reportAction, ['message', 0, 'isReversedTransaction'], false) && lodashGet(reportAction, 'childVisibleActionCount', 0) > 0; +} + /** * @param {Object} reportAction * @returns {Boolean} @@ -352,7 +360,7 @@ function shouldReportActionBeVisible(reportAction, key) { // 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); + return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction); } /** @@ -673,6 +681,7 @@ export { isTransactionThread, isSentMoneyReportAction, isDeletedParentAction, + isReversedTransaction, isReportPreviewAction, isModifiedExpenseAction, getIOUReportIDFromReportActionPreview, diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index d688bc544fec..26bf1c149025 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -1356,12 +1356,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 +1371,8 @@ function getTransactionDetails(transaction) { category: TransactionUtils.getCategory(transaction), billable: TransactionUtils.getBillable(transaction), tag: TransactionUtils.getTag(transaction), + mccGroup: TransactionUtils.getMCCGroup(transaction), + cardID: TransactionUtils.getCardID(transaction), }; } @@ -1474,6 +1477,10 @@ function hasMissingSmartscanFields(iouReportID) { * @returns {String} */ function getTransactionReportName(reportAction) { + if (ReportActionsUtils.isReversedTransaction(reportAction)) { + return Localize.translateLocal('parentReportAction.reversedTransaction'); + } + if (ReportActionsUtils.isDeletedParentAction(reportAction)) { return Localize.translateLocal('parentReportAction.deletedRequest'); } @@ -2118,6 +2125,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 diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts index b5b8271c35a3..43b1c2f39902 100644 --- a/src/libs/TransactionUtils.ts +++ b/src/libs/TransactionUtils.ts @@ -3,6 +3,7 @@ import {format, parseISO, 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'; @@ -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, @@ -83,20 +81,25 @@ function hasReceipt(transaction: Transaction | undefined | null): boolean { } function areRequiredFieldsEmpty(transaction: Transaction): boolean { - return ( + 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 === ''; + + const isModifiedAmountEmpty = !transaction.modifiedAmount || transaction.modifiedAmount === 0; + const isModifiedCreatedEmpty = !transaction.modifiedCreated || transaction.modifiedCreated === ''; + + return (isModifiedMerchantEmpty && isMerchantEmpty) || (isModifiedAmountEmpty && transaction.amount === 0) || (isModifiedCreatedEmpty && transaction.created === ''); } /** * 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 +146,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; } @@ -244,6 +253,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 +277,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 = parseISO(created); if (isValid(createdDate)) { - return format(createdDate, CONST.DATE.FNS_FORMAT_STRING); + return format(createdDate, dateFormat); } return ''; @@ -277,6 +293,27 @@ function isDistanceRequest(transaction: Transaction): boolean { return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE; } +function isExpensifyCardTransaction(transaction: Transaction): boolean { + if (!transaction.cardID) { + return false; + } + return isExpensifyCard(transaction.cardID); +} + +function isPending(transaction: Transaction): boolean { + if (!transaction.status) { + return false; + } + return transaction.status === CONST.TRANSACTION.STATUS.PENDING; +} + +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); } @@ -390,6 +427,7 @@ export { getDescription, getAmount, getCurrency, + getCardID, getMerchant, getMCCGroup, getCreated, @@ -404,7 +442,11 @@ export { isReceiptBeingScanned, getValidWaypoints, isDistanceRequest, + isExpensifyCardTransaction, + isPending, + isPosted, getWaypoints, + 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/actions/IOU.js b/src/libs/actions/IOU.js index 2c18814889ea..7f5f6d74ed67 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -53,6 +53,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, @@ -1489,6 +1498,229 @@ 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.MONEY_REQUEST_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); + }); + + API.write( + 'CompleteSplitBill', + { + transactionID, + amount: updatedTransaction.modifiedAmount, + currency: updatedTransaction.modifiedCurrency, + created: updatedTransaction.modifiedCreated, + merchant: updatedTransaction.modifiedMerchant, + comment: updatedTransaction.comment.comment, + 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 @@ -1936,7 +2168,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}`, @@ -2431,6 +2663,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 @@ -2640,7 +2895,9 @@ export { deleteMoneyRequest, splitBill, splitBillAndOpenReport, + setDraftSplitTransaction, startSplitBill, + completeSplitBill, requestMoney, sendMoneyElsewhere, approveMoneyRequest, @@ -2666,5 +2923,6 @@ export { navigateToNextPage, updateDistanceRequest, replaceReceipt, + detachReceipt, getIOUReportID, }; 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/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..bbc5ddeadd82 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -1401,9 +1401,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(() => { @@ -1877,7 +1883,6 @@ function toggleEmojiReaction(reportID, reportAction, reactionObject, existingRea * @param {Boolean} isAuthenticated */ function openReportFromDeepLink(url, isAuthenticated) { - const route = ReportUtils.getRouteFromLink(url); const reportID = ReportUtils.getReportIDFromLink(url); if (reportID && !isAuthenticated) { @@ -1896,11 +1901,16 @@ function openReportFromDeepLink(url, isAuthenticated) { // Navigate to the report after sign-in/sign-up. InteractionManager.runAfterInteractions(() => { Session.waitForUserSignIn().then(() => { - if (route === ROUTES.CONCIERGE) { - navigateToConciergeChat(); - return; - } - Navigation.navigate(route, CONST.NAVIGATION.TYPE.PUSH); + Navigation.waitForProtectedRoutes() + .then(() => { + const route = ReportUtils.getRouteFromLink(url); + if (route === ROUTES.CONCIERGE) { + navigateToConciergeChat(true); + return; + } + Navigation.navigate(route, CONST.NAVIGATION.TYPE.PUSH); + }) + .catch((error) => Log.warn(error.message)); }); }); } diff --git a/src/libs/fileDownload/FileUtils.js b/src/libs/fileDownload/FileUtils.js index 144965b63336..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 @@ -213,6 +234,7 @@ export { showGeneralErrorAlert, showSuccessAlert, showPermissionErrorAlert, + showCameraPermissionsAlert, splitExtensionFromFileName, getAttachmentName, getFileType, 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/EditRequestPage.js b/src/pages/EditRequestPage.js index 8b19c7cb7b60..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'; @@ -205,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)); + }} /> ); } diff --git a/src/pages/EditSplitBillPage.js b/src/pages/EditSplitBillPage.js new file mode 100644 index 000000000000..217b1a100572 --- /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: PropTypes.shape(transactionPropTypes), +}; + +const defaultProps = { + draftTransaction: {}, +}; + +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/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/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/home/HeaderView.js b/src/pages/home/HeaderView.js index 4e48a965b095..fc913fb201e0 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -23,11 +23,11 @@ import participantPropTypes from '../../components/participantPropTypes'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; import * as OptionsListUtils from '../../libs/OptionsListUtils'; +import * as HeaderUtils from '../../libs/HeaderUtils'; import * as ReportActionsUtils from '../../libs/ReportActionsUtils'; import * as ReportUtils from '../../libs/ReportUtils'; import * as Link from '../../libs/actions/Link'; import * as Report from '../../libs/actions/Report'; -import * as Session from '../../libs/actions/Session'; import * as Task from '../../libs/actions/Task'; import compose from '../../libs/compose'; import styles from '../../styles/styles'; @@ -135,21 +135,7 @@ function HeaderView(props) { } } - if (!props.report.isPinned) { - threeDotMenuItems.push({ - icon: Expensicons.Pin, - iconFill: themeColors.icon, - text: props.translate('common.pin'), - onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned)), - }); - } else { - threeDotMenuItems.push({ - icon: Expensicons.Pin, - iconFill: themeColors.icon, - text: props.translate('common.unPin'), - onSelected: Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned)), - }); - } + threeDotMenuItems.push(HeaderUtils.getPinMenuItem(props.report)); if (isConcierge && props.guideCalendarLink) { threeDotMenuItems.push({ diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 78f6edcf7dd3..6dba940f0ecb 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -438,6 +438,7 @@ function ReportScreen({ isComposerFullSize={isComposerFullSize} onSubmitComment={onSubmitComment} policies={policies} + personalDetails={personalDetails} /> ) : ( diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js index 04e444a73c6b..0711cd181964 100644 --- a/src/pages/home/report/ReportFooter.js +++ b/src/pages/home/report/ReportFooter.js @@ -18,6 +18,7 @@ import reportActionPropTypes from './reportActionPropTypes'; import reportPropTypes from '../../reportPropTypes'; import * as ReportUtils from '../../../libs/ReportUtils'; import * as Session from '../../../libs/actions/Session'; +import participantPropTypes from '../../../components/participantPropTypes'; const propTypes = { /** Report object for the current report */ @@ -32,6 +33,9 @@ const propTypes = { /** The pending action when we are adding a chat */ pendingAction: PropTypes.string, + /** Personal details of all the users */ + personalDetails: PropTypes.objectOf(participantPropTypes), + /** Whether the composer input should be shown */ shouldShowComposeInput: PropTypes.bool, @@ -49,6 +53,7 @@ const defaultProps = { reportActions: [], onSubmitComment: () => {}, pendingAction: null, + personalDetails: {}, shouldShowComposeInput: true, shouldDisableCompose: false, isReportReadyForDisplay: true, @@ -71,6 +76,7 @@ function ReportFooter(props) { )} {isArchivedRoom && } diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js index 65654aa8098a..fdf7b3a0fb30 100644 --- a/src/pages/iou/MoneyRequestDatePage.js +++ b/src/pages/iou/MoneyRequestDatePage.js @@ -5,7 +5,6 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; 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 Navigation from '../../libs/Navigation/Navigation'; @@ -16,6 +15,7 @@ import NewDatePicker from '../../components/NewDatePicker'; import useLocalize from '../../hooks/useLocalize'; import CONST from '../../CONST'; import {iouPropTypes, iouDefaultProps} from './propTypes'; +import FormProvider from '../../components/Form/FormProvider'; const propTypes = { /** Onyx Props */ @@ -91,7 +91,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) { title={translate('common.date')} onBackButtonPress={() => navigateBack()} /> -
updateDate(value)} @@ -104,7 +104,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) { defaultValue={iou.created} maxDate={new Date()} /> -
+ ); } diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js index d509fbce176d..f2654a9faefb 100644 --- a/src/pages/iou/ReceiptSelector/index.native.js +++ b/src/pages/iou/ReceiptSelector/index.native.js @@ -1,14 +1,14 @@ -import {ActivityIndicator, Alert, AppState, Linking, Text, View} from 'react-native'; +import {ActivityIndicator, Alert, AppState, Text, View} from 'react-native'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {useCameraDevices} from 'react-native-vision-camera'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import {launchImageLibrary} from 'react-native-image-picker'; import {withOnyx} from 'react-native-onyx'; import {RESULTS} from 'react-native-permissions'; import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback'; import Icon from '../../../components/Icon'; import * as Expensicons from '../../../components/Icon/Expensicons'; +import AttachmentPicker from '../../../components/AttachmentPicker'; import styles from '../../../styles/styles'; import Shutter from '../../../../assets/images/shutter.svg'; import Hand from '../../../../assets/images/hand.svg'; @@ -63,31 +63,6 @@ const defaultProps = { isInTabNavigator: true, }; -/** - * See https://github.com/react-native-image-picker/react-native-image-picker/#options - * for ImagePicker configuration options - */ -const imagePickerOptions = { - includeBase64: false, - saveToPhotos: false, - selectionLimit: 1, - includeExtra: false, -}; - -/** - * Return imagePickerOptions based on the type - * @param {String} type - * @returns {Object} - */ -function getImagePickerOptions(type) { - // mediaType property is one of the ImagePicker configuration to restrict types' - const mediaType = type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE ? 'photo' : 'mixed'; - return { - mediaType, - ...imagePickerOptions, - }; -} - function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) { const devices = useCameraDevices('wide-angle-camera'); const device = devices.back; @@ -127,35 +102,6 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) }; }, []); - /** - * Inform the users when they need to grant camera access and guide them to settings - */ - const showPermissionsAlert = () => { - Alert.alert( - translate('attachmentPicker.cameraPermissionRequired'), - translate('attachmentPicker.expensifyDoesntHaveAccessToCamera'), - [ - { - text: translate('common.cancel'), - style: 'cancel', - }, - { - text: translate('common.settings'), - onPress: () => Linking.openSettings(), - }, - ], - {cancelable: false}, - ); - }; - - /** - * A generic handling when we don't know the exact reason for an error - * - */ - const showGeneralAlert = () => { - Alert.alert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingAttachment')); - }; - const askForPermissions = () => { // There's no way we can check for the BLOCKED status without requesting the permission first // https://github.com/zoontek/react-native-permissions/blob/a836e114ce3a180b2b23916292c79841a267d828/README.md?plain=1#L670 @@ -164,7 +110,7 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) setCameraPermissionStatus(status); if (status === RESULTS.BLOCKED) { - showPermissionsAlert(); + FileUtils.showCameraPermissionsAlert(); } }) .catch(() => { @@ -172,36 +118,6 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) }); }; - /** - * Common image picker handling - * - * @param {function} imagePickerFunc - RNImagePicker.launchCamera or RNImagePicker.launchImageLibrary - * @returns {Promise} - */ - const showImagePicker = (imagePickerFunc) => - new Promise((resolve, reject) => { - imagePickerFunc(getImagePickerOptions(CONST.ATTACHMENT_PICKER_TYPE.IMAGE), (response) => { - if (response.didCancel) { - // When the user cancelled resolve with no attachment - return resolve(); - } - if (response.errorCode) { - switch (response.errorCode) { - case 'permission': - showPermissionsAlert(); - return resolve(); - default: - showGeneralAlert(); - break; - } - - return reject(new Error(`Error during attachment selection: ${response.errorMessage}`)); - } - - return resolve(response.assets); - }); - }); - const takePhoto = useCallback(() => { const showCameraAlert = () => { Alert.alert(translate('receipt.cameraErrorTitle'), translate('receipt.cameraErrorMessage')); @@ -284,38 +200,38 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) /> )} - { - showImagePicker(launchImageLibrary) - .then((receiptImage) => { - const filePath = receiptImage[0].uri; - IOU.setMoneyRequestReceipt(filePath, receiptImage[0].fileName); - - if (transactionID) { - FileUtils.readFileAsync(filePath, receiptImage[0].fileName).then((receipt) => { - IOU.replaceReceipt(transactionID, receipt, filePath); - }); - Navigation.dismissModal(); - return; - } - - IOU.navigateToNextPage(iou, iouType, report, route.path); - }) - .catch(() => { - Log.info('User did not select an image from gallery'); - }); - }} - > - - + + {({openPicker}) => ( + { + openPicker({ + onPicked: (file) => { + const filePath = file.uri; + IOU.setMoneyRequestReceipt(filePath, file.name); + + if (transactionID) { + IOU.replaceReceipt(transactionID, file, filePath); + Navigation.dismissModal(); + return; + } + + IOU.navigateToNextPage(iou, iouType, report, route.path); + }, + }); + }} + > + + + )} + participant.accountID !== reportAction.actorAccountID); + + const isScanning = + TransactionUtils.hasReceipt(props.transaction) && TransactionUtils.isReceiptBeingScanned(props.transaction) && TransactionUtils.areRequiredFieldsEmpty(props.transaction); + const hasSmartScanFailed = TransactionUtils.hasReceipt(props.transaction) && props.transaction.receipt.state === CONST.IOU.RECEIPT_STATE.SCANFAILED; + const isEditingSplitBill = props.session.accountID === reportAction.actorAccountID && (TransactionUtils.areRequiredFieldsEmpty(props.transaction) || hasSmartScanFailed); + const { amount: splitAmount, currency: splitCurrency, + comment: splitComment, merchant: splitMerchant, created: splitCreated, - comment: splitComment, category: splitCategory, - } = ReportUtils.getTransactionDetails(transaction); - const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); + } = isEditingSplitBill && props.draftTransaction ? ReportUtils.getTransactionDetails(props.draftTransaction) : ReportUtils.getTransactionDetails(props.transaction); + + const onConfirm = useCallback( + () => IOU.completeSplitBill(reportID, reportAction, props.draftTransaction, props.session.accountID, props.session.email), + [reportID, reportAction, props.draftTransaction, props.session.accountID, props.session.email], + ); return ( - + )} @@ -124,8 +158,33 @@ export default compose( withLocalize, withReportAndReportActionOrNotFound, withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + reportActions: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, + canEvict: false, + }, personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, + session: { + key: ONYXKEYS.SESSION, + }, + }), + // 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)}`; + }, + }, }), )(SplitBillDetailsPage); diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index d007e168de79..de0e0a16c214 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -304,6 +304,10 @@ function MoneyRequestConfirmPage(props) { return props.translate('iou.split'); } + if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SEND) { + return props.translate('common.send'); + } + return props.translate('tabSelector.manual'); }; @@ -376,6 +380,7 @@ function MoneyRequestConfirmPage(props) { iouCreated={props.iou.created} isDistanceRequest={isDistanceRequest} listStyles={[StyleUtils.getMaximumHeight(windowHeight / 3)]} + shouldShowSmartScanFields={_.isEmpty(props.iou.receiptPath)} /> diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js index bd3ea8a50402..25e41ba78556 100644 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js @@ -50,6 +50,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) { const iouType = useRef(lodashGet(route, 'params.iouType', '')); const reportID = useRef(lodashGet(route, 'params.reportID', '')); const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, selectedTab); + const isSendRequest = iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SEND; const isScanRequest = MoneyRequestUtils.isScanRequest(selectedTab); const isSplitRequest = iou.id === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT; const [headerTitle, setHeaderTitle] = useState(); @@ -60,8 +61,13 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) { return; } + if (isSendRequest) { + setHeaderTitle(translate('common.send')); + return; + } + setHeaderTitle(_.isEmpty(iou.participants) ? translate('tabSelector.manual') : translate('iou.split')); - }, [iou.participants, isDistanceRequest, translate]); + }, [iou.participants, isDistanceRequest, isSendRequest, translate]); const navigateToConfirmationStep = (moneyRequestType) => { IOU.setMoneyRequestId(moneyRequestType); diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index bedca1a10c35..547d2b7c363a 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -240,7 +240,7 @@ function MoneyRequestParticipantsSelector({ // the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants const hasPolicyExpenseChatParticipant = _.some(participants, (participant) => participant.isPolicyExpenseChat); const shouldShowConfirmButton = !(participants.length > 1 && hasPolicyExpenseChatParticipant); - const isAllowedToSplit = !isDistanceRequest; + const isAllowedToSplit = !isDistanceRequest && iouType !== CONST.IOU.MONEY_REQUEST_TYPE.SEND; return ( 0 ? safeAreaPaddingBottomStyle : {}]}> diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js index 78a300a38057..25b6197f87f8 100644 --- a/src/pages/settings/AboutPage/AboutPage.js +++ b/src/pages/settings/AboutPage/AboutPage.js @@ -21,7 +21,6 @@ import * as Link from '../../../libs/actions/Link'; import compose from '../../../libs/compose'; import * as ReportActionContextMenu from '../../home/report/ContextMenu/ReportActionContextMenu'; import {CONTEXT_MENU_TYPES} from '../../home/report/ContextMenu/ContextMenuActions'; -import * as KeyboardShortcuts from '../../../libs/actions/KeyboardShortcuts'; import * as Environment from '../../../libs/Environment/Environment'; const propTypes = { @@ -53,7 +52,9 @@ function AboutPage(props) { { translationKey: 'initialSettingsPage.aboutPage.viewKeyboardShortcuts', icon: Expensicons.Keyboard, - action: KeyboardShortcuts.showKeyboardShortcutModal, + action: () => { + Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS); + }, }, { translationKey: 'initialSettingsPage.aboutPage.viewTheCode', diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js index 886a3949766d..68d81d64c604 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js @@ -6,7 +6,6 @@ import {subYears} from 'date-fns'; import CONST from '../../../../CONST'; import ONYXKEYS from '../../../../ONYXKEYS'; import ROUTES from '../../../../ROUTES'; -import Form from '../../../../components/Form'; import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; import NewDatePicker from '../../../../components/NewDatePicker'; import ScreenWrapper from '../../../../components/ScreenWrapper'; @@ -18,6 +17,7 @@ import compose from '../../../../libs/compose'; import styles from '../../../../styles/styles'; import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails'; import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator'; +import FormProvider from '../../../../components/Form/FormProvider'; const propTypes = { /* Onyx Props */ @@ -72,7 +72,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) { {isLoadingPersonalDetails ? ( ) : ( -
- + )} ); diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index d4ed0c45d28c..335df7be3188 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -92,6 +92,8 @@ function BaseValidateCodeForm(props) { const hasError = Boolean(props.account) && !_.isEmpty(props.account.errors); const isLoadingResendValidationForm = props.account.loadingForm === CONST.FORMS.RESEND_VALIDATE_CODE_FORM; const shouldDisableResendValidateCode = props.network.isOffline || props.account.isLoading; + const isValidateCodeFormSubmitting = + props.account.isLoading && props.account.loadingForm === (props.account.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM); useEffect(() => { if (!(inputValidateCodeRef.current && hasError && (props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED || props.account.isLoading))) { @@ -327,6 +329,7 @@ function BaseValidateCodeForm(props) { underlayColor={themeColors.componentBG} hoverDimmingValue={1} pressDimmingValue={0.2} + disabled={isValidateCodeFormSubmitting} accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.isUsingRecoveryCode ? props.translate('recoveryCodeForm.use2fa') : props.translate('recoveryCodeForm.useRecoveryCode')} > @@ -379,9 +382,7 @@ function BaseValidateCodeForm(props) { success style={[styles.mv3]} text={props.translate('common.signIn')} - isLoading={ - props.account.isLoading && props.account.loadingForm === (props.account.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM) - } + isLoading={isValidateCodeFormSubmitting} onPress={validateAndSubmitForm} /> diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js index b7fd3900e1f3..668a61526198 100644 --- a/src/pages/tasks/NewTaskDetailsPage.js +++ b/src/pages/tasks/NewTaskDetailsPage.js @@ -1,4 +1,4 @@ -import React, {useEffect, useRef, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -17,6 +17,7 @@ import ROUTES from '../../ROUTES'; import * as Task from '../../libs/actions/Task'; import CONST from '../../CONST'; import * as Browser from '../../libs/Browser'; +import useAutoFocusInput from '../../hooks/useAutoFocusInput'; const propTypes = { /** Beta features list */ @@ -37,10 +38,11 @@ const defaultProps = { }; function NewTaskDetailsPage(props) { - const inputRef = useRef(); const [taskTitle, setTaskTitle] = useState(props.task.title); const [taskDescription, setTaskDescription] = useState(props.task.description || ''); + const {inputCallbackRef} = useAutoFocusInput(); + useEffect(() => { setTaskTitle(props.task.title); setTaskDescription(props.task.description || ''); @@ -74,7 +76,6 @@ function NewTaskDetailsPage(props) { } return ( inputRef.current && inputRef.current.focus()} includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight testID={NewTaskDetailsPage.displayName} @@ -95,7 +96,7 @@ function NewTaskDetailsPage(props) { > (inputRef.current = el)} + ref={inputCallbackRef} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} inputID="taskTitle" label={props.translate('task.title')} diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index 4ec00df0661c..bfa3ac884e4a 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -201,9 +201,9 @@ function TaskAssigneeSelectorModal(props) { } }; - const isOpen = ReportUtils.isOpenTaskReport(props.task.report); - const canModifyTask = Task.canModifyTask(props.task.report, props.currentUserPersonalDetails.accountID); - const isTaskNonEditable = report && ReportUtils.isTaskReport(props.task.report) && (!canModifyTask || !isOpen); + const isOpen = ReportUtils.isOpenTaskReport(report); + const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID); + const isTaskNonEditable = ReportUtils.isTaskReport(report) && (!canModifyTask || !isOpen); return ( { const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails); Policy.openWorkspaceInvitePage(props.route.params.policyID, _.keys(policyMemberEmailsToAccountIDs)); @@ -84,19 +84,56 @@ function WorkspaceInvitePage(props) { const excludedUsers = useMemo(() => PolicyUtils.getIneligibleInvitees(props.policyMembers, props.personalDetails), [props.policyMembers, props.personalDetails]); useEffect(() => { - const inviteOptions = OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, searchTerm, excludedUsers); - - // Update selectedOptions with the latest personalDetails and policyMembers information - const detailsMap = {}; - _.forEach(inviteOptions.personalDetails, (detail) => (detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail))); - const newSelectedOptions = []; - _.forEach(selectedOptions, (option) => { - newSelectedOptions.push(_.has(detailsMap, option.login) ? {...detailsMap[option.login], isSelected: true} : option); + let emails = _.compact( + searchTerm + .trim() + .replace(/\s*,\s*/g, ',') + .split(','), + ); + + if (emails.length === 0) { + emails = ['']; + } + + const newUsersToInviteDict = {}; + const newPersonalDetailsDict = {}; + const newSelectedOptionsDict = {}; + + _.each(emails, (email) => { + const inviteOptions = OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, email, excludedUsers); + + // Update selectedOptions with the latest personalDetails and policyMembers information + const detailsMap = {}; + _.each(inviteOptions.personalDetails, (detail) => (detailsMap[detail.login] = OptionsListUtils.formatMemberForList(detail))); + + const newSelectedOptions = []; + _.each(selectedOptions, (option) => { + newSelectedOptions.push(_.has(detailsMap, option.login) ? {...detailsMap[option.login], isSelected: true} : option); + }); + + const userToInvite = inviteOptions.userToInvite; + + // Only add the user to the invites list if it is valid + if (userToInvite) { + newUsersToInviteDict[userToInvite.accountID] = userToInvite; + } + + // Add all personal details to the new dict + _.each(inviteOptions.personalDetails, (details) => { + newPersonalDetailsDict[details.accountID] = details; + }); + + // Add all selected options to the new dict + _.each(newSelectedOptions, (option) => { + newSelectedOptionsDict[option.accountID] = option; + }); }); - setUserToInvite(inviteOptions.userToInvite); - setPersonalDetails(inviteOptions.personalDetails); - setSelectedOptions(newSelectedOptions); + // Strip out dictionary keys and update arrays + setUsersToInvite(_.values(newUsersToInviteDict)); + setPersonalDetails(_.values(newPersonalDetailsDict)); + setSelectedOptions(_.values(newSelectedOptionsDict)); + // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to recalculate when selectedOptions change }, [props.personalDetails, props.policyMembers, props.betas, searchTerm, excludedUsers]); @@ -116,7 +153,6 @@ function WorkspaceInvitePage(props) { const selectedLogins = _.map(selectedOptions, ({login}) => login); const personalDetailsWithoutSelected = _.filter(personalDetails, ({login}) => !_.contains(selectedLogins, login)); const personalDetailsFormatted = _.map(personalDetailsWithoutSelected, OptionsListUtils.formatMemberForList); - const hasUnselectedUserToInvite = userToInvite && !_.contains(selectedLogins, userToInvite.login); sections.push({ title: translate('common.contacts'), @@ -126,14 +162,18 @@ function WorkspaceInvitePage(props) { }); indexOffset += personalDetailsFormatted.length; - if (hasUnselectedUserToInvite) { - sections.push({ - title: undefined, - data: [OptionsListUtils.formatMemberForList(userToInvite)], - shouldShow: true, - indexOffset, - }); - } + _.each(usersToInvite, (userToInvite) => { + const hasUnselectedUserToInvite = !_.contains(selectedLogins, userToInvite.login); + + if (hasUnselectedUserToInvite) { + sections.push({ + title: undefined, + data: [OptionsListUtils.formatMemberForList(userToInvite)], + shouldShow: true, + indexOffset: indexOffset++, + }); + } + }); return sections; }; @@ -188,14 +228,14 @@ function WorkspaceInvitePage(props) { const headerMessage = useMemo(() => { const searchValue = searchTerm.trim().toLowerCase(); - if (!userToInvite && CONST.EXPENSIFY_EMAILS.includes(searchValue)) { + if (usersToInvite.length === 0 && CONST.EXPENSIFY_EMAILS.includes(searchValue)) { return translate('messages.errorMessageInvalidEmail'); } - if (!userToInvite && excludedUsers.includes(searchValue)) { + if (usersToInvite.length === 0 && excludedUsers.includes(searchValue)) { return translate('messages.userIsAlreadyMemberOfWorkspace', {login: searchValue, workspace: policyName}); } - return OptionsListUtils.getHeaderMessage(personalDetails.length !== 0, Boolean(userToInvite), searchValue); - }, [excludedUsers, translate, searchTerm, policyName, userToInvite, personalDetails]); + return OptionsListUtils.getHeaderMessage(personalDetails.length !== 0, usersToInvite.length > 0, searchValue); + }, [excludedUsers, translate, searchTerm, policyName, usersToInvite, personalDetails]); return ( - {props.translate('workspace.bankAccount.disconnectYour')} + {translate('workspace.bankAccount.disconnectYour')} {bankShortName} - {props.translate('workspace.bankAccount.bankAccountAnyTransactions')} + {translate('workspace.bankAccount.bankAccountAnyTransactions')} ) : ( - props.translate('workspace.bankAccount.clearProgress') + translate('workspace.bankAccount.clearProgress') ) } danger onCancel={BankAccounts.cancelResetFreePlanBankAccount} - onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID)} + onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID, session)} shouldShowCancelButton isVisible /> @@ -49,4 +57,8 @@ function WorkspaceResetBankAccountModal(props) { WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal'; WorkspaceResetBankAccountModal.propTypes = propTypes; -export default withLocalize(WorkspaceResetBankAccountModal); +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, +})(WorkspaceResetBankAccountModal); diff --git a/src/pages/workspace/WorkspaceSettingsCurrencyPage.js b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js new file mode 100644 index 000000000000..9c757b730cef --- /dev/null +++ b/src/pages/workspace/WorkspaceSettingsCurrencyPage.js @@ -0,0 +1,114 @@ +import React, {useState, useCallback} from 'react'; +import _ from 'underscore'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import useLocalize from '../../hooks/useLocalize'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import HeaderWithBackButton from '../../components/HeaderWithBackButton'; +import SelectionList from '../../components/SelectionList'; +import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; +import compose from '../../libs/compose'; +import ONYXKEYS from '../../ONYXKEYS'; +import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy'; +import * as Policy from '../../libs/actions/Policy'; +import * as PolicyUtils from '../../libs/PolicyUtils'; +import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; + +const propTypes = { + /** Constant, list of available currencies */ + currencyList: PropTypes.objectOf( + PropTypes.shape({ + /** Symbol of the currency */ + symbol: PropTypes.string.isRequired, + }), + ), + ...policyPropTypes, +}; + +const defaultProps = { + currencyList: {}, + ...policyDefaultProps, +}; + +const getDisplayText = (currencyCode, currencySymbol) => `${currencyCode} - ${currencySymbol}`; + +function WorkspaceSettingsCurrencyPage({currencyList, policy}) { + const {translate} = useLocalize(); + const [searchText, setSearchText] = useState(''); + const trimmedText = searchText.trim().toLowerCase(); + const currencyListKeys = _.keys(currencyList); + + const filteredItems = _.filter(currencyListKeys, (currencyCode) => { + const currency = currencyList[currencyCode]; + return getDisplayText(currencyCode, currency.symbol).toLowerCase().includes(trimmedText); + }); + + let initiallyFocusedOptionKey; + + const currencyItems = _.map(filteredItems, (currencyCode) => { + const currency = currencyList[currencyCode]; + const isSelected = policy.outputCurrency === currencyCode; + + if (isSelected) { + initiallyFocusedOptionKey = currencyCode; + } + + return { + text: getDisplayText(currencyCode, currency.symbol), + keyForList: currencyCode, + isSelected, + }; + }); + + const sections = [{data: currencyItems, indexOffset: 0}]; + + const headerMessage = searchText.trim() && !currencyItems.length ? translate('common.noResultsFound') : ''; + + const onBackButtonPress = useCallback(() => Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)), [policy.id]); + + const onSelectCurrency = (item) => { + Policy.updateGeneralSettings(policy.id, policy.name, item.keyForList); + Navigation.goBack(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)); + }; + + return ( + + Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} + shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)} + subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'} + > + + + + + + ); +} + +WorkspaceSettingsCurrencyPage.displayName = 'WorkspaceSettingsCurrencyPage'; +WorkspaceSettingsCurrencyPage.propTypes = propTypes; +WorkspaceSettingsCurrencyPage.defaultProps = defaultProps; + +export default compose( + withPolicy, + withOnyx({ + currencyList: {key: ONYXKEYS.CURRENCY_LIST}, + }), +)(WorkspaceSettingsCurrencyPage); diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index 0f1f6c283a6b..fd975ebc9247 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -1,18 +1,16 @@ -import React, {useCallback, useMemo} from 'react'; +import React, {useCallback} from 'react'; import {Keyboard, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import ONYXKEYS from '../../ONYXKEYS'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import styles from '../../styles/styles'; import compose from '../../libs/compose'; import * as Policy from '../../libs/actions/Policy'; import * as Expensicons from '../../components/Icon/Expensicons'; import AvatarWithImagePicker from '../../components/AvatarWithImagePicker'; import CONST from '../../CONST'; -import Picker from '../../components/Picker'; import TextInput from '../../components/TextInput'; import WorkspacePageWithSections from './WorkspacePageWithSections'; import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; @@ -25,17 +23,29 @@ import Avatar from '../../components/Avatar'; import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; +import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription'; +import Text from '../../components/Text'; +import useLocalize from '../../hooks/useLocalize'; const propTypes = { - // The currency list constant object from Onyx + /** Constant, list of available currencies */ currencyList: PropTypes.objectOf( PropTypes.shape({ - // Symbol for the currency - symbol: PropTypes.string, + /** Symbol of the currency */ + symbol: PropTypes.string.isRequired, }), ), + + /** The route object passed to this page from the navigator */ + route: PropTypes.shape({ + /** Each parameter passed via the URL */ + params: PropTypes.shape({ + /** The policyID that is being configured */ + policyID: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + ...policyPropTypes, - ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; @@ -44,26 +54,22 @@ const defaultProps = { ...policyDefaultProps, }; -function WorkspaceSettingsPage(props) { - const currencyItems = useMemo(() => { - const currencyListKeys = _.keys(props.currencyList); - return _.map(currencyListKeys, (currencyCode) => ({ - value: currencyCode, - label: `${currencyCode} - ${props.currencyList[currencyCode].symbol}`, - })); - }, [props.currencyList]); +function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { + const {translate} = useLocalize(); + + const formattedCurrency = !_.isEmpty(policy) && !_.isEmpty(currencyList) ? `${policy.outputCurrency} - ${currencyList[policy.outputCurrency].symbol}` : ''; const submit = useCallback( (values) => { - if (props.policy.isPolicyUpdating) { + if (policy.isPolicyUpdating) { return; } - const outputCurrency = values.currency; - Policy.updateGeneralSettings(props.policy.id, values.name.trim(), outputCurrency); + + Policy.updateGeneralSettings(policy.id, values.name.trim(), policy.outputCurrency); Keyboard.dismiss(); - Navigation.goBack(ROUTES.WORKSPACE_INITIAL.getRoute(props.policy.id)); + Navigation.goBack(ROUTES.WORKSPACE_INITIAL.getRoute(policy.id)); }, - [props.policy.id, props.policy.isPolicyUpdating], + [policy.id, policy.isPolicyUpdating, policy.outputCurrency], ); const validate = useCallback((values) => { @@ -81,33 +87,36 @@ function WorkspaceSettingsPage(props) { return errors; }, []); - const policyName = lodashGet(props.policy, 'name', ''); + const onPressCurrency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS_CURRENCY.getRoute(policy.id)), [policy.id]); + + const policyName = lodashGet(policy, 'name', ''); return ( {(hasVBA) => (
( Policy.updateWorkspaceAvatar(lodashGet(props.policy, 'id', ''), file)} - onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(props.policy, 'id', ''))} + isUsingDefaultAvatar={!lodashGet(policy, 'avatar', null)} + onImageSelected={(file) => Policy.updateWorkspaceAvatar(lodashGet(policy, 'id', ''), file)} + onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(policy, 'id', ''))} editorMaskImage={Expensicons.ImageCropSquareMask} - pendingAction={lodashGet(props.policy, 'pendingFields.avatar', null)} - errors={lodashGet(props.policy, 'errorFields.avatar', null)} - onErrorClose={() => Policy.clearAvatarErrors(props.policy.id)} - previewSource={UserUtils.getFullSizeAvatar(props.policy.avatar, '')} - headerTitle={props.translate('workspace.common.workspaceAvatar')} - originalFileName={props.policy.originalFileName} + pendingAction={lodashGet(policy, 'pendingFields.avatar', null)} + errors={lodashGet(policy, 'errorFields.avatar', null)} + onErrorClose={() => Policy.clearAvatarErrors(policy.id)} + previewSource={UserUtils.getFullSizeAvatar(policy.avatar, '')} + headerTitle={translate('workspace.common.workspaceAvatar')} + originalFileName={policy.originalFileName} /> - + - + + {hasVBA ? translate('workspace.editor.currencyInputDisabledText') : translate('workspace.editor.currencyInputHelpText')} +
@@ -168,6 +179,5 @@ export default compose( withOnyx({ currencyList: {key: ONYXKEYS.CURRENCY_LIST}, }), - withLocalize, withNetwork(), )(WorkspaceSettingsPage); diff --git a/src/setup/platformSetup/index.desktop.js b/src/setup/platformSetup/index.desktop.js index a1585065e142..0fff03ed252b 100644 --- a/src/setup/platformSetup/index.desktop.js +++ b/src/setup/platformSetup/index.desktop.js @@ -1,9 +1,10 @@ import {AppRegistry} from 'react-native'; import Config from '../../CONFIG'; import LocalNotification from '../../libs/Notification/LocalNotification'; -import * as KeyboardShortcuts from '../../libs/actions/KeyboardShortcuts'; import DateUtils from '../../libs/DateUtils'; import ELECTRON_EVENTS from '../../../desktop/ELECTRON_EVENTS'; +import ROUTES from '../../ROUTES'; +import Navigation from '../../libs/Navigation/Navigation'; export default function () { AppRegistry.runApplication(Config.APP_NAME, { @@ -16,7 +17,9 @@ export default function () { }); // Trigger action to show keyboard shortcuts - window.electron.on(ELECTRON_EVENTS.SHOW_KEYBOARD_SHORTCUTS_MODAL, KeyboardShortcuts.showKeyboardShortcutModal); + window.electron.on(ELECTRON_EVENTS.KEYBOARD_SHORTCUTS_PAGE, () => { + Navigation.navigate(ROUTES.KEYBOARD_SHORTCUTS); + }); // Start current date updater DateUtils.startCurrentDateUpdater(); diff --git a/src/stories/EReceipt.stories.js b/src/stories/EReceipt.stories.js new file mode 100644 index 000000000000..3099e0f4a128 --- /dev/null +++ b/src/stories/EReceipt.stories.js @@ -0,0 +1,240 @@ +/* eslint-disable rulesdir/prefer-actions-set-data */ +import React from 'react'; +import Onyx from 'react-native-onyx'; +import EReceipt from '../components/EReceipt'; +import ONYXKEYS from '../ONYXKEYS'; + +const transactionData = { + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_1`]: { + transactionID: 'FAKE_1', + amount: 1000, + currency: 'USD', + cardID: 4, + merchant: 'United Airlines', + mccGroup: 'Goods', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_2`]: { + transactionID: 'FAKE_2', + amount: 1000, + currency: 'USD', + cardID: 4, + merchant: 'United Airlines', + mccGroup: 'Airlines', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_3`]: { + transactionID: 'FAKE_3', + amount: 1000, + currency: 'USD', + cardID: 5, + merchant: 'United Airlines', + mccGroup: 'Commuter', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_4`]: {transactionID: 'FAKE_4', amount: 444444, currency: 'USD', cardID: 4, merchant: 'Chevron', mccGroup: 'Gas', created: '2023-07-24 13:46:20'}, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_5`]: { + transactionID: 'FAKE_5', + amount: 230440, + currency: 'USD', + cardID: 4, + merchant: 'Barnes and Noble', + mccGroup: 'Goods', + created: '2022-03-21 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_6`]: { + transactionID: 'FAKE_6', + amount: 333333, + currency: 'USD', + cardID: 4, + merchant: 'Trader Joes', + mccGroup: 'Groceries', + created: '2023-12-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_7`]: { + transactionID: 'FAKE_7', + amount: 1000, + currency: 'USD', + cardID: 4, + merchant: "Linda's Place", + mccGroup: 'Hotel', + created: '2023-03-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_8`]: { + transactionID: 'FAKE_8', + amount: 2000, + currency: 'USD', + cardID: 4, + merchant: 'United Post Office', + mccGroup: 'Mail', + created: '2023-09-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_9`]: { + transactionID: 'FAKE_9', + amount: 40884002, + currency: 'USD', + cardID: 4, + merchant: 'Dishoom', + mccGroup: 'Meals', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_10`]: { + transactionID: 'FAKE_10', + amount: 300000, + currency: 'USD', + cardID: 4, + merchant: 'Hertz', + mccGroup: 'Rental', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_11`]: { + transactionID: 'FAKE_11', + amount: 1000, + currency: 'USD', + cardID: 4, + merchant: 'Laundromat', + mccGroup: 'Services', + created: '2023-07-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_12`]: {transactionID: 'FAKE_12', amount: 1000, currency: 'USD', cardID: 4, merchant: 'Uber', mccGroup: 'Taxi', created: '2023-07-24 13:46:20'}, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_13`]: { + transactionID: 'FAKE_13', + amount: 11230, + currency: 'USD', + cardID: 4, + merchant: 'Pirate Party Store', + mccGroup: 'Miscellaneous', + created: '2023-10-31 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_14`]: { + transactionID: 'FAKE_14', + amount: 21500, + currency: 'GBP', + cardID: 4, + merchant: 'Light Bulbs R-US', + mccGroup: 'Utilities', + created: '2023-06-24 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_15`]: { + transactionID: 'FAKE_15', + amount: 200, + currency: 'USD', + cardID: 4, + merchant: 'Invalid MCC', + mccGroup: 'invalidMCC', + created: '2023-01-11 13:46:20', + }, + [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_16`]: { + transactionID: 'FAKE_16', + amount: 200, + currency: 'USD', + cardID: 4, + merchant: 'This is a very very very very very very very very long merchant name, why would you ever shop at a store with a sign this long?', + mccGroup: 'invalidMCC', + created: '2023-01-11 13:46:20', + }, +}; + +Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, transactionData); +Onyx.merge('cardList', { + 4: {bank: 'Expensify Card', lastFourPAN: '1000'}, + 5: {bank: 'Expensify Card', lastFourPAN: '4444'}, +}); + +/** + * We use the Component Story Format for writing stories. Follow the docs here: + * + * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format + */ +const story = { + title: 'Components/EReceipt', + component: EReceipt, +}; + +function Template(args) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; +} + +const Default = Template.bind({}); +Default.args = { + transactionID: 'FAKE_1', +}; + +const Airlines = Template.bind({}); +Airlines.args = { + transactionID: 'FAKE_2', +}; + +const Commuter = Template.bind({}); +Commuter.args = { + transactionID: 'FAKE_3', +}; + +const Gas = Template.bind({}); +Gas.args = { + transactionID: 'FAKE_4', +}; + +const Goods = Template.bind({}); +Goods.args = { + transactionID: 'FAKE_5', +}; + +const Groceries = Template.bind({}); +Groceries.args = { + transactionID: 'FAKE_6', +}; + +const Hotel = Template.bind({}); +Hotel.args = { + transactionID: 'FAKE_7', +}; + +const Mail = Template.bind({}); +Mail.args = { + transactionID: 'FAKE_8', +}; + +const Meals = Template.bind({}); +Meals.args = { + transactionID: 'FAKE_9', +}; + +const Rental = Template.bind({}); +Rental.args = { + transactionID: 'FAKE_10', +}; + +const Services = Template.bind({}); +Services.args = { + transactionID: 'FAKE_11', +}; + +const Taxi = Template.bind({}); +Taxi.args = { + transactionID: 'FAKE_12', +}; + +const Miscellaneous = Template.bind({}); +Miscellaneous.args = { + transactionID: 'FAKE_13', +}; + +const Utilities = Template.bind({}); +Utilities.args = { + transactionID: 'FAKE_14', +}; + +const invalidMCC = Template.bind({}); +invalidMCC.args = { + transactionID: 'FAKE_15', +}; + +const veryLong = Template.bind({}); +veryLong.args = { + transactionID: 'FAKE_16', +}; + +export default story; +export {Default, Airlines, Commuter, Gas, Goods, Groceries, Hotel, Mail, Meals, Rental, Services, Taxi, Miscellaneous, Utilities, invalidMCC, veryLong}; diff --git a/src/stories/EReceiptThumbail.stories.js b/src/stories/EReceiptThumbail.stories.js new file mode 100644 index 000000000000..3d8e79957172 --- /dev/null +++ b/src/stories/EReceiptThumbail.stories.js @@ -0,0 +1,118 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import React from 'react'; +import {View} from 'react-native'; +import EReceiptThumbnail from '../components/EReceiptThumbnail'; + +/** + * We use the Component Story Format for writing stories. Follow the docs here: + * + * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format + */ +const story = { + title: 'Components/EReceiptThumbnail', + component: EReceiptThumbnail, +}; + +function Template(args) { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} + +const Default = Template.bind({}); +Default.args = { + transactionID: 'FAKE_1', +}; + +const Airlines = Template.bind({}); +Airlines.args = { + transactionID: 'FAKE_2', +}; + +const Commuter = Template.bind({}); +Commuter.args = { + transactionID: 'FAKE_3', +}; + +const Gas = Template.bind({}); +Gas.args = { + transactionID: 'FAKE_4', +}; + +const Goods = Template.bind({}); +Goods.args = { + transactionID: 'FAKE_5', +}; + +const Groceries = Template.bind({}); +Groceries.args = { + transactionID: 'FAKE_6', +}; + +const Hotel = Template.bind({}); +Hotel.args = { + transactionID: 'FAKE_7', +}; + +const Mail = Template.bind({}); +Mail.args = { + transactionID: 'FAKE_8', +}; + +const Meals = Template.bind({}); +Meals.args = { + transactionID: 'FAKE_9', +}; + +const Rental = Template.bind({}); +Rental.args = { + transactionID: 'FAKE_10', +}; + +const Services = Template.bind({}); +Services.args = { + transactionID: 'FAKE_11', +}; + +const Taxi = Template.bind({}); +Taxi.args = { + transactionID: 'FAKE_12', +}; + +const Miscellaneous = Template.bind({}); +Miscellaneous.args = { + transactionID: 'FAKE_13', +}; + +const Utilities = Template.bind({}); +Utilities.args = { + transactionID: 'FAKE_14', +}; + +const invalidMCC = Template.bind({}); +invalidMCC.args = { + transactionID: 'FAKE_15', +}; + +export default story; +export {Default, Airlines, Commuter, Gas, Goods, Groceries, Hotel, Mail, Meals, Rental, Services, Taxi, Miscellaneous, Utilities, invalidMCC}; diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 5fc8ae77ac35..5d5fe549406e 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -13,9 +13,11 @@ import spacing from './utilities/spacing'; import * as UserUtils from '../libs/UserUtils'; import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; +import {Transaction} from '../types/onyx'; type ColorValue = ValueOf; type AvatarSizeName = ValueOf; +type EReceiptColorName = ValueOf; type AvatarSizeValue = ValueOf< Pick< typeof variables, @@ -87,13 +89,22 @@ const workspaceColorOptions: WorkspaceColorStyle[] = [ {backgroundColor: colors.ice700, fill: colors.ice200}, ]; -const eReceiptColorOptions: EreceiptColorStyle[] = [ - {backgroundColor: colors.yellow600, color: colors.yellow100}, - {backgroundColor: colors.blue800, color: colors.ice400}, - {backgroundColor: colors.blue400, color: colors.blue100}, - {backgroundColor: colors.green800, color: colors.green400}, - {backgroundColor: colors.tangerine800, color: colors.tangerine400}, - {backgroundColor: colors.pink800, color: colors.pink400}, +const eReceiptColorStyles: Partial> = { + [CONST.ERECEIPT_COLORS.YELLOW]: {backgroundColor: colors.yellow600, color: colors.yellow100}, + [CONST.ERECEIPT_COLORS.ICE]: {backgroundColor: colors.blue800, color: colors.ice400}, + [CONST.ERECEIPT_COLORS.BLUE]: {backgroundColor: colors.blue400, color: colors.blue100}, + [CONST.ERECEIPT_COLORS.GREEN]: {backgroundColor: colors.green800, color: colors.green400}, + [CONST.ERECEIPT_COLORS.TANGERINE]: {backgroundColor: colors.tangerine800, color: colors.tangerine400}, + [CONST.ERECEIPT_COLORS.PINK]: {backgroundColor: colors.pink800, color: colors.pink400}, +}; + +const eReceiptColors: EReceiptColorName[] = [ + CONST.ERECEIPT_COLORS.YELLOW, + CONST.ERECEIPT_COLORS.ICE, + CONST.ERECEIPT_COLORS.BLUE, + CONST.ERECEIPT_COLORS.GREEN, + CONST.ERECEIPT_COLORS.TANGERINE, + CONST.ERECEIPT_COLORS.PINK, ]; const avatarBorderSizes: Partial> = { @@ -251,12 +262,21 @@ function getDefaultWorkspaceAvatarColor(workspaceName: string): ViewStyle | CSSP } /** - * Helper method to return eReceipt color styles + * Helper method to return eReceipt color code */ -function getEReceiptColor(transactionID: string): ViewStyle | CSSProperties { - const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColorOptions.length); +function getEReceiptColorCode(transaction: Transaction): EReceiptColorName { + const transactionID = transaction.parentTransactionID ?? transaction.transactionID ?? ''; - return eReceiptColorOptions[colorHash]; + const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length); + + return eReceiptColors[colorHash]; +} + +/** + * Helper method to return eReceipt color styles + */ +function getEReceiptColorStyles(colorCode: EReceiptColorName): EreceiptColorStyle | undefined { + return eReceiptColorStyles[colorCode]; } /** @@ -770,6 +790,15 @@ function getMinimumHeight(minHeight: number): ViewStyle | CSSProperties { }; } +/** + * Get minimum width as style + */ +function getMinimumWidth(minWidth: number): ViewStyle | CSSProperties { + return { + minWidth, + }; +} + /** * Get maximum height as style */ @@ -797,16 +826,6 @@ function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue { + let containerStyles: Array; + + 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; + default: + containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin]; + } + + return containerStyles; +} + /** * Get transparent color by setting alpha value 0 of the passed hex(#xxxxxx) color code */ @@ -1276,7 +1325,6 @@ export { getEmojiPickerStyle, getReportActionItemStyle, getMiniReportActionContextMenuWrapperStyle, - getKeyboardShortcutsModalWidth, getPaymentMethodMenuWidth, getThemeBackgroundColor, parseStyleAsArray, @@ -1286,6 +1334,7 @@ export { hasSafeAreas, getHeight, getMinimumHeight, + getMinimumWidth, getMaximumHeight, getMaximumWidth, fade, @@ -1299,6 +1348,7 @@ export { getAutoCompleteSuggestionItemStyle, getAutoCompleteSuggestionContainerStyle, getColoredBackgroundStyle, + getColorStyle, getDefaultWorkspaceAvatarColor, getAvatarBorderRadius, getEmojiReactionBubbleStyle, @@ -1323,6 +1373,8 @@ export { getCheckboxContainerStyle, getDropDownButtonHeight, getAmountFontSizeAndLineHeight, + getContainerStyles, getTransparentColor, - getEReceiptColor, + getEReceiptColorStyles, + getEReceiptColorCode, }; diff --git a/src/styles/styles.js b/src/styles/styles.js index 2e741c97431e..ebff49b6a45c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2275,7 +2275,7 @@ const styles = (theme) => ({ justifyContent: 'space-between', }), padding: 20, - backgroundColor: theme.sidebar, + backgroundColor: theme.cardBG, borderRadius: variables.componentBorderRadiusLarge, overflow: 'hidden', }), @@ -2970,47 +2970,6 @@ const styles = (theme) => ({ transform: [{scaleX: -1}, {scaleY: -1}], }, - keyboardShortcutModalContainer: { - maxHeight: '100%', - flex: 0, - flexBasis: 'auto', - }, - - keyboardShortcutTableWrapper: { - alignItems: 'center', - flex: 1, - height: 'auto', - maxHeight: '100%', - }, - - keyboardShortcutTableContainer: { - display: 'flex', - width: '100%', - borderColor: theme.border, - height: 'auto', - borderRadius: variables.componentBorderRadius, - borderWidth: 1, - }, - - keyboardShortcutTableRow: { - flex: 1, - flexDirection: 'row', - borderColor: theme.border, - flexBasis: 'auto', - alignSelf: 'stretch', - borderTopWidth: 1, - }, - - keyboardShortcutTablePrefix: { - width: '30%', - borderRightWidth: 1, - borderColor: theme.border, - }, - - keyboardShortcutTableFirstRow: { - borderTopWidth: 0, - }, - iPhoneXSafeArea: { backgroundColor: theme.inverse, flex: 1, @@ -3301,6 +3260,21 @@ const styles = (theme) => ({ color: colors.green400, }, + eReceiptAmountLarge: { + ...headlineFont, + fontSize: variables.fontSizeEReceiptLarge, + lineHeight: variables.lineHeightXXsLarge, + wordBreak: 'break-word', + textAlign: 'center', + }, + + eReceiptCurrency: { + ...headlineFont, + fontSize: variables.fontSizeXXLarge, + lineHeight: variables.lineHeightXXLarge, + wordBreak: 'break-all', + }, + eReceiptMerchant: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeXLarge, @@ -3347,6 +3321,22 @@ const styles = (theme) => ({ width: 335, }, + eReceiptBackgroundThumbnail: { + ...sizing.w100, + position: 'absolute', + aspectRatio: 335 / 540, + top: 0, + minWidth: 217, + }, + + eReceiptContainer: { + flex: 1, + width: 335, + minHeight: 540, + borderRadius: 20, + overflow: 'hidden', + }, + loginHeroBody: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSignInHeroBody, diff --git a/src/styles/utilities/spacing.ts b/src/styles/utilities/spacing.ts index f17aa9a0c47b..372fa7cf636f 100644 --- a/src/styles/utilities/spacing.ts +++ b/src/styles/utilities/spacing.ts @@ -465,6 +465,10 @@ export default { paddingTop: 24, }, + pt8: { + paddingTop: 32, + }, + pt10: { paddingTop: 40, }, @@ -501,6 +505,10 @@ export default { paddingBottom: 32, }, + pb14: { + paddingBottom: 56, + }, + pb20: { paddingBottom: 80, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 5dbe573bea3d..020d742fdeb1 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -56,6 +56,7 @@ export default { fontSizeXXLarge: 28, fontSizeXXXLarge: 32, fontSizeNormalHeight: getValueUsingPixelRatio(20, 28), + fontSizeEReceiptLarge: 44, fontSizeSignInHeroLarge: 48, fontSizeSignInHeroMedium: 38, fontSizeSignInHeroXSmall: 26, @@ -148,6 +149,22 @@ export default { addPaymentPopoverRightSpacing: 13, anonymousReportFooterBreakpoint: 650, dropDownButtonDividerHeight: 28, + eReceiptThumbnailSmallBreakpoint: 110, + eReceiptThumbnailMediumBreakpoint: 335, + eReceiptThumnailCenterReceiptBreakpoint: 200, + eReceiptIconHeight: 100, + eReceiptIconWidth: 72, + eReceiptMCCHeightWidth: 40, + eReceiptIconHeightSmall: 65, + eReceiptIconWidthSmall: 46, + eReceiptMCCHeightWidthSmall: 26, + eReceiptIconHeightMedium: 82, + eReceiptIconWidthMedium: 59, + eReceiptMCCHeightWidthMedium: 32, + eReceiptWordmarkHeight: 19.25, + eReceiptWordmarkWidth: 86, + eReceiptBGHeight: 540, + eReceiptBGHWidth: 335, // The height of the empty list is 14px (2px for borders and 12px for vertical padding) // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts index 12b4cb92024e..e4d77b150a7c 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -18,6 +18,9 @@ type Policy = { /** The email of the policy owner */ owner: string; + /** The accountID of the policy owner */ + ownerAccountID: number; + /** The output currency for the policy */ outputCurrency: string; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index 95561d5b5311..292addbb142e 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -63,7 +63,7 @@ type Transaction = { parentTransactionID?: string; reimbursable?: boolean; /** The CC for this transaction */ - cardID?: string; + cardID?: number; /** If the transaction is pending or posted */ status?: ValueOf; /** If an EReceipt should be generated for this transaction */