diff --git a/.eslintignore b/.eslintignore index 162cc816ea80..26f01ac8ba58 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,4 +12,8 @@ docs/assets/** web/gtm.js **/.expo/** src/libs/SearchParser/searchParser.js +<<<<<<< HEAD +======= +src/libs/SearchParser/autocompleteParser.js +>>>>>>> main help/_scripts/** diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml index 4031d6c0c119..34a5c356356e 100644 --- a/.github/workflows/cla.yml +++ b/.github/workflows/cla.yml @@ -4,39 +4,9 @@ on: issue_comment: types: [created] pull_request_target: - types: [opened, synchronize] + types: [opened, closed, synchronize] jobs: CLA: - runs-on: ubuntu-latest - # This job only runs for pull request comments or pull request target events (not issue comments) - # It does not run for pull requests created by OSBotify - if: ${{ github.event.issue.pull_request || (github.event_name == 'pull_request_target' && github.event.pull_request.user.login != 'OSBotify' && github.event.pull_request.user.login != 'imgbot[bot]') }} - steps: - - name: CLA comment check - uses: actions-ecosystem/action-regex-match@9c35fe9ac1840239939c59e5db8839422eed8a73 - id: sign - with: - text: ${{ github.event.comment.body }} - regex: '\s*I have read the CLA Document and I hereby sign the CLA\s*' - - name: CLA comment re-check - uses: actions-ecosystem/action-regex-match@9c35fe9ac1840239939c59e5db8839422eed8a73 - id: recheck - with: - text: ${{ github.event.comment.body }} - regex: '\s*recheck\s*' - - name: CLA Assistant - if: ${{ steps.recheck.outputs.match != '' || steps.sign.outputs.match != '' || github.event_name == 'pull_request_target' }} - # Version: 2.1.2-beta - uses: cla-assistant/github-action@948230deb0d44dd38957592f08c6bd934d96d0cf - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_BOTIFY_TOKEN }} - with: - path-to-signatures: '${{ github.repository }}/cla.json' - path-to-document: 'https://github.com/${{ github.repository }}/blob/main/contributingGuides/CLA.md' - branch: 'main' - remote-organization-name: 'Expensify' - remote-repository-name: 'CLA' - lock-pullrequest-aftermerge: false - allowlist: OSBotify,snyk-bot + uses: Expensify/GitHub-Actions/.github/workflows/cla.yml@main + secrets: inherit diff --git a/.github/workflows/deployNewHelp.yml b/.github/workflows/deployNewHelp.yml index 45a4ab7c3620..829623f5952f 100644 --- a/.github/workflows/deployNewHelp.yml +++ b/.github/workflows/deployNewHelp.yml @@ -55,7 +55,11 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v3 with: +<<<<<<< HEAD node-version: '20.15.1' +======= + node-version: '20.18.0' +>>>>>>> main # Wil install the _help/package.js - name: Install Node.js Dependencies diff --git a/.github/workflows/e2ePerformanceTests.yml b/.github/workflows/e2ePerformanceTests.yml index d8e706d467ba..9e3d76c3e636 100644 --- a/.github/workflows/e2ePerformanceTests.yml +++ b/.github/workflows/e2ePerformanceTests.yml @@ -24,17 +24,15 @@ jobs: runs-on: ubuntu-latest name: Find the baseline and delta refs, and check for an existing build artifact for that commit outputs: - BASELINE_ARTIFACT_FOUND: ${{ steps.checkForExistingArtifact.outputs.ARTIFACT_FOUND }} - BASELINE_ARTIFACT_WORKFLOW_ID: ${{ steps.checkForExistingArtifact.outputs.ARTIFACT_WORKFLOW_ID }} - BASELINE_VERSION: ${{ steps.getMostRecentRelease.outputs.VERSION }} + BASELINE_REF: ${{ steps.getBaselineRef.outputs.BASELINE_REF }} DELTA_REF: ${{ steps.getDeltaRef.outputs.DELTA_REF }} IS_PR_MERGED: ${{ steps.getPullRequestDetails.outputs.IS_MERGED }} steps: - uses: actions/checkout@v4 with: - # The OS_BOTIFY_COMMIT_TOKEN is a personal access token tied to osbotify (we need a PAT to access the artifact API) - token: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }} + fetch-depth: 0 # Fetches the entire history +<<<<<<< HEAD - name: Get most recent release version id: getMostRecentRelease run: echo "VERSION=$(gh release list --limit 1 | awk '{ print $1 }')" >> "$GITHUB_OUTPUT" @@ -51,6 +49,15 @@ jobs: - name: Skip build if there's already an existing artifact for the baseline if: ${{ fromJSON(steps.checkForExistingArtifact.outputs.ARTIFACT_FOUND) }} run: echo 'APK for baseline ${{ steps.getMostRecentRelease.outputs.VERSION }} already exists, reusing existing build' +======= + - name: Determine "baseline ref" (prev merge commit) + id: getBaselineRef + run: | + previous_merge=$(git rev-list --merges HEAD~1 | head -n 1) + git checkout "$previous_merge" + echo "$previous_merge" + echo "BASELINE_REF=$previous_merge" >> "$GITHUB_OUTPUT" +>>>>>>> main - name: Get pull request details id: getPullRequestDetails @@ -84,15 +91,14 @@ jobs: fi buildBaseline: - name: Build apk from latest release as a baseline + name: Build apk from baseline uses: ./.github/workflows/buildAndroid.yml needs: prep - if: ${{ !fromJSON(needs.prep.outputs.BASELINE_ARTIFACT_FOUND) }} secrets: inherit with: type: e2e - ref: ${{ needs.prep.outputs.BASELINE_VERSION }} - artifact-prefix: baseline-${{ needs.prep.outputs.BASELINE_VERSION }} + ref: ${{ needs.prep.outputs.BASELINE_REF }} + artifact-prefix: baseline-${{ needs.prep.outputs.BASELINE_REF }} buildDelta: name: Build apk from delta ref @@ -127,9 +133,6 @@ jobs: with: name: ${{ needs.buildBaseline.outputs.APK_ARTIFACT_NAME }} path: zip - # Set github-token only if the baseline was built in this workflow run: - github-token: ${{ needs.prep.outputs.BASELINE_ARTIFACT_WORKFLOW_ID && github.token }} - run-id: ${{ needs.prep.outputs.BASELINE_ARTIFACT_WORKFLOW_ID }} # The downloaded artifact will be a file named "app-e2e-release.apk" so we have to rename it - name: Rename baseline APK diff --git a/.nvmrc b/.nvmrc index b8e593f5210c..2a393af592b8 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.15.1 +20.18.0 diff --git a/.prettierignore b/.prettierignore index 98d06e8c5f71..c4c88bd11d3e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -23,3 +23,4 @@ lib/** # Automatically generated files src/libs/SearchParser/searchParser.js +src/libs/SearchParser/autocompleteParser.js diff --git a/android/app/build.gradle b/android/app/build.gradle index ffb9fa2b4c57..78baa179541b 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -110,8 +110,13 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled +<<<<<<< HEAD versionCode 1009005007 versionName "9.0.50-7" +======= + versionCode 1009005201 + versionName "9.0.52-1" +>>>>>>> main // Supported language variants must be declared here to avoid from being removed during the compilation. // This also helps us to not include unnecessary language variants in the APK. resConfigs "en", "es" diff --git a/assets/images/companyCards/pending-bank.svg b/assets/images/companyCards/pending-bank.svg new file mode 100644 index 000000000000..dc265466d53f --- /dev/null +++ b/assets/images/companyCards/pending-bank.svg @@ -0,0 +1,263 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/gallery-not-found.svg b/assets/images/gallery-not-found.svg new file mode 100644 index 000000000000..25da973ce9cb --- /dev/null +++ b/assets/images/gallery-not-found.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts index 91fc4b1bf528..2d8e27fd453e 100644 --- a/config/webpack/webpack.common.ts +++ b/config/webpack/webpack.common.ts @@ -227,8 +227,6 @@ const getCommonConfiguration = ({file = '.env', platform = 'web'}: Environment): 'react-native-config': 'react-web-config', // eslint-disable-next-line @typescript-eslint/naming-convention 'react-native$': 'react-native-web', - // eslint-disable-next-line @typescript-eslint/naming-convention - 'react-native-sound': 'react-native-web-sound', // Module alias for web & desktop // https://webpack.js.org/configuration/resolve/#resolvealias // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/contributingGuides/CONTRIBUTING.md b/contributingGuides/CONTRIBUTING.md index 82e368214223..be71cd4e115a 100644 --- a/contributingGuides/CONTRIBUTING.md +++ b/contributingGuides/CONTRIBUTING.md @@ -32,9 +32,9 @@ This project and everyone participating in it is governed by the Expensify [Code At this time, we are not hiring contractors in Crimea, North Korea, Russia, Iran, Cuba, or Syria. ## Slack channels -All contributors should be a member of a shared Slack channel called [#expensify-open-source](https://expensify.slack.com/archives/C01GTK53T8Q) -- this channel is used to ask **general questions**, facilitate **discussions**, and make **feature requests**. +We have a shared Slack channel called #expensify-open-source — this channel is used to ask general questions, facilitate discussions, and make feature requests. -Before requesting an invite to Slack, please ensure your Upwork account is active, since we only pay via Upwork (see [below](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#payment-for-contributions)). To request an invite to Slack, email contributors@expensify.com with the subject `Slack Channel Invites`. We'll send you an invite! +That said, we have a small issue with adding users at the moment and we’re working with Slack to try and get this resolved. If you would like to join, [fill out this form](https://forms.gle/Q7hnhUJPnQCK7Fe56) with your email and Upwork profile link. Once resolved, we’ll add you. Note: Do not send direct messages to the Expensify team in Slack or Expensify Chat, they will not be able to respond. diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md index 47b2cf117a06..48d52af6f796 100644 --- a/contributingGuides/OFFLINE_UX.md +++ b/contributingGuides/OFFLINE_UX.md @@ -85,7 +85,7 @@ When the user is offline: - In the event that `successData` and `failureData` are the same, you can use a single object `finallyData` in place of both. **Handling errors:** -- The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31) +- The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.tsx) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31) - The behavior for when something fails is: - If you were adding new data, the failed to add data is displayed greyed out and with the button to dismiss the error - If you were deleting data, the failed data is displayed regularly with the button to dismiss the error diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md index 304811332916..e6660d848129 100644 --- a/contributingGuides/STYLE.md +++ b/contributingGuides/STYLE.md @@ -24,6 +24,7 @@ - [Refs](#refs) - [Other Expensify Resources on TypeScript](#other-expensify-resources-on-typescript) - [Default value for inexistent IDs](#default-value-for-inexistent-IDs) + - [Extract complex types](#extract-complex-types) - [Naming Conventions](#naming-conventions) - [Type names](#type-names) - [Prop callbacks](#prop-callbacks) @@ -492,6 +493,30 @@ const foo = report?.reportID ?? '-1'; report ? report.reportID : '-1'; ``` +### Extract complex types + +Advanced data types, such as objects within function parameters, should be separated into their own type definitions. Callbacks in function parameters should be extracted if there's a possibility they could be reused somewhere else. + +```ts +// BAD +function foo(param1: string, param2: {id: string}) {...}; + +// BAD +function foo(param1: string, param2: (value: string) => void) {...}; + +// GOOD +type Data = { + id: string; +}; + +function foo(param1: string, param2: Data) {...}; + +// GOOD +type Callback = (value: string) => void + +function foo(param1: string, param2: Callback) {...}; +``` + ## Naming Conventions ### Type names diff --git a/docs/articles/expensify-classic/connections/Additional-Travel-Integrations.md b/docs/articles/expensify-classic/connections/Additional-Travel-Integrations.md deleted file mode 100644 index 7dcc8e5e9c29..000000000000 --- a/docs/articles/expensify-classic/connections/Additional-Travel-Integrations.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Importing Receipts from Various Platforms to Expensify -description: Detailed guide on how to import receipts from multiple travel platforms into Expensify. ---- - -# Overview -You can automatically import receipts from many travel platforms into Expensify, to make tracking expenses while traveling for business a breeze. Read on to learn how to import receipts from Bolt Work, Spot Hero, Trainline, Grab, HotelTonight, and Kayak for Business. - -## How to Connect to Bolt Work - -### Set Up Bolt Work Profile -- Open the Bolt app, go to the side navigation menu, and select Payment. -- At the bottom, select Set up work profile and follow the instructions, entering your work email for verification. - -### Link to Expensify -- In the Bolt app, go to Work Rides. -- Select Add expense provider, choose Expensify, and enter the associated email to receive a verification link. -- Ensure you select your work ride profile as the payment method before booking. - -## How to Connect to SpotHero - -### Set up a Business Profile -- Open the SpotHero app, click the hamburger icon, and go to Account Settings. -- Click Set up Business Profile. -- Specify the email connected to Expensify and set up your payment method. -- Upon checkout, choose between Business and Personal Profiles in the "Payment Details" section. -- If you want, you can set a weekly or monthly cadence for consolidated SpotHero expense reports in your Business Profile settings. This will batch all of your SpotHero expenses to import into Expensify at that cadence. - -## How to Connect to Trainline -- To send a ticket receipt to Expensify: - - In the Trainline app, navigate to the My Tickets tab. - - Tap Manage my booking > Expense receipt > Send to Expensify. -- That’s it! - -## How to Connect to Grab -- In the Grab app, tap on your name, go to “Profiles”, and “Add a business profile”. -- Follow instructions and enter your work email for verification. -- In your profile, tap on Business > Expense Solution > Expensify > Save. -- Before booking, select your Business profile and confirm. - -## How to Connect to HotelTonight -- In HotelTonight, go to the Bookings tab and select your booking. -- Select Receipt > Expensify, enter your Expensify email, and send. - -## How to Connect to Kayak for Business - -### Admin Setup -- Admins should go to “Company Settings” and click on “Connect to Expensify”. -- Bookings made by employees will automatically be sent to Expensify. - -### Traveler Setup -- From your account settings, choose whether expenses should be sent to Expensify automatically or manually. -- We recommend sending them automatically, so you can travel without even thinking about your expense reports. - -{% include faq-begin.md %} - -**Q: What if I don’t have the option for Send to Expensify in Trainline?** - -A: This can happen if the native iOS Mail app is not installed on an Apple device. However, you can still use the native iOS share to Expensify function for Trainline receipts. - -**Q: Why should I choose automatic mode in Kayak for Business?** - -A: Automatic mode is less effort as it’s easier to delete an expense in Expensify than to remember to forward a forgotten receipt. - -**Q: Can I receive consolidated reports from SpotHero?** - -A: Yes, you can set a weekly or monthly cadence for SpotHero expenses to be emailed in a consolidated report. - -**Q: Do I need to select a specific profile before booking in Bolt Work and Grab?** - -A: Yes, ensure you have selected your work or business profile as the payment method before booking. - -{% include faq-end.md %} diff --git a/docs/articles/expensify-classic/connections/Travel-receipt-integrations.md b/docs/articles/expensify-classic/connections/Travel-receipt-integrations.md new file mode 100644 index 000000000000..2e5b5065b3d5 --- /dev/null +++ b/docs/articles/expensify-classic/connections/Travel-receipt-integrations.md @@ -0,0 +1,121 @@ +--- +title: Travel Receipt Integrations +description: How to use pre-built or custom integrations to track travel expenses +--- + +Expensify’s receipt integrations allow a merchant to upload receipts directly to a user’s Expensify account. A merchant just has to email a receipt to an Expensify user and Cc receipts@expensify.com. This automatically creates a transaction in the Expensify account for the user whose email address is in the To field. + +You can set up a receipt integration by using one of our existing pre-built integrations, or by building your own receipt integration. + +## Use a pre-built travel integration + +You can use our pre-built integrations to automatically import travel receipts from Bolt Work, Spot Hero, Grab, and Kayak for Business. + +### Bolt Work + +1. In the Bolt app, tap the menu icon in the top left and tap **Work trips**. +2. Tap **Create profile**. +3. Enter the email address that you use for Expensify, then tap **Next**. +4. Enter your company details, then tap **Next**. +5. Choose a payment method. If you don’t want to use the existing payment methods, you can create a new one by tapping **Add Payment Method**. Then tap **Next**. +6. Tap **Done**. +7. Tap Add expense provider, then tap **Expensify**. +8. Tap **Verify**. +9. Tap the menu icon on the top left and tap **Work trips** once more. +10. Tap **Add expense provider** and select **Expensify** again. + +When booking a trip with Bolt Work, select your work trip profile as the payment method before booking. Then the receipt details will be automatically sent to Expensify. + +### SpotHero + +1. In the SpotHero app, tap the menu icon in the top left and tap **Account Settings**. +2. Tap **Set up Business Profile**. +3. Tap **Create Business Profile**. +4. Enter the email address you use for Expensify and tap **Next**. +5. Tap **Add a Payment Method** and enter your payment account details. Then tap **Next**. +6. Tap **Expensify**. + +When reserving parking with SpotHero, select your business profile in the Payment Details section. Then the receipt will be automatically sent to Expensify. In your SpotHero Business Profile settings, you can also set a weekly or monthly cadence for SpotHero to send a batch of expenses to Expensify. + +### Grab + +1. In the Grab app, tap your profile picture in the top left. +2. Tap your user icon again at the top of the settings menu. +3. Tap **Add a business profile**. +4. Tap Next twice, then tap **Let’s Get Started**. +5. Enter the email address you use for Expensify and tap the next arrow in the bottom right. +6. Check your email and copy the verification code you receive from Grab. +7. Tap **Manage My Business Profile**. +8. Under Preferences, tap **Expense Solution**. +9. Tap **Expensify**, then tap **Save**. + +When booking a trip with Grab, tap **personal** and select **business** to ensure your business profile is selected. Then the receipt will be automatically sent to Expensify. + +### KAYAK for Business + +**Admin Setup** + +This process must be completed by a KAYAK for Business admin. + +1. On your KAYAK for Business homepage, click **Company Settings**. +2. Click **Connect to Expensify**. + +KAYAK for Business will now forward bookings made by each employee into Expensify. + +**Traveler Setup** + +1. On your KAYAK for Business homepage, click **Profile Account Settings**. +2. Enable the Expensify toggle to have your expenses automatically sent to Expensify. You also have the option to send them manually. + +## Build your own receipt integration + +1. Email receiptintegration@expensify.com and include: + - **Subject**: Use “Receipt Integration Request" as the subject line + - **Body**: List all email addresses the merchant sends email receipts from +2. Once you receive your email confirmation (within approximately 2 weeks) that the email addresses have been whitelisted, you’ll then be able to Cc receipts@expensify.com on receipt emails to users, and transactions will be created in the users’ Expensify account. +3. Test the integration by sending a receipt email to the email address you used to create your Expensify account and Cc receipts@expensify.com. Wait for the receipt to be SmartScanned. Then you will see the merchant, date, and amount added to the transaction. + +### Using the integration + +When sending an emailed receipt: + +- Attachments on an email (that are not an .ics file) will be SmartScanned. We recommend including the receipt as the only attachment. +- You can only include one email address in the To field. In the Cc field, include only receipts@expensify.com. +- Reservations for hotels and car rentals cannot be sent to Expensify as an expense because they are paid at the end of usage. You can only send transaction data for purchases that have already been made. +- Use standardized three-letter currency codes (ISO 4217) where applicable. + +{% include faq-begin.md %} + +**In Trainline, what if I don’t have the option for Send to Expensify?** + +This can happen if the native iOS Mail app is not installed on an Apple device. However, you can still use the native iOS Share to Expensify function for Trainline receipts. + +**Why does it take 2 weeks to set up a custom integration?** + +Receipt integrations require our engineers to manually set them up on the backend. For that reason, it can take up to 2 weeks to set it up. + +**Is there a way to connect via API?** + +No, at this time there are no API receipt integrations. All receipt integrations are managed via receipt emails. + +**What is your Open API?** + +Our Open API is a self-serve tool meant to pull information out of Expensify. Typically, this tool is used to build integrations with accounting solutions that we don’t directly integrate with. If you wish to push data into Expensify, the only way to integrate is via the receipt integration options listed above in this article. + +**Are you able to split one email into separate receipts?** + +The receipt integration is unable to automatically split one email into separate receipts. However, once the receipt is SmartScanned, users can [split the expense](https://help.expensify.com/articles/expensify-classic/expenses/Split-an-expense) in their Expensify account. + +**Can we set up a (co-marketing) partnership?** + +We currently do not offer any co-marketing partnerships. + +**Can we announce or advertise our custom integration with Expensify?** + +Absolutely! You can promote the integration across your social media channels (tag @expensify and use the #expensify hashtag) and you can even create your own dedicated landing page on your website for your integration. At a minimum, we recommend including a brief overview of how the integration works, the benefits of using it, an integration setup guide, and guidance for how someone can contact you for support or integration setup if necessary. + +**How can I get help?** + +You can contact Concierge for ongoing support any time by clicking the green chat icon in the mobile or web app, or by emailing concierge@expensify.com. Concierge is a global team of highly trained product specialists focused on making our product as easy to use as possible and answering all your questions. + +{% include faq-end.md %} diff --git a/docs/articles/expensify-classic/connections/netsuite/Configure-Netsuite.md b/docs/articles/expensify-classic/connections/netsuite/Configure-Netsuite.md index f926792ffd1f..aecf21acfc3f 100644 --- a/docs/articles/expensify-classic/connections/netsuite/Configure-Netsuite.md +++ b/docs/articles/expensify-classic/connections/netsuite/Configure-Netsuite.md @@ -2,70 +2,62 @@ title: Configure Netsuite description: Configure NetSuite's export, coding, and advanced settings. --- -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. +Correctly configuring NetSuite settings in Expensify ensures seamless integration between your expense management and accounting processes, saving time and reducing manual errors. Aligning your workspace settings with NetSuite’s financial structure can automate data syncs, simplify reporting, and improve overall financial accuracy. + +# Best Practices Using NetSuite +A connection to NetSuite lets you combine the power of Expensify’s expense management features with NetSuite’s accounting capabilities. + +By following the recommended best practices below, your finances will be automatically categorized and accounted for in NetSuite: +- Configure your setup immediately after making the connection, and review each settings tab thoroughly. +- Keep Auto Sync enabled: + - The daily sync will update Expensify with any changes to your chart of accounts, customers/projects, or bank accounts in NetSuite. + - Finalized reports will be exported to NetSuite automatically, saving your admin team time with every report. +- Set your preferred exporter to someone who is both a workspace and domain admin. +- Configure your coding settings and enforce them by [requiring categories and tags on expenses](https://help.expensify.com/articles/new-expensify/workspaces/Require-tags-and-categories-for-expenses). # Step 1: 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. +To access these settings, go to **Settings > Workspace > Group > Connections** and select the **Configure** button. -## Export Options - -### Subsidiary +## 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 +## Preferred Exporter This option allows any admin to export, but the preferred exporter will receive notifications in Expensify regarding the status of exports. -### Date +## 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. +## Export Settings for Reimbursable Expenses -### Journal Entries +**Expense Reports:** Expensify transactions will export reimbursable expenses as expense reports by default, which will be posted to the payables account designated in NetSuite. -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. +**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. -You can also set an approval level in NetSuite for the journal entries. +**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 +## Export Settings for Non-Reimbursable Expenses -### Vendor Bills +**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. -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. -### 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. +**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). @@ -77,11 +69,11 @@ Add the corporate card option and corporate card main field to your expense repo 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 +## 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 +## Default Vendor Bills When selecting the option to export non-reimbursable expenses as vendor bills, the list of vendors will be available in the dropdown menu. @@ -169,7 +161,7 @@ From there, you should see the values for the Custom Segment under the Tag or Re 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 Custom Records are added through the Custom Segments feature. @@ -197,7 +189,7 @@ Lastly, head over to Expensify and do the following: From there, you should see the values for the Custom Records under the Tag or Report Field settings in Expensify. -### Custom Lists +## Custom Lists To add Custom Lists to your workspace, you’ll need to locate two fields in NetSuite: - The name of the record @@ -250,17 +242,11 @@ With this enabled, all submitters can add any newly imported Categories to an Ex ## 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. +**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. +**Set Approval Workflow:** In addition to inviting employees, you can establish an approval process in NetSuite. The Approval Workflow in Expensify will automatically follow the same rules as NetSuite, typically starting with Manager Approval. +The available options are: - **Basic Approval:** This is 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. @@ -275,7 +261,7 @@ Using this feature allows you to send the original amount of the expense rather ## 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. +This allows you to import Customers and Projects across all subsidiaries to a single group workspace. To enable this functionality in NetSuite, you must enable "Intercompany Time and Expense." That feature is found in NetSuite under _Setup > Company > Setup Tasks: Enable Features > Advanced Features_. @@ -303,7 +289,7 @@ If you have Approval Routing selected in your accounting preference, this will o 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 +## Collection Account When exporting invoices, once marked as Paid, the payment is marked against the account selected after enabling the Collection Account setting. @@ -343,7 +329,7 @@ Add the corporate card option and the corporate card main field to configure you 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 +## 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. @@ -359,9 +345,7 @@ 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. +You can locate these in NetSuite by setting up> Accounting > Tax Groups. Name the 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_ @@ -386,7 +370,7 @@ Expensify. If you deactivate this group in NetSuite, it will lead to export erro 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. +- In the Tax Rounding Method field, select "Round Off." Although this setting won't cause connection errors, not using it 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. @@ -408,7 +392,7 @@ 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 +## 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. @@ -421,7 +405,7 @@ When exporting to NetSuite, we match the recipient's email address on the invoic Once exported, the invoice will appear in the Accounts Receivable account you selected during your NetSuite Export configuration. -### Updating the status of an invoice to "paid" +## Updating the status of 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. diff --git a/docs/articles/expensify-classic/connections/netsuite/Connect-To-NetSuite.md b/docs/articles/expensify-classic/connections/netsuite/Connect-To-NetSuite.md index 1f96d9b8a633..6cc69fccccc1 100644 --- a/docs/articles/expensify-classic/connections/netsuite/Connect-To-NetSuite.md +++ b/docs/articles/expensify-classic/connections/netsuite/Connect-To-NetSuite.md @@ -1,12 +1,11 @@ --- title: NetSuite -description: Set up the direct connection from Expensify to NetSuite. +description: Connect NetSuite to Expensify for streamlined expense reporting and accounting integration. order: 1 --- -# Overview -Expensify's integration with NetSuite allows you to automate report exports, 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. +Expensify's direct integration with NetSuite allows you to automate report exports, tailor your coding preferences, and tap into NetSuite's array of advanced features. -**Before connecting NetSuite to Expensify, a few things to note:** +## Before connecting NetSuite to Expensify, review the following details: - 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 @@ -15,9 +14,7 @@ Expensify's integration with NetSuite allows you to automate report exports, tai - 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. You can check this in NetSuite under **Setup > Integration > Web Services Preferences > 'Search Page Size'** -# Connect to NetSuite - -## Step 1: Install the Expensify Bundle in 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) @@ -25,13 +22,13 @@ Expensify's integration with NetSuite allows you to automate report exports, tai 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 +# 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 +# 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 @@ -40,7 +37,7 @@ The user you select must have access to at least the permissions included in the 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 +# Step 4: Create Access Tokens 1. Using Global Search in NetSuite, enter “page: tokens” 2. Click **New Access Token** @@ -49,21 +46,20 @@ Remember that Tokens are linked to a User and a Role, not solely to a User. It's 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. +# 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. +# 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 used to code 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 +# 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 @@ -71,7 +67,7 @@ Once Expense Reports are enabled, Expense Categories can be set up in NetSuite. 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 +# 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** @@ -79,7 +75,7 @@ Once Expense Reports are enabled, Expense Categories can be set up in NetSuite. 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 +# 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 @@ -87,20 +83,20 @@ Once Expense Reports are enabled, Expense Categories can be set up in NetSuite. 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 +# 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) +# 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: +## 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 @@ -115,9 +111,9 @@ Ensure Tax Groups can be applied to expenses by going to _Setup > Accounting > S If this field does not display, it’s not needed for that specific country. -## Step 12: Connect Expensify and NetSuite +# Step 12: Connect Expensify and NetSuite -1. Log into Expensify as a Policy Admin and go to **Settings > Workspaces > _[Workspace Name]_ > Connections > NetSuite** +1. Log into Expensify as a Workspace 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 diff --git a/docs/articles/new-expensify/billing-and-subscriptions/adding-payment-card-subscription-overview.md b/docs/articles/new-expensify/billing-and-subscriptions/Add-a-payment-card-and-view-your-subscription.md similarity index 63% rename from docs/articles/new-expensify/billing-and-subscriptions/adding-payment-card-subscription-overview.md rename to docs/articles/new-expensify/billing-and-subscriptions/Add-a-payment-card-and-view-your-subscription.md index d30fa06bc059..c181536d1174 100644 --- a/docs/articles/new-expensify/billing-and-subscriptions/adding-payment-card-subscription-overview.md +++ b/docs/articles/new-expensify/billing-and-subscriptions/Add-a-payment-card-and-view-your-subscription.md @@ -1,15 +1,18 @@ -Subscription Management +--- +title: Subscription Management +description: How to manage your subscription +--- Under the subscriptions section of your account, you can manage your payment card details, view your current plan, add a billing card, and adjust your subscription size and renewal date. To view or manage your subscription in New Expensify: -**Open the App**: Launch New Expensify on your device. -**Go to Account Settings**: Click your profile icon in the bottom-left corner. -**Find Workspaces**: Navigate to the Workspaces section. -**Open Subscriptions**: Click Subscription under Workspaces to view your subscription. +* **Open the App**: Launch New Expensify on your device. +* **Go to Account Settings**: Click your profile icon in the bottom-left corner. +* **Find Workspaces**: Navigate to the Workspaces section. +* **Open Subscriptions**: Click Subscription under Workspaces to view your subscription. ## Add a Payment Card Look for the option to **Add Payment Card**. Enter your payment card details securely to ensure uninterrupted service. -[PLACEHOLDER for design image- default] +![A screenshot of adding payment card]({{site.url}}/assets/images/ExpensifyHelp-Subscription-Default.png){:width="100%"} ## Subscription Overview This is where you can view your current subscription plan and see details like the number of seats, billing information, and the next renewal date. @@ -19,13 +22,13 @@ This is where you can view your current subscription plan and see details like t - **Auto-increase annual seats**: Here you can see how much you could save by automatically increasing seats to accommodate team members who exceed the current subscription size. **Note**: This will extend your annual subscription end date. -[PLACEHOLDER for design image- your plan] +![A screenshot of subscription details]({{site.url}}/assets/images/ExpensifyHelp-Subscription-Details.png){:width="100%"} ## Early Cancellation Requests If you need to cancel your subscription early, you can find the **Request Early Cancellation** option in the same Subscriptions section. **Note**: Not all customers are eligible to cancel their subscription early. -[PLACEHOLDER for design image- billing] +![A screenshot of cancellation button]({{site.url}}/assets/images/ExpensifyHelp-Subscription-Billing.png){:width="100%"} ## Pricing Information For more details on pricing plans, visit Billing Page [coming soon!] diff --git a/docs/articles/new-expensify/expenses-&-payments/Track-expenses.md b/docs/articles/new-expensify/expenses-&-payments/Track-expenses.md index f6260b9f8f84..77256279b1d7 100644 --- a/docs/articles/new-expensify/expenses-&-payments/Track-expenses.md +++ b/docs/articles/new-expensify/expenses-&-payments/Track-expenses.md @@ -40,4 +40,6 @@ For an in-depth walkthrough on how to create an expense, check out the [create a {% include end-selector.html %} +![The New Expensify page is open with the FAB (big + button) clicked and the option to Track Expenses is highlighted.]({{site.url}}/assets/images/FAB_track_expense.png){:width="100%"} + diff --git a/docs/articles/new-expensify/workspaces/Create-expense-categories.md b/docs/articles/new-expensify/workspaces/Create-expense-categories.md index 56557d449908..a6874ac0a2ef 100644 --- a/docs/articles/new-expensify/workspaces/Create-expense-categories.md +++ b/docs/articles/new-expensify/workspaces/Create-expense-categories.md @@ -110,6 +110,7 @@ GL codes and payroll codes can be exported to a CSV export. They are not display 6. To add or edit a GL code, click the GL code field, make the desired change, then click **Save** 7. To add or edit a payroll code, click the payroll code field, make the desired change, then click **Save** +![In the Workspace > Categories setting, the right-hand panel is open and the GL and Payroll code setting is highlighted.]({{site.url}}/assets/images/workspace_gl_payroll_codes.png){:width="100%"} # Apply categories to expenses automatically diff --git a/docs/articles/new-expensify/workspaces/Require-tags-and-categories-for-expenses.md b/docs/articles/new-expensify/workspaces/Require-tags-and-categories-for-expenses.md index 8f2cf0897ad0..df77ed3b5b01 100644 --- a/docs/articles/new-expensify/workspaces/Require-tags-and-categories-for-expenses.md +++ b/docs/articles/new-expensify/workspaces/Require-tags-and-categories-for-expenses.md @@ -29,6 +29,8 @@ To require workspace members to add tags and/or categories to their expenses, {% include end-option.html %} {% include end-selector.html %} + +![In the Workspace > Categories setting, the right-hand panel is open and the toggle to require categories on expenses is highlighted.]({{site.url}}/assets/images/workspace_category_toggle.png){:width="100%"} This will highlight the tag and/or category field as required on all expenses. diff --git a/docs/assets/images/FAB_track_expense.png b/docs/assets/images/FAB_track_expense.png new file mode 100644 index 000000000000..6ee0cf5abba4 Binary files /dev/null and b/docs/assets/images/FAB_track_expense.png differ diff --git a/docs/assets/images/NetSuite_Configure_06.png b/docs/assets/images/NetSuite_Configure_06.png new file mode 100644 index 000000000000..cddfe2fabcd6 Binary files /dev/null and b/docs/assets/images/NetSuite_Configure_06.png differ diff --git a/docs/assets/images/NetSuite_Configure_08.png b/docs/assets/images/NetSuite_Configure_08.png new file mode 100644 index 000000000000..77690a2c3aa1 Binary files /dev/null and b/docs/assets/images/NetSuite_Configure_08.png differ diff --git a/docs/assets/images/NetSuite_Configure_09.png b/docs/assets/images/NetSuite_Configure_09.png new file mode 100644 index 000000000000..8da56f22838d Binary files /dev/null and b/docs/assets/images/NetSuite_Configure_09.png differ diff --git a/docs/assets/images/NetSuite_Configure_Advanced_10.png b/docs/assets/images/NetSuite_Configure_Advanced_10.png new file mode 100644 index 000000000000..23fe99498052 Binary files /dev/null and b/docs/assets/images/NetSuite_Configure_Advanced_10.png differ diff --git a/docs/assets/images/NetSuite_Connect_Bundle_02.png b/docs/assets/images/NetSuite_Connect_Bundle_02.png new file mode 100644 index 000000000000..c015178873ad Binary files /dev/null and b/docs/assets/images/NetSuite_Connect_Bundle_02.png differ diff --git a/docs/assets/images/NetSuite_Connect_Categories_05.png b/docs/assets/images/NetSuite_Connect_Categories_05.png new file mode 100644 index 000000000000..e71341170129 Binary files /dev/null and b/docs/assets/images/NetSuite_Connect_Categories_05.png differ diff --git a/docs/assets/images/NetSuite_Connect_Customization_01.png b/docs/assets/images/NetSuite_Connect_Customization_01.png new file mode 100644 index 000000000000..8a0c53b45d7f Binary files /dev/null and b/docs/assets/images/NetSuite_Connect_Customization_01.png differ diff --git a/docs/assets/images/NetSuite_Connect_Expense_Reports_03.png b/docs/assets/images/NetSuite_Connect_Expense_Reports_03.png new file mode 100644 index 000000000000..44c8fe6c993d Binary files /dev/null and b/docs/assets/images/NetSuite_Connect_Expense_Reports_03.png differ diff --git a/docs/assets/images/NetSuite_Expense_Categories_04.png b/docs/assets/images/NetSuite_Expense_Categories_04.png new file mode 100644 index 000000000000..d13e9f95cfea Binary files /dev/null and b/docs/assets/images/NetSuite_Expense_Categories_04.png differ diff --git a/docs/assets/images/NetSuite_HelpScreenshot_07.png b/docs/assets/images/NetSuite_HelpScreenshot_07.png new file mode 100644 index 000000000000..55cfe532f890 Binary files /dev/null and b/docs/assets/images/NetSuite_HelpScreenshot_07.png differ diff --git a/docs/assets/images/Workspace_category_toggle.png b/docs/assets/images/Workspace_category_toggle.png new file mode 100644 index 000000000000..c6af6fe183c0 Binary files /dev/null and b/docs/assets/images/Workspace_category_toggle.png differ diff --git a/docs/assets/images/workspace_gl_payroll_codes.png b/docs/assets/images/workspace_gl_payroll_codes.png new file mode 100644 index 000000000000..6b7770dc01b0 Binary files /dev/null and b/docs/assets/images/workspace_gl_payroll_codes.png differ diff --git a/docs/redirects.csv b/docs/redirects.csv index 90baeff59260..c1676dd17a40 100644 --- a/docs/redirects.csv +++ b/docs/redirects.csv @@ -571,6 +571,7 @@ https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-a https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees,https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Get-reimbursed-faster-as-a-non-US-employee https://help.expensify.com/articles/expensify-classic/spending-insights,https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates https://help.expensify.com/articles/expensify-classic/settings/account-settings/Set-notifications,https://help.expensify.com/articles/expensify-classic/settings/account-settings/Set-Notifications +https://help.expensify.com/articles/expensify-classic/connections/Additional-Travel-Integrations,https://help.expensify.com/articles/expensify-classic/connections/Travel-receipt-integrations https://help.expensify.com/articles/new-expensify/getting-started/Upgrade-to-a-Collect-Plan,https://help.expensify.com/Hidden/Upgrade-to-a-Collect-Plan https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Reimburse-Reports-Invoices-and-Bills,https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Reimburse-Reports https://help.expensify.com/articles/new-expensify/expenses-&-payments/pay-an-invoice.html,https://help.expensify.com/articles/new-expensify/expenses-&-payments/Pay-an-invoice @@ -584,6 +585,13 @@ https://community.expensify.com/discussion/6699/faq-troubleshooting-known-bank-s https://community.expensify.com/discussion/4730/faq-expenses-are-exporting-to-the-wrong-accounts-whys-that,https://help.expensify.com/articles/expensify-classic/connect-credit-cards/company-cards/Company-Card-Settings https://community.expensify.com/discussion/9000/how-to-integrate-with-deel,https://help.expensify.com/articles/expensify-classic/connections/Deel https://community.expensify.com/categories/expensify-classroom,https://use.expensify.com +<<<<<<< HEAD https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Send-Receive-for-Invoices,https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Send-and-Receive-Payment-for-Invoices.md https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Bulk-Upload-Multiple-Invoices,https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Add-Invoices-in-Bulk https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-Bills,https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Create-and-Pay-Bills +======= +https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/adding-payment-card-subscription-overview,https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/add-a-payment-card-and-view-your-subscription +https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Send-Receive-for-Invoices,https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Send-and-Receive-Payment-for-Invoices.md +https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Bulk-Upload-Multiple-Invoices,https://help.expensify.com/articles/expensify-classic/articles/expensify-classic/expenses/Add-Invoices-in-Bulk +https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Pay-Bills,https://help.expensify.com/articles/expensify-classic/bank-accounts-and-payments/payments/Create-and-Pay-Bills +>>>>>>> main diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 66cea060038a..04d87957940e 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -19,7 +19,11 @@ CFBundlePackageType APPL CFBundleShortVersionString +<<<<<<< HEAD 9.0.50 +======= + 9.0.52 +>>>>>>> main CFBundleSignature ???? CFBundleURLTypes @@ -40,7 +44,11 @@ CFBundleVersion +<<<<<<< HEAD 9.0.50.7 +======= + 9.0.52.1 +>>>>>>> main FullStory OrgId diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index a7529222ff91..82bd150c9555 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -15,10 +15,18 @@ CFBundlePackageType BNDL CFBundleShortVersionString +<<<<<<< HEAD 9.0.50 CFBundleSignature ???? CFBundleVersion 9.0.50.7 +======= + 9.0.52 + CFBundleSignature + ???? + CFBundleVersion + 9.0.52.1 +>>>>>>> main diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist index 89640c4c8f63..20179955927d 100644 --- a/ios/NotificationServiceExtension/Info.plist +++ b/ios/NotificationServiceExtension/Info.plist @@ -11,9 +11,15 @@ CFBundleName $(PRODUCT_NAME) CFBundleShortVersionString +<<<<<<< HEAD 9.0.50 CFBundleVersion 9.0.50.7 +======= + 9.0.52 + CFBundleVersion + 9.0.52.1 +>>>>>>> main NSExtension NSExtensionPointIdentifier diff --git a/package-lock.json b/package-lock.json index 5127987d8ec2..d0d277b9c5bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,20 @@ { "name": "new.expensify", +<<<<<<< HEAD "version": "9.0.50-7", +======= + "version": "9.0.52-1", +>>>>>>> main "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "new.expensify", +<<<<<<< HEAD "version": "9.0.50-7", +======= + "version": "9.0.52-1", +>>>>>>> main "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -58,6 +66,7 @@ "expo-image-manipulator": "12.0.5", "fast-equals": "^4.0.3", "focus-trap-react": "^10.2.3", + "howler": "^2.2.4", "htmlparser2": "^7.2.0", "idb-keyval": "^6.2.1", "lodash-es": "4.17.21", @@ -116,7 +125,6 @@ "react-native-view-shot": "3.8.0", "react-native-vision-camera": "4.0.0-beta.13", "react-native-web": "^0.19.12", - "react-native-web-sound": "^0.1.3", "react-native-webview": "13.8.6", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", @@ -174,6 +182,7 @@ "@types/base-64": "^1.0.2", "@types/canvas-size": "^1.2.2", "@types/concurrently": "^7.0.0", + "@types/howler": "^2.2.12", "@types/jest": "^29.5.2", "@types/jest-when": "^3.5.2", "@types/js-yaml": "^4.0.5", @@ -217,7 +226,7 @@ "electron-builder": "25.0.0", "eslint": "^8.57.0", "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-expensify": "^2.0.60", + "eslint-config-expensify": "^2.0.66", "eslint-config-prettier": "^9.1.0", "eslint-plugin-deprecation": "^3.0.0", "eslint-plugin-jest": "^28.6.0", @@ -273,8 +282,8 @@ "xlsx": "file:vendor/xlsx-0.20.3.tgz" }, "engines": { - "node": "20.15.1", - "npm": "10.7.0" + "node": "20.18.0", + "npm": "10.8.2" } }, "lib/react-compiler-runtime": { @@ -613,9 +622,10 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.24.7", + "version": "7.25.8", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz", + "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==", "dev": true, - "license": "MIT", "dependencies": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", "eslint-visitor-keys": "^2.1.0", @@ -15781,6 +15791,12 @@ "hoist-non-react-statics": "^3.3.0" } }, + "node_modules/@types/howler": { + "version": "2.2.12", + "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.12.tgz", + "integrity": "sha512-hy769UICzOSdK0Kn1FBk4gN+lswcj1EKRkmiDtMkUGvFfYJzgaDXmVXkSShS2m89ERAatGIPnTUlp2HhfkVo5g==", + "dev": true + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "dev": true, @@ -17975,33 +17991,6 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "29.4.1", "dev": true, @@ -22824,16 +22813,16 @@ } }, "node_modules/eslint-config-expensify": { - "version": "2.0.60", - "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.60.tgz", - "integrity": "sha512-VlulvhEasWeX2g+AXC4P91KA9czzX+aI3VSdJlZwm99GLOdfv7mM0JyO8vbqomjWNUxvLyJeJjmI02t2+fL/5Q==", + "version": "2.0.66", + "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.66.tgz", + "integrity": "sha512-6L9EIAiOxZnqOcFEsIwEUmX0fvglvboyqQh7LTqy+1O2h2W3mmrMSx87ymXeyFMg1nJQtqkFnrLv5ENGS0QC3Q==", "dev": true, "dependencies": { + "@babel/eslint-parser": "^7.25.7", "@lwc/eslint-plugin-lwc": "^1.7.2", "@typescript-eslint/parser": "^7.12.0", "@typescript-eslint/rule-tester": "^7.16.1", "@typescript-eslint/utils": "^7.12.0", - "babel-eslint": "^10.1.0", "eslint": "^8.56.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-base": "15.0.0", @@ -25995,7 +25984,8 @@ }, "node_modules/howler": { "version": "2.2.4", - "license": "MIT" + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz", + "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==" }, "node_modules/hpack.js": { "version": "2.1.6", @@ -35419,8 +35409,8 @@ "underscore": "^1.13.6" }, "engines": { - "node": ">=20.15.1", - "npm": ">=10.7.0" + "node": ">=20.18.0", + "npm": ">=10.8.2" }, "peerDependencies": { "idb-keyval": "^6.2.1", @@ -35747,16 +35737,6 @@ "react-dom": "^18.0.0" } }, - "node_modules/react-native-web-sound": { - "version": "0.1.3", - "license": "MIT", - "dependencies": { - "howler": "^2.2.1" - }, - "peerDependencies": { - "react-native-web": "*" - } - }, "node_modules/react-native-web/node_modules/memoize-one": { "version": "6.0.0", "license": "MIT" diff --git a/package.json b/package.json index 028812ae28d4..69084312ddea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,10 @@ { "name": "new.expensify", +<<<<<<< HEAD "version": "9.0.50-7", +======= + "version": "9.0.52-1", +>>>>>>> main "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.", @@ -61,7 +65,8 @@ "e2e-test-runner-build": "node --max-old-space-size=8192 node_modules/.bin/ncc build tests/e2e/testRunner.ts -o tests/e2e/dist/", "react-compiler-healthcheck": "react-compiler-healthcheck --verbose", "react-compiler-healthcheck-test": "react-compiler-healthcheck --verbose &> react-compiler-output.txt", - "generate-search-parser": "peggy --format es -o src/libs/SearchParser/searchParser.js src/libs/SearchParser/searchParser.peggy ", + "generate-search-parser": "peggy --format es -o src/libs/SearchParser/searchParser.js src/libs/SearchParser/searchParser.peggy src/libs/SearchParser/baseRules.peggy", + "generate-autocomplete-parser": "peggy --format es -o src/libs/SearchParser/autocompleteParser.js src/libs/SearchParser/autocompleteParser.peggy src/libs/SearchParser/baseRules.peggy", "web:prod": "http-server ./dist --cors" }, "dependencies": { @@ -113,6 +118,7 @@ "expo-image-manipulator": "12.0.5", "fast-equals": "^4.0.3", "focus-trap-react": "^10.2.3", + "howler": "^2.2.4", "htmlparser2": "^7.2.0", "idb-keyval": "^6.2.1", "lodash-es": "4.17.21", @@ -171,7 +177,6 @@ "react-native-view-shot": "3.8.0", "react-native-vision-camera": "4.0.0-beta.13", "react-native-web": "^0.19.12", - "react-native-web-sound": "^0.1.3", "react-native-webview": "13.8.6", "react-plaid-link": "3.3.2", "react-web-config": "^1.0.0", @@ -229,6 +234,7 @@ "@types/base-64": "^1.0.2", "@types/canvas-size": "^1.2.2", "@types/concurrently": "^7.0.0", + "@types/howler": "^2.2.12", "@types/jest": "^29.5.2", "@types/jest-when": "^3.5.2", "@types/js-yaml": "^4.0.5", @@ -272,7 +278,7 @@ "electron-builder": "25.0.0", "eslint": "^8.57.0", "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-expensify": "^2.0.60", + "eslint-config-expensify": "^2.0.66", "eslint-config-prettier": "^9.1.0", "eslint-plugin-deprecation": "^3.0.0", "eslint-plugin-jest": "^28.6.0", @@ -374,7 +380,7 @@ ] }, "engines": { - "node": "20.15.1", - "npm": "10.7.0" + "node": "20.18.0", + "npm": "10.8.2" } } diff --git a/src/CONST.ts b/src/CONST.ts index 9e3723e04c61..904f82af35db 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -471,6 +471,19 @@ const CONST = { PERSONAL: 'PERSONAL', }, }, + NON_USD_BANK_ACCOUNT: { + STEP: { + COUNTRY: 'CountryStep', + BANK_INFO: 'BankInfoStep', + BUSINESS_INFO: 'BusinessInfoStep', + BENEFICIAL_OWNER_INFO: 'BeneficialOwnerInfoStep', + SIGNER_INFO: 'SignerInfoStep', + AGREEMENTS: 'AgreementsStep', + FINISH: 'FinishStep', + }, + STEP_NAMES: ['1', '2', '3', '4', '5', '6'], + STEP_HEADER_HEIGHT: 40, + }, INCORPORATION_TYPES: { LLC: 'LLC', CORPORATION: 'Corp', @@ -1505,6 +1518,10 @@ const CONST = { CLASSES: 'classes', CUSTOMERS: 'customers', }, +<<<<<<< HEAD +======= + IMPORT_ITEMS: 'importItems', +>>>>>>> main }, QUICKBOOKS_CONFIG: { @@ -2386,6 +2403,7 @@ const CONST = { SYNC_STAGE_NAME: { STARTING_IMPORT_QBO: 'startingImportQBO', STARTING_IMPORT_XERO: 'startingImportXero', + STARTING_IMPORT_QBD: 'startingImportQBD', QBO_IMPORT_MAIN: 'quickbooksOnlineImportMain', QBO_IMPORT_CUSTOMERS: 'quickbooksOnlineImportCustomers', QBO_IMPORT_EMPLOYEES: 'quickbooksOnlineImportEmployees', @@ -2402,6 +2420,17 @@ const CONST = { QBO_SYNC_APPLY_CUSTOMERS: 'quickbooksOnlineSyncApplyCustomers', QBO_SYNC_APPLY_PEOPLE: 'quickbooksOnlineSyncApplyEmployees', QBO_SYNC_APPLY_CLASSES_LOCATIONS: 'quickbooksOnlineSyncApplyClassesLocations', + QBD_IMPORT_TITLE: 'quickbooksDesktopImportTitle', + QBD_IMPORT_ACCOUNTS: 'quickbooksDesktopImportAccounts', + QBD_IMPORT_APPROVE_CERTIFICATE: 'quickbooksDesktopImportApproveCertificate', + QBD_IMPORT_DIMENSIONS: 'quickbooksDesktopImportDimensions', + QBD_IMPORT_CLASSES: 'quickbooksDesktopImportClasses', + QBD_IMPORT_CUSTOMERS: 'quickbooksDesktopImportCustomers', + QBD_IMPORT_VENDORS: 'quickbooksDesktopImportVendors', + QBD_IMPORT_EMPLOYEES: 'quickbooksDesktopImportEmployees', + QBD_IMPORT_MORE: 'quickbooksDesktopImportMore', + QBD_IMPORT_GENERIC: 'quickbooksDesktopImportSavePolicy', + QBD_WEB_CONNECTOR_REMINDER: 'quickbooksDesktopWebConnectorReminder', JOB_DONE: 'jobDone', XERO_SYNC_STEP: 'xeroSyncStep', XERO_SYNC_XERO_REIMBURSED_REPORTS: 'xeroSyncXeroReimbursedReports', @@ -2516,6 +2545,16 @@ const CONST = { VISA: 'vcf', AMEX: 'gl1025', STRIPE: 'stripe', +<<<<<<< HEAD +======= + CITIBANK: 'oauth.citibank.com', + CAPITAL_ONE: 'oauth.capitalone.com', + BANK_OF_AMERICA: 'oauth.bankofamerica.com', + CHASE: 'oauth.chase.com', + BREX: 'oauth.brex.com', + WELLS_FARGO: 'oauth.wellsfargo.com', + AMEX_DIRECT: 'oauth.americanexpressfdx.com', +>>>>>>> main }, STEP_NAMES: ['1', '2', '3', '4'], STEP: { @@ -2603,6 +2642,17 @@ const CONST = { WELLS_FARGO: 'Wells Fargo', OTHER: 'Other', }, +<<<<<<< HEAD +======= + BANK_CONNECTIONS: { + WELLS_FARGO: 'wellsfargo', + CHASE: 'chase', + BREX: 'brex', + CAPITAL_ONE: 'capitalone', + CITI_BANK: 'citibank', + AMEX: 'americanexpressfdx', + }, +>>>>>>> main AMEX_CUSTOM_FEED: { CORPORATE: 'American Express Corporate Cards', BUSINESS: 'American Express Business Cards', @@ -5691,6 +5741,7 @@ const CONST = { KEYWORD: 'keyword', IN: 'in', }, + EMPTY_VALUE: 'none', }, REFERRER: { @@ -5775,6 +5826,14 @@ const CONST = { description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}.description` as const, icon: 'IntacctSquare', }, + [this.POLICY.CONNECTIONS.NAME.QBD]: { + id: this.POLICY.CONNECTIONS.NAME.QBD, + alias: 'qbd', + name: this.POLICY.CONNECTIONS.NAME_USER_FRIENDLY.quickbooksDesktop, + title: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.QBD}.title` as const, + description: `workspace.upgrade.${this.POLICY.CONNECTIONS.NAME.QBD}.description` as const, + icon: 'QBDSquare', + }, approvals: { id: 'approvals' as const, alias: 'approvals' as const, @@ -5884,6 +5943,21 @@ const CONST = { // The timeout duration (1 minute) (in milliseconds) before the window reloads due to an error. ERROR_WINDOW_RELOAD_TIMEOUT: 60000, + INDICATOR_STATUS: { + HAS_USER_WALLET_ERRORS: 'hasUserWalletErrors', + HAS_PAYMENT_METHOD_ERROR: 'hasPaymentMethodError', + HAS_POLICY_ERRORS: 'hasPolicyError', + HAS_CUSTOM_UNITS_ERROR: 'hasCustomUnitsError', + HAS_EMPLOYEE_LIST_ERROR: 'hasEmployeeListError', + HAS_SYNC_ERRORS: 'hasSyncError', + HAS_SUBSCRIPTION_ERRORS: 'hasSubscriptionError', + HAS_REIMBURSEMENT_ACCOUNT_ERRORS: 'hasReimbursementAccountErrors', + HAS_LOGIN_LIST_ERROR: 'hasLoginListError', + HAS_WALLET_TERMS_ERRORS: 'hasWalletTermsErrors', + HAS_LOGIN_LIST_INFO: 'hasLoginListInfo', + HAS_SUBSCRIPTION_INFO: 'hasSubscriptionInfo', + }, + DEBUG: { DETAILS: 'details', JSON: 'json', @@ -5911,6 +5985,15 @@ const CONST = { HAS_CHILD_REPORT_AWAITING_ACTION: 'hasChildReportAwaitingAction', HAS_MISSING_INVOICE_BANK_ACCOUNT: 'hasMissingInvoiceBankAccount', }, +<<<<<<< HEAD +======= + + RBR_REASONS: { + HAS_ERRORS: 'hasErrors', + HAS_VIOLATIONS: 'hasViolations', + HAS_TRANSACTION_THREAD_VIOLATIONS: 'hasTransactionThreadViolations', + }, +>>>>>>> main } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; diff --git a/src/Expensify.tsx b/src/Expensify.tsx index f6d33c719fdf..00799c34e962 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -87,15 +87,15 @@ function Expensify() { const [account] = useOnyx(ONYXKEYS.ACCOUNT); const [session] = useOnyx(ONYXKEYS.SESSION); const [lastRoute] = useOnyx(ONYXKEYS.LAST_ROUTE); - const [useNewDotSignInPage] = useOnyx(ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE); const [userMetadata] = useOnyx(ONYXKEYS.USER_METADATA); + const [useNewDotSignInPage] = useOnyx(ONYXKEYS.USE_NEWDOT_SIGN_IN_PAGE); const [shouldShowRequire2FAModal, setShouldShowRequire2FAModal] = useState(false); - const [isCheckingPublicRoom] = useOnyx(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM); - const [updateAvailable] = useOnyx(ONYXKEYS.UPDATE_AVAILABLE); - const [updateRequired] = useOnyx(ONYXKEYS.UPDATE_REQUIRED); + const [isCheckingPublicRoom] = useOnyx(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, {initWithStoredValues: false}); + const [updateAvailable] = useOnyx(ONYXKEYS.UPDATE_AVAILABLE, {initWithStoredValues: false}); + const [updateRequired] = useOnyx(ONYXKEYS.UPDATE_REQUIRED, {initWithStoredValues: false}); const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED); const [screenShareRequest] = useOnyx(ONYXKEYS.SCREEN_SHARE_REQUEST); - const [focusModeNotification] = useOnyx(ONYXKEYS.FOCUS_MODE_NOTIFICATION); + const [focusModeNotification] = useOnyx(ONYXKEYS.FOCUS_MODE_NOTIFICATION, {initWithStoredValues: false}); const [lastVisitedPath] = useOnyx(ONYXKEYS.LAST_VISITED_PATH); useEffect(() => { diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 78f3dcff16b6..3858e4d98389 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -444,9 +444,6 @@ const ONYXKEYS = { /** Stores the information if HybridApp uses NewDot's sign in flow */ USE_NEWDOT_SIGN_IN_PAGE: 'useNewDotSignInPage', - /** States whether we transitioned from OldDot to show only certain group of screens. It should be undefined on pure NewDot. */ - IS_SINGLE_NEW_DOT_ENTRY: 'isSingleNewDotEntry', - /** Company cards custom names */ NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES: 'nvp_expensify_ccCustomNames', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 85efed35b6d9..cf15013fed9b 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -21,6 +21,7 @@ const PUBLIC_SCREENS_ROUTES = { ROOT: '', TRANSITION_BETWEEN_APPS: 'transition', CONNECTION_COMPLETE: 'connection-complete', + BANK_CONNECTION_COMPLETE: 'bank-connection-complete', VALIDATE_LOGIN: 'v/:accountID/:validateCode', UNLINK_LOGIN: 'u/:accountID/:validateCode', APPLE_SIGN_IN: 'sign-in-with-apple', @@ -149,10 +150,6 @@ const ROUTES = { route: 'settings/security/delegate/:login/role/:role/confirm', getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const, }, - SETTINGS_DELEGATE_MAGIC_CODE: { - route: 'settings/security/delegate/:login/role/:role/magic-code', - getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/magic-code` as const, - }, SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', SETTINGS_WALLET: 'settings/wallet', @@ -231,7 +228,6 @@ const ROUTES = { route: 'settings/profile/contact-methods/:contactMethod/details', getRoute: (contactMethod: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`, backTo), }, - SETINGS_CONTACT_METHOD_VALIDATE_ACTION: 'settings/profile/contact-methods/validate-action', SETTINGS_NEW_CONTACT_METHOD: { route: 'settings/profile/contact-methods/new', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo), @@ -749,6 +745,10 @@ const ROUTES = { route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import/customers/displayed_as', getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import/customers/displayed_as` as const, }, + POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_ITEMS: { + route: 'settings/workspaces/:policyID/accounting/quickbooks-desktop/import/items', + getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-desktop/import/items` as const, + }, WORKSPACE_PROFILE_NAME: { route: 'settings/workspaces/:policyID/profile/name', getRoute: (policyID: string) => `settings/workspaces/${policyID}/profile/name` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 624fe1aaa0c2..171bda378345 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -74,7 +74,6 @@ const SCREENS = { DISPLAY_NAME: 'Settings_Display_Name', CONTACT_METHODS: 'Settings_ContactMethods', CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails', - CONTACT_METHOD_VALIDATE_ACTION: 'Settings_ValidateContactMethodAction', NEW_CONTACT_METHOD: 'Settings_NewContactMethod', STATUS_CLEAR_AFTER: 'Settings_Status_Clear_After', STATUS_CLEAR_AFTER_DATE: 'Settings_Status_Clear_After_Date', @@ -134,7 +133,10 @@ const SCREENS = { ADD_DELEGATE: 'Settings_Delegate_Add', DELEGATE_ROLE: 'Settings_Delegate_Role', DELEGATE_CONFIRM: 'Settings_Delegate_Confirm', +<<<<<<< HEAD DELEGATE_MAGIC_CODE: 'Settings_Delegate_Magic_Code', +======= +>>>>>>> main UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role', UPDATE_DELEGATE_ROLE_MAGIC_CODE: 'Settings_Delegate_Update_Magic_Code', }, @@ -336,6 +338,10 @@ const SCREENS = { QUICKBOOKS_DESKTOP_CLASSES_DISPLAYED_AS: 'Policy_Accounting_Quickbooks_Desktop_Import_Classes_Dipslayed_As', QUICKBOOKS_DESKTOP_CUSTOMERS: 'Policy_Accounting_Quickbooks_Desktop_Import_Customers', QUICKBOOKS_DESKTOP_CUSTOMERS_DISPLAYED_AS: 'Policy_Accounting_Quickbooks_Desktop_Import_Customers_Dipslayed_As', +<<<<<<< HEAD +======= + QUICKBOOKS_DESKTOP_ITEMS: 'Policy_Accounting_Quickbooks_Desktop_Import_Items', +>>>>>>> main XERO_IMPORT: 'Policy_Accounting_Xero_Import', XERO_ORGANIZATION: 'Policy_Accounting_Xero_Customers', XERO_CHART_OF_ACCOUNTS: 'Policy_Accounting_Xero_Import_Chart_Of_Accounts', diff --git a/src/components/AttachmentOfflineIndicator.tsx b/src/components/AttachmentOfflineIndicator.tsx index d425e6f18e0e..4ff1940ba004 100644 --- a/src/components/AttachmentOfflineIndicator.tsx +++ b/src/components/AttachmentOfflineIndicator.tsx @@ -37,7 +37,7 @@ function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndica return ( { const categories = policyCategories ?? policyCategoriesDraft ?? {}; const validPolicyRecentlyUsedCategories = policyRecentlyUsedCategories?.filter?.((p) => !isEmptyObject(p)); - const {categoryOptions} = OptionsListUtils.getFilteredOptions( - [], - [], - [], - debouncedSearchValue, + const {categoryOptions} = OptionsListUtils.getFilteredOptions({ + searchValue: debouncedSearchValue, selectedOptions, - [], - false, - false, - true, + includeP2P: false, + includeCategories: true, categories, - validPolicyRecentlyUsedCategories, - false, - ); + recentlyUsedCategories: validPolicyRecentlyUsedCategories, + }); const categoryData = categoryOptions?.at(0)?.data ?? []; const header = OptionsListUtils.getHeaderMessageForNonUserList(categoryData.length > 0, debouncedSearchValue); diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index e63b8bb91874..fd2013c6bde7 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -137,6 +137,7 @@ function ConfirmModal({ restoreFocusType, }: ConfirmModalProps) { // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); diff --git a/src/components/ConnectToQuickbooksDesktopFlow/index.tsx b/src/components/ConnectToQuickbooksDesktopFlow/index.tsx index bf1315b452c6..0c7954dcd803 100644 --- a/src/components/ConnectToQuickbooksDesktopFlow/index.tsx +++ b/src/components/ConnectToQuickbooksDesktopFlow/index.tsx @@ -1,19 +1,29 @@ import {useEffect} from 'react'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import Navigation from '@libs/Navigation/Navigation'; +<<<<<<< HEAD import * as PolicyAction from '@userActions/Policy/Policy'; +======= +>>>>>>> main import ROUTES from '@src/ROUTES'; import type {ConnectToQuickbooksDesktopFlowProps} from './types'; function ConnectToQuickbooksDesktopFlow({policyID}: ConnectToQuickbooksDesktopFlowProps) { +<<<<<<< HEAD +======= + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth +>>>>>>> main const {isSmallScreenWidth} = useResponsiveLayout(); useEffect(() => { if (isSmallScreenWidth) { Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_REQUIRED_DEVICE_MODAL.getRoute(policyID)); } else { +<<<<<<< HEAD // Since QBD doesn't support Taxes, we should disable them from the LHN when connecting to QBD PolicyAction.enablePolicyTaxes(policyID, false); +======= +>>>>>>> main Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_MODAL.getRoute(policyID)); } }, [isSmallScreenWidth, policyID]); diff --git a/src/components/ConnectToXeroFlow/index.native.tsx b/src/components/ConnectToXeroFlow/index.native.tsx index ab9fa3054261..fbf7bf01ab5c 100644 --- a/src/components/ConnectToXeroFlow/index.native.tsx +++ b/src/components/ConnectToXeroFlow/index.native.tsx @@ -40,14 +40,14 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) { return ( <> - {isRequire2FAModalOpen && ( + {!is2FAEnabled && ( { setIsRequire2FAModalOpen(false); Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID))); }} onCancel={() => setIsRequire2FAModalOpen(false)} - isVisible + isVisible={isRequire2FAModalOpen} description={translate('twoFactorAuth.twoFactorAuthIsRequiredDescription')} /> )} diff --git a/src/components/ConnectToXeroFlow/index.tsx b/src/components/ConnectToXeroFlow/index.tsx index 5d0e88e1512b..ad41ba8082b1 100644 --- a/src/components/ConnectToXeroFlow/index.tsx +++ b/src/components/ConnectToXeroFlow/index.tsx @@ -29,7 +29,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - if (isRequire2FAModalOpen) { + if (!is2FAEnabled) { return ( { @@ -39,7 +39,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) { onCancel={() => { setIsRequire2FAModalOpen(false); }} - isVisible + isVisible={isRequire2FAModalOpen} description={translate('twoFactorAuth.twoFactorAuthIsRequiredDescription')} /> ); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx index 2d52d26f9af6..5c2867ccb70e 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx @@ -1,4 +1,8 @@ +<<<<<<< HEAD import React, {memo} from 'react'; +======= +import React, {memo, useState} from 'react'; +>>>>>>> main import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import type {CustomRendererProps, TBlock} from 'react-native-render-html'; @@ -8,6 +12,7 @@ import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; import ThumbnailImage from '@components/ThumbnailImage'; import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -63,7 +68,10 @@ function ImageRenderer({tnode}: ImageRendererProps) { const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true'; const fileType = FileUtils.getFileType(attachmentSourceAttribute); - const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.Gallery; + const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound; + const [hasLoadFailed, setHasLoadFailed] = useState(true); + const theme = useTheme(); + const thumbnailImageComponent = ( setHasLoadFailed(true)} + onMeasure={() => setHasLoadFailed(false)} + fallbackIconBackground={theme.highlightBG} + fallbackIconColor={theme.border} /> ); @@ -102,6 +114,7 @@ function ImageRenderer({tnode}: ImageRendererProps) { shouldUseHapticsOnLongPress accessibilityRole={CONST.ROLE.BUTTON} accessibilityLabel={translate('accessibilityHints.viewAttachment')} + disabled={hasLoadFailed} > {thumbnailImageComponent} diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index e1843ee506d5..9a4a57f8a8b6 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -263,7 +263,7 @@ function HeaderWithBackButton({ )} - {shouldDisplaySearchRouter && } + {shouldDisplaySearchRouter && } diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index cd9c97105ff0..a583bc99a976 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -93,6 +93,7 @@ import FlagLevelTwo from '@assets/images/flag_level_02.svg'; import FlagLevelThree from '@assets/images/flag_level_03.svg'; import Folder from '@assets/images/folder.svg'; import Fullscreen from '@assets/images/fullscreen.svg'; +import GalleryNotFound from '@assets/images/gallery-not-found.svg'; import Gallery from '@assets/images/gallery.svg'; import Gear from '@assets/images/gear.svg'; import Globe from '@assets/images/globe.svg'; @@ -404,4 +405,8 @@ export { Bookmark, Star, QBDSquare, +<<<<<<< HEAD +======= + GalleryNotFound, +>>>>>>> main }; diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index bae8f6af1ab2..18ae1792686f 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -12,6 +12,7 @@ import WellsFargoCompanyCardDetail from '@assets/images/companyCards/card-wellsf import OtherCompanyCardDetail from '@assets/images/companyCards/card=-generic.svg'; import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg'; import MasterCardCompanyCards from '@assets/images/companyCards/mastercard.svg'; +import PendingBank from '@assets/images/companyCards/pending-bank.svg'; import CompanyCardsPendingState from '@assets/images/companyCards/pendingstate_laptop-with-hourglass-and-cards.svg'; import VisaCompanyCards from '@assets/images/companyCards/visa.svg'; import EmptyCardState from '@assets/images/emptystate__expensifycard.svg'; @@ -207,6 +208,7 @@ export { Approval, WalletAlt, Workflows, + PendingBank, ThreeLeggedLaptopWoman, House, Alert, diff --git a/src/components/ImportOnyxState/BaseImportOnyxState.tsx b/src/components/ImportOnyxState/BaseImportOnyxState.tsx index 216a6ddf76e4..c6c80d03b58f 100644 --- a/src/components/ImportOnyxState/BaseImportOnyxState.tsx +++ b/src/components/ImportOnyxState/BaseImportOnyxState.tsx @@ -19,6 +19,9 @@ function BaseImportOnyxState({ }) { const {translate} = useLocalize(); const styles = useThemeStyles(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); return ( diff --git a/src/components/ImportSpreadsheet.tsx b/src/components/ImportSpreadsheet.tsx index b68c773bc12d..64f9a4445a0c 100644 --- a/src/components/ImportSpreadsheet.tsx +++ b/src/components/ImportSpreadsheet.tsx @@ -42,6 +42,8 @@ function ImportSpreedsheet({backTo, goTo}: ImportSpreedsheetProps) { const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(); const [attachmentInvalidReason, setAttachmentValidReason] = useState(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use different copies depending on the screen size + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [isDraggingOver, setIsDraggingOver] = useState(false); diff --git a/src/components/Indicator.tsx b/src/components/Indicator.tsx index 4d352b6a6cde..105399936b43 100644 --- a/src/components/Indicator.tsx +++ b/src/components/Indicator.tsx @@ -1,109 +1,17 @@ import React from 'react'; import {StyleSheet, View} from 'react-native'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; -import useTheme from '@hooks/useTheme'; +import useIndicatorStatus from '@hooks/useIndicatorStatus'; import useThemeStyles from '@hooks/useThemeStyles'; -import {isConnectionInProgress} from '@libs/actions/connections'; -import * as PolicyUtils from '@libs/PolicyUtils'; -import * as SubscriptionUtils from '@libs/SubscriptionUtils'; -import * as UserUtils from '@libs/UserUtils'; -import * as PaymentMethods from '@userActions/PaymentMethods'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {BankAccountList, FundList, LoginList, Policy, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx'; -type CheckingMethod = () => boolean; - -type IndicatorOnyxProps = { - /** All the user's policies (from Onyx via withFullPolicy) */ - policies: OnyxCollection; - - /** List of bank accounts */ - bankAccountList: OnyxEntry; - - /** List of user cards */ - fundList: OnyxEntry; - - /** The user's wallet (coming from Onyx) */ - userWallet: OnyxEntry; - - /** Bank account attached to free plan */ - reimbursementAccount: OnyxEntry; - - /** Information about the user accepting the terms for payments */ - walletTerms: OnyxEntry; - - /** Login list for the user that is signed in */ - loginList: OnyxEntry; -}; - -type IndicatorProps = IndicatorOnyxProps; - -function Indicator({reimbursementAccount, policies, bankAccountList, fundList, userWallet, walletTerms, loginList}: IndicatorOnyxProps) { - const theme = useTheme(); +function Indicator() { const styles = useThemeStyles(); - const [allConnectionSyncProgresses] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}`); - - // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and - // those should be cleaned out before doing any error checking - const cleanPolicies = Object.fromEntries(Object.entries(policies ?? {}).filter(([, policy]) => policy?.id)); - - // All of the error & info-checking methods are put into an array. This is so that using _.some() will return - // early as soon as the first error / info condition is returned. This makes the checks very efficient since - // we only care if a single error / info condition exists anywhere. - const errorCheckingMethods: CheckingMethod[] = [ - () => Object.keys(userWallet?.errors ?? {}).length > 0, - () => PaymentMethods.hasPaymentMethodError(bankAccountList, fundList), - () => Object.values(cleanPolicies).some(PolicyUtils.hasPolicyError), - () => Object.values(cleanPolicies).some(PolicyUtils.hasCustomUnitsError), - () => Object.values(cleanPolicies).some(PolicyUtils.hasEmployeeListError), - () => - Object.values(cleanPolicies).some((cleanPolicy) => - PolicyUtils.hasSyncError( - cleanPolicy, - isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${cleanPolicy?.id}`], cleanPolicy), - ), - ), - () => SubscriptionUtils.hasSubscriptionRedDotError(), - () => Object.keys(reimbursementAccount?.errors ?? {}).length > 0, - () => !!loginList && UserUtils.hasLoginListError(loginList), - - // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead) - () => Object.keys(walletTerms?.errors ?? {}).length > 0 && !walletTerms?.chatReportID, - ]; - const infoCheckingMethods: CheckingMethod[] = [() => !!loginList && UserUtils.hasLoginListInfo(loginList), () => SubscriptionUtils.hasSubscriptionGreenDotInfo()]; - const shouldShowErrorIndicator = errorCheckingMethods.some((errorCheckingMethod) => errorCheckingMethod()); - const shouldShowInfoIndicator = !shouldShowErrorIndicator && infoCheckingMethods.some((infoCheckingMethod) => infoCheckingMethod()); + const {indicatorColor, status} = useIndicatorStatus(); - const indicatorColor = shouldShowErrorIndicator ? theme.danger : theme.success; const indicatorStyles = [styles.alignItemsCenter, styles.justifyContentCenter, styles.statusIndicator(indicatorColor)]; - return (shouldShowErrorIndicator || shouldShowInfoIndicator) && ; + return !!status && ; } Indicator.displayName = 'Indicator'; -export default withOnyx({ - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, - bankAccountList: { - key: ONYXKEYS.BANK_ACCOUNT_LIST, - }, - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - reimbursementAccount: { - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - }, - fundList: { - key: ONYXKEYS.FUND_LIST, - }, - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, - walletTerms: { - key: ONYXKEYS.WALLET_TERMS, - }, - loginList: { - key: ONYXKEYS.LOGIN_LIST, - }, -})(Indicator); +export default Indicator; diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index fd681546c470..7d1e6614c716 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -1,8 +1,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import {Dimensions} from 'react-native'; import type {EmitterSubscription, GestureResponderEvent, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu'; import * as BankAccounts from '@libs/actions/BankAccounts'; import getClickedTargetLocation from '@libs/getClickedTargetLocation'; @@ -16,7 +15,6 @@ import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import viewRef from '@src/types/utils/viewRef'; import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types'; @@ -24,25 +22,6 @@ import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types // This sets the Horizontal anchor position offset for POPOVER MENU. const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20; -type BaseKYCWallOnyxProps = { - /** The user's wallet */ - userWallet: OnyxEntry; - - /** Information related to the last step of the wallet activation flow */ - walletTerms: OnyxEntry; - - /** List of user's cards */ - fundList: OnyxEntry; - - /** List of bank accounts */ - bankAccountList: OnyxEntry; - - /** The reimbursement account linked to the Workspace */ - reimbursementAccount: OnyxEntry; -}; - -type BaseKYCWallProps = KYCWallProps & BaseKYCWallOnyxProps; - // This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow // before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it // to render the AddPaymentMethodMenu in the correct location. @@ -53,22 +32,23 @@ function KYCWall({ horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }, - bankAccountList = {}, chatReportID = '', children, enablePaymentsRoute, - fundList, iouReport, onSelectPaymentMethod = () => {}, onSuccessfulKYC, - reimbursementAccount, shouldIncludeDebitCard = true, shouldListenForResize = false, source, - userWallet, - walletTerms, shouldShowPersonalBankAccountOption = false, -}: BaseKYCWallProps) { +}: KYCWallProps) { + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS); + const [fundList] = useOnyx(ONYXKEYS.FUND_LIST); + const [bankAccountList = {}] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const anchorRef = useRef(null); const transferBalanceButtonRef = useRef(null); @@ -270,21 +250,4 @@ function KYCWall({ KYCWall.displayName = 'BaseKYCWall'; -export default withOnyx({ - userWallet: { - key: ONYXKEYS.USER_WALLET, - }, - walletTerms: { - key: ONYXKEYS.WALLET_TERMS, - }, - fundList: { - key: ONYXKEYS.FUND_LIST, - }, - bankAccountList: { - key: ONYXKEYS.BANK_ACCOUNT_LIST, - }, - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - reimbursementAccount: { - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - }, -})(KYCWall); +export default KYCWall; diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index f51fe7e37acd..85a2298f63d6 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -61,6 +61,7 @@ function BaseModal( const StyleUtils = useStyleUtils(); const {windowWidth, windowHeight} = useWindowDimensions(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const keyboardStateContextValue = useKeyboardState(); diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index caa50abfca46..ce8c0745cbb3 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -7,6 +7,7 @@ import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import {getCurrentUserAccountID} from '@libs/actions/Report'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; @@ -61,6 +62,8 @@ type MoneyReportHeaderProps = { }; function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, onBackButtonPress}: MoneyReportHeaderProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID ?? '-1'}`); @@ -135,9 +138,22 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport); +<<<<<<< HEAD const shouldShowSubmitButton = !!moneyRequestReport && isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations && !shouldShowBrokenConnectionViolation; +======= + const currentUserAccountID = getCurrentUserAccountID(); +>>>>>>> main const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; + + const shouldShowSubmitButton = + !!moneyRequestReport && + isDraft && + reimbursableSpend !== 0 && + !hasAllPendingRTERViolations && + !shouldShowBrokenConnectionViolation && + (moneyRequestReport?.ownerAccountID === currentUserAccountID || isAdmin || moneyRequestReport?.managerID === currentUserAccountID); + const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(moneyRequestReport); const shouldShowSettlementButton = diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index b79d22f5c8cf..cccdec3fb443 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -2,7 +2,11 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {InteractionManager, View} from 'react-native'; +<<<<<<< HEAD import {withOnyx} from 'react-native-onyx'; +======= +import {useOnyx} from 'react-native-onyx'; +>>>>>>> main import type {OnyxEntry} from 'react-native-onyx'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useDebouncedState from '@hooks/useDebouncedState'; @@ -14,14 +18,13 @@ import useThemeStyles from '@hooks/useThemeStyles'; import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; -import type {MileageRate} from '@libs/DistanceRequestUtils'; import * as IOUUtils from '@libs/IOUUtils'; import Log from '@libs/Log'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; -import {getCustomUnitRate, isTaxTrackingEnabled} from '@libs/PolicyUtils'; +import {getDistanceRateCustomUnitRate, isTaxTrackingEnabled} from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import playSound, {SOUNDS} from '@libs/Sound'; import * as TransactionUtils from '@libs/TransactionUtils'; @@ -49,6 +52,7 @@ import UserListItem from './SelectionList/UserListItem'; import SettlementButton from './SettlementButton'; import Text from './Text'; +<<<<<<< HEAD type MoneyRequestConfirmationListOnyxProps = { /** Collection of categories attached to a policy */ policyCategories: OnyxEntry; @@ -76,6 +80,9 @@ type MoneyRequestConfirmationListOnyxProps = { }; type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps & { +======= +type MoneyRequestConfirmationListProps = { +>>>>>>> main /** Callback to inform parent modal of success */ onConfirm?: (selectedParticipants: Participant[]) => void; @@ -175,16 +182,16 @@ function MoneyRequestConfirmationList({ onConfirm, iouType = CONST.IOU.TYPE.SUBMIT, iouAmount, +<<<<<<< HEAD policyCategories: policyCategoriesReal, policyCategoriesDraft, +======= +>>>>>>> main isDistanceRequest = false, - policy: policyReal, - policyDraft, isPolicyExpenseChat = false, iouCategory = '', shouldShowSmartScanFields = true, isEditingSplitBill, - policyTags, iouCurrencyCode, iouMerchant, selectedParticipants: selectedParticipantsProp, @@ -201,14 +208,21 @@ function MoneyRequestConfirmationList({ onToggleBillable, hasSmartScanFailed, reportActionID, - defaultMileageRate, - lastSelectedDistanceRates, action = CONST.IOU.ACTION.CREATE, - currencyList, shouldDisplayReceipt = false, shouldPlaySound = true, isConfirmed, }: MoneyRequestConfirmationListProps) { + const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); + const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); + const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`); + const [defaultMileageRate] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, { + selector: (selectedPolicy) => DistanceRequestUtils.getDefaultMileageRate(selectedPolicy), + }); + const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); + const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES); + const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST); const policy = policyReal ?? policyDraft; const policyCategories = policyCategoriesReal ?? policyCategoriesDraft; @@ -383,7 +397,7 @@ function MoneyRequestConfirmationList({ let taxableAmount: number; let taxCode: string; if (isDistanceRequest) { - const customUnitRate = getCustomUnitRate(policy, customUnitRateID); + const customUnitRate = getDistanceRateCustomUnitRate(policy, customUnitRateID); taxCode = customUnitRate?.attributes?.taxRateExternalID ?? ''; taxableAmount = DistanceRequestUtils.getTaxableAmount(policy, customUnitRateID, distance); } else { @@ -740,6 +754,7 @@ function MoneyRequestConfirmationList({ } if (selectedParticipants.length === 0) { + setFormError('iou.error.noParticipantSelected'); return; } if (!isEditingSplitBill && isMerchantRequired && (isMerchantEmpty || (shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction)))) { @@ -826,12 +841,10 @@ function MoneyRequestConfirmationList({ } const shouldShowSettlementButton = iouType === CONST.IOU.TYPE.PAY; - const shouldDisableButton = selectedParticipants.length === 0; const button = shouldShowSettlementButton ? ( confirm(value as PaymentMethodType)} options={splitOrRequestOptions} buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE} @@ -880,7 +892,6 @@ function MoneyRequestConfirmationList({ isReadOnly, isTypeSplit, iouType, - selectedParticipants.length, confirm, bankAccountRoute, iouCurrencyCode, @@ -951,6 +962,7 @@ function MoneyRequestConfirmationList({ shouldSingleExecuteRowSelect canSelectMultiple={false} shouldPreventDefaultFocusOnSelectRow + shouldShowListEmptyContent={false} footerContent={footerContent} listFooterContent={listFooterContent} containerStyle={[styles.flexBasisAuto]} @@ -963,6 +975,7 @@ function MoneyRequestConfirmationList({ MoneyRequestConfirmationList.displayName = 'MoneyRequestConfirmationList'; +<<<<<<< HEAD export default withOnyx({ policyCategories: { key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, @@ -1025,4 +1038,37 @@ export default withOnyx + lodashIsEqual(prevProps.transaction, nextProps.transaction) && + prevProps.onSendMoney === nextProps.onSendMoney && + prevProps.onConfirm === nextProps.onConfirm && + prevProps.iouType === nextProps.iouType && + prevProps.iouAmount === nextProps.iouAmount && + prevProps.isDistanceRequest === nextProps.isDistanceRequest && + prevProps.isPolicyExpenseChat === nextProps.isPolicyExpenseChat && + prevProps.iouCategory === nextProps.iouCategory && + prevProps.shouldShowSmartScanFields === nextProps.shouldShowSmartScanFields && + prevProps.isEditingSplitBill === nextProps.isEditingSplitBill && + prevProps.iouCurrencyCode === nextProps.iouCurrencyCode && + prevProps.iouMerchant === nextProps.iouMerchant && + lodashIsEqual(prevProps.selectedParticipants, nextProps.selectedParticipants) && + lodashIsEqual(prevProps.payeePersonalDetails, nextProps.payeePersonalDetails) && + prevProps.isReadOnly === nextProps.isReadOnly && + prevProps.bankAccountRoute === nextProps.bankAccountRoute && + prevProps.policyID === nextProps.policyID && + prevProps.reportID === nextProps.reportID && + prevProps.receiptPath === nextProps.receiptPath && + prevProps.iouComment === nextProps.iouComment && + prevProps.receiptFilename === nextProps.receiptFilename && + prevProps.iouCreated === nextProps.iouCreated && + prevProps.iouIsBillable === nextProps.iouIsBillable && + prevProps.onToggleBillable === nextProps.onToggleBillable && + prevProps.hasSmartScanFailed === nextProps.hasSmartScanFailed && + prevProps.reportActionID === nextProps.reportActionID && + lodashIsEqual(prevProps.action, nextProps.action) && + prevProps.shouldDisplayReceipt === nextProps.shouldDisplayReceipt, +>>>>>>> main ); diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index a046ee6a62f3..377062d432ad 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -45,6 +45,8 @@ type MoneyRequestHeaderProps = { }; function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPress}: MoneyRequestHeaderProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? '-1'}`); const [transaction] = useOnyx( diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index 332b42e06119..67ecac27afbd 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -31,6 +31,7 @@ function Popover(props: PopoverProps) { } = props; // We need to use isSmallScreenWidth to apply the correct modal type and popoverAnchorPosition + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const withoutOverlayRef = useRef(null); const {close, popover} = React.useContext(PopoverContext); diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index b1aa2fc28338..7c8c99d6305d 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -161,6 +161,7 @@ function PopoverMenu({ const styles = useThemeStyles(); const theme = useTheme(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [currentMenuItems, setCurrentMenuItems] = useState(menuItems); const currentMenuItemsFocusedIndex = currentMenuItems?.findIndex((option) => option.isSelected); diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx similarity index 97% rename from src/components/Pressable/GenericPressable/BaseGenericPressable.tsx rename to src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx index 5237ff486631..84a595a7bf05 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/implementation/BaseGenericPressable.tsx @@ -3,6 +3,8 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'reac import type {GestureResponderEvent, View} from 'react-native'; // eslint-disable-next-line no-restricted-imports import {Pressable} from 'react-native'; +import type {PressableRef} from '@components/Pressable/GenericPressable/types'; +import type PressableProps from '@components/Pressable/GenericPressable/types'; import useSingleExecution from '@hooks/useSingleExecution'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -10,8 +12,6 @@ import Accessibility from '@libs/Accessibility'; import HapticFeedback from '@libs/HapticFeedback'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import CONST from '@src/CONST'; -import type {PressableRef} from './types'; -import type PressableProps from './types'; function GenericPressable( { diff --git a/src/components/Pressable/GenericPressable/index.native.tsx b/src/components/Pressable/GenericPressable/implementation/index.native.tsx similarity index 78% rename from src/components/Pressable/GenericPressable/index.native.tsx rename to src/components/Pressable/GenericPressable/implementation/index.native.tsx index c17163677cbe..5ce313d21ea6 100644 --- a/src/components/Pressable/GenericPressable/index.native.tsx +++ b/src/components/Pressable/GenericPressable/implementation/index.native.tsx @@ -1,7 +1,7 @@ import React, {forwardRef} from 'react'; +import type {PressableRef} from '@components/Pressable/GenericPressable/types'; +import type PressableProps from '@components/Pressable/GenericPressable/types'; import GenericPressable from './BaseGenericPressable'; -import type {PressableRef} from './types'; -import type PressableProps from './types'; function NativeGenericPressable(props: PressableProps, ref: PressableRef) { return ( diff --git a/src/components/Pressable/GenericPressable/implementation/index.tsx b/src/components/Pressable/GenericPressable/implementation/index.tsx new file mode 100644 index 000000000000..b52eea83fdcb --- /dev/null +++ b/src/components/Pressable/GenericPressable/implementation/index.tsx @@ -0,0 +1,33 @@ +import React, {forwardRef} from 'react'; +import type {Role} from 'react-native'; +import type {PressableRef} from '@components/Pressable/GenericPressable/types'; +import type PressableProps from '@components/Pressable/GenericPressable/types'; +import GenericPressable from './BaseGenericPressable'; + +function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) { + const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible; + + return ( + + ); +} + +WebGenericPressable.displayName = 'WebGenericPressable'; + +export default forwardRef(WebGenericPressable); diff --git a/src/components/Pressable/GenericPressable/index.e2e.tsx b/src/components/Pressable/GenericPressable/index.e2e.tsx new file mode 100644 index 000000000000..5d997977a7e0 --- /dev/null +++ b/src/components/Pressable/GenericPressable/index.e2e.tsx @@ -0,0 +1,34 @@ +import React, {forwardRef, useEffect} from 'react'; +import GenericPressable from './implementation'; +import type {PressableRef} from './types'; +import type PressableProps from './types'; + +const pressableRegistry = new Map(); + +function getPressableProps(nativeID: string): PressableProps | undefined { + return pressableRegistry.get(nativeID); +} + +function E2EGenericPressableWrapper(props: PressableProps, ref: PressableRef) { + useEffect(() => { + const nativeId = props.nativeID; + if (!nativeId) { + return; + } + console.debug(`[E2E] E2EGenericPressableWrapper: Registering pressable with nativeID: ${nativeId}`); + pressableRegistry.set(nativeId, props); + }, [props]); + + return ( + + ); +} + +E2EGenericPressableWrapper.displayName = 'E2EGenericPressableWrapper'; + +export default forwardRef(E2EGenericPressableWrapper); +export {getPressableProps}; diff --git a/src/components/Pressable/GenericPressable/index.tsx b/src/components/Pressable/GenericPressable/index.tsx index 371b4d169714..c3d3a2b2c856 100644 --- a/src/components/Pressable/GenericPressable/index.tsx +++ b/src/components/Pressable/GenericPressable/index.tsx @@ -1,33 +1,3 @@ -import React, {forwardRef} from 'react'; -import type {Role} from 'react-native'; -import GenericPressable from './BaseGenericPressable'; -import type {PressableRef} from './types'; -import type PressableProps from './types'; +import GenericPressable from './implementation'; -function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) { - const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible; - - return ( - - ); -} - -WebGenericPressable.displayName = 'WebGenericPressable'; - -export default forwardRef(WebGenericPressable); +export default GenericPressable; diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index d140e71bceae..3d6ad9006dc5 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -60,7 +60,8 @@ function ProcessMoneyReportHoldMenu({ }: ProcessMoneyReportHoldMenuProps) { const {translate} = useLocalize(); const isApprove = requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE; - // We need to use shouldUseNarrowLayout instead of shouldUseNarrowLayout to apply the correct modal type + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const onSubmit = (full: boolean) => { diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 411f6be7252c..1f0c46283e8b 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -21,6 +21,7 @@ import useNetwork from '@hooks/useNetwork'; import usePolicy from '@hooks/usePolicy'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import {getCurrentUserAccountID} from '@libs/actions/Report'; import ControlSelection from '@libs/ControlSelection'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -173,7 +174,19 @@ function ReportPreview({ formattedMerchant = null; } +<<<<<<< HEAD const shouldShowSubmitButton = isOpenExpenseReport && reimbursableSpend !== 0 && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation; +======= + const currentUserAccountID = getCurrentUserAccountID(); + const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; + const shouldShowSubmitButton = + isOpenExpenseReport && + reimbursableSpend !== 0 && + !showRTERViolationMessage && + !shouldShowBrokenConnectionViolation && + (iouReport?.ownerAccountID === currentUserAccountID || isAdmin || iouReport?.managerID === currentUserAccountID); + +>>>>>>> main const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(iouReport); // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on @@ -406,7 +419,6 @@ function ReportPreview({ */ const connectedIntegration = PolicyUtils.getConnectedIntegration(policy); - const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport); useEffect(() => { diff --git a/src/components/RequireTwoFactorAuthenticationModal.tsx b/src/components/RequireTwoFactorAuthenticationModal.tsx index 229231e8ff25..ad4f2db28c1c 100644 --- a/src/components/RequireTwoFactorAuthenticationModal.tsx +++ b/src/components/RequireTwoFactorAuthenticationModal.tsx @@ -47,6 +47,7 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description, type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={{...styles.pb5, ...styles.pt3, ...styles.boxShadowNone}} shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} + animationOutTiming={500} > { diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx index 558b89715b61..d76f2e76ab02 100644 --- a/src/components/Search/SearchMultipleSelectionPicker.tsx +++ b/src/components/Search/SearchMultipleSelectionPicker.tsx @@ -7,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import localeCompare from '@libs/LocaleCompare'; import Navigation from '@libs/Navigation/Navigation'; import type {OptionData} from '@libs/ReportUtils'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; type SearchMultipleSelectionPickerItem = { @@ -28,6 +29,17 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const [selectedItems, setSelectedItems] = useState(initiallySelectedItems ?? []); + const sortOptionsWithEmptyValue = (a: SearchMultipleSelectionPickerItem, b: SearchMultipleSelectionPickerItem) => { + // Always show `No category` and `No tag` as the first option + if (a.value === CONST.SEARCH.EMPTY_VALUE) { + return -1; + } + if (b.value === CONST.SEARCH.EMPTY_VALUE) { + return 1; + } + return localeCompare(a.name, b.name); + }; + useEffect(() => { setSelectedItems(initiallySelectedItems ?? []); }, [initiallySelectedItems]); @@ -35,7 +47,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit const {sections, noResultsFound} = useMemo(() => { const selectedItemsSection = selectedItems .filter((item) => item?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())) - .sort((a, b) => localeCompare(a.name, b.name)) + .sort((a, b) => sortOptionsWithEmptyValue(a, b)) .map((item) => ({ text: item.name, keyForList: item.name, @@ -44,7 +56,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit })); const remainingItemsSection = items .filter((item) => selectedItems.some((selectedItem) => selectedItem.value === item.value) === false && item?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())) - .sort((a, b) => localeCompare(a.name, b.name)) + .sort((a, b) => sortOptionsWithEmptyValue(a, b)) .map((item) => ({ text: item.name, keyForList: item.name, diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 4c383021645f..0168916d0213 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -67,7 +67,7 @@ function HeaderWrapper({icon, children, text, value, isCannedQuery, onSubmit, se /> )}
{text}} /> - {children} + {children} ) : ( @@ -121,6 +121,8 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {activeWorkspaceID} = useActiveWorkspace(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext(); const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); diff --git a/src/components/Search/SearchRouter/SearchButton.tsx b/src/components/Search/SearchRouter/SearchButton.tsx index 7ed22ec8162f..64d585a3fa53 100644 --- a/src/components/Search/SearchRouter/SearchButton.tsx +++ b/src/components/Search/SearchRouter/SearchButton.tsx @@ -3,6 +3,7 @@ import type {StyleProp, ViewStyle} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; +import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -23,6 +24,7 @@ function SearchButton({style}: SearchButtonProps) { const {openSearchRouter} = useSearchRouterContext(); return ( +<<<<<<< HEAD +======= + + { + Timing.start(CONST.TIMING.SEARCH_ROUTER_RENDER); + Performance.markStart(CONST.TIMING.SEARCH_ROUTER_RENDER); + + openSearchRouter(); + })} + > + + + +>>>>>>> main ); } diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index c7ec22c5c4c2..8fe64a8a4438 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -41,7 +41,11 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); +<<<<<<< HEAD const {isSmallScreenWidth} = useResponsiveLayout(); +======= + const {shouldUseNarrowLayout} = useResponsiveLayout(); +>>>>>>> main const listRef = useRef(null); const taxRates = getAllTaxRates(); @@ -117,7 +121,11 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { } Timing.start(CONST.TIMING.SEARCH_FILTER_OPTIONS); +<<<<<<< HEAD const newOptions = findInSearchTree(debouncedInputValue); +======= + const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedInputValue, {sortByReportTypeInSearch: true, preferChatroomsOverThreads: true}); +>>>>>>> main Timing.end(CONST.TIMING.SEARCH_FILTER_OPTIONS); const recentReports = newOptions.recentReports.concat(newOptions.personalDetails); @@ -138,10 +146,13 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { }, [debouncedInputValue, findInSearchTree]); const recentReports: OptionData[] = useMemo(() => { - const currentSearchOptions = debouncedInputValue === '' ? searchOptions : filteredOptions; - const reports: OptionData[] = [...currentSearchOptions.recentReports, ...currentSearchOptions.personalDetails]; - if (currentSearchOptions.userToInvite) { - reports.push(currentSearchOptions.userToInvite); + if (debouncedInputValue === '') { + return searchOptions.recentReports.slice(0, 10); + } + + const reports: OptionData[] = [...filteredOptions.recentReports, ...filteredOptions.personalDetails]; + if (filteredOptions.userToInvite) { + reports.push(filteredOptions.userToInvite); } return reports.slice(0, 10); }, [debouncedInputValue, filteredOptions, searchOptions]); @@ -212,6 +223,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { closeAndClearRouter(); }); +<<<<<<< HEAD const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.searchRouterPopoverWidth}; return ( @@ -220,6 +232,16 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { testID={SearchRouter.displayName} > {isSmallScreenWidth && ( +======= + const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; + + return ( + + {shouldUseNarrowLayout && ( +>>>>>>> main onRouterClose()} @@ -228,7 +250,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { { onSearchSubmit(SearchUtils.buildSearchQueryJSON(textInputValue)); @@ -236,7 +258,11 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { routerListRef={listRef} shouldShowOfflineMessage wrapperStyle={[styles.border, styles.alignItemsCenter]} +<<<<<<< HEAD outerWrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2]} +======= + outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]} +>>>>>>> main wrapperFocusedStyle={[styles.borderColorFocus]} isSearchingForReports={isSearchingForReports} /> diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx index d8a373183077..9cdeed464ff9 100644 --- a/src/components/Search/SearchRouter/SearchRouterList.tsx +++ b/src/components/Search/SearchRouter/SearchRouterList.tsx @@ -32,7 +32,7 @@ type SearchRouterListProps = { currentQuery: SearchQueryJSON | undefined; /** Recent searches */ - recentSearches: ItemWithQuery[] | undefined; + recentSearches: Array | undefined; /** Recent reports */ recentReports: OptionData[]; @@ -92,7 +92,7 @@ function SearchRouterList( ) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const personalDetails = usePersonalDetails(); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); @@ -129,13 +129,13 @@ function SearchRouterList( }); } - const recentSearchesData = recentSearches?.map(({query}) => { + const recentSearchesData = recentSearches?.map(({query, timestamp}) => { const searchQueryJSON = SearchUtils.buildSearchQueryJSON(query); return { text: searchQueryJSON ? SearchUtils.getSearchHeaderTitle(searchQueryJSON, personalDetails, cardList, reports, taxRates) : query, singleIcon: Expensicons.History, query, - keyForList: query, + keyForList: timestamp, }; }); @@ -179,11 +179,19 @@ function SearchRouterList( onSelectRow={onSelectRow} ListItem={SearchRouterItem} containerStyle={[styles.mh100]} +<<<<<<< HEAD sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]} listItemWrapperStyle={[styles.pr3, styles.pl3]} onLayout={setPerformanceTimersEnd} ref={ref} showScrollIndicator={!isSmallScreenWidth} +======= + sectionListStyle={[shouldUseNarrowLayout ? styles.ph5 : styles.ph2, styles.pb2]} + listItemWrapperStyle={[styles.pr3, styles.pl3]} + onLayout={setPerformanceTimersEnd} + ref={ref} + showScrollIndicator={!shouldUseNarrowLayout} +>>>>>>> main sectionTitleStyles={styles.mhn2} shouldSingleExecuteRowSelect /> diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 62cdb38246b4..2626b8565e2a 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -8,10 +8,10 @@ import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; function SearchRouterModal() { - const {isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); - const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER; + const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER; return ( >(); const lastSearchResultsRef = useRef>(); diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 06bf8eb6434a..8536f02f71e1 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -105,6 +105,7 @@ function BaseSelectionList( shouldIgnoreFocus = false, scrollEventThrottle, contentContainerStyle, + shouldHighlightSelectedItem = false, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -476,6 +477,10 @@ function BaseSelectionList( setFocusedIndex(normalizedIndex); }} shouldSyncFocus={!isTextInputFocusedRef.current} +<<<<<<< HEAD +======= + shouldHighlightSelectedItem={shouldHighlightSelectedItem} +>>>>>>> main wrapperStyle={listItemWrapperStyle} /> {item.footerContent && item.footerContent} @@ -718,7 +723,7 @@ function BaseSelectionList( )} {!!headerContent && headerContent} - {flattenedSections.allOptions.length === 0 ? ( + {flattenedSections.allOptions.length === 0 && (showLoadingPlaceholder || shouldShowListEmptyContent) ? ( renderListEmptyContent() ) : ( <> diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx index 3e0ea0b3ef15..daeb513e3fa9 100644 --- a/src/components/SelectionList/InviteMemberListItem.tsx +++ b/src/components/SelectionList/InviteMemberListItem.tsx @@ -36,6 +36,7 @@ function InviteMemberListItem({ rightHandSideComponent, onFocus, shouldSyncFocus, + shouldHighlightSelectedItem, }: InviteMemberListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -58,6 +59,7 @@ function InviteMemberListItem({ return ( = CommonListItemProps & { /** Whether to show RBR */ shouldDisplayRBR?: boolean; + + /** Whether we highlight all the selected items */ + shouldHighlightSelectedItem?: boolean; }; type BaseListItemProps = CommonListItemProps & { @@ -584,6 +587,9 @@ type BaseSelectionListProps = Partial & { /** Additional styles to apply to scrollable content */ contentContainerStyle?: StyleProp; + + /** Whether we highlight all the selected items */ + shouldHighlightSelectedItem?: boolean; } & TRightHandSideComponent; type SelectionListHandle = { diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 46d6494d1d21..25123d5454d4 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -28,6 +28,7 @@ function SelectionListWithModal( const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component // See https://github.com/Expensify/App/issues/48675 for more details + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const isFocused = useIsFocused(); diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx index 1bf753cd4aa4..df109763b647 100644 --- a/src/components/TabSelector/TabSelector.tsx +++ b/src/components/TabSelector/TabSelector.tsx @@ -1,6 +1,5 @@ import type {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs/lib/typescript/src/types'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import type {Animated} from 'react-native'; +import React, {useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import FocusTrapContainerElement from '@components/FocusTrap/FocusTrapContainerElement'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -10,6 +9,8 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; +import getBackgroundColor from './getBackground'; +import getOpacity from './getOpacity'; import TabSelectorItem from './TabSelectorItem'; type TabSelectorProps = MaterialTopTabBarProps & { @@ -50,21 +51,6 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate } } -function getOpacity(position: Animated.AnimatedInterpolation, routesLength: number, tabIndex: number, active: boolean, affectedTabs: number[]) { - const activeValue = active ? 1 : 0; - const inactiveValue = active ? 0 : 1; - - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - return position.interpolate({ - inputRange, - outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? activeValue : inactiveValue)), - }); - } - return activeValue; -} - function TabSelector({state, navigation, onTabPress = () => {}, position, onFocusTrapContainerElementChanged}: TabSelectorProps) { const {translate} = useLocalize(); const theme = useTheme(); @@ -72,21 +58,6 @@ function TabSelector({state, navigation, onTabPress = () => {}, position, onFocu const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]); const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs); - const getBackgroundColor = useCallback( - (routesLength: number, tabIndex: number, affectedTabs: number[]) => { - if (routesLength > 1) { - const inputRange = Array.from({length: routesLength}, (v, i) => i); - - return position.interpolate({ - inputRange, - outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG)), - }) as unknown as Animated.AnimatedInterpolation; - } - return theme.border; - }, - [theme, position], - ); - useEffect(() => { // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition. setTimeout(() => { @@ -98,10 +69,10 @@ function TabSelector({state, navigation, onTabPress = () => {}, position, onFocu {state.routes.map((route, index) => { - const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs); - const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs); - const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs); const isActive = index === state.index; + const activeOpacity = getOpacity({routesLength: state.routes.length, tabIndex: index, active: true, affectedTabs: affectedAnimatedTabs, position, isActive}); + const inactiveOpacity = getOpacity({routesLength: state.routes.length, tabIndex: index, active: false, affectedTabs: affectedAnimatedTabs, position, isActive}); + const backgroundColor = getBackgroundColor({routesLength: state.routes.length, tabIndex: index, affectedTabs: affectedAnimatedTabs, theme, position, isActive}); const {icon, title} = getIconAndTitle(route.name, translate); const onPress = () => { diff --git a/src/components/TabSelector/getBackground/index.native.ts b/src/components/TabSelector/getBackground/index.native.ts new file mode 100644 index 000000000000..09a9b3f347e6 --- /dev/null +++ b/src/components/TabSelector/getBackground/index.native.ts @@ -0,0 +1,17 @@ +import type {Animated} from 'react-native'; +import type GetBackgroudColor from './types'; + +const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, position}) => { + if (routesLength > 1) { + const inputRange = Array.from({length: routesLength}, (v, i) => i); + return position?.interpolate({ + inputRange, + outputRange: inputRange.map((i) => { + return affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG; + }), + }) as unknown as Animated.AnimatedInterpolation; + } + return theme.border; +}; + +export default getBackgroundColor; diff --git a/src/components/TabSelector/getBackground/index.ts b/src/components/TabSelector/getBackground/index.ts new file mode 100644 index 000000000000..2eb60a5115a1 --- /dev/null +++ b/src/components/TabSelector/getBackground/index.ts @@ -0,0 +1,9 @@ +import type GetBackgroudColor from './types'; + +const getBackgroundColor: GetBackgroudColor = ({routesLength, tabIndex, affectedTabs, theme, isActive}) => { + if (routesLength > 1) { + return affectedTabs.includes(tabIndex) && isActive ? theme.border : theme.appBG; + } + return theme.border; +}; +export default getBackgroundColor; diff --git a/src/components/TabSelector/getBackground/types.ts b/src/components/TabSelector/getBackground/types.ts new file mode 100644 index 000000000000..f66ee37e9b73 --- /dev/null +++ b/src/components/TabSelector/getBackground/types.ts @@ -0,0 +1,46 @@ +import type {Animated} from 'react-native'; +import type {ThemeColors} from '@styles/theme/types'; + +/** + * Configuration for the getBackgroundColor function. + */ +type GetBackgroudColorConfig = { + /** + * The number of routes. + */ + routesLength: number; + + /** + * The index of the current tab. + */ + tabIndex: number; + + /** + * The indices of the affected tabs. + */ + affectedTabs: number[]; + + /** + * The theme colors. + */ + theme: ThemeColors; + + /** + * The animated position interpolation. + */ + position: Animated.AnimatedInterpolation; + + /** + * Whether the tab is active. + */ + isActive: boolean; +}; + +/** + * Function to get the background color. + * @param args - The configuration for the background color. + * @returns The interpolated background color or a string. + */ +type GetBackgroudColor = (args: GetBackgroudColorConfig) => Animated.AnimatedInterpolation | string; + +export default GetBackgroudColor; diff --git a/src/components/TabSelector/getOpacity/index.native.ts b/src/components/TabSelector/getOpacity/index.native.ts new file mode 100644 index 000000000000..0da5455214c9 --- /dev/null +++ b/src/components/TabSelector/getOpacity/index.native.ts @@ -0,0 +1,18 @@ +import type GetOpacity from './types'; + +const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, position, isActive}) => { + const activeValue = active ? 1 : 0; + const inactiveValue = active ? 0 : 1; + + if (routesLength > 1) { + const inputRange = Array.from({length: routesLength}, (v, i) => i); + + return position?.interpolate({ + inputRange, + outputRange: inputRange.map((i) => (affectedTabs.includes(tabIndex) && i === tabIndex && isActive ? activeValue : inactiveValue)), + }); + } + return activeValue; +}; + +export default getOpacity; diff --git a/src/components/TabSelector/getOpacity/index.ts b/src/components/TabSelector/getOpacity/index.ts new file mode 100644 index 000000000000..d9f3a2eb6167 --- /dev/null +++ b/src/components/TabSelector/getOpacity/index.ts @@ -0,0 +1,13 @@ +import type GetOpacity from './types'; + +const getOpacity: GetOpacity = ({routesLength, tabIndex, active, affectedTabs, isActive}) => { + const activeValue = active ? 1 : 0; + const inactiveValue = active ? 0 : 1; + + if (routesLength > 1) { + return affectedTabs.includes(tabIndex) && isActive ? activeValue : inactiveValue; + } + return activeValue; +}; + +export default getOpacity; diff --git a/src/components/TabSelector/getOpacity/types.ts b/src/components/TabSelector/getOpacity/types.ts new file mode 100644 index 000000000000..46e4568b2783 --- /dev/null +++ b/src/components/TabSelector/getOpacity/types.ts @@ -0,0 +1,45 @@ +import type {Animated} from 'react-native'; + +/** + * Configuration for the getOpacity function. + */ +type GetOpacityConfig = { + /** + * The number of routes in the tab bar. + */ + routesLength: number; + + /** + * The index of the tab. + */ + tabIndex: number; + + /** + * Whether we are calculating the opacity for the active tab. + */ + active: boolean; + + /** + * The indexes of the tabs that are affected by the animation. + */ + affectedTabs: number[]; + + /** + * Scene's position, value which we would like to interpolate. + */ + position: Animated.AnimatedInterpolation; + + /** + * Whether the tab is active. + */ + isActive: boolean; +}; + +/** + * Function to get the opacity. + * @param args - The configuration for the opacity. + * @returns The interpolated opacity or a fixed value (1 or 0). + */ +type GetOpacity = (args: GetOpacityConfig) => 1 | 0 | Animated.AnimatedInterpolation; + +export default GetOpacity; diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx index 1d72285be9a0..9d3a70d4d50c 100644 --- a/src/components/TagPicker/index.tsx +++ b/src/components/TagPicker/index.tsx @@ -1,6 +1,5 @@ import React, {useMemo, useState} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import SelectionList from '@components/SelectionList'; import RadioListItem from '@components/SelectionList/RadioListItem'; import useLocalize from '@hooks/useLocalize'; @@ -10,7 +9,7 @@ import * as PolicyUtils from '@libs/PolicyUtils'; import type * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {PolicyTag, PolicyTagLists, PolicyTags, RecentlyUsedTags} from '@src/types/onyx'; +import type {PolicyTag, PolicyTags} from '@src/types/onyx'; import type {PendingAction} from '@src/types/onyx/OnyxCommon'; type SelectedTagOption = { @@ -21,15 +20,7 @@ type SelectedTagOption = { pendingAction?: PendingAction; }; -type TagPickerOnyxProps = { - /** Collection of tag list on a policy */ - policyTags: OnyxEntry; - - /** List of recently used tags */ - policyRecentlyUsedTags: OnyxEntry; -}; - -type TagPickerProps = TagPickerOnyxProps & { +type TagPickerProps = { /** The policyID we are getting tags for */ // It's used in withOnyx HOC. // eslint-disable-next-line react/no-unused-prop-types @@ -51,7 +42,9 @@ type TagPickerProps = TagPickerOnyxProps & { tagListIndex: number; }; -function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) { +function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) { + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); + const [policyRecentlyUsedTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`); const styles = useThemeStyles(); const {translate} = useLocalize(); const [searchValue, setSearchValue] = useState(''); @@ -87,7 +80,16 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]); const sections = useMemo( - () => OptionsListUtils.getFilteredOptions([], [], [], searchValue, selectedOptions, [], false, false, false, {}, [], true, enabledTags, policyRecentlyUsedTagsList, false).tagOptions, + () => + OptionsListUtils.getFilteredOptions({ + searchValue, + selectedOptions, + includeP2P: false, + includeTags: true, + tags: enabledTags, + recentlyUsedTags: policyRecentlyUsedTagsList, + canInviteUser: false, + }).tagOptions, [searchValue, enabledTags, selectedOptions, policyRecentlyUsedTagsList], ); @@ -113,13 +115,6 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe TagPicker.displayName = 'TagPicker'; -export default withOnyx({ - policyTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, - }, - policyRecentlyUsedTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, - }, -})(TagPicker); +export default TagPicker; export type {SelectedTagOption}; diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index cea528e4537c..f283058042eb 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -55,6 +55,12 @@ type ThumbnailImageProps = { /** The object position of image */ objectPosition?: ImageObjectPosition; + + /** Callback fired when the image fails to load */ + onLoadFailure?: () => void; + + /** Callback fired when the image has been measured */ + onMeasure?: () => void; }; type UpdateImageSizeParams = { @@ -75,6 +81,8 @@ function ThumbnailImage({ fallbackIconColor, fallbackIconBackground, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL, + onLoadFailure, + onMeasure, }: ThumbnailImageProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -137,8 +145,14 @@ function ThumbnailImage({ setFailedToLoad(true)} + onMeasure={(args) => { + updateImageSize(args); + onMeasure?.(); + }} + onLoadFailure={() => { + setFailedToLoad(true); + onLoadFailure?.(); + }} isAuthTokenRequired={isAuthTokenRequired} objectPosition={objectPosition} /> diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index f71b957387a8..9207b9158051 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -62,6 +62,8 @@ type ValidateCodeFormProps = { /** Function to clear error of the form */ clearError: () => void; + + sendValidateCode: () => void; }; function BaseValidateCodeForm({ @@ -73,6 +75,7 @@ function BaseValidateCodeForm({ validateError, handleSubmitForm, clearError, + sendValidateCode, buttonStyles, }: ValidateCodeFormProps) { const {translate} = useLocalize(); @@ -125,10 +128,6 @@ function BaseValidateCodeForm({ }, []), ); - useEffect(() => { - clearError(); - }, [clearError]); - useEffect(() => { if (!hasMagicCodeBeenSent) { return; @@ -140,7 +139,7 @@ function BaseValidateCodeForm({ * Request a validate code / magic code be sent to verify this contact method */ const resendValidateCode = () => { - User.requestValidateCodeAction(); + sendValidateCode(); inputValidateCodeRef.current?.clear(); }; @@ -189,7 +188,7 @@ function BaseValidateCodeForm({ errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})} hasError={!isEmptyObject(validateError)} onFulfill={validateAndSubmitForm} - autoFocus={false} + autoFocus /> (null); @@ -30,15 +42,16 @@ function ValidateCodeActionModal({isVisible, title, description, onClose, valida return; } firstRenderRef.current = false; - User.requestValidateCodeAction(); - }, [isVisible]); + + sendValidateCode(); + }, [isVisible, sendValidateCode]); return ( + {footer?.()} ); diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts index 3cbfe62513d1..5556287b370e 100644 --- a/src/components/ValidateCodeActionModal/type.ts +++ b/src/components/ValidateCodeActionModal/type.ts @@ -1,3 +1,4 @@ +import type React from 'react'; import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon'; type ValidateCodeActionModalProps = { @@ -13,6 +14,9 @@ type ValidateCodeActionModalProps = { /** Function to call when the user closes the modal */ onClose: () => void; + /** Function to be called when the modal is closed */ + onModalHide?: () => void; + /** The pending action for submitting form */ validatePendingAction?: PendingAction | null; @@ -24,6 +28,15 @@ type ValidateCodeActionModalProps = { /** Function to clear error of the form */ clearError: () => void; + + /** A component to be rendered inside the modal */ + footer?: () => React.JSX.Element; + + /** Function is called when validate code modal is mounted and on magic code resend */ + sendValidateCode: () => void; + + /** If the magic code has been resent previously */ + hasMagicCodeBeenSent?: boolean; }; // eslint-disable-next-line import/prefer-default-export diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 84eb988d0758..012537b75108 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -136,6 +136,8 @@ function BaseVideoPlayer({ debouncedHideControl(); }, [isPlaying, debouncedHideControl, controlStatusState, isPopoverVisible, canUseTouchScreen]); + const stopWheelPropagation = useCallback((ev: WheelEvent) => ev.stopPropagation(), []); + const toggleControl = useCallback(() => { if (controlStatusState === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW) { hideControl(); @@ -233,7 +235,18 @@ function BaseVideoPlayer({ (event: VideoFullscreenUpdateEvent) => { onFullscreenUpdate?.(event); + if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_PRESENT) { + // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen. + // This will also allow the user to scroll the video playback speed. + if (videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current) { + videoPlayerElementParentRef.current.addEventListener('wheel', stopWheelPropagation); + } + } + if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) { + if (videoPlayerElementParentRef.current && 'removeEventListener' in videoPlayerElementParentRef.current) { + videoPlayerElementParentRef.current.removeEventListener('wheel', stopWheelPropagation); + } isFullScreenRef.current = false; // Sync volume updates in full screen mode after leaving it @@ -254,7 +267,7 @@ function BaseVideoPlayer({ } } }, - [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef], + [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef, stopWheelPropagation], ); const bindFunctions = useCallback(() => { diff --git a/src/components/VideoPlayer/IconButton.tsx b/src/components/VideoPlayer/IconButton.tsx index e2b931bc256a..3066cc7620ef 100644 --- a/src/components/VideoPlayer/IconButton.tsx +++ b/src/components/VideoPlayer/IconButton.tsx @@ -4,6 +4,7 @@ import Icon from '@components/Icon'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; type IconButtonProps = { @@ -29,6 +30,7 @@ function IconButton({src, fill = 'white', onPress, style, hoverStyle, tooltipTex onPress={onPress} style={[styles.videoIconButton, style]} hoverStyle={[styles.videoIconButtonHovered, hoverStyle]} + role={CONST.ROLE.BUTTON} > ; + +type IndicatorStatusResult = { + indicatorColor: string; + status: ValueOf | undefined; + policyIDWithErrors: string | undefined; +}; + +function useIndicatorStatus(): IndicatorStatusResult { + const theme = useTheme(); + const [allConnectionSyncProgresses] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [fundList] = useOnyx(ONYXKEYS.FUND_LIST); + const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET); + const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS); + const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); + + // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and + // those should be cleaned out before doing any error checking + const cleanPolicies = useMemo(() => Object.fromEntries(Object.entries(policies ?? {}).filter(([, policy]) => policy?.id)), [policies]); + + const policyErrors = { + [CONST.INDICATOR_STATUS.HAS_POLICY_ERRORS]: Object.values(cleanPolicies).find(PolicyUtils.hasPolicyError), + [CONST.INDICATOR_STATUS.HAS_CUSTOM_UNITS_ERROR]: Object.values(cleanPolicies).find(PolicyUtils.hasCustomUnitsError), + [CONST.INDICATOR_STATUS.HAS_EMPLOYEE_LIST_ERROR]: Object.values(cleanPolicies).find(PolicyUtils.hasEmployeeListError), + [CONST.INDICATOR_STATUS.HAS_SYNC_ERRORS]: Object.values(cleanPolicies).find((cleanPolicy) => + PolicyUtils.hasSyncError( + cleanPolicy, + isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${cleanPolicy?.id}`], cleanPolicy), + ), + ), + }; + + // All of the error & info-checking methods are put into an array. This is so that using _.some() will return + // early as soon as the first error / info condition is returned. This makes the checks very efficient since + // we only care if a single error / info condition exists anywhere. + const errorChecking: Partial> = { + [CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS]: Object.keys(userWallet?.errors ?? {}).length > 0, + [CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR]: PaymentMethods.hasPaymentMethodError(bankAccountList, fundList), + ...(Object.fromEntries(Object.entries(policyErrors).map(([error, policy]) => [error, !!policy])) as Record), + [CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_ERRORS]: SubscriptionUtils.hasSubscriptionRedDotError(), + [CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS]: Object.keys(reimbursementAccount?.errors ?? {}).length > 0, + [CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR]: !!loginList && UserUtils.hasLoginListError(loginList), + // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead) + [CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS]: Object.keys(walletTerms?.errors ?? {}).length > 0 && !walletTerms?.chatReportID, + }; + + const infoChecking: Partial> = { + [CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO]: !!loginList && UserUtils.hasLoginListInfo(loginList), + [CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_INFO]: SubscriptionUtils.hasSubscriptionGreenDotInfo(), + }; + + const [error] = Object.entries(errorChecking).find(([, value]) => value) ?? []; + const [info] = Object.entries(infoChecking).find(([, value]) => value) ?? []; + + const status = (error ?? info) as IndicatorStatus | undefined; + const policyIDWithErrors = Object.values(policyErrors).find(Boolean)?.id; + const indicatorColor = error ? theme.danger : theme.success; + + return {indicatorColor, status, policyIDWithErrors}; +} + +export default useIndicatorStatus; + +export type {IndicatorStatus}; diff --git a/src/languages/en.ts b/src/languages/en.ts index ff9daeb0d7ed..9998fbb2ee28 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -39,6 +39,7 @@ import type { ChangeTypeParams, CharacterLengthLimitParams, CharacterLimitParams, + CompanyCardBankName, CompanyCardFeedNameParams, ConfirmThatParams, ConnectionNameParams, @@ -955,6 +956,7 @@ const translations = { invalidSplit: 'The sum of splits must equal the total amount.', invalidSplitParticipants: 'Please enter an amount greater than zero for at least two participants.', invalidSplitYourself: 'Please enter a non-zero amount for your split.', + noParticipantSelected: 'Please select a participant.', other: 'Unexpected error. Please try again later.', genericCreateFailureMessage: 'Unexpected error submitting this expense. Please try again later.', genericCreateInvoiceFailureMessage: 'Unexpected error sending this invoice. Please try again later.', @@ -2158,6 +2160,7 @@ const translations = { companyAddress: 'Company address', listOfRestrictedBusinesses: 'list of restricted businesses', confirmCompanyIsNot: 'I confirm that this company is not on the', + businessInfoTitle: 'Business info', }, beneficialOwnerInfoStep: { doYouOwn25percent: 'Do you own 25% or more of', @@ -2236,6 +2239,21 @@ const translations = { enable2FAText: 'We take your security seriously. Please set up 2FA now to add an extra layer of protection to your account.', secureYourAccount: 'Secure your account', }, + countryStep: { + confirmBusinessBank: 'Confirm business bank account currency and country', + confirmCurrency: 'Confirm currency and country', + }, + signerInfoStep: { + signerInfo: 'Signer info', + }, + agreementsStep: { + agreements: 'Agreements', + pleaseConfirm: 'Please confirm the agreements below', + accept: 'Accept and add bank account', + }, + finishStep: { + connect: 'Connect bank account', + }, reimbursementAccountLoadingAnimation: { oneMoment: 'One moment', explanationLine: "We’re taking a look at your information. You'll be able to continue with next steps shortly.", @@ -2467,9 +2485,15 @@ const translations = { advancedConfig: { autoSyncDescription: 'Expensify will automatically sync with QuickBooks Desktop every day.', createEntities: 'Auto-create entities', +<<<<<<< HEAD createEntitiesDescription: "Expensify will automatically create vendors in QuickBooks Desktop if they don't exist already, and auto-create customers when exporting invoices.", }, +======= + createEntitiesDescription: "Expensify will automatically create vendors in QuickBooks Desktop if they don't exist already.", + }, + itemsDescription: 'Choose how to handle QuickBooks Desktop items in Expensify.', +>>>>>>> main }, qbo: { importDescription: 'Choose which coding configurations to import from QuickBooks Online to Expensify.', @@ -3313,6 +3337,9 @@ const translations = { emptyAddedFeedDescription: 'Get started by assigning your first card to a member.', pendingFeedTitle: `We're reviewing your request...`, pendingFeedDescription: `We're currently reviewing your feed details. Once that's done we'll reach out to you via`, + pendingBankTitle: 'Check your browser window', + pendingBankDescription: ({bankName}: CompanyCardBankName) => `Please connect to ${bankName} via your browser window that just opened. If one didn’t open, `, + pendingBankLink: 'please click here.', giveItNameInstruction: 'Give the card a name that sets it apart from the others.', updating: 'Updating...', noAccountsFound: 'No accounts found', @@ -3588,6 +3615,7 @@ const translations = { }, errorODIntegration: "There's an error with a connection that's been set up in Expensify Classic. ", goToODToFix: 'Go to Expensify Classic to fix this issue.', + goToODToSettings: 'Go to Expensify Classic to manage your settings.', setup: 'Connect', lastSync: ({relativeDate}: LastSyncAccountingParams) => `Last synced ${relativeDate}`, import: 'Import', @@ -3596,6 +3624,7 @@ const translations = { other: 'Other integrations', syncNow: 'Sync now', disconnect: 'Disconnect', + reinstall: 'Reinstall connector', disconnectTitle: ({connectionName}: OptionalParam = {}) => { const integrationName = connectionName && CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName] ? CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName] : 'integration'; @@ -3644,14 +3673,18 @@ const translations = { syncStageName: ({stage}: SyncStageNameConnectionsParams) => { switch (stage) { case 'quickbooksOnlineImportCustomers': + case 'quickbooksDesktopImportCustomers': return 'Importing customers'; case 'quickbooksOnlineImportEmployees': case 'netSuiteSyncImportEmployees': case 'intacctImportEmployees': + case 'quickbooksDesktopImportEmployees': return 'Importing employees'; case 'quickbooksOnlineImportAccounts': + case 'quickbooksDesktopImportAccounts': return 'Importing accounts'; case 'quickbooksOnlineImportClasses': + case 'quickbooksDesktopImportClasses': return 'Importing classes'; case 'quickbooksOnlineImportLocations': return 'Importing locations'; @@ -3670,6 +3703,19 @@ const translations = { return 'Importing Xero data'; case 'startingImportQBO': return 'Importing QuickBooks Online data'; + case 'startingImportQBD': + case 'quickbooksDesktopImportMore': + return 'Importing QuickBooks Desktop data'; + case 'quickbooksDesktopImportTitle': + return 'Importing title'; + case 'quickbooksDesktopImportApproveCertificate': + return 'Importing approve ceritificate'; + case 'quickbooksDesktopImportDimensions': + return 'Importing dimensions'; + case 'quickbooksDesktopImportSavePolicy': + return 'Importing save policy'; + case 'quickbooksDesktopWebConnectorReminder': + return 'Still syncing data with QuickBooks... Please make sure the Web Connector is running'; case 'quickbooksOnlineSyncTitle': return 'Syncing QuickBooks Online data'; case 'quickbooksOnlineSyncLoadData': @@ -3743,6 +3789,7 @@ const translations = { case 'netSuiteSyncImportSubsidiaries': return 'Importing subsidiaries'; case 'netSuiteSyncImportVendors': + case 'quickbooksDesktopImportVendors': return 'Importing vendors'; case 'intacctCheckConnection': return 'Checking Sage Intacct connection'; @@ -3969,6 +4016,11 @@ const translations = { description: `Enjoy automated syncing and reduce manual entries with the Expensify + Sage Intacct integration. Gain in-depth, real-time financial insights with user-defined dimensions, as well as expense coding by department, class, location, customer, and project (job).`, onlyAvailableOnPlan: 'Our Sage Intacct integration is only available on the Control plan, starting at ', }, + [CONST.POLICY.CONNECTIONS.NAME.QBD]: { + title: 'QuickBooks Desktop', + description: `Enjoy automated syncing and reduce manual entries with the Expensify + QuickBooks Desktop integration. Gain ultimate efficiency with a realtime, two-way connection and expense coding by class, item, customer, and project.`, + onlyAvailableOnPlan: 'Our QuickBooks Desktop integration is only available on the Control plan, starting at ', + }, [CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id]: { title: 'Advanced Approvals', description: `If you want to add more layers of approval to the mix – or just make sure the largest expenses get another set of eyes – we’ve got you covered. Advanced approvals help you put the right checks in place at every level so you keep your team’s spend under control.`, @@ -4303,6 +4355,8 @@ const translations = { current: 'Current', past: 'Past', }, + noCategory: 'No category', + noTag: 'No tag', expenseType: 'Expense type', recentSearches: 'Recent searches', recentChats: 'Recent chats', @@ -5102,6 +5156,30 @@ const translations = { hasChildReportAwaitingAction: 'Has child report awaiting action', hasMissingInvoiceBankAccount: 'Has missing invoice bank account', }, +<<<<<<< HEAD +======= + reasonRBR: { + hasErrors: 'Has errors in report or report actions data', + hasViolations: 'Has violations', + hasTransactionThreadViolations: 'Has transaction thread violations', + }, + indicatorStatus: { + theresAReportAwaitingAction: "There's a report awaiting action", + theresAReportWithErrors: "There's a report with errors", + theresAWorkspaceWithCustomUnitsErrors: "There's a workspace with custom units errors", + theresAProblemWithAWorkspaceMember: "There's a problem with a workspace member", + theresAProblemWithAContactMethod: "There's a problem with a contact method", + aContactMethodRequiresVerification: 'A contact method requires verification', + theresAProblemWithAPaymentMethod: "There's a problem with a payment method", + theresAProblemWithAWorkspace: "There's a problem with a workspace", + theresAProblemWithYourReimbursementAccount: "There's a problem with your reimbursement account", + theresABillingProblemWithYourSubscription: "There's a billing problem with your subscription", + yourSubscriptionHasBeenSuccessfullyRenewed: 'Your subscription has been successfully renewed', + theresWasAProblemDuringAWorkspaceConnectionSync: 'There was a problem during a workspace connection sync', + theresAProblemWithYourWallet: "There's a problem with your wallet", + theresAProblemWithYourWalletTerms: "There's a problem with your wallet terms", + }, +>>>>>>> main }, emptySearchView: { takeATour: 'Take a tour', diff --git a/src/languages/es.ts b/src/languages/es.ts index a9d45c986238..23853aab2f14 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -37,6 +37,7 @@ import type { ChangeTypeParams, CharacterLengthLimitParams, CharacterLimitParams, + CompanyCardBankName, CompanyCardFeedNameParams, ConfirmThatParams, ConnectionNameParams, @@ -930,10 +931,12 @@ const translations = { noReimbursableExpenses: 'El importe de este informe no es válido', pendingConversionMessage: 'El total se actualizará cuando estés online', changedTheExpense: 'cambió el gasto', - setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay}`, + setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => + `${valueName === 'comerciante' || valueName === 'importe' || valueName === 'gasto' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay}`, setTheDistanceMerchant: ({translatedChangedField, newMerchant, newAmountToDisplay}: SetTheDistanceMerchantParams) => `estableció la ${translatedChangedField} a ${newMerchant}, lo que estableció el importe a ${newAmountToDisplay}`, - removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`, + removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => + `${valueName === 'comerciante' || valueName === 'importe' || valueName === 'gasto' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`, updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) => `${valueName === 'comerciante' || valueName === 'importe' || valueName === 'gasto' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay} (previamente ${oldValueToDisplay})`, updatedTheDistanceMerchant: ({translatedChangedField, newMerchant, oldMerchant, newAmountToDisplay, oldAmountToDisplay}: UpdatedTheDistanceMerchantParams) => @@ -950,6 +953,7 @@ const translations = { invalidSplit: 'La suma de las partes debe ser igual al importe total.', invalidSplitParticipants: 'Introduce un importe superior a cero para al menos dos participantes.', invalidSplitYourself: 'Por favor, introduce una cantidad diferente de cero para tu parte.', + noParticipantSelected: 'Por favor, selecciona un participante.', other: 'Error inesperado. Por favor, inténtalo más tarde.', genericHoldExpenseFailureMessage: 'Error inesperado al bloquear el gasto. Por favor, inténtalo de nuevo más tarde.', genericUnholdExpenseFailureMessage: 'Error inesperado al desbloquear el gasto. Por favor, inténtalo de nuevo más tarde.', @@ -1543,7 +1547,6 @@ const translations = { 'Has introducido incorrectamente los 4 últimos dígitos de tu tarjeta Expensify demasiadas veces. Si estás seguro de que los números son correctos, ponte en contacto con Conserjería para solucionarlo. De lo contrario, inténtalo de nuevo más tarde.', }, }, - // TODO: add translation getPhysicalCard: { header: 'Obtener tarjeta física', nameMessage: 'Introduce tu nombre y apellido como aparecerá en tu tarjeta.', @@ -2180,6 +2183,7 @@ const translations = { companyAddress: 'Dirección de la empresa', listOfRestrictedBusinesses: 'lista de negocios restringidos', confirmCompanyIsNot: 'Confirmo que esta empresa no está en la', + businessInfoTitle: 'Información del negocio', }, beneficialOwnerInfoStep: { doYouOwn25percent: '¿Posees el 25% o más de', @@ -2258,6 +2262,21 @@ const translations = { enable2FAText: 'Tu seguridad es importante para nosotros. Por favor, configura ahora la autenticación de dos factores para añadir una capa adicional de protección a tu cuenta.', secureYourAccount: 'Asegura tu cuenta', }, + countryStep: { + confirmBusinessBank: 'Confirmar moneda y país de la cuenta bancaria comercial', + confirmCurrency: 'Confirmar moneda y país', + }, + signerInfoStep: { + signerInfo: 'Información del firmante', + }, + agreementsStep: { + agreements: 'Acuerdos', + pleaseConfirm: 'Por favor confirme los acuerdos a continuación', + accept: 'Aceptar y añadir cuenta bancaria', + }, + finishStep: { + connect: 'Conectar cuenta bancaria', + }, reimbursementAccountLoadingAnimation: { oneMoment: 'Un momento', explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.', @@ -2491,8 +2510,14 @@ const translations = { advancedConfig: { autoSyncDescription: 'Expensify se sincronizará automáticamente con QuickBooks Desktop todos los días.', createEntities: 'Crear entidades automáticamente', +<<<<<<< HEAD createEntitiesDescription: 'Expensify creará automáticamente proveedores en QuickBooks Desktop si aún no existen, y creará automáticamente clientes al exportar facturas.', }, +======= + createEntitiesDescription: 'Expensify creará automáticamente proveedores en QuickBooks Desktop si aún no existen.', + }, + itemsDescription: 'Elige cómo gestionar los elementos de QuickBooks Desktop en Expensify.', +>>>>>>> main }, qbo: { importDescription: 'Elige que configuraciónes de codificación son importadas desde QuickBooks Online a Expensify.', @@ -3355,6 +3380,9 @@ const translations = { emptyAddedFeedDescription: 'Comienza asignando tu primera tarjeta a un miembro.', pendingFeedTitle: `Estamos revisando tu solicitud...`, pendingFeedDescription: `Actualmente estamos revisando los detalles de tu feed. Una vez hecho esto, nos pondremos en contacto contigo a través de`, + pendingBankTitle: 'Comprueba la ventana de tu navegador', + pendingBankDescription: ({bankName}: CompanyCardBankName) => `Conéctese a ${bankName} a través de la ventana del navegador que acaba de abrir. Si no se abrió, `, + pendingBankLink: 'por favor haga clic aquí.', giveItNameInstruction: 'Nombra la tarjeta para distingirla de las demás.', updating: 'Actualizando...', noAccountsFound: 'No se han encontrado cuentas', @@ -3594,6 +3622,7 @@ const translations = { }, errorODIntegration: 'Hay un error con una conexión que se ha configurado en Expensify Classic. ', goToODToFix: 'Ve a Expensify Classic para solucionar este problema.', + goToODToSettings: 'Ve a Expensify Classic para gestionar tus configuraciones.', setup: 'Configurar', lastSync: ({relativeDate}: LastSyncAccountingParams) => `Recién sincronizado ${relativeDate}`, import: 'Importar', @@ -3602,6 +3631,7 @@ const translations = { other: 'Otras integraciones', syncNow: 'Sincronizar ahora', disconnect: 'Desconectar', + reinstall: 'Reinstalar el conector', disconnectTitle: ({connectionName}: OptionalParam = {}) => { const integrationName = connectionName && CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName] ? CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName] : 'integración'; @@ -3649,14 +3679,18 @@ const translations = { syncStageName: ({stage}: SyncStageNameConnectionsParams) => { switch (stage) { case 'quickbooksOnlineImportCustomers': + case 'quickbooksDesktopImportCustomers': return 'Importando clientes'; case 'quickbooksOnlineImportEmployees': case 'netSuiteSyncImportEmployees': case 'intacctImportEmployees': + case 'quickbooksDesktopImportEmployees': return 'Importando empleados'; case 'quickbooksOnlineImportAccounts': + case 'quickbooksDesktopImportAccounts': return 'Importando cuentas'; case 'quickbooksOnlineImportClasses': + case 'quickbooksDesktopImportClasses': return 'Importando clases'; case 'quickbooksOnlineImportLocations': return 'Importando localidades'; @@ -3675,6 +3709,19 @@ const translations = { return 'Importando datos desde Xero'; case 'startingImportQBO': return 'Importando datos desde QuickBooks Online'; + case 'startingImportQBD': + case 'quickbooksDesktopImportMore': + return 'Importando datos desde QuickBooks Desktop'; + case 'quickbooksDesktopImportTitle': + return 'Importando título'; + case 'quickbooksDesktopImportApproveCertificate': + return 'Importando certificado de aprobación'; + case 'quickbooksDesktopImportDimensions': + return 'Importando dimensiones'; + case 'quickbooksDesktopImportSavePolicy': + return 'Importando política de guardado'; + case 'quickbooksDesktopWebConnectorReminder': + return 'Aún sincronizando datos con QuickBooks... Por favor, asegúrate de que el Conector Web esté en funcionamiento'; case 'quickbooksOnlineSyncTitle': return 'Sincronizando datos desde QuickBooks Online'; case 'quickbooksOnlineSyncLoadData': @@ -3742,6 +3789,7 @@ const translations = { case 'netSuiteSyncImportSubsidiaries': return 'Importando subsidiarias'; case 'netSuiteSyncImportVendors': + case 'quickbooksDesktopImportVendors': return 'Importando proveedores'; case 'netSuiteSyncExpensifyReimbursedReports': return 'Marcando facturas y recibos de NetSuite como pagados'; @@ -4014,6 +4062,11 @@ const translations = { description: `Disfruta de una sincronización automatizada y reduce las entradas manuales con la integración Expensify + Sage Intacct. Obtén información financiera en profundidad y en tiempo real con dimensiones definidas por el usuario, así como codificación de gastos por departamento, clase, ubicación, cliente y proyecto (trabajo).`, onlyAvailableOnPlan: 'Nuestra integración Sage Intacct sólo está disponible en el plan Control, a partir de ', }, + [CONST.POLICY.CONNECTIONS.NAME.QBD]: { + title: 'QuickBooks Desktop', + description: `Disfruta de la sincronización automática y reduce las entradas manuales con la integración de Expensify + QuickBooks Desktop. Obtén la máxima eficiencia con una conexión bidireccional en tiempo real y la codificación de gastos por clase, artículo, cliente y proyecto.`, + onlyAvailableOnPlan: 'Nuestra integración con QuickBooks Desktop solo está disponible en el plan Control, que comienza en ', + }, [CONST.UPGRADE_FEATURE_INTRO_MAPPING.approvals.id]: { title: 'Aprobaciones anticipadas', description: `Si quieres añadir más niveles de aprobación, o simplemente asegurarte de que los gastos más importantes reciben otro vistazo, no hay problema. Las aprobaciones avanzadas ayudan a realizar las comprobaciones adecuadas a cada nivel para mantener los gastos de tu equipo bajo control.`, @@ -4349,6 +4402,8 @@ const translations = { current: 'Actual', past: 'Anterior', }, + noCategory: 'Sin categoría', + noTag: 'Sin etiqueta', expenseType: 'Tipo de gasto', recentSearches: 'Búsquedas recientes', recentChats: 'Chats recientes', @@ -5616,6 +5671,30 @@ const translations = { hasChildReportAwaitingAction: 'Informe secundario pendiente de acción', hasMissingInvoiceBankAccount: 'Falta la cuenta bancaria de la factura', }, +<<<<<<< HEAD +======= + reasonRBR: { + hasErrors: 'Tiene errores en los datos o las acciones del informe', + hasViolations: 'Tiene violaciones', + hasTransactionThreadViolations: 'Tiene violaciones de hilo de transacciones', + }, + indicatorStatus: { + theresAReportAwaitingAction: 'Hay un informe pendiente de acción', + theresAReportWithErrors: 'Hay un informe con errores', + theresAWorkspaceWithCustomUnitsErrors: 'Hay un espacio de trabajo con errores en las unidades personalizadas', + theresAProblemWithAWorkspaceMember: 'Hay un problema con un miembro del espacio de trabajo', + theresAProblemWithAContactMethod: 'Hay un problema con un método de contacto', + aContactMethodRequiresVerification: 'Un método de contacto requiere verificación', + theresAProblemWithAPaymentMethod: 'Hay un problema con un método de pago', + theresAProblemWithAWorkspace: 'Hay un problema con un espacio de trabajo', + theresAProblemWithYourReimbursementAccount: 'Hay un problema con tu cuenta de reembolso', + theresABillingProblemWithYourSubscription: 'Hay un problema de facturación con tu suscripción', + yourSubscriptionHasBeenSuccessfullyRenewed: 'Tu suscripción se ha renovado con éxito', + theresWasAProblemDuringAWorkspaceConnectionSync: 'Hubo un problema durante la sincronización de la conexión del espacio de trabajo', + theresAProblemWithYourWallet: 'Hay un problema con tu billetera', + theresAProblemWithYourWalletTerms: 'Hay un problema con los términos de tu billetera', + }, +>>>>>>> main }, emptySearchView: { takeATour: 'Haz un tour', diff --git a/src/languages/params.ts b/src/languages/params.ts index 02dafa76a46d..9341b914d1d0 100644 --- a/src/languages/params.ts +++ b/src/languages/params.ts @@ -538,6 +538,10 @@ type ImportedTypesParams = { importedTypes: string[]; }; +type CompanyCardBankName = { + bankName: string; +}; + export type { AuthenticationErrorParams, ImportMembersSuccessfullDescriptionParams, @@ -729,6 +733,7 @@ export type { DateParams, FiltersAmountBetweenParams, StatementPageTitleParams, + CompanyCardBankName, DisconnectPromptParams, DisconnectTitleParams, CharacterLengthLimitParams, diff --git a/src/libs/API/index.ts b/src/libs/API/index.ts index 0d1bab053182..ad0650374011 100644 --- a/src/libs/API/index.ts +++ b/src/libs/API/index.ts @@ -208,23 +208,32 @@ function paginate; -function paginate>( +function paginate>( type: TRequestType, command: TCommand, apiCommandParameters: ApiRequestCommandParameters[TCommand], onyxData: OnyxData, config: PaginationConfig, ): void; +function paginate>( + type: TRequestType, + command: TCommand, + apiCommandParameters: ApiRequestCommandParameters[TCommand], + onyxData: OnyxData, + config: PaginationConfig, + conflictResolver?: RequestConflictResolver, +): void; function paginate>( type: TRequestType, command: TCommand, apiCommandParameters: ApiRequestCommandParameters[TCommand], onyxData: OnyxData, config: PaginationConfig, + conflictResolver: RequestConflictResolver = {}, ): Promise | void { Log.info('[API] Called API.paginate', false, {command, ...apiCommandParameters}); const request: PaginatedRequest = { - ...prepareRequest(command, type, apiCommandParameters, onyxData), + ...prepareRequest(command, type, apiCommandParameters, onyxData, conflictResolver), ...config, ...{ isPaginated: true, diff --git a/src/libs/API/parameters/RequestMoneyParams.ts b/src/libs/API/parameters/RequestMoneyParams.ts index e3e600a4e367..27e1032d82a9 100644 --- a/src/libs/API/parameters/RequestMoneyParams.ts +++ b/src/libs/API/parameters/RequestMoneyParams.ts @@ -28,6 +28,7 @@ type RequestMoneyParams = { transactionThreadReportID: string; createdReportActionIDForThread: string; reimbursible?: boolean; + policyID?: string; }; export default RequestMoneyParams; diff --git a/src/libs/API/parameters/SetMissingPersonalDetailsAndShipExpensifyCardParams.ts b/src/libs/API/parameters/SetPersonalDetailsAndShipExpensifyCardsParams.ts similarity index 63% rename from src/libs/API/parameters/SetMissingPersonalDetailsAndShipExpensifyCardParams.ts rename to src/libs/API/parameters/SetPersonalDetailsAndShipExpensifyCardsParams.ts index 54d73aec5df7..0ab82ba6b755 100644 --- a/src/libs/API/parameters/SetMissingPersonalDetailsAndShipExpensifyCardParams.ts +++ b/src/libs/API/parameters/SetPersonalDetailsAndShipExpensifyCardsParams.ts @@ -1,4 +1,4 @@ -type SetMissingPersonalDetailsAndShipExpensifyCardParams = { +type SetPersonalDetailsAndShipExpensifyCardsParams = { legalFirstName: string; legalLastName: string; phoneNumber: string; @@ -9,7 +9,6 @@ type SetMissingPersonalDetailsAndShipExpensifyCardParams = { addressCountry: string; addressState: string; dob: string; - cardID: number; }; -export default SetMissingPersonalDetailsAndShipExpensifyCardParams; +export default SetPersonalDetailsAndShipExpensifyCardsParams; diff --git a/src/libs/API/parameters/SyncPolicyToQuickbooksDesktopParams.ts b/src/libs/API/parameters/SyncPolicyToQuickbooksDesktopParams.ts new file mode 100644 index 000000000000..db6d9cd43437 --- /dev/null +++ b/src/libs/API/parameters/SyncPolicyToQuickbooksDesktopParams.ts @@ -0,0 +1,7 @@ +type SyncPolicyToQuickbooksDesktopParams = { + policyID: string; + idempotencyKey: string; + forceDataRefresh?: boolean; +}; + +export default SyncPolicyToQuickbooksDesktopParams; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index e472f6a48236..7c8d5572a55e 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -19,6 +19,7 @@ export type {default as OpenPolicyInitialPageParams} from './OpenPolicyInitialPa export type {default as SyncPolicyToQuickbooksOnlineParams} from './SyncPolicyToQuickbooksOnlineParams'; export type {default as SyncPolicyToXeroParams} from './SyncPolicyToXeroParams'; export type {default as SyncPolicyToNetSuiteParams} from './SyncPolicyToNetSuiteParams'; +export type {default as SyncPolicyToQuickbooksDesktopParams} from './SyncPolicyToQuickbooksDesktopParams'; export type {default as DeleteContactMethodParams} from './DeleteContactMethodParams'; export type {default as DeletePaymentBankAccountParams} from './DeletePaymentBankAccountParams'; export type {default as DeletePaymentCardParams} from './DeletePaymentCardParams'; @@ -334,8 +335,13 @@ export type {default as UnassignCompanyCard} from './UnassignCompanyCard'; export type {default as UpdateCompanyCard} from './UpdateCompanyCard'; export type {default as UpdateCompanyCardNameParams} from './UpdateCompanyCardNameParams'; export type {default as SetCompanyCardExportAccountParams} from './SetCompanyCardExportAccountParams'; +<<<<<<< HEAD export type {default as RequestFeedSetupParams} from './RequestFeedSetupParams'; export type {default as SetMissingPersonalDetailsAndShipExpensifyCardParams} from './SetMissingPersonalDetailsAndShipExpensifyCardParams'; +======= +export type {default as SetPersonalDetailsAndShipExpensifyCardsParams} from './SetPersonalDetailsAndShipExpensifyCardsParams'; +export type {default as RequestFeedSetupParams} from './RequestFeedSetupParams'; +>>>>>>> main export type {default as SetInvoicingTransferBankAccountParams} from './SetInvoicingTransferBankAccountParams'; export type {default as ConnectPolicyToQuickBooksDesktopParams} from './ConnectPolicyToQuickBooksDesktopParams'; export type {default as UpdateQuickbooksDesktopExpensesExportDestinationTypeParams} from './UpdateQuickbooksDesktopExpensesExportDestinationTypeParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index effe17866ad5..68fb2a3de008 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -272,6 +272,10 @@ const WRITE_COMMANDS = { UPDATE_QUICKBOOKS_DESKTOP_ENABLE_NEW_CATEGORIES: 'UpdateQuickbooksDesktopEnableNewCategories', UPDATE_QUICKBOOKS_DESKTOP_SYNC_CLASSES: 'UpdateQuickbooksDesktopSyncClasses', UPDATE_QUICKBOOKS_DESKTOP_SYNC_CUSTOMERS: 'UpdateQuickbooksDesktopSyncCustomers', +<<<<<<< HEAD +======= + UPDATE_QUICKBOOKS_DESKTOP_SYNC_ITEMS: 'UpdateQuickbooksDesktopSyncItems', +>>>>>>> main REMOVE_POLICY_CONNECTION: 'RemovePolicyConnection', SET_POLICY_TAXES_ENABLED: 'SetPolicyTaxesEnabled', DELETE_POLICY_TAXES: 'DeletePolicyTaxes', @@ -426,7 +430,7 @@ const WRITE_COMMANDS = { UPDATE_COMPANY_CARD: 'SyncCard', UPDATE_COMPANY_CARD_NAME: 'SetCardName', SET_CARD_EXPORT_ACCOUNT: 'SetCardExportAccount', - SET_MISSING_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARD: 'SetMissingPersonalDetailsAndShipExpensifyCard', + SET_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARDS: 'SetPersonalDetailsAndShipExpensifyCards', SET_INVOICING_TRANSFER_BANK_ACCOUNT: 'SetInvoicingTransferBankAccount', } as const; @@ -719,6 +723,10 @@ type WriteCommandParameters = { [WRITE_COMMANDS.UPDATE_QUICKBOOKS_DESKTOP_ENABLE_NEW_CATEGORIES]: Parameters.UpdateQuickbooksDesktopGenericTypeParams; [WRITE_COMMANDS.UPDATE_QUICKBOOKS_DESKTOP_SYNC_CLASSES]: Parameters.UpdateQuickbooksDesktopGenericTypeParams; [WRITE_COMMANDS.UPDATE_QUICKBOOKS_DESKTOP_SYNC_CUSTOMERS]: Parameters.UpdateQuickbooksDesktopGenericTypeParams; +<<<<<<< HEAD +======= + [WRITE_COMMANDS.UPDATE_QUICKBOOKS_DESKTOP_SYNC_ITEMS]: Parameters.UpdateQuickbooksDesktopGenericTypeParams; +>>>>>>> main [WRITE_COMMANDS.UPDATE_QUICKBOOKS_DESKTOP_EXPORT]: Parameters.UpdateQuickbooksDesktopGenericTypeParams; [WRITE_COMMANDS.UPDATE_POLICY_CONNECTION_CONFIG]: Parameters.UpdatePolicyConnectionConfigParams; [WRITE_COMMANDS.UPDATE_MANY_POLICY_CONNECTION_CONFIGS]: Parameters.UpdateManyPolicyConnectionConfigurationsParams; @@ -846,7 +854,7 @@ type WriteCommandParameters = { [WRITE_COMMANDS.DELETE_SAVED_SEARCH]: Parameters.DeleteSavedSearchParams; [WRITE_COMMANDS.UPDATE_CARD_SETTLEMENT_FREQUENCY]: Parameters.UpdateCardSettlementFrequencyParams; [WRITE_COMMANDS.UPDATE_CARD_SETTLEMENT_ACCOUNT]: Parameters.UpdateCardSettlementAccountParams; - [WRITE_COMMANDS.SET_MISSING_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARD]: Parameters.SetMissingPersonalDetailsAndShipExpensifyCardParams; + [WRITE_COMMANDS.SET_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARDS]: Parameters.SetPersonalDetailsAndShipExpensifyCardsParams; // Xero API [WRITE_COMMANDS.UPDATE_XERO_TENANT_ID]: Parameters.UpdateXeroGenericTypeParams; @@ -875,6 +883,7 @@ const READ_COMMANDS = { SYNC_POLICY_TO_XERO: 'SyncPolicyToXero', SYNC_POLICY_TO_NETSUITE: 'SyncPolicyToNetSuite', SYNC_POLICY_TO_SAGE_INTACCT: 'SyncPolicyToSageIntacct', + SYNC_POLICY_TO_QUICKBOOKS_DESKTOP: 'SyncPolicyToQuickbooksDesktop', OPEN_REIMBURSEMENT_ACCOUNT_PAGE: 'OpenReimbursementAccountPage', OPEN_WORKSPACE_VIEW: 'OpenWorkspaceView', GET_MAPBOX_ACCESS_TOKEN: 'GetMapboxAccessToken', @@ -934,6 +943,7 @@ type ReadCommandParameters = { [READ_COMMANDS.SYNC_POLICY_TO_XERO]: Parameters.SyncPolicyToXeroParams; [READ_COMMANDS.SYNC_POLICY_TO_NETSUITE]: Parameters.SyncPolicyToNetSuiteParams; [READ_COMMANDS.SYNC_POLICY_TO_SAGE_INTACCT]: Parameters.SyncPolicyToNetSuiteParams; + [READ_COMMANDS.SYNC_POLICY_TO_QUICKBOOKS_DESKTOP]: Parameters.SyncPolicyToQuickbooksDesktopParams; [READ_COMMANDS.OPEN_REIMBURSEMENT_ACCOUNT_PAGE]: Parameters.OpenReimbursementAccountPageParams; [READ_COMMANDS.OPEN_WORKSPACE_VIEW]: Parameters.OpenWorkspaceViewParams; [READ_COMMANDS.GET_MAPBOX_ACCESS_TOKEN]: null; diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts index 7c81c5c224c6..c5d623a5c916 100644 --- a/src/libs/CardUtils.ts +++ b/src/libs/CardUtils.ts @@ -1,6 +1,6 @@ import groupBy from 'lodash/groupBy'; import Onyx from 'react-native-onyx'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import ExpensifyCardImage from '@assets/images/expensify-card.svg'; import * as Illustrations from '@src/components/Icon/Illustrations'; @@ -9,7 +9,10 @@ import type {TranslationPaths} from '@src/languages/types'; import type {OnyxValues} from '@src/ONYXKEYS'; import ONYXKEYS from '@src/ONYXKEYS'; import type {BankAccountList, Card, CardFeeds, CardList, CompanyCardFeed, PersonalDetailsList, WorkspaceCardsList} from '@src/types/onyx'; +<<<<<<< HEAD import type Policy from '@src/types/onyx/Policy'; +======= +>>>>>>> main import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; import localeCompare from './LocaleCompare'; @@ -188,6 +191,7 @@ function sortCardsByCardholderName(cardsList: OnyxEntry, per function getCompanyCardNumber(cardList: Record, lastFourPAN?: string): string { if (!lastFourPAN) { return ''; +<<<<<<< HEAD } return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? ''; @@ -196,10 +200,42 @@ function getCompanyCardNumber(cardList: Record, lastFourPAN?: st function getCardFeedIcon(cardFeed: string): IconAsset { if (cardFeed.startsWith(CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD)) { return Illustrations.MasterCardCompanyCards; +======= +>>>>>>> main } - if (cardFeed.startsWith(CONST.COMPANY_CARD.FEED_BANK_NAME.VISA)) { - return Illustrations.VisaCompanyCards; + return Object.keys(cardList).find((card) => card.endsWith(lastFourPAN)) ?? ''; +} + +function getCardFeedIcon(cardFeed: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK): IconAsset { + const feedIcons = { + [CONST.COMPANY_CARD.FEED_BANK_NAME.VISA]: Illustrations.VisaCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: Illustrations.AmexCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: Illustrations.MasterCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: Illustrations.AmexCardCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: Illustrations.ChaseCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: Illustrations.CitibankCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: Illustrations.BrexCompanyCardDetail, + [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: Illustrations.StripeCompanyCardDetail, + [CONST.EXPENSIFY_CARD.BANK]: ExpensifyCardImage, + }; + + if (cardFeed.startsWith(CONST.EXPENSIFY_CARD.BANK)) { + return ExpensifyCardImage; + } + + if (feedIcons[cardFeed]) { + return feedIcons[cardFeed]; + } + + // In existing OldDot setups other variations of feeds could exist, ex: vcf2, vcf3, cdfbmo + const feedKey = (Object.keys(feedIcons) as CompanyCardFeed[]).find((feed) => cardFeed.startsWith(feed)); + + if (feedKey) { + return feedIcons[feedKey]; } return Illustrations.AmexCompanyCards; @@ -211,6 +247,7 @@ function getCardFeedName(feedType: CompanyCardFeed): string { [CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD]: 'Mastercard', [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX]: 'American Express', [CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE]: 'Stripe', +<<<<<<< HEAD }; return feedNamesMapping[feedType]; @@ -249,6 +286,71 @@ function getMemberCards(policy: OnyxEntry, allCardsList: OnyxCollection< } }); return cards; +======= + [CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX_DIRECT]: 'American Express', + [CONST.COMPANY_CARD.FEED_BANK_NAME.BANK_OF_AMERICA]: 'Bank of America', + [CONST.COMPANY_CARD.FEED_BANK_NAME.CAPITAL_ONE]: 'Capital One', + [CONST.COMPANY_CARD.FEED_BANK_NAME.CHASE]: 'Chase', + [CONST.COMPANY_CARD.FEED_BANK_NAME.CITIBANK]: 'Citibank', + [CONST.COMPANY_CARD.FEED_BANK_NAME.WELLS_FARGO]: 'Wells Fargo', + [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: 'Brex', + }; + + return feedNamesMapping[feedType]; +} + +const getBankCardDetailsImage = (bank: ValueOf): IconAsset => { + const iconMap: Record, IconAsset> = { + [CONST.COMPANY_CARDS.BANKS.AMEX]: Illustrations.AmexCardCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.BANK_OF_AMERICA]: Illustrations.BankOfAmericaCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.CAPITAL_ONE]: Illustrations.CapitalOneCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.CHASE]: Illustrations.ChaseCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.CITI_BANK]: Illustrations.CitibankCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.WELLS_FARGO]: Illustrations.WellsFargoCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.BREX]: Illustrations.BrexCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.STRIPE]: Illustrations.StripeCompanyCardDetail, + [CONST.COMPANY_CARDS.BANKS.OTHER]: Illustrations.OtherCompanyCardDetail, + }; + return iconMap[bank]; +}; + +// We will simplify the logic below once we have #50450 #50451 implemented +const getCorrectStepForSelectedBank = (selectedBank: ValueOf) => { + const banksWithFeedType = [ + CONST.COMPANY_CARDS.BANKS.BANK_OF_AMERICA, + CONST.COMPANY_CARDS.BANKS.CAPITAL_ONE, + CONST.COMPANY_CARDS.BANKS.CHASE, + CONST.COMPANY_CARDS.BANKS.CITI_BANK, + CONST.COMPANY_CARDS.BANKS.WELLS_FARGO, + ]; + + if (selectedBank === CONST.COMPANY_CARDS.BANKS.STRIPE) { + return CONST.COMPANY_CARDS.STEP.CARD_INSTRUCTIONS; + } + + if (selectedBank === CONST.COMPANY_CARDS.BANKS.AMEX) { + return CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED; + } + + if (selectedBank === CONST.COMPANY_CARDS.BANKS.BREX) { + return CONST.COMPANY_CARDS.STEP.BANK_CONNECTION; + } + + if (selectedBank === CONST.COMPANY_CARDS.BANKS.OTHER) { + return CONST.COMPANY_CARDS.STEP.CARD_TYPE; + } + + if (banksWithFeedType.includes(selectedBank)) { + return CONST.COMPANY_CARDS.STEP.SELECT_FEED_TYPE; + } + + return CONST.COMPANY_CARDS.STEP.CARD_TYPE; +}; + +function getSelectedFeed(lastSelectedFeed: OnyxEntry, cardFeeds: OnyxEntry): CompanyCardFeed { + const defaultFeed = Object.keys(cardFeeds?.settings?.companyCards ?? {}).at(0) as CompanyCardFeed; + return lastSelectedFeed ?? defaultFeed; +>>>>>>> main } const getBankCardDetailsImage = (bank: ValueOf): IconAsset => { @@ -322,8 +424,11 @@ export { getCompanyCardNumber, getCardFeedIcon, getCardFeedName, +<<<<<<< HEAD getCardDetailsImage, getMemberCards, +======= +>>>>>>> main getBankCardDetailsImage, getSelectedFeed, getCorrectStepForSelectedBank, diff --git a/src/libs/DebugUtils.ts b/src/libs/DebugUtils.ts index e7ad63467781..185afa6ca2a7 100644 --- a/src/libs/DebugUtils.ts +++ b/src/libs/DebugUtils.ts @@ -7,6 +7,10 @@ import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Beta, Policy, Report, ReportAction, ReportActions, TransactionViolation} from '@src/types/onyx'; import * as ReportUtils from './ReportUtils'; +<<<<<<< HEAD +======= +import SidebarUtils from './SidebarUtils'; +>>>>>>> main class NumberError extends SyntaxError { constructor() { @@ -645,6 +649,7 @@ function getReasonAndReportActionForGBRInLHNRow(report: OnyxEntry): GBRR return null; } +<<<<<<< HEAD /** * Gets the report action that is causing the RBR to show up in LHN */ @@ -652,6 +657,24 @@ function getRBRReportAction(report: OnyxEntry, reportActions: OnyxEntry< const {reportAction} = ReportUtils.getAllReportActionsErrorsAndReportActionThatRequiresAttention(report, reportActions); return reportAction; +======= +type RBRReasonAndReportAction = { + reason: TranslationPaths; + reportAction: OnyxEntry; +}; + +/** + * Gets the report action that is causing the RBR to show up in LHN + */ +function getReasonAndReportActionForRBRInLHNRow(report: Report, reportActions: OnyxEntry, hasViolations: boolean): RBRReasonAndReportAction | null { + const {reason, reportAction} = SidebarUtils.getReasonAndReportActionThatHasRedBrickRoad(report, reportActions, hasViolations, transactionViolations) ?? {}; + + if (reason) { + return {reason: `debug.reasonRBR.${reason}`, reportAction}; + } + + return null; +>>>>>>> main } const DebugUtils = { @@ -673,7 +696,11 @@ const DebugUtils = { validateReportActionJSON, getReasonForShowingRowInLHN, getReasonAndReportActionForGBRInLHNRow, +<<<<<<< HEAD getRBRReportAction, +======= + getReasonAndReportActionForRBRInLHNRow, +>>>>>>> main REPORT_ACTION_REQUIRED_PROPERTIES, REPORT_REQUIRED_PROPERTIES, }; diff --git a/src/libs/DistanceRequestUtils.ts b/src/libs/DistanceRequestUtils.ts index c52827cec964..286f952b3484 100644 --- a/src/libs/DistanceRequestUtils.ts +++ b/src/libs/DistanceRequestUtils.ts @@ -40,7 +40,7 @@ function getMileageRates(policy: OnyxInputOrEntry, includeDisabledRates return mileageRates; } - const distanceUnit = PolicyUtils.getCustomUnit(policy); + const distanceUnit = PolicyUtils.getDistanceRateCustomUnit(policy); if (!distanceUnit?.rates) { return mileageRates; } @@ -78,7 +78,7 @@ function getDefaultMileageRate(policy: OnyxInputOrEntry): MileageRate | return undefined; } - const distanceUnit = PolicyUtils.getCustomUnit(policy); + const distanceUnit = PolicyUtils.getDistanceRateCustomUnit(policy); if (!distanceUnit?.rates) { return; } @@ -302,8 +302,8 @@ function getCustomUnitRateID(reportID: string, shouldUseDefault?: boolean) { * Get taxable amount from a specific distance rate, taking into consideration the tax claimable amount configured for the distance rate */ function getTaxableAmount(policy: OnyxEntry, customUnitRateID: string, distance: number) { - const distanceUnit = PolicyUtils.getCustomUnit(policy); - const customUnitRate = PolicyUtils.getCustomUnitRate(policy, customUnitRateID); + const distanceUnit = PolicyUtils.getDistanceRateCustomUnit(policy); + const customUnitRate = PolicyUtils.getDistanceRateCustomUnitRate(policy, customUnitRateID); if (!distanceUnit || !distanceUnit?.customUnitID || !customUnitRate) { return 0; } diff --git a/src/libs/E2E/tests/openSearchRouterTest.e2e.ts b/src/libs/E2E/tests/openSearchRouterTest.e2e.ts index 840af5acc2c9..731dec0f951d 100644 --- a/src/libs/E2E/tests/openSearchRouterTest.e2e.ts +++ b/src/libs/E2E/tests/openSearchRouterTest.e2e.ts @@ -1,4 +1,5 @@ import Config from 'react-native-config'; +import * as E2EGenericPressableWrapper from '@components/Pressable/GenericPressable/index.e2e'; import E2ELogin from '@libs/E2E/actions/e2eLogin'; import waitForAppLoaded from '@libs/E2E/actions/waitForAppLoaded'; import E2EClient from '@libs/E2E/client'; @@ -31,6 +32,32 @@ const test = () => { Performance.subscribeToMeasurements((entry) => { console.debug(`[E2E] Entry: ${JSON.stringify(entry)}`); +<<<<<<< HEAD +======= + if (entry.name === CONST.TIMING.SIDEBAR_LOADED) { + const props = E2EGenericPressableWrapper.getPressableProps('searchButton'); + if (!props) { + console.debug('[E2E] Search button not found, failing test!'); + E2EClient.submitTestResults({ + branch: Config.E2E_BRANCH, + error: 'Search button not found', + name: 'Open Search Router TTI', + }).then(() => E2EClient.submitTestDone()); + return; + } + if (!props.onPress) { + console.debug('[E2E] Search button found but onPress prop was not present, failing test!'); + E2EClient.submitTestResults({ + branch: Config.E2E_BRANCH, + error: 'Search button found but onPress prop was not present', + name: 'Open Search Router TTI', + }).then(() => E2EClient.submitTestDone()); + return; + } + // Open the search router + props.onPress(); + } +>>>>>>> main if (entry.name === CONST.TIMING.SEARCH_ROUTER_RENDER) { E2EClient.submitTestResults({ diff --git a/src/libs/Firebase/types.ts b/src/libs/Firebase/types.ts index cf17dd27e01c..32f6d216d09e 100644 --- a/src/libs/Firebase/types.ts +++ b/src/libs/Firebase/types.ts @@ -17,6 +17,11 @@ type FirebaseAttributes = { transactionViolationsLength: string; policiesLength: string; transactionsLength: string; +<<<<<<< HEAD +======= + policyType: string; + policyRole: string; +>>>>>>> main }; export type {StartTrace, StopTrace, TraceMap, Log, FirebaseAttributes}; diff --git a/src/libs/Firebase/utils.ts b/src/libs/Firebase/utils.ts index 23e7c36ec36a..9cc042974de9 100644 --- a/src/libs/Firebase/utils.ts +++ b/src/libs/Firebase/utils.ts @@ -1,6 +1,10 @@ import {getAllTransactions, getAllTransactionViolationsLength} from '@libs/actions/Transaction'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +<<<<<<< HEAD import {getAllPoliciesLength} from '@libs/PolicyUtils'; +======= +import {getActivePolicy, getAllPoliciesLength} from '@libs/PolicyUtils'; +>>>>>>> main import {getReportActionsLength} from '@libs/ReportActionsUtils'; import * as ReportConnection from '@libs/ReportConnection'; import * as SessionUtils from '@libs/SessionUtils'; @@ -16,6 +20,10 @@ function getAttributes(): FirebaseAttributes { const transactionViolationsLength = getAllTransactionViolationsLength().toString(); const policiesLength = getAllPoliciesLength().toString(); const transactionsLength = getAllTransactions().toString(); +<<<<<<< HEAD +======= + const policy = getActivePolicy(); +>>>>>>> main return { accountId, @@ -25,6 +33,11 @@ function getAttributes(): FirebaseAttributes { transactionViolationsLength, policiesLength, transactionsLength, +<<<<<<< HEAD +======= + policyType: policy?.type ?? 'N/A', + policyRole: policy?.role ?? 'N/A', +>>>>>>> main }; } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 7b8589c81e7f..626c5470e297 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -225,6 +225,8 @@ const modalScreenListenersWithCancelSearch = { function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + // We need to use isSmallScreenWidth for the root stack navigator + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils); const {canUseDefaultRooms} = usePermissions(); diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index de446cb16c0e..6f11ce7010c5 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -204,7 +204,6 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Profile/PersonalDetails/StateSelectionPage').default, [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => require('../../../../pages/settings/Profile/Contacts/ContactMethodsPage').default, [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: () => require('../../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default, - [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION]: () => require('../../../../pages/settings/Profile/Contacts/ValidateContactActionPage').default, [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: () => require('../../../../pages/settings/Profile/Contacts/NewContactMethodPage').default, [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../../pages/settings/Preferences/PriorityModePage').default, [SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require('../../../../pages/workspace/accounting/PolicyAccountingPage').default, @@ -348,6 +347,10 @@ const SettingsModalStackNavigator = createModalStackNavigator('../../../../pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersPage').default, [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_DESKTOP_CUSTOMERS_DISPLAYED_AS]: () => require('../../../../pages/workspace/accounting/qbd/import/QuickbooksDesktopCustomersDisplayedAsPage').default, +<<<<<<< HEAD +======= + [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_DESKTOP_ITEMS]: () => require('../../../../pages/workspace/accounting/qbd/import/QuickbooksDesktopItemsPage').default, +>>>>>>> main [SCREENS.REIMBURSEMENT_ACCOUNT]: () => require('../../../../pages/ReimbursementAccount/ReimbursementAccountPage').default, [SCREENS.GET_ASSISTANCE]: () => require('../../../../pages/GetAssistancePage').default, [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: () => require('../../../../pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage').default, @@ -531,7 +534,10 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage').default, [SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: () => require('../../../../pages/settings/Security/AddDelegate/ConfirmDelegatePage').default, +<<<<<<< HEAD [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: () => require('../../../../pages/settings/Security/AddDelegate/DelegateMagicCodePage').default, +======= +>>>>>>> main [SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: () => require('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage').default, [SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: () => require('../../../../pages/workspace/rules/RulesCustomNamePage').default, diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index da26d093f3ef..bf9c651df0e6 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -26,6 +26,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; +import DebugTabView from './DebugTabView'; type BottomTabBarProps = { selectedTab: string | undefined; @@ -64,12 +65,15 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {activeWorkspaceID} = useActiveWorkspace(); - const transactionViolations = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); + const [user] = useOnyx(ONYXKEYS.USER); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); + const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS); + const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); const [chatTabBrickRoad, setChatTabBrickRoad] = useState(getChatTabBrickRoad(activeWorkspaceID)); useEffect(() => { setChatTabBrickRoad(getChatTabBrickRoad(activeWorkspaceID)); - }, [activeWorkspaceID, transactionViolations]); + }, [activeWorkspaceID, transactionViolations, reports, reportActions]); const navigateToChats = useCallback(() => { if (selectedTab === SCREENS.HOME) { @@ -108,6 +112,7 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) { }, [activeWorkspaceID, selectedTab]); return ( +<<<<<<< HEAD +======= + <> + {user?.isDebugModeEnabled && ( + + )} + + + + + {chatTabBrickRoad && ( + + )} + + + {translate('common.inbox')} + + + + + + + + {translate('common.search')} + + + + + + +>>>>>>> main - + ); } diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx new file mode 100644 index 000000000000..3e5803b797dc --- /dev/null +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/DebugTabView.tsx @@ -0,0 +1,172 @@ +import React, {useCallback, useMemo} from 'react'; +import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; +import Button from '@components/Button'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import Text from '@components/Text'; +import type {IndicatorStatus} from '@hooks/useIndicatorStatus'; +import useIndicatorStatus from '@hooks/useIndicatorStatus'; +import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; +import type {BrickRoad} from '@libs/WorkspacesSettingsUtils'; +import {getChatTabBrickRoadReport} from '@libs/WorkspacesSettingsUtils'; +import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {Route} from '@src/ROUTES'; +import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; +import type {ReimbursementAccount} from '@src/types/onyx'; + +type DebugTabViewProps = { + selectedTab?: string; + chatTabBrickRoad: BrickRoad; + activeWorkspaceID?: string; +}; + +function getSettingsMessage(status: IndicatorStatus | undefined): TranslationPaths | undefined { + switch (status) { + case CONST.INDICATOR_STATUS.HAS_CUSTOM_UNITS_ERROR: + return 'debug.indicatorStatus.theresAWorkspaceWithCustomUnitsErrors'; + case CONST.INDICATOR_STATUS.HAS_EMPLOYEE_LIST_ERROR: + return 'debug.indicatorStatus.theresAProblemWithAWorkspaceMember'; + case CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR: + return 'debug.indicatorStatus.theresAProblemWithAContactMethod'; + case CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO: + return 'debug.indicatorStatus.aContactMethodRequiresVerification'; + case CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR: + return 'debug.indicatorStatus.theresAProblemWithAPaymentMethod'; + case CONST.INDICATOR_STATUS.HAS_POLICY_ERRORS: + return 'debug.indicatorStatus.theresAProblemWithAWorkspace'; + case CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS: + return 'debug.indicatorStatus.theresAProblemWithYourReimbursementAccount'; + case CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_ERRORS: + return 'debug.indicatorStatus.theresABillingProblemWithYourSubscription'; + case CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_INFO: + return 'debug.indicatorStatus.yourSubscriptionHasBeenSuccessfullyRenewed'; + case CONST.INDICATOR_STATUS.HAS_SYNC_ERRORS: + return 'debug.indicatorStatus.theresWasAProblemDuringAWorkspaceConnectionSync'; + case CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS: + return 'debug.indicatorStatus.theresAProblemWithYourWallet'; + case CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS: + return 'debug.indicatorStatus.theresAProblemWithYourWalletTerms'; + default: + return undefined; + } +} + +function getSettingsRoute(status: IndicatorStatus | undefined, reimbursementAccount: OnyxEntry, policyIDWithErrors = ''): Route | undefined { + switch (status) { + case CONST.INDICATOR_STATUS.HAS_CUSTOM_UNITS_ERROR: + return ROUTES.WORKSPACE_DISTANCE_RATES.getRoute(policyIDWithErrors); + case CONST.INDICATOR_STATUS.HAS_EMPLOYEE_LIST_ERROR: + return ROUTES.WORKSPACE_MEMBERS.getRoute(policyIDWithErrors); + case CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR: + return ROUTES.SETTINGS_CONTACT_METHODS.route; + case CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_INFO: + return ROUTES.SETTINGS_CONTACT_METHODS.route; + case CONST.INDICATOR_STATUS.HAS_PAYMENT_METHOD_ERROR: + return ROUTES.SETTINGS_WALLET; + case CONST.INDICATOR_STATUS.HAS_POLICY_ERRORS: + return ROUTES.WORKSPACE_INITIAL.getRoute(policyIDWithErrors); + case CONST.INDICATOR_STATUS.HAS_REIMBURSEMENT_ACCOUNT_ERRORS: + return ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(reimbursementAccount?.achData?.currentStep, reimbursementAccount?.achData?.policyID); + case CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_ERRORS: + return ROUTES.SETTINGS_SUBSCRIPTION; + case CONST.INDICATOR_STATUS.HAS_SUBSCRIPTION_INFO: + return ROUTES.SETTINGS_SUBSCRIPTION; + case CONST.INDICATOR_STATUS.HAS_SYNC_ERRORS: + return ROUTES.WORKSPACE_ACCOUNTING.getRoute(policyIDWithErrors); + case CONST.INDICATOR_STATUS.HAS_USER_WALLET_ERRORS: + return ROUTES.SETTINGS_WALLET; + case CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS: + return ROUTES.SETTINGS_WALLET; + default: + return undefined; + } +} + +function DebugTabView({selectedTab = '', chatTabBrickRoad, activeWorkspaceID}: DebugTabViewProps) { + const StyleUtils = useStyleUtils(); + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const {status, indicatorColor, policyIDWithErrors} = useIndicatorStatus(); + + const message = useMemo((): TranslationPaths | undefined => { + if (selectedTab === SCREENS.HOME) { + if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) { + return 'debug.indicatorStatus.theresAReportAwaitingAction'; + } + if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR) { + return 'debug.indicatorStatus.theresAReportWithErrors'; + } + } + if (selectedTab === SCREENS.SETTINGS.ROOT) { + return getSettingsMessage(status); + } + }, [selectedTab, chatTabBrickRoad, status]); + + const indicator = useMemo(() => { + if (selectedTab === SCREENS.HOME) { + if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) { + return theme.success; + } + if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR) { + return theme.danger; + } + } + if (selectedTab === SCREENS.SETTINGS.ROOT) { + if (status) { + return indicatorColor; + } + } + }, [selectedTab, chatTabBrickRoad, theme.success, theme.danger, status, indicatorColor]); + + const navigateTo = useCallback(() => { + if (selectedTab === SCREENS.HOME && !!chatTabBrickRoad) { + const report = getChatTabBrickRoadReport(activeWorkspaceID); + + if (report) { + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID)); + } + } + if (selectedTab === SCREENS.SETTINGS.ROOT) { + const route = getSettingsRoute(status, reimbursementAccount, policyIDWithErrors); + + if (route) { + Navigation.navigate(route); + } + } + }, [selectedTab, chatTabBrickRoad, activeWorkspaceID, status, reimbursementAccount, policyIDWithErrors]); + + if (!([SCREENS.HOME, SCREENS.SETTINGS.ROOT] as string[]).includes(selectedTab) || !indicator) { + return null; + } + + return ( + + + + {message && {translate(message)}} + +