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/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/android/app/build.gradle b/android/app/build.gradle index c62c69683301..27bceccc6d32 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 1001038101 - versionName "1.3.81-1" + versionCode 1001038301 + versionName "1.3.83-1" } 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/contributingGuides/CONTRIBUTING.md b/contributingGuides/CONTRIBUTING.md index 900b80ba9030..5c51f16ffc4d 100644 --- a/contributingGuides/CONTRIBUTING.md +++ b/contributingGuides/CONTRIBUTING.md @@ -203,7 +203,6 @@ During communication with Expensify, you will come across a variety of acronyms - **RBR:** Red Brick Road (UX Design Principle that utilizes red indicators on action items to encourage the user down the optimal path for handling and discovering errors) - **VBA:** Verified Bank Account (Bank account that has been verified as real and belonging to the correct business/individual) - **NAB:** Not a Blocker (An issue that doesn't block progress, but would be nice to not have) -- **LHN:** Left Hand Navigation - **IOU:** I owe you (used to describe payment requests between users) - **OTP:** One-time password, or magic sign-in - **RHP:** Right Hand Panel (on larger screens, pages are often displayed docked to the right side of the screen) 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/Billing-Owner.md b/docs/articles/expensify-classic/billing-and-subscriptions/Billing-Owner.md index acb29d91e1d8..4fd7ef71c2e7 100644 --- a/docs/articles/expensify-classic/billing-and-subscriptions/Billing-Owner.md +++ b/docs/articles/expensify-classic/billing-and-subscriptions/Billing-Owner.md @@ -1,5 +1,49 @@ --- title: Billing-Owner -description: Billing-Owner +description: The Billing Owner is the person responsible for payment for all usage on a given Workspace --- -## Resource Coming Soon! \ No newline at end of file +# Overview +In Expensify, each Workspace has a Billing Owner. The Billing Owner is the person responsible for payment for all usage on a given Workspace. The Billing Owner is also a Workspace Admin, but it’s important to note that not all Workspace Admins are Billing Owners. +# How to set a billing owner +If you've just created a new Group Workspace, you first need to add a payment card to your account. You can do this by going to the web app's Home page and completing the payment card task. Alternatively, you can add a payment card directly from the Payments page (**Settings > Account > Payment**). +- If you already own a Group Workspace subscription, you can edit your payment card details or manage subscription options within the web app under **Settings > Workspaces > Group > Subscription**. +- If you're an individual Workspace owner, you can activate a new monthly subscription in the web app by going to **Settings > Workspaces > Individual > Subscription** section. +# How to change the Billing Owner +A Group Workspace's Billing Owner is typically the user who initially created the Workspace. However, any Workspace Admin can take over the role of Billing Owner by choosing to "Take Over Billing." +Any Workspace Admin can take over the billing responsibility of a Group Workspace as long as they are already a member of that Workspace. If you wish to become the Billing Owner of a Workspace you're not currently a member of, you need to contact an existing Workspace Admin and ask them to add you to the Group Workspace. +To take over billing: +1. Go to **Settings > Workspaces > Group**. +1. Click on the relevant Workspace name. +1. Click on "Take Over Billing." If you haven't added a payment card to your settings yet, you'll be prompted to do so to complete the transfer. + +That's it! As the new Billing Owner, you will receive a monthly email receipt for the Group Workspaces you now own. +# How to update payment details in Expensify +If you're a policy billing owner, you can change your payment information like your payment card and billing currency. If you are a billing owner using the Expensify Card, your monthly company policy charges will be billed to your Expensify Card. + +To change your payment details: +1. Log in to your account using a web browser or Android app (not available on iOS). +1. Go to **Settings > Account > Payments**. +1. To change your payment card, click "Change Payment Card" in the Payment Details section. +1. To change your billing currency, click "Change Billing Currency" and choose a new currency. You'll need to enter the CVC code of your payment card. You can pay in USD, GBP, NZD, or AUD. +# Deep Dive +## Taking over an existing subscription +If the previous Billing Owner had a 12-month subscription, it will be transferred to your Expensify account. If you already have an annual subscription, the sizes of both subscriptions will be combined. For example, if you have a subscription for 10 users and take over from someone with 50 users, your subscription will now cover 60 users. To take over the Annual Subscription, you need to transfer billing ownership of all Workspaces under the previous Billing Owner's name. + +## Taking over Consolidated Domain Billing +If a Domain Admin has enabled Consolidated Domain Billing (**Settings > Domains > Domain Name > Domain Admins**), all Group Workspaces owned by users with email addresses matching the domain will be billed to the Consolidated Domain Billing owner. You can take over billing for the entire domain by following these steps: + +To take over billing for the entire domain, you must: +1. Ensure you have a linked card on your **Settings > Account > Billing** page. +1. Be designated as the Primary Domain Admin. +1. Go to **Settings > Domains > _Domain Name_ > Domain Admins** and enable Consolidated Domain Billing. + +Currently, Consolidated Domain Billing simply consolidates the amounts due for each Group Workspace Billing Owner (listed on the **Settings > Workspaces > Group** page). If you want to use the Annual Subscription across all Workspaces on the domain, you must also be the Billing Owner of all Group Workspaces. +# FAQ +## Why can't I see the option to take over billing? +There could be two reasons: +1. You may not have the role of Workspace Admin. If you can't click on the Workspace name (if it's not a blue hyperlink), you're not a Workspace Admin. Another Workspace Admin for that Workspace must change your role before you can proceed. +1. Your domain might have Consolidated Domain Billing enabled. Refer to the Deep Dive section to understand how to take over Consolidated Domain Billing. +## What if the current Billing Owner is no longer an employee? +There are two ways to resolve this: +1. Have your IT dept. gain access to the account so that you can make yourself an admin. Your IT department may need to recreate the ex-employee's email address. Once your IT department has access to the employee's Home page, you can request a magic link to be sent to that email address to gain access to the account. +1. Have another admin make you a Workspace admin. 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/Expense-Types.md b/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md index 3f2e49952c4a..795a895e81f0 100644 --- a/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md +++ b/docs/articles/expensify-classic/expense-and-report-features/Expense-Types.md @@ -1,5 +1,42 @@ --- title: Expense Types -description: Expense Types +description: Details of the different Expense filters and Expense Types --- -## Resource Coming Soon! + +# Overview +Expense types help categorize different expenses for better financial management. While reimbursable and non-reimbursable expenses are common, Expensify offers various other options to suit your needs. Let's explore the available expense types. + +# How To +## Filtering a Report by Expense Type +Organizing a report by expense type can make it easier to review expenses on a report. +- Open the report you're interested in. +- Click the **Details** icon in the upper right corner of the report, +- Change the “View” to **Detailed** and “Split by” **Reimbursable** or **Billable**. +- You’ll also see the option to **Group by Category** or **Tags**. + + +# Deep Dive +Each report will show the total amount for all expenses in the upper right. Under that total, there will be a breakdown of amounts that are reimbursable, billable, and non-reimbursable (depending on which of those expense types exist on the report). + +## Expense Types +- **Reimbursable Expenses:** Employees pay for these expenses out of their pockets on behalf of the business and are usually reimbursed. They often come from cash, debit cards, or personal credit card purchases. +- **Non-reimbursable Expenses:** The business directly covers these expenses, so there's no need to reimburse the employee. Typically, these expenses are company card expenses. +- **Billable Expenses:** Business or employee expenses must be billed to a specific client or vendor. Choose this option if you need to track expenses for invoicing to customers, clients, or other departments. +- **Per Diem Expenses:** These expenses involve a daily or partial daily rate you can configure in your expense Workspace. +- **Time Expenses:** Employees or jobs are billed based on an hourly rate that you can set within Expensify. +- **Distance Expenses:** These expenses are related to travel for work. + +# FAQ + +## What’s the difference between a receipt, an expense, and a report attachment? + +- **Expense:** Created when you SmartScan or manually upload a receipt from a purchase. +- **Receipt:** Automatically attached to the expense during the SmartScan process. +- **Report Attachments:** Additional documents that need to be submitted to your approver (e.g., supplemental documents to the purchase) can be added to a report anytime by clicking the paperclip icon in the Reports Comments. + +## How are credits or refunds displayed in Expensify? +In Expensify, a credit is displayed as an expense with a minus (ex. -$1.00) in front of it. That’s because Expensify defaults all expenses as something that needs to be paid by the company. So a credit that is returned to the company is displayed as a negative expense. + +If a report includes a credit or a refund expense, it will offset the total amount on the report. +For example, the report has two reimbursable expenses, $400 and $500. The total Reimbursable is $900. +Conversely, a -$400 and $500 will be a total Reimbursable amount of $500 diff --git a/docs/articles/expensify-classic/expense-and-report-features/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/getting-started/Invite-Employees.md b/docs/articles/expensify-classic/getting-started/Invite-Employees.md deleted file mode 100644 index 73dc7b8274f0..000000000000 --- a/docs/articles/expensify-classic/getting-started/Invite-Employees.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Invite Employees -description: Invite Employees ---- -## Resource Coming Soon! diff --git a/docs/articles/expensify-classic/getting-started/Invite-Members.md b/docs/articles/expensify-classic/getting-started/Invite-Members.md new file mode 100644 index 000000000000..5b3c17c2e8fb --- /dev/null +++ b/docs/articles/expensify-classic/getting-started/Invite-Members.md @@ -0,0 +1,62 @@ +--- +title: Invite Members +description: Learn how add your employees to submit expenses in Expensify +--- +# Overview + +To invite your employees to Expensify, simply add them as members to your Workspace. + +# How to Invite members to Expensify + +## Inviting Members Manually + +Navigate to **Settings > Workspace > Group > *Workspace Name* > People** - then click **Invite** and enter the invitee's email address. + +Indicate whether you want them to be an Employee, Admin, or Auditor on the Workspace. + +If you are utilizing the Advanced Approval feature and the invitee is an approver, you can use the "Approves to" field to specify to whom they approve and forward reports for additional approval. + +## Inviting Members to a Workspace in Bulk + +Navigate to **Settings > Workspaces > Group > *Workspace Name* > People** - then click Invite and enter all of the email addresses separated by comma. Indicate whether you want them to be an Employee, Admin, or Auditor on the Workspace. + +If you are utilizing the Advanced Approval feature, you can specify who each member should submit their expense reports to and who an approver should send approved reports to for the next step in the approval process. If someone is the final approver, you can leave this field blank. + +Another convenient method is to employ the spreadsheet bulk upload option for inviting members to a Workspace. This proves particularly helpful when initially configuring your system or when dealing with numerous member updates. Simply click the "Import from Spreadsheet" button and upload a file in formats such as .csv, .txt, .xls, or .xlsx to streamline the process. + +After uploading the spreadsheet, we'll display a window where you can choose which columns to import and what they correspond to. These are the fields: +- Email +- Role +- Custom Field 1 +- Custom Field 2 +- Submits To +- Approves To +- Approval Limit +- Over Limit Forward To + +Click the **Import** button and you're done. We will import the new members with the optional settings and update any already existing ones. + +## Inviting Members with a Shareable Workspace Joining Link + +You have the ability to invite your colleagues to join your Expensify Workspace by sharing a unique Workspace Joining Link. You can use this link as many times as necessary to invite multiple members through various communication methods such as internal emails, chats, text messages, and more. + +To find your unique link, simply go to **Settings > Workspace > Group > *Workspace Name* > People**. + +## Allowing Members to Automatically Join Your Workspace + +You can streamline the process of inviting colleagues to your Workspace by enabling the Pre-approve switch located below your Workspace Joining Link. This allows teammates to automatically become part of your Workspace as soon as they create an Expensify account using their work email address. + +Here's how it works: If a colleague signs up with a work email address that matches the email domain of a company Workspace owner (e.g., if the Workspace owner's email is admin@expensify.com and the colleague signs up with employee@expensify.com), they will be able to join your Workspace seamlessly without requiring a manual invitation. When new members join the Workspace, they will be set up to submit their expense reports to the Workspace owner by default. + +To enable this feature, go to **Settings > Workspace > Group > *Workspace Name* > People**. + + +# FAQ +## Who can invite members to Expensify +Any Workspace Admin can add members to a Group Workspace using any of the above methods. + +## How can I customize an invite message? +Under **Settings > Workspace > Group > *Workspace Name* > People > Invite** you can enter a custom message you'd like members to receive in their invitation email. + +## How can I invite members via the API? +If you would like to integrate an open API HR software, you can use our [Advanced Employee Updater API](https://integrations.expensify.com/Integration-Server/doc/employeeUpdater/) to invite members to your Workspace. diff --git a/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md b/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md deleted file mode 100644 index 507d24503af8..000000000000 --- a/docs/articles/expensify-classic/getting-started/tips-and-tricks/Enable-Location-Access-On-Web.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Enable Location Access on Web -description: How to enable location access for Expensify websites on your browser -redirect_from: articles/other/Enable-Location-Access-on-Web/ ---- - - -# About - -If you'd like to use features that rely on your current location you will need to enable location permissions for Expensify. You can find instructions for how to enable location settings on the three most common web browsers below. If your browser is not in the list then please do a web search for your browser and "enable location settings". - -# How-to - - -### Chrome -1. Open Chrome -2. At the top right, click the three-dot Menu > Settings -3. Click "Privacy and Security" and then "Site Settings" -4. Click Location -5. Check the "Not allowed to see your location" list to make sure expensify.com and new.expensify.com are not listed. If they are, click the delete icon next to them to allow location access - -[Chrome help page](https://support.google.com/chrome/answer/142065) - -### Firefox - -1. Open Firefox -2. In the URL bar enter "about:preferences" -3. On the left hand side select "Privacy & Security" -4. Scroll down to Permissions -5. Click on Settings next to Location -6. If location access is blocked for expensify.com or new.expensify.com, you can update it here to allow access - -[Firefox help page](https://support.mozilla.org/en-US/kb/permissions-manager-give-ability-store-passwords-set-cookies-more) - -### Safari -1. In the top menu bar click Safari -2. Then select Settings > Websites -3. Click Location on the left hand side -4. If expensify.com or new.expensify.com have "Deny" set as their access, update it to "Ask" or "Allow" - -Ask: The site must ask if it can use your location. -Deny: The site can’t use your location. -Allow: The site can always use your location. - -[Safari help page](https://support.apple.com/guide/safari/websites-ibrwe2159f50/mac) \ No newline at end of file diff --git a/docs/articles/expensify-classic/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/Per-Diem.md b/docs/articles/expensify-classic/policy-and-domain-settings/Per-Diem.md index 6b40a0f4adce..fcb1c8018613 100644 --- a/docs/articles/expensify-classic/policy-and-domain-settings/Per-Diem.md +++ b/docs/articles/expensify-classic/policy-and-domain-settings/Per-Diem.md @@ -6,7 +6,7 @@ description: Expensify Per Diems support simple, pre-determined, tax-free allowa Per Diems are a flat rate given based on a timed range traveled for business purposes regardless of actual expenses incurred. A Per Diem is only based on the time you travel for work: it starts when you leave your home and ends when you arrive home. -Per Diems themselves are created to alleviate much of the heavy lifting that Expense Reporting is well known for. Per Diem claims generally remove the hassle of saving multiple receipts and allow you to claim back a simple, pre-determined, tax-free allowance set by your jurisdiction or company. +Per Diems themselves are created to alleviate much of the heavy lifting that expense reporting is well known for. Per Diem claims generally remove the hassle of saving multiple receipts and allow you to claim back a simple, pre-determined, tax-free allowance set by your jurisdiction or company. # How to set up Per Diems in Expensify @@ -75,11 +75,10 @@ Most companies will also set a Description Hint, which allows admins to take the **Cons:** -- Sometimes, jurisdiction-set amounts can be deemed incorrect or too low. In these cases, it can be challenging to establish a fair and realistic per diem for different costs in different locations. Additionally, allowing more than a tax-free amount adds undue labor for admins teams to split out taxable and tax-free expense reimbursements. +- Sometimes, jurisdiction-set amounts can be deemed incorrect or too low. In these cases, it can be challenging to establish a fair and realistic per diem for different costs in different locations. Additionally, allowing more than a tax-free amount adds undue labor for admin teams to split out taxable and tax-free expense reimbursements. - Set Per Diems might restrict employee choices that could have benefitted the company, i.e., a sales team member not picking up a full dinner tab or pushing split bill reclamation back onto employees after an individual picks up the tab and each user submits their own Per Diem claims. - It does not eliminate employee expense fraud, and reduced receipt requirements may make it easier. - -As a business, you can never be sure that your expenses bill matches what employees have had to spend. Because you're reimbursing pre-determined amounts, there may be substantial hidden savings you're not taking advantage of. +- As a business, you can never be sure that your expenses bill matches what employees have had to spend. Because you're reimbursing pre-determined amounts, there may be substantial hidden savings you're not taking advantage of. ## How to manage existing rates and avoid duplicates 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_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_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/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index abc9987e3037..fd6ad177d56b 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.1 + 1.3.83.1 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 208684e2a7dd..af1ff6f92259 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.1 + 1.3.83.1 diff --git a/ios/Podfile b/ios/Podfile index b30510572448..6aee4b94df04 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -2,17 +2,29 @@ # This value is used by $RNMapboxMaps $RNMapboxMapsImpl = 'mapbox' -# Resolve react_native_pods.rb with node to allow for hoisting -require Pod::Executable.execute_command('node', ['-p', - 'require.resolve( - "react-native/scripts/react_native_pods.rb", - {paths: [process.argv[1]]}, - )', __dir__]).strip +def node_require(script) + # Resolve script with node to allow for hoisting + require Pod::Executable.execute_command('node', ['-p', + "require.resolve( + '#{script}', + {paths: [process.argv[1]]}, + )", __dir__]).strip +end + +node_require('react-native/scripts/react_native_pods.rb') +node_require('react-native-permissions/scripts/setup.rb') # Our min supported iOS version is higher than the default (min_ios_version_supported) to support libraires such as Airship platform :ios, 13 prepare_react_native_project! +setup_permissions([ + 'Camera', + 'LocationAccuracy', + 'LocationAlways', + 'LocationWhenInUse' +]) + # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded # @@ -51,8 +63,6 @@ pre_install do |installer| end target 'NewExpensify' do - permissions_path = '../node_modules/react-native-permissions/ios' - project 'NewExpensify', 'DebugDevelopment' => :debug, 'DebugAdHoc' => :debug, @@ -61,11 +71,6 @@ target 'NewExpensify' do 'ReleaseAdHoc' => :release, 'ReleaseProduction' => :release - pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy" - pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways" - pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse" - pod 'Permission-Camera', :path => "#{permissions_path}/Camera" - config = use_native_modules! # Flags change depending on the env values. diff --git a/ios/Podfile.lock b/ios/Podfile.lock index fd019aeddb8b..54d0525fd3c9 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -233,9 +233,9 @@ PODS: - libwebp/mux (1.2.4): - libwebp/demux - libwebp/webp (1.2.4) - - lottie-ios (3.4.4) - - lottie-react-native (5.1.6): - - lottie-ios (~> 3.4.0) + - lottie-ios (4.3.3) + - lottie-react-native (6.3.1): + - lottie-ios (~> 4.3.0) - React-Core - MapboxCommon (23.6.0) - MapboxCoreMaps (10.14.0): @@ -256,14 +256,6 @@ PODS: - Onfido (= 27.4.0) - React - OpenSSL-Universal (1.1.1100) - - Permission-Camera (3.6.1): - - RNPermissions - - Permission-LocationAccuracy (3.6.1): - - RNPermissions - - Permission-LocationAlways (3.6.1): - - RNPermissions - - Permission-LocationWhenInUse (3.6.1): - - RNPermissions - Plaid (4.1.0) - PromisesObjC (2.2.0) - RCT-Folly (2021.07.22.00): @@ -730,7 +722,7 @@ PODS: - React-Core - RNCAsyncStorage (1.17.11): - React-Core - - RNCClipboard (1.5.1): + - RNCClipboard (1.12.1): - React-Core - RNCPicker (2.4.4): - React-Core @@ -781,7 +773,7 @@ PODS: - React - React-Core - Turf - - RNPermissions (3.6.1): + - RNPermissions (3.9.3): - React-Core - RNReactNativeHapticFeedback (1.14.0): - React-Core @@ -817,7 +809,7 @@ PODS: - RNScreens (3.21.0): - React-Core - React-RCTImage - - RNSVG (13.13.0): + - RNSVG (13.14.0): - React-Core - SDWebImage (5.11.1): - SDWebImage/Core (= 5.11.1) @@ -867,10 +859,6 @@ DEPENDENCIES: - lottie-react-native (from `../node_modules/lottie-react-native`) - "onfido-react-native-sdk (from `../node_modules/@onfido/react-native-sdk`)" - OpenSSL-Universal (= 1.1.1100) - - Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera`) - - Permission-LocationAccuracy (from `../node_modules/react-native-permissions/ios/LocationAccuracy`) - - Permission-LocationAlways (from `../node_modules/react-native-permissions/ios/LocationAlways`) - - Permission-LocationWhenInUse (from `../node_modules/react-native-permissions/ios/LocationWhenInUse`) - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) @@ -927,7 +915,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - "RNAppleAuthentication (from `../node_modules/@invertase/react-native-apple-authentication`)" - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" - - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)" + - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)" - "RNCPicker (from `../node_modules/@react-native-picker/picker`)" - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)" - RNDeviceInfo (from `../node_modules/react-native-device-info`) @@ -1018,14 +1006,6 @@ EXTERNAL SOURCES: :path: "../node_modules/lottie-react-native" onfido-react-native-sdk: :path: "../node_modules/@onfido/react-native-sdk" - Permission-Camera: - :path: "../node_modules/react-native-permissions/ios/Camera" - Permission-LocationAccuracy: - :path: "../node_modules/react-native-permissions/ios/LocationAccuracy" - Permission-LocationAlways: - :path: "../node_modules/react-native-permissions/ios/LocationAlways" - Permission-LocationWhenInUse: - :path: "../node_modules/react-native-permissions/ios/LocationWhenInUse" RCT-Folly: :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" RCTRequired: @@ -1135,7 +1115,7 @@ EXTERNAL SOURCES: RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" RNCClipboard: - :path: "../node_modules/@react-native-community/clipboard" + :path: "../node_modules/@react-native-clipboard/clipboard" RNCPicker: :path: "../node_modules/@react-native-picker/picker" RNDateTimePicker: @@ -1217,8 +1197,8 @@ SPEC CHECKSUMS: hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef - lottie-ios: 8f97d3271e155c2d688875c29cd3c74908aef5f8 - lottie-react-native: 8f9d4be452e23f6e5ca0fdc11669dc99ab52be81 + lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd + lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4 MapboxCommon: 4a0251dd470ee37e7fadda8e285c01921a5e1eb0 MapboxCoreMaps: eb07203bbb0b1509395db5ab89cd3ad6c2e3c04c MapboxMaps: af50ec61a7eb3b032c3f7962c6bd671d93d2a209 @@ -1227,10 +1207,6 @@ SPEC CHECKSUMS: Onfido: e36f284b865adcf99d9c905590a64ac09d4a576b onfido-react-native-sdk: 4ecde1a97435dcff9f00a878e3f8d1eb14fabbdc OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c - Permission-Camera: bf6791b17c7f614b6826019fcfdcc286d3a107f6 - Permission-LocationAccuracy: 76df17de5c6b8bc2eee34e61ee92cdd7a864c73d - Permission-LocationAlways: 8d99b025c9f73c696e0cdb367e42525f2e9a26f2 - Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4 Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2 PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 @@ -1287,7 +1263,7 @@ SPEC CHECKSUMS: ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d RNAppleAuthentication: 0571c08da8c327ae2afc0261b48b4a515b0286a6 RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 - RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495 + RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1 RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888 RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140 RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7 @@ -1302,11 +1278,11 @@ SPEC CHECKSUMS: RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0 RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81 rnmapbox-maps: 6f638ec002aa6e906a6f766d69cd45f968d98e64 - RNPermissions: dcdb7b99796bbeda6975a6e79ad519c41b251b1c + RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87 RNScreens: d037903436160a4b039d32606668350d2a808806 - RNSVG: ed492aaf3af9ca01bc945f7a149d76d62e73ec82 + RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 @@ -1315,6 +1291,6 @@ SPEC CHECKSUMS: Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a -PODFILE CHECKSUM: 2daf34c870819a933f3fefe426801d54b2ff2a14 +PODFILE CHECKSUM: ff769666b7221c15936ebc5576a8c8e467dc6879 COCOAPODS: 1.12.1 diff --git a/jest/setup.js b/jest/setup.js index f03c53540359..4def7d1efad5 100644 --- a/jest/setup.js +++ b/jest/setup.js @@ -1,6 +1,7 @@ import 'setimmediate'; import 'react-native-gesture-handler/jestSetup'; import * as reanimatedJestUtils from 'react-native-reanimated/src/reanimated2/jestUtils'; +import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock'; import setupMockImages from './setupMockImages'; setupMockImages(); @@ -10,6 +11,10 @@ reanimatedJestUtils.setUpTests(); // https://reactnavigation.org/docs/testing/#mocking-native-modules jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); +// Clipboard requires mocking as NativeEmitter will be undefined with jest-runner. +// https://github.com/react-native-clipboard/clipboard#mocking-clipboard +jest.mock('@react-native-clipboard/clipboard', () => mockClipboard); + // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest. // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project, // and we only want to mock the storage layer, not the whole Onyx module. diff --git a/package-lock.json b/package-lock.json index 27caa78381d2..13ae50b2d537 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.3.81-1", + "version": "1.3.83-1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.3.81-1", + "version": "1.3.83-1", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -25,7 +25,7 @@ "@onfido/react-native-sdk": "7.4.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -57,7 +57,7 @@ "idb-keyval": "^6.2.1", "jest-when": "^3.5.2", "lodash": "4.17.21", - "lottie-react-native": "^5.1.6", + "lottie-react-native": "^6.3.1", "mapbox-gl": "^2.15.0", "moment": "^2.29.4", "moment-timezone": "^0.5.31", @@ -98,7 +98,7 @@ "react-native-pager-view": "^6.2.0", "react-native-pdf": "^6.7.1", "react-native-performance": "^5.1.0", - "react-native-permissions": "^3.0.1", + "react-native-permissions": "^3.9.3", "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2", "react-native-plaid-link-sdk": "^10.0.0", "react-native-qrcode-svg": "^6.2.0", @@ -118,6 +118,7 @@ "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", @@ -7008,6 +7009,15 @@ "react-native": ">=0.59" } }, + "node_modules/@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "peerDependencies": { + "react": ">=16.0", + "react-native": ">=0.57.0" + } + }, "node_modules/@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -8624,16 +8634,6 @@ "node": ">= 4.0.0" } }, - "node_modules/@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.0", - "react-native": ">=0.57.0" - } - }, "node_modules/@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", @@ -38014,22 +38014,11 @@ "loose-envify": "cli.js" } }, - "node_modules/lottie-ios": { - "version": "3.5.0", - "license": "Apache-2.0", - "peer": true - }, "node_modules/lottie-react-native": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.1.6.tgz", - "integrity": "sha512-vhdeZstXMfuVKwnddYWjJgQ/1whGL58IJEJu/iSf0XQ5gAb4pp/+vy91mdYQLezlb8Aw4Vu3fKnqErJL2hwchg==", - "license": "Apache-2.0", - "dependencies": { - "invariant": "^2.2.2", - "react-native-safe-modules": "^1.0.3" - }, + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-6.3.1.tgz", + "integrity": "sha512-M18nAVYeGMF//bhL27D2zuMcrFPH0jbD/deBvcWi0CCcfZf6LQfx45xt+cuDqwr5nh6dMm+ta8KfZJmkbNhtlg==", "peerDependencies": { - "lottie-ios": "^3.4.0", "react": "*", "react-native": ">=0.46", "react-native-windows": ">=0.63.x" @@ -38040,24 +38029,6 @@ } } }, - "node_modules/lottie-react-native/node_modules/dedent": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz", - "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==", - "license": "MIT" - }, - "node_modules/lottie-react-native/node_modules/react-native-safe-modules": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz", - "integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==", - "license": "MIT", - "dependencies": { - "dedent": "^0.6.0" - }, - "peerDependencies": { - "react-native": "*" - } - }, "node_modules/lottie-web": { "version": "5.10.2", "license": "MIT" @@ -44799,8 +44770,9 @@ } }, "node_modules/react-native-permissions": { - "version": "3.6.1", - "license": "MIT", + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/react-native-permissions/-/react-native-permissions-3.9.3.tgz", + "integrity": "sha512-2UqG2Em4xHxLq0E1XynXMdQ//XZltxVUjTn/i4fPIZuuZ0cQ+ydAQmLXqDPxOXvG0sICwc3oe0orJmQdqpa1sQ==", "peerDependencies": { "react": ">=16.13.1", "react-native": ">=0.63.3", @@ -57970,6 +57942,12 @@ "integrity": "sha512-SMEhc+2hQWubwzxR6Zac0CmrJ2rdoHHBo0ibG2iNMsxR0dnU5AdRGnYF/tyK9i20/i7ZNxn+qsEJ69shpkd6gg==", "requires": {} }, + "@react-native-clipboard/clipboard": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.12.1.tgz", + "integrity": "sha512-+PNk8kflpGte0W1Nz61/Dp8gHTxyuRjkVyRYBawymSIGTDHCC/zOJSbig6kGIkD8MeaGHC2vGYQJyUyCrgVPBQ==", + "requires": {} + }, "@react-native-community/cli": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-11.3.6.tgz", @@ -59190,12 +59168,6 @@ "joi": "^17.2.1" } }, - "@react-native-community/clipboard": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz", - "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==", - "requires": {} - }, "@react-native-community/datetimepicker": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", @@ -80388,33 +80360,11 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, - "lottie-ios": { - "version": "3.5.0", - "peer": true - }, "lottie-react-native": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.1.6.tgz", - "integrity": "sha512-vhdeZstXMfuVKwnddYWjJgQ/1whGL58IJEJu/iSf0XQ5gAb4pp/+vy91mdYQLezlb8Aw4Vu3fKnqErJL2hwchg==", - "requires": { - "invariant": "^2.2.2", - "react-native-safe-modules": "^1.0.3" - }, - "dependencies": { - "dedent": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz", - "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==" - }, - "react-native-safe-modules": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz", - "integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==", - "requires": { - "dedent": "^0.6.0" - } - } - } + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-6.3.1.tgz", + "integrity": "sha512-M18nAVYeGMF//bhL27D2zuMcrFPH0jbD/deBvcWi0CCcfZf6LQfx45xt+cuDqwr5nh6dMm+ta8KfZJmkbNhtlg==", + "requires": {} }, "lottie-web": { "version": "5.10.2" @@ -85342,7 +85292,9 @@ "requires": {} }, "react-native-permissions": { - "version": "3.6.1", + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/react-native-permissions/-/react-native-permissions-3.9.3.tgz", + "integrity": "sha512-2UqG2Em4xHxLq0E1XynXMdQ//XZltxVUjTn/i4fPIZuuZ0cQ+ydAQmLXqDPxOXvG0sICwc3oe0orJmQdqpa1sQ==", "requires": {} }, "react-native-picker-select": { diff --git a/package.json b/package.json index 3ac71e2e6d24..3256b8f65199 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.3.81-1", + "version": "1.3.83-1", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", @@ -68,7 +68,7 @@ "@onfido/react-native-sdk": "7.4.0", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-camera-roll/camera-roll": "5.4.0", - "@react-native-community/clipboard": "^1.5.1", + "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/geolocation": "^3.0.6", "@react-native-community/netinfo": "^9.3.10", @@ -100,7 +100,7 @@ "idb-keyval": "^6.2.1", "jest-when": "^3.5.2", "lodash": "4.17.21", - "lottie-react-native": "^5.1.6", + "lottie-react-native": "^6.3.1", "mapbox-gl": "^2.15.0", "moment": "^2.29.4", "moment-timezone": "^0.5.31", @@ -141,7 +141,7 @@ "react-native-pager-view": "^6.2.0", "react-native-pdf": "^6.7.1", "react-native-performance": "^5.1.0", - "react-native-permissions": "^3.0.1", + "react-native-permissions": "^3.9.3", "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2", "react-native-plaid-link-sdk": "^10.0.0", "react-native-qrcode-svg": "^6.2.0", @@ -161,6 +161,7 @@ "react-pdf": "^6.2.2", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", + "react-webcam": "^7.1.1", "react-window": "^1.8.9", "save": "^2.4.0", "semver": "^7.5.2", diff --git a/src/CONST.ts b/src/CONST.ts index a11faa33323e..58fdea7654cb 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -108,6 +108,7 @@ const CONST = { // Sizes needed for report empty state background image handling EMPTY_STATE_BACKGROUND: { + ASPECT_RATIO: 3.72, SMALL_SCREEN: { IMAGE_HEIGHT: 300, CONTAINER_MINHEIGHT: 200, @@ -140,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', @@ -303,7 +305,7 @@ const CONST = { }, type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE, }, - SHORTCUT_MODAL: { + SHORTCUTS: { descriptionKey: 'openShortcutDialog', shortcutKey: 'J', modifiers: ['CTRL'], @@ -1474,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, @@ -2736,6 +2747,12 @@ const CONST = { }, MISSING_TRANSLATION: 'MISSING TRANSLATION', + SEARCH_MAX_LENGTH: 500, + + /** + * The count of characters we'll allow the user to type after reaching SEARCH_MAX_LENGTH in an input. + */ + ADDITIONAL_ALLOWED_CHARACTERS: 20, } as const; export default CONST; diff --git a/src/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 7b6335ccf984..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,8 @@ 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 SELECTED_TAB: 'selectedTab_', @@ -352,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/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/ConfirmationPage.js b/src/components/ConfirmationPage.js index ffa3c780f154..4549d6ca6072 100644 --- a/src/components/ConfirmationPage.js +++ b/src/components/ConfirmationPage.js @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import Lottie from 'lottie-react-native'; +import Lottie from './Lottie'; import * as LottieAnimations from './LottieAnimations'; import Text from './Text'; import styles from '../styles/styles'; 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/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/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js index ac916117094b..c45f5e2452dd 100644 --- a/src/components/IllustratedHeaderPageLayout.js +++ b/src/components/IllustratedHeaderPageLayout.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Lottie from 'lottie-react-native'; +import Lottie from './Lottie'; import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; 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/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx new file mode 100644 index 000000000000..97c7e8fffdd1 --- /dev/null +++ b/src/components/Lottie/Lottie.tsx @@ -0,0 +1,14 @@ +import React, {forwardRef} from 'react'; +import LottieView, {LottieViewProps} from 'lottie-react-native'; +import styles from '../../styles/styles'; + +const Lottie = forwardRef((props: LottieViewProps, ref) => ( + +)); + +export default Lottie; diff --git a/src/components/Lottie/index.js b/src/components/Lottie/index.js new file mode 100644 index 000000000000..ec4ae54b355d --- /dev/null +++ b/src/components/Lottie/index.js @@ -0,0 +1,3 @@ +import Lottie from './Lottie'; + +export default Lottie; diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index fbd686fac692..6b2b4e16db65 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -80,7 +80,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, report } return isManager && !isDraft && !isApproved && !isSettled; }, [policyType, isManager, isDraft, isApproved, isSettled]); - const shouldShowSubmitButton = isDraft; + const shouldShowSubmitButton = isDraft && reportTotal !== 0; const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton; const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); const formattedAmount = CurrencyUtils.convertToDisplayString(reportTotal, moneyRequestReport.currency); 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/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/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 183ddb20c87b..e72bb7ef4b8e 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -54,6 +54,7 @@ class BaseOptionsSelector extends Component { this.selectRow = this.selectRow.bind(this); this.selectFocusedOption = this.selectFocusedOption.bind(this); this.addToSelection = this.addToSelection.bind(this); + this.updateSearchValue = this.updateSearchValue.bind(this); this.relatedTarget = null; const allOptions = this.flattenSections(); @@ -63,6 +64,7 @@ class BaseOptionsSelector extends Component { allOptions, focusedIndex, shouldDisableRowSelection: false, + errorMessage: '', }; } @@ -70,7 +72,7 @@ class BaseOptionsSelector extends Component { this.subscribeToKeyboardShortcut(); if (this.props.isFocused && this.props.autoFocus && this.textInput) { - setTimeout(() => { + this.focusTimeout = setTimeout(() => { this.textInput.focus(); }, CONST.ANIMATED_TRANSITION); } @@ -167,6 +169,14 @@ class BaseOptionsSelector extends Component { return defaultIndex; } + updateSearchValue(value) { + this.setState({ + errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '', + }); + + this.props.onChangeText(value); + } + subscribeToKeyboardShortcut() { const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; this.unsubscribeEnter = KeyboardShortcut.subscribe( @@ -366,10 +376,11 @@ class BaseOptionsSelector extends Component { label={this.props.textInputLabel} accessibilityLabel={this.props.textInputLabel} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - onChangeText={this.props.onChangeText} + onChangeText={this.updateSearchValue} + errorText={this.state.errorMessage} onSubmitEditing={this.selectFocusedOption} placeholder={this.props.placeholderText} - maxLength={this.props.maxLength} + maxLength={this.props.maxLength + CONST.ADDITIONAL_ALLOWED_CHARACTERS} keyboardType={this.props.keyboardType} onBlur={(e) => { if (!this.props.shouldPreventDefaultFocusOnSelectRow) { @@ -396,7 +407,7 @@ class BaseOptionsSelector extends Component { multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText} onAddToSelection={this.addToSelection} hideSectionHeaders={this.props.hideSectionHeaders} - headerMessage={this.props.headerMessage} + headerMessage={this.state.errorMessage ? '' : this.props.headerMessage} boldStyle={this.props.boldStyle} showTitleTooltip={this.props.showTitleTooltip} isDisabled={this.props.isDisabled} diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js index 2eaa727b0f25..9e028510e608 100644 --- a/src/components/OptionsSelector/optionsSelectorPropTypes.js +++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import optionPropTypes from '../optionPropTypes'; import styles from '../../styles/styles'; +import CONST from '../../CONST'; const propTypes = { /** Callback to fire when a row is tapped */ @@ -157,7 +158,7 @@ const defaultProps = { isDisabled: false, shouldHaveOptionSeparator: false, initiallyFocusedOptionKey: undefined, - maxLength: undefined, + maxLength: CONST.SEARCH_MAX_LENGTH, shouldShowTextInput: true, onChangeText: () => {}, shouldUseStyleForChildren: true, diff --git a/src/components/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/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js index 21aac35f4005..bd3011a74ffb 100644 --- a/src/components/ReimbursementAccountLoadingIndicator.js +++ b/src/components/ReimbursementAccountLoadingIndicator.js @@ -1,7 +1,7 @@ import React from 'react'; import {StyleSheet, View} from 'react-native'; import PropTypes from 'prop-types'; -import Lottie from 'lottie-react-native'; +import Lottie from './Lottie'; import * as LottieAnimations from './LottieAnimations'; import styles from '../styles/styles'; import useLocalize from '../hooks/useLocalize'; diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index b4101d9b5721..c7ca93e87694 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -164,7 +164,8 @@ function MoneyRequestPreview(props) { const isScanning = hasReceipt && TransactionUtils.isReceiptBeingScanned(props.transaction); const hasFieldErrors = TransactionUtils.hasMissingSmartscanFields(props.transaction); const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction); - const isSettled = ReportUtils.isSettled(props.iouReport); + const isExpensifyCardTransaction = TransactionUtils.isExpensifyCardTransaction(props.transaction); + const isSettled = ReportUtils.isSettled(props.iouReport.reportID); // Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan const shouldShowMerchant = @@ -174,6 +175,9 @@ function MoneyRequestPreview(props) { const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')] : []; const getSettledMessage = () => { + 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/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index d89d1e02d7a9..f9001ed51258 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -136,6 +136,8 @@ function ReportPreview(props) { scanningReceipts: numberOfScanningReceipts, }); + const shouldShowSubmitButton = isReportDraft && reportTotal !== 0; + const getDisplayAmount = () => { if (reportTotal) { return CurrencyUtils.convertToDisplayString(reportTotal, props.iouReport.currency); @@ -242,7 +244,7 @@ function ReportPreview(props) { }} /> )} - {isReportDraft && ( + {shouldShowSubmitButton && (